@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html{
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(238, 226, 213);
}

/* Main styles */
.main mian-content{

    clear: both;
}

/* Side bar styles */
.sidebar {
    width: 13%;
    min-height: fit-content;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: rgba(0, 0, 0, 0.995);
    position: sticky;
    top: 190px; /* Adjust this value to match your header's height */
    z-index: 99; /* Slightly lower than the header to avoid overlap */
    float: left; /* This can be removed if using flexbox for layout */
}
.dropdown-trigger {
    background-color: rgb(237, 202, 164);
    padding: 15px;
    cursor: pointer;
    font-size: large;
    margin: 0; /* Remove default margin for h2 */
    border-radius: 20px;
}
.dropdown-content {
    display: none; /* Hidden by default */
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.sidebar:hover .dropdown-content {
    display: block; /* Show on hover */
}
.dropdown-content a {
    text-decoration: none;
    display: block;
    padding: 2px 5px;
    color: rgba(0, 0, 0, 0.995);
    transition: all 0.5s ease 0s;
}
.dropdown-content a:hover {
    /* background-color: rgb(190, 238, 238); */
    background-color: rgb(7, 161, 199);
}

/* Cards section */
.cards-section {
    width: 85%;
    margin: 20px auto; /* Centers the section and adds top margin */
    padding: 20px;
    /* background-color: #74c49b; Changed from aqua to a more subtle color */
    margin-left: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cards-section h2 {
    text-align: center;
    margin-bottom: 20px;
    width: 100%; /* Ensure the heading spans the full width */
}
.product-card {
    /* Width is 490 pixels (490 X 400) */
    width: calc(50% - 10px); /* Two columns with gap consideration */
    min-height: 400px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    padding: 15px;
    box-sizing: border-box;
    background-color: white;
    margin-bottom: 20px; /* Add space between rows of cards */
}
/* new addition july 17 @ 08:42 pm */
/* Swiper section slideshow */
.swiper {
    width: 100%;
    height: 450px; /* Match the height of the product card image */
}
.swiper-slide img {
    width: 100%;
    height: 450px;
    object-position: center;
} 
.swiper-slide img:hover{
    transform: scale(1.05);
}
.swiper-button-next, .swiper-button-prev {
    color: #fff; /* Make navigation arrows white for better visibility */
    background-color: rgba(0,0,0,0.5); /* Add a semi-transparent background */
    padding: 30px 15px;
    border-radius: 5px;
}


/* Responsive design for smaller screens */
@media (max-width: 768px) {
    /* Side bar styles */
    .sidebar {
        text-align: left;
        font-weight: 50px;
        font-size: 10px;
        padding-right: 5px;
    }
    .dropdown-trigger {
        padding: 10px;
        font-size: small;
        border-radius: 0px;
    }
    .dropdown-content a {
        padding: 0px 0px;
        font-size: small;
    }
    .cards-section {
    width: 85%;
    margin-left: 15%;
    flex-direction: column; /* Stack the cards vertically on small screens */
    }
    .product-card {
    width: 100%; /* Full width on small screens */
    height: 100%;
    }
}

/* Responsive design for medium screens */
@media (min-width: 769px) and (max-width: 1280px) {
    /* Side bar styles */
    .sidebar {
        text-align: left;
        font-weight: 50px;
        font-size: 10px;
        padding-right: 5px;
    }
    .dropdown-trigger {
        padding: 10px;
        font-size: small;
        border-radius: 0px;
    }
    .dropdown-content a {
        padding: 0px 0px;
        font-size: small;
    }
    .cards-section {
    width: 80%;
    flex-direction: column; /* Stack the cards vertically on small screens */
    }
    .product-card {
    
        width: 80%; /* Full width on small screens */
        height: 100%;
    }
    
}
/* Side Bar scroll Margin */
#Reclinear, #sofa-bed{
    scroll-margin-top: 170px;
}