@font-face {
    font-family:eleanore;
    src: url('../fonts/eleanore/EleanoreDEMO.otf');
}

@font-face {
    font-family:bassy;
    src: url('../fonts/bassy/Bassy.ttf');
}

@font-face {
    font-family:poppins_light;
    src: url('../fonts/Poppins/Poppins-Light.ttf');
}

@font-face {
    font-family: poppins_dark;
    src: url('../fonts/Poppins/Poppins-Bold.ttf');
}

@font-face {
    font-family: cowboys;
    src: url('../fonts/bleeding_cowboys/Bleeding_Cowboys.ttf')
}

@font-face {
    font-family: broisther;
    src: url('../fonts/broisther/Broisther.ttf');
}

*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    text-decoration: none;
    border: none; outline: none;
    transition: all .2s linear;
    list-style: none;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;
    font-family: poppins_light;
}

:root{
    --orange:rgb(255, 168, 38);
    --golden:linear-gradient(45deg, rgb(129, 86, 6), rgb(209, 162, 76));
    --golden-hover:linear-gradient(45deg, rgb(209, 162, 76), rgb(129, 86, 6));
    --red:rgb(172, 22, 22);
    --text-color:rgb(29, 28, 28);
    --font-poppins-light:poppins_light;
    --font-eleanore:eleanore;
    --font-rome:cowboys;
    --font-broisther:broisther;
    --font-bassy:bassy;
}

h1{
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 .1rem .2rem rgba(0,0,0,0.3);
    /* text-transform: uppercase; */
}

h2{
    font-size: 4rem;
    color: var(--text-color);
    position: relative;
}

h2::before{
    content:" ";
    background-color: var(--red);
    width: 2.3rem;
    height: .5rem;
    position: absolute;
    top: 2.6rem; left: -2.2rem;
}

h6{
    font-size: 1.5rem;
    color: #fff;
    font-weight: 300;
}

p{
    font-size: 1.5rem;
    color: var(--text-color);
}

.phone{
    font-size: 3rem;
    color: var(--red);
    font-weight: bold;
}

section{
    padding: 1rem 15%;
}

.heading{
    margin: 0 15%;
}

.heading p{
    color: #fff;
}

.heading h2{
    color: #fff;
}

.btn{
    display: inline-block;
    font-size: 1.5rem;
    padding: .9rem 1.7rem;
    background: var(--golden);
    color: #fff;
    border-radius: .5rem;
}

.btn:hover{
    background: var(--golden-hover);
}

.res-name{
    font-size: 2rem;
    color: var(--orange);
    font-weight: 300;
    text-shadow: 0 .1rem .1rem rgba(0,0,0,0.3);
}

.header{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,0.3);
    border-bottom: .1rem solid rgba(0,0,0,0.3);
    z-index: 1000;
}

.header.active{
    background-color:#fff;
}

#nevbtn{
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
    display: none;
}

.header.active .navbar ul li a{
    color: var(--text-color);
}

.logo{
    font-size: 3.6rem;
    font-family: var(--font-bassy);
    /* text-transform: uppercase; */
    letter-spacing: .20rem;
    color: var(--orange);
}

.header .navbar ul{
    display: flex;
    gap: 2rem;
}

.header .navbar ul li a{
    font-size: 1.5rem;
    color: #fff;
}

.header .navbar ul li a:hover{
    color: var(--orange);
}

.header #book-a-table{
    font-size: 1.5rem;
    color: #fff;
    position: relative;
    cursor: pointer;
}

/* .header #book-a-table:hover{
    color: var(--orange);
} */

.header #book-a-table::before{
    content:" ";
    position: absolute;
    top: -3rem; right: -3rem;
    background-color: var(--red);
    width: 15rem;
    height: 12rem;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.home{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index:0;
}

.home .videos video{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.home .content{
    max-width: 70rem;
    text-align: center;
}

.home .content .res-container{
    width: auto;
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content:center;
    gap: 2rem;
    position: relative;
    top: 20%;
}

.home .content .res-container .res-box{
    background:rgba(0,0,0,0.5);
    border: .1rem solid var(--orange);
    padding: 1rem 3rem;
    border-radius: 5rem;

}

.home .content .res-container .res-box:hover{
    background: var(--golden);
}

.home .content p{
    color: #fff;
    padding: 1rem 0 2.5rem;
    font-size: 1.7rem;
}

/* .home .controls{
    position: relative;
    top:10rem; 
    background-color: rgba(0,0,0,0.7);
    padding: 1rem;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.home .controls .vid-btn{
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    display: inline-block;
    border-radius: 50%;
}

.home .controls .vid-btn.active{
    background-color: var(--orange);
} */

.booking-form-container{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0,100% 0, 0 0);
}

.booking-form-container.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.booking-form-container .row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5rem;
    width: 100%;
    height: 100vh;
}

.booking-form-container .row .image{
    flex: 1 1 25rem;
}

.booking-form-container .row .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-form-container .row .form-conatiner{
    flex: 1 1 25rem;
}

.booking-form-container .row .form-conatiner form{
    padding: 2rem;
    border: .1rem solid rgba(0,0,0,0.3);
    border-radius: .5rem;
}

.booking-form-container .row .form-conatiner form input{
    width: 100%;
    border: .1rem solid rgba(0,0,0,0.3);
    margin: .5rem 0;
    padding: 1rem;
    font-size: 1.5rem;
}

.input-small{
    text-transform: none;
}

.booking-form-container .row .form-conatiner .content{
    text-align: center;
}

.booking-form-container .row .form-conatiner .content h2::before{
    left: 3rem;
}

/* about section */

.about{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5rem;
    margin: 5rem 0;
}

.about .image{
    flex: 1 1 25rem;
}

.about .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about .content{
    flex: 1 1 25rem;
}
/* cheff section */
.chef-special{
    width: 100%;
    height:auto;
    background: url('../images/veg-bg.jpg');
    padding-top: 3rem;
}

.chef-special .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.chef-special .row .box{
    flex: 1 1 20rem;
    background-color:rgba(255,255,255,0.3);
    border-radius: .5rem;
    overflow: hidden;
}

.chef-special .row .box .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chef-special .row .box .content{
    background-color: #fff;
    padding:1rem 2rem;
}

.chef-special .row .box .content .text-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.chef-special .row .box .content .text-content .dish-name{
    font-size: 1.2rem;
    color: var(--text-color);
    font-family:poppins_dark ;
}

.chef-special .row .box .content .text-content .price{
    font-size: 1.2rem;
    color: var(--red);
    font-family: poppins_dark;
}

.chef-special .row .box .content .heart i{
    font-size: 1.5rem;
    color: var(--orange);
}

/* this menu is deleted form the home page */

/* .menu .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
}

.menu .row .menu-btn{
    color:var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    font-family:poppins_dark;
}

.menu .row .menu-btn.active{
    color: var(--red);
}

.menu .menu-images{
    display: flex;
    justify-content: center;
    padding: 2rem 0;
} */

/* --------------------------------------------------------------------------------------- */

/* reviews section starts */
.reviews{
    width: 100%;
    height: 60rem;
    display: flex;
    flex-flow: column;
    background:url('../images/veg-bg.jpg');
    gap: 4rem;
    z-index: 995;
}

.reviews .content{
    width: 100%;
    height: auto;
}

.reviews .content p{
    color: #fff;
}

.reviews .content h2{
    color: #fff;
}

/* css from swiper starts */
/* .swiper {
    width: 100%;
    height: 100%;
  } */

  /* .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */
/* css from swiper ends */

/* custome swiper css starts */
.slide-container{
    width: 100%;
    height: 50rem;
}

.slide-container .slide-sub-container{
    width: 100%;
    height: 40rem;
    padding: 2rem 0;
}

.slide-container .slide-box{
    width: 30rem;
    height: 40rem;
    background-color: #fff;
    border-radius: .5rem;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.slide-container .slide-box .image{
    width: 15rem;
    height: 15rem;
    border: .3rem solid var(--red);
    border-radius: 50%;
    margin: 3rem 0;
    overflow: hidden;
}

.slide-container .slide-box .image img{
    width: 100%;
    height: 100%;object-fit: cover;
}

.slide-container .slide-box .name{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: var(--red);
    margin-top: -1rem;
}

.slide-container .slide-box .content{
    width: 100%;
    height: auto;
    padding: 2rem;
    text-align: center;
}

.slide-container .slide-box .content p{
    color: var(--text-color);
    padding-bottom: 2rem;
}

.slide-container .slide-box .content .stars i{
    font-size: 1.5rem;
    color: var(--orange);
}
/* map section starts */
.map-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    background: url(../images/map3.jpg);
}

.map-container .map{
    border: .2rem solid var(--red);
    border-radius: .5rem;
    padding: 1rem;
    flex: 1 1 40rem;
}

.map-container .map iframe{
    width: 100%;
    object-fit: cover;
}

.map-container .content{
    flex: 1 1 40rem;
}

.map-container .content .box-container{
    display: flex;
    flex-wrap:wrap;
    padding: 2rem;
    gap: 2rem;
}

.map-container .content .box-container .box{
    border-radius: .5rem;
    background-color: #fff;
    padding: 2rem;
    box-shadow: 0 1rem 1rem rgba(0,0,0,0.3);
    text-align: center;
    flex: 1 1 25%;
}

.map-container .content .box-container .box i{
    font-size: 3rem;
}

.map-container .content .box-container .box h4{
    font-size: 1.5rem;
    padding: 1rem 0;
}

/* footer section starts */
.footer{
    width: 100;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5rem;
    background-color: #312828;
}

.footer .box{
    flex: 1 1 35rem;
    padding: 2rem;
    border-radius: .5rem;
    text-align: center;
}

.footer .box p{
    color: #fff;
}

.footer .box h4{
    color: var(--orange);
    font-size: 2.5rem;
    font-family: var(--font-poppins-light);
    padding: 1rem 0 2rem;
}

.footer .box li{
    padding: 1rem 0;
}

.footer .box li a{
    color: #fff;
    font-size: 1.5rem;
}

.footer .box .blog-container{
    width: 30rem;
    height: 30rem;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer .box .blog-container .blog{
    flex: 1 1 10rem;
    overflow: hidden;
}

.footer .box .blog-container .blog img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* copyright */

.copyright{
    background-color: #221b1b;
    padding: 1rem 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copyright p{
    font-size: 1.5rem;
    color: #fff;
}

.copyright p a{
    color: var(--orange);
}
/* contact us section */

.contact{
    padding-top:5rem;
    padding-bottom: 5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    width: 100%;
    height: auto;
}

.contact .content-sec{
    flex: 1 1 25rem;
}

.contact .content-sec .sub-heading{
    font-size: 1.5rem;
    font-weight: bolder;
    margin-top: 2rem;
    text-transform: uppercase;
    color: var(--text-color);
}

.contact .content-sec .address-text-cap{
    font-size: 1.35rem;
    text-transform: uppercase;
    color: var(--text-color);
}

.contact .form-sec{
    flex: 1 1 25rem;
}

.contact .form-sec form{
    padding: 2rem;
    border: .1rem solid rgba(0,0,0,0.3);
    border-radius: .5rem;
}

.contact .form-sec form input, textarea{
    width: 100%;
    border: .1rem solid rgba(0,0,0,0.3);
    margin: .5rem 0;
    padding: 1rem;
    font-size: 1.5rem;
}

/* inner banner starts */
.inner-banner{
    width: 100%;
    height: 30rem;
}
.inner-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* inner banner ends */

/* gallery section */

.gallery{
    padding-top: 5rem;
}

.gallery .g-raw{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 5rem 0;
}

.gallery .g-raw .image{
    flex: 1 1 25rem;
    box-shadow: 0 1rem 1rem rgba(0,0,0,0.3);
}

.gallery .g-raw .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page404{
    height: 40rem;
    margin-top: 2rem;
}
.page404 p a{
    color: var(--red);
    font-weight: bold;
}































/* media query */
@media (max-width:1920px){
    .booking-form-container .row{
        padding:10rem 25%;
    }
}

@media (max-width:1670px){
    .footer{
        gap: 1rem;
    }
    .footer .box{
        flex: 1 1 25rem;
    }
}

@media (max-width:1600px){
    .booking-form-container .row{
        padding:10rem 15%;
    }
}

@media (max-width:1200px){
    section{
        padding: 1rem 9%;
    }
    .booking-form-container .row{
        padding:10rem 10%;
    }
}

@media (max-width:1000px){
    .header .navbar{
        position: absolute;
        top: 100%; left: 0;
        width: 100%;
        height: auto;
        background-color: transparent;
        padding: 1rem 9%;
        display: none;
    }

    .header .navbar.active{
        display: block;
    }

    .header .navbar ul{
        display: block;
        margin-top: 3rem;
    }
    .header .navbar ul li{
        margin: 1rem;
        background-color: #fff;
        padding: 1rem;
        border-radius: .5rem;
        box-shadow: 0 .3rem .4rem rgba(0,0,0,0.3);
    }

    #nevbtn{
        display: inline-block;
    }
}

@media (max-width:800px){
    .booking-form-container .row{
        padding:7rem 2rem;
        gap: 2rem;
    }
}

@media (max-width:450px){
    .booking-form-container .row{
        padding:7rem 2rem;
    }
    .booking-form-container .row .image{
        display: none;
    }
    .booking-form-container .row .content h2{
        font-size: 2.5rem;
    }
    .booking-form-container .row .content h2::before{
        top: 1.4rem;
        width: 1.7rem;
        height: .3rem;
    }
    .header .navbar ul{
        background-color: rgba(0,0,0,0.7);
        border-radius: .5rem;
        padding: 1rem;
    }
    .header .navbar ul li a{
        color: var(--text-color);
    }
    .logo{
        font-size: 3rem;
    }
    .header #book-a-table::before{
        width: 12rem;
        height: 11rem;
        right: -1.2rem;
    }
    .home{
        background: url("../images/m-bg1.jpg");
        height: 62rem;
    }
    .home .controls, .videos{
        display: none;
    }
    .home .content{
        padding: 3rem;
    }
    .home .content h1{
        font-size: 3rem;
    }
    .home .content p{
        font-size: 1.25rem;
    }
    .home .content h1{
        font-size: 3rem;
    }
    .home .content p{
        font-size: 1.5rem;
    }
    .home .content .res-container .res-name{
        font-size: 1.75rem;
    }
    .home .content .res-container .res-box{
        padding: 1rem 2rem;
    }
    
}