/*Import google font*/
@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,700;1,400;1,500;1,600&display=swap');
*{
    margin:0;
    padding:0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}/*style for whole site*/
:root{

}
html{
    scroll-behavior:smooth;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
button{
    cursor: pointer;
    border: none;
    background:none;
}
#img1{
    width:10%;
    border-radius: 50%;
}
img{
    
    border-radius: 10px 10px 0 0;
}
.section-content{
    margin:0 auto;
    padding:0 20px;
    max-width: 1300px;
}
.section-title{
    text-align: center;
    padding: 60px 0 50px;
    text-transform: uppercase;
    font-size: 1.5rem;
}
.section-title::after{
    content:"";
    width:80px;
    height: 5px;
    display:block;
    margin:10px auto 0;
    border-radius: 10px ;
    background-color: rgb(239, 200, 56);

}
/*Navbar styling*/
header{
    background-color: rgb(48, 21, 23);
}
header .navbar{
    display:flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}

.navbar .nav-logo .logo-text{
    color:white;
    font-size: 1.5rem;
    font-weight: 700;
}
.navbar .nav-menu .nav-link{
    color:white;
}
.navbar .nav-menu{
    display:flex;
    gap: 10px;
}

.navbar .nav-menu .nav-link{
    padding:10px 18px;
    color: whitesmoke;
    font-size: 1.2rem;
    border-radius: 15px;
    transition: 0.3s ease;
}
.navbar .nav-menu .nav-link:hover{
background-color: rgb(239, 200, 56);
}
#menu-close-button,#menu-open-button{
    display:none;
    
}
.hero-section{
    min-height: 100vh;
    background-color:rgb(73, 34, 2);
}
.hero-section .section-content{
    display:flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    min-height: 10;
}
.hero-section .section-content .hero-details .title{
    font-size: 1.5rem;
    font-family: "Miniver",sans-serif;
    color:  rgb(239, 200, 56);
}
.hero-section .section-content .hero-details .subtitle{
    margin-top: 8px;
    max-width: 70%;
    font-size: 1.7rem;
    font-weight: 600;
    
}
.hero-section .section-content .hero-details .description{
    margin: 24px 0 40px;
    max-width: 70%;
    font-size: 1.1rem;
}
.hero-section .hero-details .buttons a{
    
    margin-right: 30px;  
    padding:10px 26px;
    background-color: rgb(239, 200, 56);
    font-weight: 500;
    font-size: 1.1rem;
    border-radius: 15px;
    transition: 0.3s ease;

}

.hero-section .hero-details .button:hover{
    background:transparent;
    color:whitesmoke;
    border: 2px solid white;
}
.hero-section .hero-image-wrapper{
    max-width:700px;
    margin-right: 30px;  
}
.hero-section .hero-image-wrapper .img-fluid{
    width:100% ;
    height: auto;
}

/*About section*/
.about-section{
    padding:120px;
    background-color: rgb(207, 182, 186);

}
.about-section .section-content{
    display:flex;
    gap:50px;
    align-items: center;
    justify-items: space-between;

}
.about-details{
    min-width: 50%;
}
.about-section .about-image-wrapper .about-image{
 width:400px;
 height:400px;
 border-radius: 50%;

}
.about-section .about-details .text{
    line-height: 30px;
    margin:0 0 30px;
    text-align: justify;
    font-size: 1.3rem;

}
.about-details .social-links-list{
    display:flex;
    gap: 25px;
    justify-content: center;
}
.about-details .social-links-list .social-link{
    color:rgb(9, 8, 8);
    font-size: 1.4rem;
    transition: 0.3s ease;
}
.about-details .social-links-list .social-link:hover{
    color: rgb(239, 200, 56);
}
/*Menu section styling*/
.menu-section{
    color: white;
    background-color: black;
    padding:50px 0 50px;
}
.menu-section .menu-list{
    display:flex;
    flex-wrap: wrap;
    gap:110px;
    align-items: center;
    justify-content: space-between;
   
}

.menu-section .menu-list .menu-item{
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
flex-direction: column;
width:calc(100% / 3-110px);

}

.menu-section .menu-list .menu-item .menu-image{
    max-width: 83%;
    aspect-ratio: 1;
    
}

/*Testimonial styling*/
.testimonials-section{
    padding:50px 0 100px;
    background-color: rgb(237, 208, 219);
}
.testimonials-section .carousel{
    overflow: hidden;
    margin:0 60px 50px;
}
.testimonials-section .testimonial{
    display: flex;
    padding:35px;
    flex-direction: column;
    align-items: center;
    text-align: center;

}
.testimonials-section .testimonial .name{
    margin-top: 16px;
    font-size: 16px;

}
.testimonials-section .testimonial .feedback{
    margin-top: 16px;
    font-size: 16px;
    
}
.testimonials-section .testimonial .user-image{
    width: 180px;
    height:180px;
    object-fit: cover;
    border-radius: 10px;  
}
.testimonials-section .swiper-pagination-bullet{
       background-color: rgb(239, 200, 56);
       width:15px;
       height: 15px;
       opacity: 1;
}
.testimonials-section .swiper-slide-button{

   margin-top: -50px;
   color :rgb(73, 34, 2);
   transition:0.4s ease;

}
.testimonials-section .swiper-slide-button:hover{
 color: rgb(239, 200, 56);
}
/*Garelly-section styling*/
.garelly-section{
    padding: 50px 0 100px;
    background-color: rgb(248, 242, 242);
}

.garelly-section .garelly-list{
    display:flex;
    gap:40px;
    flex-wrap: wrap;
}
.garelly-section .garelly-list .garelly-item{
    overflow: hidden;
    width:calc(100% /3 -32px);
}
.garelly-section .garelly-list .garelly-item .garelly-image{
    width:100%;
    height: 100%;
    cursor:zoom-in;
    transition: 0.3s ease;
}
.garelly-section .garelly-list .garelly-item:hover .garelly-image{
    transform: scale(1.2);
}
/*contact section*/
.contact-section{
    padding:50px 0 100px;
    background-color: rgb(188, 165, 175);
}
.contact-section .section-content{
    display: flex;
    gap:50px;
    align-items: flex-start;
    justify-content: space-between;
}
.contact-section .contact-info-list .contact-info{
    display:flex;
    gap:20px;
    margin: 20px 0;
    align-items: center;

}
.contact-section .contact-info-list .contact-info i{
    font-size: 1.2rem;
}
.contact-section .contact-form .form-input{
    width: 100%;
    height:50px;
    padding: 0 12px;
    outline: none;
    margin-bottom: 16px;
    background-color: aliceblue;
    border-radius: 10px;
    border: 1px solid gray;
}
.contact-section .contact-form textarea .form-input{
    height: 100px;
    padding: 12px;
    resize: vertical;

}
.contact-section .contact-form .form-input:focus{
    border-color:rgb(239, 200, 56);

}
.contact-section .contact-form .submit-button{
    padding:10px 26px;
    color:blanchedalmond;
    font-size: 1.3rem;
    font-weight: 500;
    background-color:rgb(239, 200, 56);
    border-radius: 10px;
}
.contact-section .contact-form .submit-button:hover{
    background: transparent;
    border:4px solid white;
    color:black;
}
/*Footer section styles*/
.footer-section{
    padding:20px 0 ;
    background-color: darkcyan;
}
.footer-section .section-content{
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.footer-section .social-link-list{
    display:flex;
    gap:25px;
}
.footer-section .social-link-list .social-link{
    font-size: 1.4rem;
    transition:0.2s ease;
}
.footer-section .social-link-list .social-link:hover,
.footer-section .policy-text .policy-link:hover{
    font-size: 1.1rem;
    color:rgb(239, 200, 56);
}

.footer-section :where(.copyright-text, .social-link, .policy-link){
    color:white;

}
.footer-section .policy-text .separator{
    color:white;
    margin:0 5px

}

/*Responsive media query for width=1024px*/
    @media screen and (max-width:1024px){
        .menu-section .menu-list{
            gap:60px;
            
        }
        .menu-section .menu-list .menu-item{

           width:calc(100% / 3-110px)
       }

    }
   
    /*Responsive media query for width=900px*/
@media screen and (max-width:900px){
    :root{
--font-size-m:1rem;
--font-size-l:1.3rem;
--font-size-xl:1.5rem;
--font-size-xxl:1.8rem;
}
body.show-mobile-menu::before{
    content:"";
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    backdrop-filter: blur(2px);
    background: rgb(0,0,0,0.2);
}
.navbar :where(#menu-close-button,#menu-open-button){
    display:block;
    font-size: var(--font-size-l);
}
.navbar #menu-close-button{
    position:absolute;
    top:30px;
    right:30px;
}
.navbar #menu-open-button{
    color:white;
}
#menu-close-button,#menu-open-button{
    display:block;}

.navbar .nav-menu{
        display: block;
        position:fixed;
        left:-300px;
        top:0;
        width:300px;
        height: 100%;
        background-color: whitesmoke;
        display:flex;
        align-items: center;
        flex-direction: column;
        padding-top:50px;
        transition:left 0.3s ease;
    }
body.show-mobile-menu .navbar .nav-menu{
    left:0;
    }
    .navbar .nav-menu .nav-link{
    color:rgb(10, 8, 8);
    font-size: 1.4rem;
    display:block;
    margin-top: 17px;
}
.hero-section .section-content{
     gap:50px;
    text-align: center;
    padding: 30px 20px 20px;
    flex-direction: column-reverse;
    justify-content: center;
   

}
.hero-section .hero-details :is(.subtitle, .description), .about-section .about-details{
    max-width: 100%;
}
.hero-section .hero-tetails .buttons{
    justify-content: center;
}
.hero-section .hero-image-wrapper{
    max-width: 270px;
    margin-right: 0;
}
.about-section .section-content{
   gap:70px;
   flex-direction: column-reverse;
}

.about-section .about-image-wrapper .about-image{
    width:100%;
    height: 100%;
    max-width: 250px;
    aspect-ratio: 1;
}
.menu-section .menu-list{

           gap:30px;
       }
.menu-section .menu-list .menu-item{

           width:calc(100% / 2-30px)
       }
       .menu-section .menu-list .menu-item .menu-image{

          max-width: 200px;
       }
       .garelly-section .garelly-list .garelly-item{
    width:calc(100% /2 -32px);
}
.garelly-section .garelly-list{
    gap:60px;
}

}
/*Responsive media query for width=640px*/
@media screen and (max-width:640px){
    .menu-section .menu-list{

           gap:60px;
       }
    .menu-section .menu-list .menu-item, .garelly-section .garelly-list .garelly-item{

           width:100%
       }
       .testimonials-section .carousel{
        margin:0 0 30px;
       }
       .testimonials-section .swiper-slide-button{
        display:none;
       }
       .footer-section .section-content{
         display:flex;
         flex-direction:column;
         gap:5px;
         
}
}