/* Global Styling for Saree Website */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap'); /* New font for footer */

/* CSS Variables */
:root {
    --primary: #f3e8e8;
    --secondary: #d4a373;
    --accent: #a26769;
    --dark: #3a2e2e;
}

/* Base Body Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--primary);
    color: var(--dark);
    overflow-x: hidden; /* Prevents horizontal scroll */
}

/* Headings Font */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

/* Logo Styles */
.logo {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--accent);
    transition: all 0.3s ease;
}

.logo:hover {
    color: var(--secondary);
    transform: scale(1.05);
}

/* Navigation Link Hover Effect */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Hero Section Background */
.hero {
    background: linear-gradient(rgba(242, 232, 232, 0.8), rgba(242, 232, 232, 0.8)), 
                url('https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/9c988dc5-c6d0-4c1c-8b45-612eeba2f26a.png') no-repeat center center;
    background-size: cover;
    height: 80vh;
}

/* Saree Card Hover Effects */
.saree-card {
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.saree-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Category Button Hover Effects */
.category-btn {
    transition: all 0.3s ease;
}

.category-btn:hover {
    transform: scale(1.05);
    background-color: var(--accent);
    color: white;
}

/* Footer Link Hover Effects */
.footer-link {
    transition: all 0.2s ease;
}

.footer-link:hover {
    color: var(--secondary);
    transform: translateX(5px);
}

/* Footer Text Font Change */
footer,
.footer-section p,
.footer-section li,
.footer-bottom {
    font-family: 'Merriweather', serif; /* Applying the new font */
    color: #ff0000; /* Add this line to change the color */
}


/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Collections Page Specific Styles (Keep these separate if they are truly unique) */
#back-to-top {
    transition: all 0.3s ease;
    background-color: black;
}

#back-to-top:hover {
    transform: translateY(-3px);
    background-color: black;
}

.product-card { /* Assuming this is specific to collections or product listings */
    transition: all 0.2s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

#product-modal { /* Assuming this is specific to collections or product details */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#product-modal:not(.hidden) {
    opacity: 1;
}









/* Mobile Navigation Styles */
@media (max-width: 768px) {
    .nav-link {
        display: none; /* Hide links by default */
    }

    .mobile-menu {
        display: none; /* Hide mobile menu by default */
        position: absolute;
        top: 100%; /* Position below the navbar */
        left: 0;
        right: 0;
        background-color: white; /* Background color for mobile menu */
        z-index: 10; /* Ensure it appears above other content */
        flex-direction: column; /* Stack links vertically */
        padding: 1rem; /* Add some padding */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    }

    .mobile-menu.active {
        display: flex; /* Show mobile menu when active */
    }

    .mobile-menu .nav-link {
        display: block; /* Show links in mobile menu */
        padding: 0.5rem 0; /* Add padding to links */
        text-align: center; /* Center align text */
    }

    .mobile-menu .nav-link:hover {
        background-color: var(--accent); /* Change background on hover */
        color: white; /* Change text color on hover */
    }

    .hamburger {
        display: flex; /* Show hamburger icon */
        flex-direction: column; /* Stack lines vertically */
        cursor: pointer; /* Change cursor to pointer */
    }

    .hamburger div {
        width: 25px; /* Width of hamburger lines */
        height: 3px; /* Height of hamburger lines */
        background-color: var(--dark); /* Color of hamburger lines */
        margin: 3px 0; /* Space between lines */
        transition: all 0.3s ease; /* Smooth transition */
    }

    .hamburger.active div:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px); /* Rotate first line */
    }

    .hamburger.active div:nth-child(2) {
        opacity: 0; /* Hide second line */
    }

    .hamburger.active div:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px); /* Rotate third line */
    }
}