/* General Reset and Defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
/* Disable touch highlight globally */
html, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
}

::-webkit-scrollbar {
    display: none;
}

html {
    height: 100%;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    background-color: #E5DFD6;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    width: 0;  /* Safari and Chrome */
    display: none; /* Hide the scrollbar for WebKit browsers */
}

header {
    background-color: #7D6655;
    z-index: 1000;
}

.links li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
}

a:hover {
    color: #e5dfd6d3;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

nav .logo a {
    margin-left: 10px;
    font-size: 2rem;
    font-weight: bold;
}

nav .links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-left: 60px;
}

nav .toggle_btn {
    color:#E5DFD6;
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* Initially hidden */
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-container ::placeholder {
    color: #E5DFD6;
}

#search-input {
    border: none;
    border-bottom: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    padding: 5px;
    transition: width 0.3s ease;
}

#search-input:focus {
    outline: none;
    width:auto;
}

#search-icon {
    cursor: pointer;
    color: #E5DFD6;
    margin-left: 10px;
}

.dropdown_menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, gap 0.3s ease;
    position: absolute;
    right: 2rem;
    top: 60px;
    width: 200px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    z-index: 1;
}

.dropdown_menu.open {
    max-height: 200px;
    opacity: 1;
    padding: 1rem;
    gap: 1.5rem;
}

.dropdown_menu li {
    list-style: none;
}

/* Responsive Slider */
.upper {
    position: relative;
    overflow: hidden;
}

.slider {
    width: 100vw; /* Use viewport width for accurate full-screen width */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Make sure no overflow happens */
    position: relative;
}

.list {
    display: flex;
    width: 100vw; /* Use viewport width for accurate full-screen width */
    transition: transform 0.5s ease;
}

/* Ensure images cover full screen */
.item {
    flex: 0 0 100vw; /* Use viewport width for item width */
    margin: 0; /* Remove margin if any */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Buttons (Arrows) */
.buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none; /* Disable pointer events for the container */
    width: 100%; /* Ensure the buttons container spans the full width */
    padding: 0 2%; /* Add equal padding to both left and right sides */
    box-sizing: border-box; /* Include padding in width calculation */
}

.buttons button {
    background-color:#E5DFD6;
    border: none;
    color: #2c241e;
    cursor: pointer;
    padding: 1vh 0.5vw;
    font-size: 1.5vw;
    pointer-events: auto; /* Enable pointer events for the buttons */
    position: relative; /* Ensure the buttons are positioned relative to their container */
    flex: 0 0 auto; /* Prevent the buttons from shrinking */
}

.buttons button:last-child {
    margin-right: 0%
}

.fa-angle-left, .fa-angle-right {
    font-size: 2em;
    color:#4b3d33;
}

.dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 1vh 0; /* Use viewport height units for padding */
    margin-top: 1vh;
    position: absolute;
    bottom: 1vh;
    width: 100%;
}

.dots li {
    width: 1vw; /* Use viewport width units for width */
    height: 1vw; /* Use viewport width units for height */
    border-radius: 50%;
    background-color: #e5dfd6;
    margin: 0 0.5vw; /* Use viewport width units for margin */
    cursor: pointer;
    transition: background-color 0.3s;
}

.dots li.active {
    background-color: #7D6655;
}

/* Unified Heading Styles */
.title-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7D6655;
    margin-top: 150px;
    font-size: clamp(3rem, 6vw, 6rem); /* Same size for both */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: center;
    width: 100%;
}
.top-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e5dfd6;
    margin-top: 150px;
    font-size: clamp(3rem, 6vw, 6rem); /* Same size for both */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: center;
    width: 100%;
}

.title-heading.visible,
.top-heading.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Furniture List Styles */
.furniture-slider, .furniture-slider2 {
    margin-bottom: 150px;
    margin-top: 150px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    padding: 10px;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.furniture-slider::-webkit-scrollbar,
.furniture-slider2::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Webkit-based browsers */
}

.furniture-list, .furniture-list2 {
    display: flex;
    gap: 30px; /* Add gap between images */
}

.furniture-item {
    padding-right: 30px;
    margin-left: 20px;
    flex: 0 0 auto;
    min-width: 400px; /* Increase the image width */
    height: 250px; /* Adjust the height to make the images scrollable */
    display: block;
}

.furniture-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none; /* No hover effect */
    border-radius: 10px;
}

/* Background color for the 'hot' section */
.hot {
    height: 800px;
    background-color: #7D6655; /* Reintroduce background color */
    padding: 20px 0; /* Add some padding to the top and bottom */
}
.category{
    height:800px;
    background-color: #e5dfd6;
}
.iconlist{
    padding-top: 100px;
    margin-left: 90px;
    margin-right: 90px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 180px;
}
.iconlist p{
    color: #7D6655;
    font-weight:900;
    display: flex;
    justify-content: center;
    font-size: 20px;
    margin-top: 7px;
}
.iconlist img {
    width: 170px; /* Set width of images */
    height: auto; /* Maintain aspect ratio */
}
.contact{
    height:800px;
    background-color:#7D6655;
}
.contact-heading{
    display: flex;
    justify-content: center;
    font-size: 35px;
    padding: 60px 0px 40px 0px;
    color: #E5DFD6;
}
.contact-content{
    display: flex;
    flex-direction: column;
    justify-self: center;
    border-radius: 20px;
    background-color: #E5DFD6;
    height: 95vh;
    width: 90vw;
}
.contact-content h1{
    text-align: center;
    color: #7D6655;
    padding: 40px;
    justify-content: center;
}
.contact-inner{
    display: flex;
    flex-direction: row;
}
.contact-image img{
    height: 250px;
    padding: 20px;
    margin: 40px 50px 2px 50px;
    padding-left: 100px;
}
.contact-image p{
    font-size: 25px;
    padding: 2px;
    margin-left: 80px;
    font-weight: 700;
    color: #7D6655;
    text-align: center;
}
#Owner{
    font-size: 20px;
}
.lines{
    background-color: #7D6655;
    height: 400px;
    width: 2px;
    margin-left: 150px;
}
.contact-details{
    text-align: left;
    margin-top: 20px;
    margin-left: 10vw;
    display: flex;
    flex-direction: column;
}
.contact-details h1{
    color: #7D6655;
    font-weight: 500px;
    font-size: 30px;
}
.contact-number p{
    color: #7D6655;
    font-weight: 300px;
    margin-left: 40px;
}
.contact-social-icons{
    color: #7D6655;
    font-size: 35px;
    padding: 5px;
}
.social-icons{
    left: 37px;
    position: relative;
}
.upper-footer{
    width: 100%;
    height: 250px;
    background-color: #E5DFD6;
}
/* Footer Styling */
.footer {
    margin-top: auto; /* Push to the bottom */
    background-color: #7D6655;
    color: #e5dfd6;
    padding: 30px 40px; /* Increased padding for better spacing */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Cap max width for large screens */
    margin-bottom: 20px; /* Space between content and copyright */
    gap: 20px; /* Add gap between sections */
}

.footer-content img {
    height: 200px; /* Slightly larger than previous */
    margin-right: 20px; /* Space between image and text */
}

.footer-text {
    flex: 1;
    padding: 0 20px; /* Padding for spacing */
    text-align: left;
}

.footer-text h3 {
    font-size: 2rem; /* Larger heading size */
    margin-bottom: 15px; /* Add space below heading */
}

.footer-text p {
    font-size: 1.1rem; /* Slightly larger text */
    line-height: 1.6;
    margin: 0;
}

.footer-socials {
    display: flex;
    justify-content: flex-start;
    gap: 20px; /* Increased gap between icons */
    margin-top: 20px;
}

.footer-icons {
    color: #e5dfd6;
    font-size: 30px; /* Larger icon size */
    transition: color 0.3s ease;
}

.footer-icons:hover {
    color: #fff;
}

.footer-copyright {
    width: 100%;
    font-size: 1rem;
    text-align: center;
    padding-top: 20px; /* Space between content and copyright */
    border-top: 1px solid #e5dfd6; /* Separator line */
}

.footer-copyright p {
    margin: 0;
}

/* SHOP PAGE */

/* Shop Page Headings */
.shop-headings {
    text-align: center;
    margin-top: 40px;
    font-size: 20px;
    color: #7D6655;
}

/* Shop Products Flex Layout */
.shop-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 45px;
    padding: 40px 10px; /* Reduced left and right padding */
    margin: 40px auto; /* Centered the container and reduced external space */
    border-radius: 15px;
}


/* Product Card Styling */
.product-card {
    flex: 1 1 250px; /* Smaller base width for cards */
    max-width: 250px; /* Maximum width for each card */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    cursor: pointer;
    /* transform: translateY(-5px); */
    box-shadow: 0 7px 13px rgba(0, 0, 0, 0.15);
}

/* Image Styling */
.product-card img {
    width: 100%;
    height: 150px; /* Larger image height */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Product Info Styling */
.product-info {
    padding: 10px; /* Reduced padding for a compact look */
    text-align: center;
}

.product-info h2 {
    font-size: 1rem; /* Smaller font size for product name */
    color: #333;
    margin: 8px 0;
}

.product-meta {
    font-size: 0.8rem; /* Smaller font size for metadata */
    color: #7D6655;
    margin: 5px 0;
}
/* Modal Content */
hr {
    border: none;
    border-top: 1px solid #7D6655; /* Thin horizontal line */
    margin-bottom: 5px; /* Spacing around the line */
    width: 100%; /* Full-width line */
}
/* Modal Overlay */
.modal {
    display: none; /* Keep it hidden initially */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}


/* Modal Content */
.modal-content {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    width: 85%;
    max-width: 1200px;
    height: 85%;
    border-radius: 12px;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    position: relative; /* 👈 This is crucial for .close-btn positioning */
    transition: all 0.3s ease-in-out;
}


/* Left Section: Image */
.modal-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #dcd5cc;
}

.modal-left img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Right Section: Details */
.modal-right {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.modal-right h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 1.3;
}

.modal-right p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.modal-right ul {
    margin-top: 10px;
    list-style: disc;
    padding-left: 20px;
    color: #333;
}

.modal-right ul li {
    font-size: 1rem;
    margin-bottom: 10px;
}
/* Close Button */
.close-btn {
    position: absolute;
    top: 10px;   /* Adjusted for better positioning */
    right: 10px; /* Moved inside the modal content */
    font-size: 2.5rem;
    color: #7D6655;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: black;
}

/* Intro Animation Styles */
#intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E5DFD6;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.intro-card {
    position: relative;
    width: 30vw;  /* Scales based on viewport width */
    max-width: 300px; /* Prevents it from getting too big on large screens */
    height: auto; /* Keeps the aspect ratio */
    transform: translateY(100vh);
    animation: 
        bounceIn 1.8s ease-out forwards, 
        scaleUp 1s ease-out 3s forwards;
}

/* Ensures proper scaling on small screens */
.intro-card img {
    width: 100%;
    height: auto;
}

/* Adjust for very small screens (phones) */
@media (max-width: 480px) {
    .intro-card {
        width: 60vw; /* Take up more space on small screens */
        max-width: 250px; /* Reduce max size for small screens */
    }
}


@keyframes bounceIn {
    0% {
        transform: translateY(100vh);
    }
    60% {
        transform: translateY(-10px); /* Moves slightly up */
    }
    80% {
        transform: translateY(5px); /* Moves slightly down (settles) */
    }
    100% {
        transform: translateY(5px); /* Final position */
    }
}

@keyframes scaleUp {
    0% {
        transform: translateY(5px) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(5px) scale(0);
        opacity: 0;
    }
}
#main-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out; /* Smooth fade-in */
}

/* Prevents fade-in animation after session storage is set */
.instant-visible {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}