:root {
    --primary-color: #912bbc;
    --secondary-color: #f4f4f4;
    --text-color: #333;
    --light-text: #666;
    --white: #ffffff;
    --dark-bg: #1a1a1a;
    --accent-color: #ff9800;
    /* For stars and accents */
    --container-width: 1200px;
    --header-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    font-weight: 400;
    /* Normal weight */
}

.section-title span {
    color: var(--primary-color);
}

.section-subtitle {
    text-align: center;
    color: var(--light-text);
    margin-top: -20px;
    margin-bottom: 40px;
    font-weight: 400;
    /* Normal weight */
}

/* Base button style */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: transparent;
    /* Transparent background */
    color: var(--text-color);
    /* Text color */
    border: 1px solid #ccc;
    /* Narrow gray border */
    border-radius: 50px;
    /* Rounded edge */
    cursor: pointer;
    font-weight: 400;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

/* Header & Navbar */
header {
    height: var(--header-height);
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

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

.logo img {
    height: 86px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-weight: 400;
    /* Normal font weight */
    color: var(--light-text);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    text-decoration: none;
}

.nav-links a.active {
    color: var(--primary-color);
    text-decoration: underline;
    /* Underline active */
    text-underline-offset: 5px;
}

.nav-links a:hover {
    color: var(--primary-color);
}

/* --- Desktop Dropdown Styles --- */
.nav-links li {
    position: relative;
    /* Ensure dropdown is positioned relative to parent li */
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    display: none;
    z-index: 1000;
    border-radius: 8px;
    padding: 10px 0;
    list-style: none;
}

.nav-links li:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s;
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    padding: 10px 20px;
    color: #333;
    font-size: 0.9rem;
    display: block;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: #f9f9f9;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-icons {
    display: flex;
    gap: 20px;
    font-size: 1.2rem;
    color: var(--light-text);
}

/* Hero Section */
.hero {
    height: 80vh;
    background: url('.././img/hero-bg.png') center/cover;
    /* Lighter overlay for black text */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center content */
    padding-right: 0;
    width: 100%;
    /* height: 400px; */
    object-fit: cover;
    /* This creates a transparency fade at the bottom */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 91%, transparent 100%);
}

.hero-content h1 {
    font-size: 5rem;
    color: #000;
    /* Black color */
    line-height: 1.1;
    text-transform: capitalize;
    /* CamelCase/Title Case */
    text-align: center;
    font-weight: bold;

}

/* About Section */
.about {
    padding: 80px 0;
    text-align: center;
}

.about p {
    color: var(--light-text);
    max-width: 900px;
    margin: 0 auto 30px;
    font-size: 1.1rem;
    font-weight: 200;
}

/* Brands Section */
.brands {
    padding-bottom: 80px;
    text-align: center;
}

.brand-grid {
    /* display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    /* Prevents images from moving to the next line */
    gap: 20px;
    /* Reduced gap for mobile spacing */
    width: 100%;

}

.brand-grid img {
    /* height: 144px; 
    transition: 0.3s; */

    height: auto;
    /* Allow height to scale proportionally */
    max-height: 144px;
    /* Limits size on desktop */
    max-width: 30%;
    /* Ensures 3 images fit in one row */
    object-fit: contain;
    transition: 0.3s;
}
/* Stats Section */
.stats {
    background: url('.././img/Rectangle 20.png') center/cover no-repeat;

    height: 600px;
    position: relative;
}

.stats-overlay {
    background: rgba(0, 0, 0, 0.5);
    /* Adjust overlay if needed */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    width: 100%;
    gap: 20px;
    text-align: center;
}

.stat-item {
    color: var(--white);
}

.icon-box {
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px;
}

.stat-item i {
    font-size: 2rem;
    margin-bottom: 0;
    color: var(--light-text);
}

.stat-item h3 {
    font-size: 1.5rem;
    /* margin-bottom: 5px; */
    font-weight: 800;
}

.stat-item p {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Global Design Updates */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    font-weight: 400;
    /* Normal weight */
    background: linear-gradient(to right, #600174, #BA00FF);
    /* Darker Gradient: Deep Purple to Medium Orchid */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* Required for gradient text */
}

/* Shopping Section Updates */
.shopping {
    padding: 80px 0;
    text-align: center;
}

.product-grid {
    display: flex;
    /* Flexbox for row layout */
    justify-content: center;
    gap: 20px;
    align-items: center;
    /* Align items vertically center */
}

.product-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
    flex: 1;
    /* Distribute space evenly */
    max-width: 280px;
    /* Limit width */
}

/* Staggered margin for outer cards */
.product-card:first-child,
.product-card:last-child {
    margin-top: 50px;
    /* Push down outer cards */
}

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

.product-img {
    height: 250px;
    overflow: hidden;
    padding: 10px;
    padding-bottom: 0px;
    /* Add padding inside card */
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Changed to contain for product image */
}

.price-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.btn-cart {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
    border-radius: 26px;
}

.btn-cart i {
    font-size: 12px;
    margin-right: 8px;
}

.btn-cart:hover {
    background: #7a169a;
}

.product-info {
    padding: 15px;
    text-align: left;
    padding-top: 0px;
    /* Text align left (or center if desired) */
}

.product-info h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    font-weight: 400;
    /* Normal font weight */
    text-transform: capitalize;
}

.rating {
    color: var(--accent-color);
    margin-bottom: 10px;
    font-size: 0.8rem;
    /* Smaller stars */
}

/* Achievers Section */
.achievers {
    padding-bottom: 80px;
    text-align: center;
}

.achiever-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns */
    gap: 20px;
    padding: 20px;
}

.achiever-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.achiever-grid img:hover {
    transform: translateY(-5px);
}

/* Ranks Section */
.ranks {
    padding: 80px 0;
    text-align: center;
}

.rank-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
}

.rank-item img {
    height: 100px;
}

/* Grievance Section */
.grievance {
    padding: 80px 0;
    text-align: center;
}

.grievance-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 1000px;
    /* Aligned with text content width */
    margin-left: auto;
    margin-right: auto;
}

.grievance-images img {
    width: 100%;
    max-width: calc(50% - 10px);
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.grievance-text {
    max-width: 1000px;
    margin: 0 auto;
    color: var(--light-text);
}

/* Features Section Updates */
.features {
    background: var(--primary-color);
    padding: 60px 0;
    color: var(--white);
    text-align: center;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.1);
    /* Semi-transparent background */
    backdrop-filter: blur(10px);
    /* Glassmorphism effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    /* Rounded edges */
    padding: 30px 20px;
    text-align: center;
    transition: 0.3s;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.feature-item i {
    font-size: 2rem;
    margin-bottom: 15px;
    /* font-weight: 400; Removed to allow FAS (900) to work */
}

.feature-item p {
    font-weight: 400;
    /* Normal font weight */
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Footer (Reverted) */
footer {
    padding: 80px 0 20px;
    background: var(--secondary-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Reverted to 4 columns */
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    margin-bottom: 25px;
    font-size: 1.3rem;
    color: var(--text-color);
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-col p {
    margin-bottom: 10px;
    color: var(--light-text);
}

.footer-bottom {
    border-top: 1px solid #ddd;
    padding-top: 30px;
    text-align: center;
    /* Centered copyright */
    display: block;
    /* Default block layout */
}

.footer-logo img {
    max-width: 153px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    /* Spacing for social icons */
    justify-content: center;
    /* Center social links */
}

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--primary-color);
    color: var(--white);
}

@media (max-width: 992px) {
    .nav-links {
        display: none;
        /* Mobile menu would go here */
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .stat-grid,
    .feature-grid,
    .footer-grid,
    .achiever-grid {
        /* Added achiever grid responsiveness */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .hero {
        justify-content: center;
        padding-right: 0;
        height: 50vh;
        background-size: cover;
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .stat-grid,
    .footer-grid,
    .achiever-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid {
        display: flex;
        flex-direction: row;
        /* Horizontal scroll */
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 20px;
        /* Space for scrollbar */
        scroll-snap-type: x mandatory;
    }

    .product-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for cleaner look */
    }

    .product-card {
        flex: 0 0 80%;
        /* Show part of next card */
        scroll-snap-align: start;
    }

    .grievance-images {
        flex-direction: column;
        align-items: center;
    }

    .stat-grid {
        /* This forces exactly 2 columns of equal width */
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
        /* Vertical gap 30px, Horizontal gap 15px */
    }

    .stat-item {
        padding: 10px;
    }

    .grievance-images img {
        max-width: 75%;
        /* Ensures the image takes full width of its container */
        height: auto;
        /* Maintains aspect ratio */
    }
}

/* --- Cart Page Styles --- */

.breadcrumb {
    background: #fdf5ff;
    padding: 15px 0;
    margin-bottom: 40px;
}

.breadcrumb p {
    font-size: 0.9rem;
    color: var(--light-text);
}

.breadcrumb a {
    text-decoration: none;
    color: var(--primary-color);
}

.breadcrumb i {
    font-size: 0.7rem;
    margin: 0 10px;
}

.product-detail {
    padding-bottom: 80px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.product-detail .action-row .qty-btn i {
    font-size: 21px
}

/* Gallery */
.featured-image {
    background: #fdf5ff;
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-image img {
    max-width: 100%;
    height: auto;
}

.thumbnail-row {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.thumbnail-row img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    background: #fdf5ff;
}

.thumbnail-row img.active {
    border-color: var(--primary-color);
}

/* Info Detail */
.brand-logo-small {
    margin-bottom: 20px;
    text-align: center;
}

.brand-logo-small img {
    height: 101px;
}

.product-title-large {
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 5px;
}

.product-subtitle {
    color: var(--light-text);
    margin-bottom: 25px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.rating-row .stars {
    color: #ffc107;
}

.product-code {
    color: var(--light-text);
    font-size: 0.9rem;
}

.price-box {
    margin-bottom: 35px;
}

.price-box .mrp {
    color: var(--light-text);
    text-decoration: line-through;
    font-size: 1rem;
    margin-bottom: 5px;
}

.price-box .dp {
    font-size: 2.22rem;
    font-weight: 700;
    color: #000;
}

.action-row {
    margin-bottom: 25px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f4f4f4;
    width: fit-content;
    padding: 10px 20px;
    border-radius: 50px;
}

.qty-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
}

.qty-number {
    font-weight: 600;
    font-size: 1.1rem;
}

.btn-large-cart {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 15px 60px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    width: 100%;
    max-width: 400px;
    justify-content: center;
}

.btn-large-cart:hover {
    background: #7a169a;
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- Cart Page: Tabs Section --- */
.product-tabs {
    padding: 40px 0;
    text-align: center;
}

.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 125px;
    margin-bottom: 30px;
}

.tab-link {
    font-size: 1.2rem;
    color: var(--light-text);
    cursor: pointer;
    position: relative;
    padding-bottom: 10px;
}

.tab-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

.tab-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 0.9rem;
    color: var(--light-text);
    line-height: 1.8;
    text-align: center;
}

/* --- Cart Page: Info Cards Section --- */
.info-cards {
    padding: 60px 0;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info-card {
    background: #fdf5ff;
    /* Light purple similar to design */
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.info-card h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #000;
}

.benefits-list {
    list-style: none;
    padding: 0;
    max-width: 300px;
    margin: 0 auto;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--light-text);
    font-size: 0.95rem;
}

.benefits-list li::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
}

.info-card-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
}

@media (max-width: 768px) {
    .tabs-nav {
        gap: 20px;
        flex-wrap: wrap;
    }

    .info-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Tab Switching Styles --- */
.tab-pane {
    display: none;
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.9rem;
    color: var(--light-text);
    line-height: 1.8;
    text-align: center;
    animation: fadeIn 0.5s;
}

.ranks-content .tab-pane {
    max-width: none;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- About Page Styles --- */
.about-welcome {
    padding: 60px 0;
    text-align: center;
}

.welcome-title {
    font-size: 3rem;
    font-weight: 700;
    color: #912bbc;
    /* Using a solid purple closer to design, or var(--primary-color) if suitable */
    margin-bottom: 10px;
}

.company-name {
    font-size: 1.8rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 60px;
}

.about-image-grid {
    display: flex;
    gap: 15px;
    height: 400px;
    width: 100%;
}

.grid-item {
    background: #d9d9d9;
    /* Light gray placeholder */
    height: 100%;
    border-radius: 2px;
    /* Slight rounding as per image analysis */
}

.large-item {
    width: 35%;
    /* Fixed percentage for large block */
    flex-shrink: 0;
}

.small-item {
    flex: 1;
    /* Distribute remaining space */
}

@media (max-width: 768px) {
    .about-image-grid {
        flex-direction: row;
        /* Horizontal scroll */
        height: auto;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 20px;
        scroll-snap-type: x mandatory;
    }

    .about-image-grid::-webkit-scrollbar {
        display: none;
    }

    .about-image-grid .grid-item {
        display: none;
        /* Hide default grid items to simplify or... */
    }

    .large-item,
    .small-item {
        flex: 0 0 80%;
        height: 250px;
        /* Fixed height for consistency */
        width: auto;
        margin-bottom: 0;
        scroll-snap-align: start;
        border-radius: 10px;
        overflow: hidden;
    }

    .about-image-grid .grid-item {
        display: block;
        /* Show them */
    }
}

.about-welcome .welcome-title {
    color: #912bbc;
}

/* --- About Grid Image Updates --- */
.grid-item {
    background: transparent;
    /* Remove placeholder gray */
    overflow: hidden;
    /* Ensure image fits */
}

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

/* --- About Info Blocks (History, Mission, Vision) --- */
.about-info-blocks {
    padding: 60px 0;
}

.info-block {
    display: flex;
    align-items: center;
    gap: 80px;
    /* Large gap between image and text */
    margin-bottom: 150px;
    /* vertical spacing between blocks */
}

.info-block:last-child {
    margin-bottom: 60px;
}

.row-normal {
    flex-direction: row;
}

.row-reverse {
    flex-direction: row-reverse;
}

.block-content {
    flex: 1;
}

.block-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #912bbc;
    margin-bottom: 20px;
}

.block-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--light-text);
    margin-bottom: 30px;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border: 1px solid #ddd;
    border-radius: 30px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
    background: #fff;
}

.btn-read-more:hover {
    background: #912bbc;
    color: #fff;
    border-color: #912bbc;
}

/* --- Stacked Image Effect --- */
.block-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.stacked-image {
    position: relative;
    width: 350px;
    /* Fixed width for the card stack */
    height: 250px;
    z-index: 1;
}

.stacked-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    position: relative;
    z-index: 3;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transition: 0.3s;
}

.card-1 {
    background: #f3e5f5;
    /* Lightest purple */
    top: 15px;
    left: -15px;
    z-index: 2;
}

.card-2 {
    background: #f8eff9;
    /* Even lighter or slightly different shade */
    top: 30px;
    left: -30px;
    z-index: 1;
}

/* Reverse stack direction for right-aligned images if needed */
.row-reverse .card-1 {
    left: 15px;
}

.row-reverse .card-2 {
    left: 30px;
}

@media (max-width: 900px) {
    .info-block {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        margin-bottom: 100px;
    }

    .info-block.row-reverse {
        flex-direction: column;
    }

    .stacked-image {
        width: 100%;
        max-width: 350px;
    }
}

/* --- Achievers Page Styles --- */
.achievers-header {
    text-align: center;
    padding: 40px 0 20px;
}

.section-subtitle-small {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #912bbc;
    margin-bottom: 5px;
}

.company-subtitle {
    font-size: 1.5rem;
    color: #000;
    font-weight: 400;
    margin-bottom: 40px;
}

.achievers-tabs {
    text-align: center;
    margin-bottom: 50px;
}

.tabs-list {
    display: inline-flex;
    gap: 40px;
}

.tab-item {
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

.tab-item.active {
    color: #912bbc;
    font-weight: 700;
}

.achievers-list {
    padding-bottom: 80px;
}

.achiever-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.achiever-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 15px;
    text-align: center;
    border: 1px solid #f0f0f0;
}

.card-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* Slightly rounded inside card */
    object-fit: cover;
}

.card-info {
    margin-top: 15px;
}

.card-info h3 {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.fast-track-section {
    text-align: center;
    margin-top: 60px;
}

.fast-track-title {
    font-size: 2rem;
    color: #912bbc;
    font-weight: 700;
}

@media (max-width: 900px) {
    .achiever-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .achiever-card-grid {
        grid-template-columns: 1fr 1fr;
    }


    .tabs-list {
        flex-direction: column;
        gap: 15px;
    }

    .brand-grid {
        gap: 10px;
        /* Tighter spacing for small screens */
    }

    .brand-grid img {
        max-height: 60px;
        /* Smaller height so they fit side-by-side */
    }
}

/* --- CSS-Only Tabs for Achievers Page --- */

/* Hide Radio Buttons */
input[name="achiever-tab"] {
    display: none;
}

/* Tabs Container */
.achievers-tabs-container {
    padding-bottom: 60px;
}

.achievers-tabs-container .tabs-list {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

/* Tab Labels (act as buttons) */
.achievers-tabs-container .tab-item {
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

/* Hide all tab panes by default */
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

/* Keyframes for smooth fade */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logic: When radio #tab-retail is checked... */

/* 1. Style the corresponding label */
#tab-retail:checked~.tabs-list label[for="tab-retail"],
#tab-tsb:checked~.tabs-list label[for="tab-tsb"],
#tab-mentor:checked~.tabs-list label[for="tab-mentor"] {
    color: #912bbc;
    font-weight: 700;
    border-color: #912bbc;
}

/* 2. Show the corresponding content content */
#tab-retail:checked~.achievers-content #content-retail,
#tab-tsb:checked~.achievers-content #content-tsb,
#tab-mentor:checked~.achievers-content #content-mentor {
    display: block;
}

@media (max-width: 600px) {
    .achievers-tabs-container .tabs-list {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- Ranks Page Styles --- */

/* Reuse styles where possible */
.ranks-header {
    text-align: center;
    padding: 40px 0 20px;
}

/* Tabs Container (reuse similar structure but specific IDs) */
.ranks-tabs-container {
    padding-bottom: 60px;
}

.ranks-tabs-container .tabs-list {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.ranks-tabs-container .tab-item {
    font-size: 1rem;
    color: #888;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

/* Hide Radio Buttons */
input[name="rank-tab"] {
    display: none;
}

/* Active State Logic for Ranks */
#tab-supreme:checked~.tabs-list label[for="tab-supreme"],
#tab-prime:checked~.tabs-list label[for="tab-prime"],
#tab-normal:checked~.tabs-list label[for="tab-normal"] {
    color: #912bbc;
    font-weight: 700;
    border-color: #912bbc;
}

/* Show Content Logic for Ranks */
#tab-supreme:checked~.ranks-content #content-supreme,
#tab-prime:checked~.ranks-content #content-prime,
#tab-normal:checked~.ranks-content #content-normal {
    display: block;
}

/* Ranks Grid & Card Styles */
.rank-card-grid {
    display: grid;
    /* Use auto-fit with a minimum width that allows expansion */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.rank-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border: 1px solid #e0cfe7;
}

.rank-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.rank-icon-box {
    width: 50px;
    height: 50px;
    background: #f3e5f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #912bbc; */
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid #eab8ff;
    /* Prevent icon shrinking */
}

.rank-icon-box .fa-star {
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.5rem;
    display: block;
    background: linear-gradient(135deg, #600174 30%, #380542 0%, #B402DA 100%) text;
}

.rank-title-group {
    min-width: 0;
    flex-grow: 1;
    text-align: left;
    /* Allow title group to take available space */
}

.rank-title-group h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4a1d63;
    margin-bottom: 2px;
    white-space: nowrap !important;
    /* Force one line */
}

.rank-subtitle {
    font-size: 0.9rem;
    color: #888;
}

.rank-divider {
    height: 1px;
    background: #F9E9FF;
    margin-bottom: 20px;
}

.rank-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rank-stat {
    display: flex;
    flex-direction: column;
}

.rank-stat.text-right {
    text-align: right;
    align-items: flex-end;
}

.stat-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #606060;
    text-align: left;
}

@media (max-width: 900px) {
    .rank-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .rank-card-grid {
        grid-template-columns: 1fr;
    }

    .ranks-tabs-container .tabs-list {
        flex-direction: column;
        gap: 15px;
    }
}

/* --- Ranks Modal Styles --- */

.ranks-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Dimmed background */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.ranks-modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.ranks-modal-content {
    background: #fdf5ff;
    /* Light purple tint similar to reference */
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    /* Wide enough for 4 cols */
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.modal-header h2 {
    color: #912bbc;
    font-size: 1.5rem;
    font-weight: 700;
}

.close-modal {

    position: absolute;
    right: 0;
    top: 5px;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: #555;
    transition: 0.2s;
    border: 1px solid black;
    border-radius: 50%;
    min-width: 29px;
}

.close-modal:hover {
    color: #000;
}

/* Modal Grid */
.modal-achiever-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.modal-achiever-card {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    transition: transform 0.2s;
}

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

.modal-achiever-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    /* Ensure full image visibility */
    border-radius: 10px;
    margin-bottom: 15px;
    background: #fff;
}

.modal-achiever-card p {
    font-weight: 500;
    font-size: 0.9rem;
    color: #000;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-achiever-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .modal-achiever-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Grievance Page Styles --- */

.grievance-header {
    text-align: center;
    padding: 40px 0 20px;
}

/* Redressal Section */
.redressal-section {
    padding: 50px 0;
}

.section-heading {
    text-align: center;
    font-size: 2rem;
    color: #000;
    margin-bottom: 50px;
    font-weight: 500;
}

.redressal-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.redressal-image {
    flex: 1;
    position: relative;
    min-height: 400px;
    background: transparent;
    /* Remove gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Space between images */
}

.redressal-image img.main-img {
    width: 32%;
    border-radius: 20px;
    box-shadow: none;
    /* Reference looks clean */
    transform: none;
    /* Reset transform */
    object-fit: cover;
}

.redressal-image img.overlay-img {
    width: 32%;
    position: relative;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    right: auto;
    object-fit: cover;
    top: 67px;
}

.redressal-text {
    flex: 1;
}

.redressal-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1rem;
    text-align: justify;
}

/* How It Works Section */
.how-it-works-section {
    padding: 60px 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.process-card {
    background: #6a0d85;
    /* Deep Purple */
    color: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s;
}

.process-card:hover {
    transform: translateY(-10px);
}

.process-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
}

.process-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.process-card p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* Complaint Form Section */
.complaint-form-section {
    padding: 60px 0 100px;
    display: flex;
    justify-content: center;
}

.form-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 50px;
    width: 100%;
    max-width: 800px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h3 {
    color: #912bbc;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.form-header p {
    color: #666;
    font-size: 0.9rem;
}

.complaint-form .form-group {
    margin-bottom: 25px;
}

.complaint-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
    font-size: 0.95rem;
}

.complaint-form input,
.complaint-form textarea {
    width: 100%;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    transition: 0.3s;
}

.complaint-form input:focus,
.complaint-form textarea:focus {
    border-color: #912bbc;
    background: #fff;
    outline: none;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(318deg, #912bbc 0%, #6a0d85 100%);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 50px;
    /* font-size: 1.1rem; */
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-submit:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(145, 43, 188, 0.3);
}

@media (max-width: 900px) {
    .redressal-content {
        flex-direction: column;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .process-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 30px 20px;
    }

    .modal-achiever-grid {
        grid-template-columns: 1fr 1fr;
    }

    .redressal-text,
    .how-it-works-section {
        padding: 20px;
    }
}

/* --- Login Page Styles --- */

.login-page {
    background: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

/* Background blob effect */
.login-page::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: url('assets/img/hero-bg.png') no-repeat bottom left; */
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
}

.login-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: url('.././img/login-bg.jpg') center/cover no-repeat;
    clip-path: ellipse(70% 63% at 39% 50%);
    z-index: 0;
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

.login-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 500px;
    border: 1px solid var(--primary-color);
}

.login-image {
    flex: 1;
    background: #2d0b44;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-form-section {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-form-section h2 {
    color: #9c27b0;
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
    background: #f4f4f4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 5px 15px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.input-group:focus-within {
    border-color: #9c27b0;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(156, 39, 176, 0.1);
}

.input-group i {
    color: #9c27b0;
    font-size: 1.1rem;
    margin-right: 10px;
}

.input-group input {
    border: none;
    background: transparent;
    padding: 12px 10px;
    width: 100%;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: #333;
}

.toggle-password {
    font-size: 0.8rem;
    color: #9c27b0;
    cursor: pointer;
    font-weight: 600;
    margin-left: 10px;
    white-space: nowrap;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
}

.forgot-password {
    color: #9c27b0;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.forgot-password:hover {
    color: #7b1fa2;
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #ab47bc, #7b1fa2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 39, 176, 0.4);
}

.signup-link {
    text-align: center;
    margin-top: 25px;
    font-size: 0.9rem;
    color: #666;
}

.signup-link a {
    color: #9c27b0;
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
    transition: 0.3s;
}

.signup-link a:hover {
    color: #7b1fa2;
    text-decoration: underline;
}

.checkout .product-card:first-child,
.checkout .product-card:last-child {
    margin-top: 0px;
}

.checkout.shopping {
    margin-top: 0px;
    padding-top: 0px;
}

@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
        max-width: 400px;
        margin: 0 auto;
    }

    .login-image {
        display: none;
    }

    .login-form-section {
        padding: 40px 30px;
    }

    .login-page::after {
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        clip-path: none;
    }
}

/* --- Checkout / Cart Updates --- */

.cart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.cart-count {
    font-size: 1.1rem;
    color: var(--light-text);
    font-weight: 600;
}

.cart-summary-container {
    margin-top: 50px;
    display: flex;
    justify-content: flex-end;
    /* Align to right? Or center? Standard is usually separate or full width on mobile. Let's make it block for now but styled nicely. User said "bottom side", so full width or centered usually works best if grid is above. */
    /* flexible approach */
    width: 100%;
}

.cart-summary {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
    width: 100%;
    max-width: 400px;
    /* Limit width like a sidebar/card */
    margin-left: auto;
    /* Push to right if container is flex/block */
}

.summary-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--light-text);
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1rem;
}

.summary-row.total-row {
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 15px;
    border-top: 2px dashed #eee;
    padding-top: 15px;
}

.text-green {
    color: #4caf50;
}

.summary-footer {
    margin-top: 25px;
}

.savings-text {
    font-size: 0.9rem;
    color: #4caf50;
    font-weight: 600;
    margin-bottom: 15px;
}

.btn-checkout {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-checkout:hover {
    background: #7a169a;
}

@media (max-width: 768px) {
    .cart-summary-container {
        justify-content: center;
    }

    .cart-summary {
        margin: 0 auto;
        max-width: 100%;
    }
}

/* --- Revised Cart Summary (Pill Shape) --- */

.cart-summary-container {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    /* Centered as per image usually implies, or it might be full width container with centered pill */
    width: 100%;
}

.cart-summary-pill {
    background: var(--white);
    border-radius: 100px;
    /* High value for pill shape */
    box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
    /* Slightly stronger shadow for floating effect */
    padding: 15px 20px;
    width: 100%;
    max-width: 600px;
    /* Adjust width to match the look, maybe matches container width or slightly less */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
    /* Optional definition */
}

.cart-summary-pill .total-text {
    font-size: 1.5rem;
    font-weight: 800;
    /* Bold as per image */
    color: #000;
}

.cart-summary-pill .btn-buy-now {
    background: #6a0d85;
    /* Deep purple from image */
    /* Or gradient if needed, image looked solid or slight gradient */
    background: linear-gradient(to right, #600174, #7d1296);
    color: var(--white);
    border: none;
    padding: 11px 50px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(106, 13, 133, 0.4);
    text-transform: uppercase;
    transition: 0.3s;
}

.cart-summary-pill .btn-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(106, 13, 133, 0.5);
}

@media (max-width: 768px) {
    .cart-summary-pill {
        flex-direction: column;
        gap: 20px;
        border-radius: 20px;
        /* Less pill-like on mobile maybe? Or keep it */
        padding: 20px;
        text-align: center;
    }

    .cart-summary-pill .btn-buy-now {
        width: 100%;
    }
}

/* --- Signup Page Styles --- */

.signup-page {
    /* Using the styles to ensure full height and no margin */
    height: 100vh;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

.signup-container {
    display: flex;
    height: 100%;
    width: 100%;
}

.top-login-link {
    position: absolute;
    top: 100px;
    left: 100px;
    color: #fff;
    font-size: 0.9rem;
    z-index: 10;
}

.top-login-link a {
    color: var(--primary-color);
    /* Magenta/Purple accent */
    font-weight: 700;
    margin-left: 10px;
    text-decoration: none;
}

/* Left Side */
.signup-left {
    width: 70%;
    background: url('../img/login-bg.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
}

.signup-overlay {
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, #60017487 50%, #44324b);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

/* Right Side */
.signup-right {
    width: 35%;
    background: #fff;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    margin-left: -40px;
    /* Overlap effect */
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align to top */
    padding-top: 20px;
    padding-bottom: 20px;
    /* Add spacing from top */
    position: relative;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);

    overflow-y: scroll;
    overflow-x: hidden;
}

.signup-form-wrapper {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

/* Progress Bar */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.step {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
}

.step.active-purple {
    background: var(--primary-color);
    /* Bright purple */
    width: 14px;
    height: 14px;
}

.step-line {
    width: 30px;
    height: 2px;
    background: #ccc;
    margin: 0 5px;
}

.signup-title {
    text-align: center;
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/* Form Styles */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 15px;
    background: #f4f4f4;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    color: #555;
    outline: none;
    font-family: inherit;
}

.form-control:focus {
    background: #eaeaea;
}

/* Custom Select styling touches if needed */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

/* Date input Styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    font-size: 1.2rem;
}

.btn-signup {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    ;
    /* Bright Purple */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-signup:hover {
    background: #aa00c7;
}

.signup-footer-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #333;
}

.signup-footer-link a {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    margin-left: 5px;
}

@media (max-width: 992px) {
    .signup-container {
        flex-direction: column;
    }

    .signup-left {
        width: 100%;
        height: 40vh;
        display: none;
    }

    .signup-right {
        width: 100%;
        height: 60vh;
        margin-left: 0;
        margin-top: -40px;
        /* Overlap upwards */
        border-radius: 40px 40px 0 0;
    }

    .lock-image-container {
        display: none;
        /* Hide lock on small screens to save space or adjust */
    }

    .neon-lock {
        max-height: 200px;
    }
}

@media (max-width: 600px) {
    .signup-right {
        height: 100%;
        margin-top: 0;
        border-radius: 40px;
    }

    .signup-container {
        background: var(--secondary-color);
        padding: 15px;
    }
}

/* --- Multi-Step Form Styles --- */

.form-step {
    display: none;
    animation: fadeIn 0.5s;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.col-half {
    width: 48%;
}

.btn-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.btn-prev {
    background: #ccc;
    color: #333;
}

.btn-prev:hover {
    background: #bbb;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 15px;
    color: var(--primary-color);
    z-index: 2;
    /* Ensure icon is above input */
}

.form-control.with-icon {
    padding-left: 45px;
    /* Make space for icon */
}

/* Adjust button width in group */
.btn-group .btn-signup {
    flex: 1;
    margin-top: 0;
}


.breadcrumb.shopping-breadcrumb {
    margin-bottom: 0;
}

.shopping-banner-container {
    position: relative;
    width: 100%;
    height: 700px;
    /* Set your desired banner height */
    overflow: hidden;
}

.shopping-banner-img {
    width: 100%;
    height: 100%;
    /* This mimics background-size: cover for an <img> tag */
    object-fit: cover;
    /* Ensures the center of the image stays visible */
    object-position: center;
    display: block;
}

/* --- Mobile Menu Styles --- */

.mobile-menu-btn {
    display: none;
    /* Hidden by default */
    font-size: 1.1rem;
    color: #333;
    cursor: pointer;
    margin-left: 15px;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    /* Behind sidebar, above everything else */
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    /* Slide from right? User image shows X on right, list aligned left. Standard sidebar. */
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.mobile-menu-sidebar.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.mobile-logo img {
    height: 40px;
    /* Adjust as needed */
}

.close-btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

.mobile-nav-links {
    list-style: none;
    padding: 20px;
    overflow-y: auto;
}

.mobile-nav-links li {
    border-bottom: 1px solid var(--secondary-color);
}

.mobile-nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
}

.mobile-nav-links li a.active {
    color: #912bbc;
    /* Primary color */
}

.mobile-nav-links li a:hover {
    color: #912bbc;
}

/* Dropdown Styles */
.mobile-dropdown {
    display: none;
    list-style: none;
    padding-left: 20px;
    background: #fdf5ff;
    /* Slight tint for dropdown */
    border-radius: 5px;
    margin-bottom: 10px;
}

.has-dropdown.active .mobile-dropdown {
    display: block;
}

.has-dropdown.active>a {
    color: #912bbc;
}

.has-dropdown.active>a i {
    transform: rotate(180deg);
}

.mobile-dropdown li {
    border-bottom: none;
}

.mobile-dropdown li a {
    padding: 10px 0;
    font-size: 0.95rem;
    color: #555;
}

/* Media Query Updates */
@media (max-width: 992px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
    }
}

/* --- Search Modal Styles --- */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: flex-start;
    /* Align to top */
    padding-top: 100px;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.search-modal-overlay.active {
    opacity: 1;
}

.search-modal-content {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    animation: slideDown 0.3s forwards;
}

.search-modal-overlay.active .search-modal-content {
    transform: translateY(0);
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: var(--light-text);
    transition: 0.3s;
    width: 35px;
    text-align: center;
    height: 35px;
    line-height: 1;
}

.close-modal:hover {
    color: var(--primary-color);
}

.search-modal-content h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
    text-align: center;
}

#site-search {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 30px;
    outline: none;
    transition: 0.3s;
}

#site-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(145, 43, 188, 0.2);
}

.search-results {
    margin-top: 20px;
    max-height: 300px;
    overflow-y: auto;
}

.result-item {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item a {
    text-decoration: none;
    color: var(--text-color);
    display: block;
    font-weight: 500;
}

.result-item a:hover {
    color: var(--primary-color);
    padding-left: 5px;
    /* Slight movement on hover */
}

.no-results {
    text-align: center;
    color: var(--light-text);
    font-style: italic;
    margin-top: 10px;
}

/*internal  page css*/

.rank-modal-header{
    text-align:center;
    margin-bottom:25px;
}
.rank-modal-header h2{
    font-size:28px;
    font-weight:700;
    margin-bottom:5px;
}
.rank-modal-sub{
    color:#777;
    font-size:14px;
}

.rank-members-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:22px;
}

.member-card{
    background:#fff;
    border-radius:16px;
    padding:22px 15px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:.25s;
    position:relative;
}

.member-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,0.18);
}

.member-avatar{
    width:95px;
    height:95px;
    margin:0 auto 15px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #f3f4f6;
}
.member-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.member-info h3{
    font-size:17px;
    margin-bottom:4px;
    font-weight:600;
}

.member-rank{
    font-size:13px;
    color:#6b7280;
    background:#f1f5f9;
    padding:4px 10px;
    border-radius:20px;
}

.spinner {
    width:40px;
    height:40px;
    border:4px solid #eee;
    border-top:4px solid #4f46e5;
    border-radius:50%;
    animation: spin .8s linear infinite;
    margin:auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.custom-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.custom-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.custom-modal-box {
    position: relative;
    width: 90%;
    max-width: 1100px;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.35);
    animation: modalPop .25s ease;
}
@keyframes modalPop {
    from { transform: scale(.85) translateY(40px); opacity:0 }
    to { transform: scale(1) translateY(0); opacity:1 }
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: none;
    font-size: 28px;
    cursor: pointer;
}
.custom-modal.show {
    display: flex;
}.swiper-button-next, .swiper-rtl .swiper-button-prev {
        display: none;
    }.swiper-button-prev, .swiper-rtl .swiper-button-next {
        display: none;
    }.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
        display: none;
    }
    .topCollectionSlider{
        padding: 0 5px;
    }
    .topCollectionSlider .swiper-slide{
        height: auto;
    }
    @media(max-width:480px){
        .topCollectionSlider .product-card{
            margin:0;
        }
    }