.navbar {
    background-color: black;
    opacity: .9;
    height: 60px;
    z-index: 10;
    /* position: fixed;
    width: 100%; */
   
}


.dropdown-item{
    color: black !important;
   
}

.header_hero {

    background: linear-gradient(rgba(15, 23, 43, .8),
            rgba(15, 23, 43, .8)), url(https://themewagon.github.io/restoran/img/bg-hero.jpg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}

.table_book{
  
    height: 100%;
    width: 175px;
    text-align: center;
    border-radius: 5px;
    margin-left: 5px;
}
.table_book i{
    margin-right: 7px;
}

.navbar-toggler-icon {
    color: #fff;
}

.main_icons {
    padding: 10px 50px;
}

.main_icons h1 {
    /* display: inline; */
    color: #FEA116 !important;
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-size: 34px;
    margin-top: 8px;
}

.main_icons i {
    color: #FEA116;
    margin-right: 15px;

}

.listt {
    padding-left: 200px;
    font-size: 19px;
    font-weight: lighter;
}





.header_nav ul li a {
    color: white;
    font-weight: bold;
}

.header_nav ul li a:hover {
    color: #FEA116;
    text-decoration: none;

}

.header_nav ul li a:active {
    color: #FEA116;
    text-decoration: none;

}


/* banner div css */
.banner_right {
    padding: 50px 10px 100px 25px;
    text-align: center;
    width: 100%;

}

.circle {
    width: 73%;
    height: auto;
    animation: imgrotate 45s linear infinite;
    border: none !important;
    border-radius: 50% !important;
}

@keyframes imgrotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 
imgrotate animation{
    transform:rotate();
} */



.banner_left {
    padding: 23% 0 0 17%;
    position: relative;

}

.banner_left h1 {
    font-size: 4rem;
    color: #fff;
    font-weight: bold;
    font-family: "Nunito", sans-serif;
}

.banner_left p {

    color: #f5eeee;
}

.banner_left button {
    background-color: #fea116;
    width: 225px;
    height: 55px;
    border: none;
    border-radius: 2px;
    color: white;
    font-size: 1rem;
}


/* info div css */

.info i {
    color: #fea116;
    font-size: 3rem;
    font-weight: 800;
    margin: 10px 0px;
}

.info h5 {
    color: #0f172b;

}

.info p {
    color: #666565;
}

.info {
    padding: 40px 25px;
    background-color: #fff;
    position: relative;
}

.info:hover {
    background-color: #FEA116 !important;
}

.info:hover i,
.info:hover h5,
.info:hover p {
    color: #ffff !important;
}

.hall {
  width: 100%;
  height: 300px; /* Adjust as needed */
  overflow: hidden;
  position: relative;
}

.zoom-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
    opacity: 0; 
}




/* .hall img {
    max-width: 100%;
    height: auto;
} */

.hall1 img {
    max-width: 80%;
    height: auto;
    position: relative;

    top: 50px;
}


.eatt img {
    max-width: 80%;
    height: auto;
    position: relative;
    left: 50px;
}

.dishh img {
    max-width: 100%;
    height: auto;
    position: relative;

}

.about_us {
    padding: 75px 0px 0px 30px;
}

.about_us h4 {
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.about_us h4::after {
    content: "";
    width: 50px;
    height: 2px;
    position: absolute;
    top: 27%;
    left: 32%;
    background-color: #FEA116;

}

.about_us h1 {
    color: #0F172B;

}

.about_us p {
    color: #3f3f3f;
    margin-top: 20px;
}


.experience h1 {
    float: left;
    position: relative;
    left: 25px;
    font-weight: 700;
    color: #FEA116;
    font-size: 55px;
}

.experience h1::before {
    content: " ";
    position: absolute;
    width: 6px;
    height: 60px;
    background-color: #FEA116;
    top: 9px;
    left: -23px;
}

.experience p {
    float: right;
    font-size: 19px;
    margin-left: 8px;
    margin-top: 8px;

}

.experience {
    padding: 25px;
}

.experience span {
    color: black;
    font-weight: bold;
}

.experience1 {
    float: right;
}


.read_more button {
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 2px;
    background-color: #FEA116;
    margin-top: 20px;
}

.read_more {
    padding: 20px;
}


.popular_items {
    padding: 50px;
}

.popular_items h5 {
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: "";
}

.popular_items h5::before {
    content: "";
    width: 51px;
    height: 3px;
    position: absolute;
    top: 32%;
    left: 38%;
    background-color: #FEA116;
}

.popular_items h5::after {
    content: "";
    width: 52px;
    height: 3px;
    position: absolute;
    top: 33%;
    right: 38%;
    background-color: #FEA116;
}

.popular_items h1 {
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bolder;
    font-style: '';
    margin-top: 20px;
}


/* portpolio tab section */


a:hover,
a:focus {
    outline: none;
    text-decoration: none;

}

.tab .nav-tabs {
    border-bottom: 2px solid #e8e8e8;
}

.tab .nav-tabs li a {
    display: block;
    padding: 10px 20px;
    margin: 0 5px 1px 0;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    color: #112529;
    text-align: center;
    border: none;
    border-radius: 0;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease 0s;
}

.fade:not(.show) {
    opacity: 1 !important;
}

.tab .nav-tabs li a:hover,
.tab .nav-tabs li.active a {
    color: #198df8;
    border: none;
}

.tab .nav-tabs li.active a:before {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 25px;
    font-weight: 700;
    color: #198df8;
    margin: 0 auto;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
}

.tab .nav-tabs li.active a:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #198df8;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}

.tab .tab-content {
    padding: 30px 20px 20px;
    margin-top: 0;
    background: #fff;
    font-size: 15px;
    color: #7a9181;
    line-height: 30px;
    border-radius: 0 0 5px 5px;
}

.tab .tab-content h3 {
    font-size: 24px;
    margin-top: 0;
}

@media only screen and (max-width: 479px) {
    .tab .nav-tabs li {
        width: 100%;
        text-align: center;
    }

    .tab .nav-tabs li.active a:before {
        content: "\f105";
        bottom: 15%;
        left: 0;
        right: auto;
    }
}



.burger {
    margin: 10px;
}

.burger p {
    color: rgb(54, 50, 50);
    margin: 0;

}

.burger span {
    margin: 0;
}

.chiken {
    position: relative;
    top: 5px;
}

.chiken_para {
    position: relative;
    bottom: 15px;
}


.book_table h5 {
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.book_table h5::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    top: 64px;
    left: 202px;
    background-color: #FEA116;
}

.book_table h1 {
    color: rgb(38, 35, 35);
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: "";
    font-size: 1.7rem;
    word-spacing: 5px;
    margin: 20px 0;
    color: white;
}

.book_table {
    background-color: black;
    padding: 50px;



}

.book_table input {
    width: 45%;
    height: 50px;
    margin-right: 10px;
    padding-left: 7px;
}

.book_table select {
    width: 45%;
    height: 50px;
}

.book_table button {
    width: 97%;
    height: 50px;
}

.special_request {
    width: 97% !important;
    height: 120px !important;
    background-color: white;
    margin: 15px 0;
}

.video {
    position: relative;
    height: 100%;
    min-height: 500px;
    background: linear-gradient(rgba(15, 23, 43, .3),
            rgba(15, 23, 43, .3)), url(https://themewagon.github.io/restoran/img/video.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}



.video button {
    border: none;
    font-size: 40px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    padding-left: 10px;
    background-color: #FEA116;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3 !important;
}



@keyframes pulse-border {
    0% {
        opacity: 0.1;
        transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1);
    }

    100% {
        opacity: 0.4;
        transform: translateX(-50%) translateY(-50%) translateZ(0px) scale(1.6);
    }
}

.video button::before {
    content: "";
    position: absolute;
    background-color: #FEA116;
    width: 100px;
    height: 100px;
    z-index: 1;
    top: 50%;
    right: 0%;
    bottom: 0%;
    left: 50%;
    border: none;
    border-radius: 50%;
    /* display: none; */
    animation: pulse-border 1500ms ease-out infinite;


}

.team_members h4 {
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.team_members {
    padding: 80px;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.cheif img {
    width: 100%;
    border-radius: 50%;
}

.cheif {
    text-align: center;
    width: 100%;

    border: none;
    background-color: #e6f0f8;
    padding: 30px 30px 0 30px;
    box-shadow: 1px 1px 5px grey;
    margin: 0;
    border-radius: 4%;
}

.cheif h5 {
    margin-top: 25px;
}

.cheif_bottom i {
    margin-right: 4px;
    font-size: 25px;
    width: 40px;
    height: 35px;
    background-color: #FEA116;
    padding: 10px 5px 0 5px;
    border-radius: 50% 50% 0% 0%;
}

.cheif_bottom {
    /* visibility: hidden; */

    opacity: 0;
}

.cheif:hover .cheif_bottom {
    visibility: visible;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    transition: all ease-in 0.7s;
}

.cheif:hover .cheif_top img {
    transform: scale(1.1);
    transition: all ease-in 0.5s;

}

.ch_img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.ch_img img {
    width: 100%;
    height: 100%;

}



/* testimonial css */


.footer_paddd {
    background-color: black;
    padding: 50px 50px;

}


.footer_div {

    background-color: black;
    color: white;
}

.footer_div ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_div ul li {
    margin: 5px;
}

.footer_div ul li a {
    color: white;
    font-size: 15px;
}

.footer_div h4 {
    margin-bottom: 15px;
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

.footer_div i {
    margin-right: 15px;
}


.social {
    font-size: 25px !important;
    border: 1px solid white;
    border-radius: 55px;
    padding: 7px;
    margin: 2px !important;
    background-color: black;
    color: white;
}

.social:hover {
    background-color: #FEA116;
    color: white;
}

.footer_div h4::after {
    content: "";
    position: absolute;
    background-color: #FEA116;
    width: 50px;
    height: 3px;
    top: 17px;
    left: 152px;

}

.footer_div input {
    width: 100%;
    height: 60px;
    border-radius: 5px;
    padding: 20px;
    position: relative;
}


.footer_div button {
   position: absolute;
    bottom: 34px !important;
    left: 210px !important;
    width: 100px;
    height: 40px;
    border: none;
    background-color: #FEA116;
    border-radius: 5%;
    color: white;
}

/* footer div css end */


/* footer1 div css start */


.footer_div1 {

    background-color: black;
    color: white;
}

.footer_div1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_div1 ul li {
    margin: 5px;
}

.footer_div1 ul li a {
    color: white;
    font-size: 15px;
}

.footer_div1 h4 {
    color: #FEA116;
}

.footer_div1 i {
    margin-right: 15px;
}

.footer_div1 h4::after {
    content: "";
    position: absolute;
    background-color: #FEA116;
    width: 50px;
    height: 3px;
    top: 17px;
    left: 120px;
}

.footer_div1 h4 {
    margin-bottom: 15px;
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

/* footerdiv1 css end */



/* footer div2 css start */

.footer_div2 {

    background-color: black;
    color: white;
}

.footer_div2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_div2 ul li {
    margin: 5px;
}

.footer_div2 ul li a {
    color: white;
    font-size: 15px;
}

.footer_div2 h4 {
    color: #FEA116;
}

.footer_div2 i {
    margin-right: 15px;
}



.footer_div2 h4::after {
    content: "";
    position: absolute;
    background-color: #FEA116;
    width: 50px;
    height: 3px;
    top: 17px;
    left: 125px;
}

.footer_div2 h4 {
    margin-bottom: 15px;
    color: #FEA116;
    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
}

/* footer div2 css end */




/* about_us page start */

.about_us_page ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

}

.about_us_page ul li {
    display: inline;
    margin: 5px;
    font-size: 1rem;
    color: gray;
    font-weight: 800;
}


.about_us_page ul li a {
    color: burlywood;
}

.about_us_page h1 {
    font-size: 4rem;
    margin-bottom: 1rem;


    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
}

.about_us_page {
    padding: 120px 30px;
    margin: 0;
}


.paddd {
    padding: 40px;
}

/* abouot_us page css end
  */



.footer_list_right ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_list_right ul li {
    display: inline;
    float: right;
    margin: 10px;
}

.footer_list_right ul li a {
    color: white;
    font-weight: bold;
}


.footer_list_left {
    background-color: black;
    color: white;
    padding-left: 50px;
}

.footer_list_left p {
    font-weight: 400;
}

.footer_list_left span {
    border-bottom: 1px solid white;

}


.footer_list_right {
    padding-right: 50px;
}


.f-area {
    background-color: black;
}


.copyright {
    border-top: 1px solid gray;
    max-width: 100%;
    /* padding: 20px; */
    background-color: black;
}




.booking h5 {
    color: #FEA116;

    font-family: "Playwrite RO", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 10px !important;
}

.booking h5::after {
    content: "";
    position: absolute;
    background-color: #FEA116;
    width: 55px;
    height: 2px;
    top: 14px;
    left: 115px;
}

.booking i {
    margin-right: 15px;
    color: #FEA116;
    font-size: 18px;
}



/* contact_us page css start */
.maps {
    max-width: 100%;
    padding: 50px;
}

.your_name {
    width: 250px !important;
    height: 65px !important;
}

.message {
    padding: 50px;
}

.subject {
    width: 500px !important;

    height: 65px;
}


.message_input {
    width: 500px;
    height: 130px;
}

.message button {
    width: 500px;
    height: 65px;
    background-color: #FEA116;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

.message input {
    margin-bottom: 15px;
    padding-left: 20px;
}

.rigister_submit{
    padding: 100px;
    border: 2px solid grey;
    border-radius: 5px;
    color: #e6f0f8;
}

.rigister_submit input{
   margin:0 20px 0 0;
}
.singup{
    background-color: #FEA116;
    border: none;
   
   
}

.singup1{
    background-color: #FEA116;
    border: none;
   position: relative;
   bottom: 16px;
   
   
}




/* button css */

.alert{
  background: #ffdb9b;
  padding: 20px 40px;
  min-width: 420px;
  position: fixed !important;
  right: 0;
  top: 10px;
  border-radius: 4px;
  border-left: 8px solid #ffa502;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.alert.showAlert{
  opacity: 1;
  pointer-events: auto;
}
.alert.show{
  animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-10px);
  }
}
.alert.hide{
  animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
  0%{
    transform: translateX(-10px);
  }
  40%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(100%);
  }
}
.alert .fa-exclamation-circle{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ce8500;
  font-size: 30px;
}
.alert .msg{
  padding: 0 20px;
  font-size: 18px;
  color: #ce8500;
}
.alert .close-btn{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffd080;
  padding: 20px 18px;
  cursor: pointer;
}
.alert .close-btn:hover{
  background: #ffc766;
}
.alert .close-btn .fas{
  color: #ce8500;
  font-size: 22px;
  line-height: 40px;
}



/*  scroll css section here*/
.scrolltop .icon {
    font-size: 30px;
    text-align: center;
    transform: rotate(-45deg);
    margin-top: 10px;
}

.scrolltop {
    position: fixed;
    bottom: 70px;
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    display: none;
}