html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
}

body{
    background:#fffaf3;
}

* {
    text-transform: none;
}

/* Scroll to Top Arrow */
.scroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999; /* Ensures it stays on top of other elements */
    background-color: #6F4E37;
    border-radius: 50%;
    padding: 15px 15px; /* Button size */
    cursor: pointer; /* Pointer cursor */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.scroll-to-top a {
    color: #FFFFFF;
    font-size: 25px;
    text-decoration: none;
}


*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-transform: capitalize;
text-decoration: none;
transition: .2s linear;
text-transform: none;
}

.btn{
margin-top: 1rem;
display: inline-block;
padding: .8rem 3rem;
background:var(--brown);
color:#fff;
font-size:1.7rem;
cursor: pointer;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border:0.1rem solid rgba(0,0,0,0.7);
animation: fadeUp .4s linear;

}

.btn:hover{
background: #AB886D;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}


section{
padding:3rem 9%;
}

.heading{
background: url("img/heading-bg.jpg") no-repeat;
background-size:cover;
background-position: center;
text-align: center;
padding-top: 12rem;
padding-bottom: 8rem;
border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}

.heading h1{
color: #6F4E37;
font-size:4rem;

}
.title {
display:flex;
align-items: center;
font-size: 2.5rem;
margin-bottom:3rem;
padding:1.2rem 0;
border-bottom: 0.1rem solid rgba(0,0,0,0.7);
color: #AB886D;
}
.title span{
color: #6C4E31;
padding-left: .7rem;
}
.title a{
margin-left:auto;
color: #222;
font-size: 1.5rem;
}
.title a:hover{
color: #fff;
}

.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index:1000;
background:var(--brown);
display:flex;
align-items: center;
justify-content: space-between;
padding:0.5rem 5%;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.header .logo{
font-size:2.5rem;
font-weight: bolder;
color:#ffffff;
}

.logo img {
height: 90px; /* Adjust height as needed */
width: auto; /* Maintain the aspect ratio */
}

.logo-container {
display: flex;
align-items: center; /* Align items (logo and text) vertically */
gap: 10px; /* Add space between the logo and text */
}

.logo img {
height: 100px; /* Adjust logo size */
width: auto;
}

.logo-text {
font-size: 24px; /* Adjust text size */
font-weight: bold; /* Make it stand out */
color: #fafafa; /* Match theme color */
}

/* Default Light Mode */
:root {
    --brown: #5c3920; /* Light mode brown */
    --text-color: #ffffff;
    --background-color: #ffffff;
    --icon-color: #ffffff;
}


/* Define Dark Mode Variables */
.dark-mode {
    --background-color: #8a6c56; /* Warm, chocolate-like brown */
    --text-color: #F8EAD8;       /* Creamy beige for text */
    --icon-color: #D9A877;       /* Gold accent for icons */
}

/* Apply Variables to Body */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}


/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    color: var(--icon-color);
    font-size: 2.5rem;
    cursor: pointer;
    transition: color 0.3s;
}

.theme-toggle:hover {
    color: #6F4E37;
}

/* Update Header Styling */
.header {
    background: var(--brown);
}

body.dark-mode .theme-toggle:hover {
    color: #6F4E37;
}


/* Update Theme Toggle Icon */
.theme-toggle {
    color: white;
}



.header-container{
display: flex;
justify-content: space-between; /* Space out the logo and other elements */
align-items: center; /* Align items vertically */
padding: 0 20px; /* Add some horizontal padding */
color: #6F4E37;
}


.header .navbar a{
font-size: 1.7rem;
color: #fff;
margin: 0 1rem;
}

.header .navbar a:hover{
color: #222;
}

.header .icons div{
font-size: 2.5rem;
margin-left: 1.7rem;
cursor: pointer;
color: #fff;
}
.header .icons div:hover{
color: #6F4E37;
}



@media (max-width: 768px) {
    .header .navbar {
        display: none; /* Navbar hidden by default on small screens */
    }

    .header .navbar.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #5c3920;
        padding: 10px 0;
    }

    .header .icons #menu-btn {
        display: block; /* Show the menu button on small screens */
    }
}

@media (min-width: 769px) {
    .header .icons #menu-btn {
        display: none; /* Hide the menu button on larger screens */
    }
}

@keyframes fadeLeft {
0%{
    opacity: 0;
    transform: translateY(-5rem);
}
}

@keyframes fadeUp {
0%{
    opacity: 0;
    transform: scale(0.5);
}
}




.home {
    padding-top: 15rem;
    padding-bottom: 0;
    background-color: #AB886D;
    background-size: cover; /* Ensure the background color fills the entire section */
    text-align: center; /* Center text within the home section */
}

.home .slides-container .slide {
    display: flex;
    align-items: center; /* Vertically center items within the slide */
    justify-content: center; /* Horizontally center items within the slide */
    flex-direction: column; /* Stack content vertically */
    gap: rem; /* Add spacing between image and text */
    display: none;
    position: relative;
}

.home .slides-container .slide .content a.btn {
    position: absolute;
    bottom: 1rem; /* Distance from the bottom of the slide */
    right: 1rem; /* Distance from the right of the slide */
    padding: 0.75rem 1.5rem; /* Adjust padding for the button */
    background-color: #F8EAD8; /* Button background color */
    color: #6F4E37; /* Button text color */
    text-decoration: none;
    font-size: 2.25rem; /* Font size */
    border-radius: 0.5rem; /* Rounded corners */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); /* Subtle shadow for the button */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add hover effect for the button */
.home .slides-container .slide .content a.btn:hover {
    background-color: #AB886D; /* Button background on hover */
    color: #ffffff; /* Text color on hover */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3); /* Shadow on hover */
}

.home .slides-container .slide.active {
    display: flex;
}

.home .slides-container .slide .content img {
    width: 100%; /* Ensure the image takes the full width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}


.home .slides-container .slide.slide.active .content{
    flex: 1 1 40rem;
    animation: fadeLeft .4s linear .4s backwards;
}

.home .slides-container .slide .content span {
    color: #fffffe;
    font-size: 2.5rem;
}

.home .slides-container .slide .content h3 {
    font-size: 6rem;
    color: #ffffff;
    padding: 0.5rem 0;
}



.home #next-slide,
.home #prev-slide {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    height: 4rem; /* Button size */
    width: 4rem;
    z-index: 999; /* Ensure buttons are above slides */
    border-radius: 50%; /* Make buttons circular */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border: 0.1rem solid rgba(0, 0, 0, 0.7);
    background: var(--brown); /* Button background color */
    font-size: 1.5rem; /* Arrow size */
    color: #fff; /* Arrow color */
    display: flex; /* Center arrow inside button */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for buttons */
.home #next-slide:hover,
.home #prev-slide:hover {
    background: #222; /* Darker background on hover */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Positioning the buttons */
.home #prev-slide {
    left: 1rem; /* Adjust distance from left edge */
}

.home #next-slide {
    right: 1rem; /* Adjust distance from right edge */
}

/* Responsive Design */
@media (max-width: 768px) {
    .home #next-slide,
    .home #prev-slide {
        height: 3rem; /* Smaller button size */
        width: 3rem;
        font-size: 1.2rem; /* Adjust arrow size */
        left: 0.5rem; /* Adjust positioning for smaller screens */
        right: 0.5rem;
    }
}


.home #next-slide:hover,
.home #prev-slide:hover{
background:#222;
color: #fff;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.home #prev-slide{
left:2rem;
}

.home #next-slide{
right:2rem;
}

.about{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    }
    
    .about .img{
    flex: 1 1 20rem;
    }
    
    .about .img img{
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    }
    
    .about .content{
    flex: 1 1 40rem;
    }
    
    .about .content span{
    color: #6C4E31;
    font-size: 2.5rem;
    }
    
    .about .content h3{
    color:#222;
    font-size: 3rem;
    padding-top:.5rem;
    }
    
    .about .content p{
    color:#222;
    font-size: 1.4rem;
    line-height: 2;
    padding:1rem 0;
    }

/*members*/
.members .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap:1.5rem;
padding:2rem 0;
}

.members .box-container .box{
text-align:center;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border:0.1rem solid rgba(0,0,0,0.7);
}

.members .box-container .box img{
height:25rem;
width:22rem;
}

.members .box-container .box h3{
font-size: 2rem;
margin: 1rem 0;
color: #222;
}

.members .box-container .box:hover h3{
color: #AB886D;
}

.products .box-container {
    display: flex;
    justify-content: space-between; /* Adjust spacing between boxes */
    gap: 20px; /* Space between each product box */
    padding: 20px; /* Add some padding */
}

.products .box-container .box {
position: relative;
background: #F8EAD8;
text-align: center;
overflow: hidden;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border:0.1rem solid rgba(0,0,0,0.7);
}

.products .box-container .box:hover  .icons{
top: 0;
}

.products .box-container .box .icons {
position: absolute;
top: -105%;
left: 0;
height: 30rem;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
background: #FFF8E8;
gap: 1rem;
}

.products .box-container .box .icons a {
font-size: 2rem;
height: 5rem;
width: 5rem;
line-height: 5rem;
background: #fff;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
color: #666;
}

.products .box-container .box .icons a:hover{
background: var(--brown);
color:#fff;
}

.products .box-container .box .img {
    height: 80%; /* Make the image container take full height */
    width: 100%; /* Ensure the image container fills the width of the box */
    overflow: hidden; /* Hide any overflow from the image */
}

.products .box-container .box .img img {
    height: 100%; /* The image should stretch to fill the container height */
    width: 100%; /* The image should stretch to fill the container width */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}


.products .box-container .box .content {
padding: 1.5rem;
}

.products .box-container .box .content h3 {
font-size: 2rem;
color: #222;
}

.products .box-container .box .content .price {
font-size: 2rem;
color: #222;
padding: 1rem 0;
}



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');


.gallery .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}

.gallery .box-container .box{
height: 380px;
width: 400px;
overflow: hidden;
position: relative;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border:0.1rem solid rgba(0,0,0,0.7);
margin-bottom: 1.5rem;
}

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

.gallery .box-container .box:hover img{
transform: scale(1.2);
}

.gallery .box-container .box:hover .icons{
bottom: 0;
}

.gallery .box-container .box .icons {
text-align: center;
background: rgba(0, 0, 0, 0.7);
padding: 1.5rem 0;
position: absolute;
bottom: -6rem;
left: 0;
right: 0;
z-index: 10;
}

.gallery .box-container .box .icons a{
font-size: 2.5rem;
color: #fff;
margin: 0 1.5rem;
}

.gallery .box-container .box .icons a:hover{
color: var(--brown);
}

/*review*/

.info-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap:1.5rem;
    }
    
    .info-container .info{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    background: #FFF8E8;
    }
    .info-container .info:hover{
    background: #AB886D;
    }
    
    .info-container .info img{
    height: 7rem;
    }
    
    .info-container .info .content h3{
    font-size: 2rem;
    color: #222;
    padding-bottom: .5rem;
    }
    
    .info-container .info .content span{
    font-size: 1.5rem;
    color: #222;
    }


.contact .icons-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
gap: 1.5rem;
}

.contact .icons-container .icons{
text-align: center;
border: 0.1rem solid rgba(0,0,0,0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
padding:2rem;
}

.contact .icons-container .icons i{
height:6rem;
width:6rem;
line-height: 6rem;
font-size: 2.5rem;
background: var(--brown);
color:#fff;
border-radius: 50%;
}

.contact .icons-container .icons h3{
color:#222;
font-size: 2rem;
padding:1rem 0;
}

.contact .icons-container .icons p{
color:#222;
font-size: 1.5rem;
line-height: 2;
}

.contact .icons-container .icons p a{
    color:#222;
    font-size: 1.5rem;
    line-height: 2;
}

.contact .icons-container .icons p a:hover{
    color:#D9A877;
    font-size: 1.5rem;
    line-height: 2;
}

.contact .row{
display:flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
}

.contact .row form{
padding:2rem;
border: 0.1rem solid rgba(0,0,0,0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
flex: 1 1 40rem;
}

.contact .row form .inputBox .box[type="number"] {
    -moz-appearance: textfield; /* For Firefox */
    -webkit-appearance: none; /* For Chrome, Safari, and Edge */
    appearance: none; /* Standard */
}

.contact .row form .inputBox .box[type="number"]::-webkit-inner-spin-button,
.contact .row form .inputBox .box[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* For Chrome, Safari, and Edge */
    margin: 0; /* Remove margin from buttons */
}

.contact .row form h3{
font-size: 2.5rem;
padding-bottom: 1rem;
color: #222;
}

.contact .row form .inputBox{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}

.contact .row form .inputBox .box,
.contact .row form textarea{
padding:1rem 1.2rem;
font-size: 1.6rem;
border: 0.1rem solid rgba(0,0,0,0.7);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
color: #222;
text-transform:none;
margin: .7rem 0;
}

.contact .row form textarea{
width: 100%;
height:15rem;
resize:none;
}

.contact .row .map{
flex: 1 1 40rem;
width:100%;
}

.space{
min-height: 10vh;
}

.footer{
background:var(--brown);

}

.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.5rem;
}


.footer .box-container .box h3{
font-size: 2.2rem;
color: #ffffff;
padding:1rem 0;
}

.footer .box-container .box p{
font-size: 1.5rem;
color: #ffffff;
padding-bottom: .5rem;
transition: .2s linear;
    text-transform: none;
}

.footer .box-container .box a{
font-size: 1.4rem;
color: #ffff;
padding:1rem 0;
display:block;
transition: .2s linear;
    text-transform: none;
}

.footer .box-container .box a:hover{
padding-right: .5rem;
color: #fff;
transition: .2s linear;
    text-transform: none;
}

.footer .box a {
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px; /* Adds space between the icon and text */
    transition: all 0.3s ease;
}

.footer .box a:hover {
    color: #6F4E37; /* Highlight color */
    transform: translateX(5px); /* Move text and icon together */
}

.footer .box a i {
    font-size: 1.6rem;
    transition: transform 0.3s ease; /* Smooth icon movement */
}

.footer .box a:hover i {
    transform: translateX(5px); /* Icon moves together with the text */
}


.footer .box-container .box a:hover i{
padding-right: 2rem;
transition: .2s linear;
}

.footer .box-container .box a i:hover{
padding-right: .5rem;
color: #fff;
transition: .2s linear;
    text-transform: none;
}

.footer .box-container .box form input[type="email"]{
width: 100%;
padding:1rem 1.2rem;
font-size: 1.6rem;
color: #000;
margin: 1rem 0;
text-transform: none;
}

.footer .box-container .box .payments{
width: 100%;
margin-top: 2rem;
}


.credit{
text-align: center;
background:var(--brown);
color: #ffffff;
font-size:2rem;
}




/* media queries */
@media (max-width: 991px){
html{
    font-size: 55%;
}
.header{
    padding:2rem;
}
section{
    padding:3rem 2rem;
}
.home #next-slide,
.home #prev-slide{
    transform: translateY(0);
    top:88%;
}
.home #prev-slide{
    left:auto;
    right:8rem;
}
}

@media (max-width: 768px){

.header .navbar{
    position:absolute;
    top: 99%;
    left: 0;
    right: 0;
    background:#222;
    border-top: 0.1rem solid rgba(0,0,0,0.1);
    border-bottom: 0.1rem solid rgba(0,0,0,0.1);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


.header .navbar a{
    margin: 1.5rem;
    padding:1.5rem;
    background:var(--brown);
    font-size: 2rem;
    display: block;
    border-radius: .5rem;
}
}

@media (max-width: 450px){
html{
    font-size: 50%;
}
.home .slides-container .slide .content h3{
    font-size:4rem;
}
.contact .row form .inputBox input{
    width: 100%;
}
.products .box-container .box .img{
    width: 100%;
}
.members .box-container .box img{
    width: 100%;
}
}