/* --- Shreedha Plywood Multi-Page Core Stylesheet --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Montserrat:wght@800;900&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --brand-color: #791627;
    --brand-dark: #4a0c16;
    --text-color: #222222;
    --light-text: #666666;
    --white: #ffffff;
    --bg-light: #fafafa;
    --accent-gold: #c6a060;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Poppins', sans-serif;
    --font-accent: 'Montserrat', sans-serif;
}

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

/* --- Normal Website Scroll --- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-light);
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
}

h2.section-title {
    font-size: 2.6rem;
    color: var(--brand-color);
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
}

h2.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--accent-gold);
    margin: 15px auto 30px auto;
}

/* --- Header & Navigation --- */
header {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(121, 22, 39, 0.08);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    text-decoration: none;
}

.logo h2 {
    font-size: 1.8rem;
    color: var(--brand-color);
    margin: 0;
    letter-spacing: 1px;
}

.logo h2 span {
    color: var(--text-color);
    font-weight: 400;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 22px;
}

.nav-links li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease;
    padding: 6px 0;
    position: relative;
}

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

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--brand-color);
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
    width: 100%;
}

.btn-header {
    background-color: var(--brand-color);
    color: var(--white);
    padding: 10px 22px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.btn-header:hover {
    background-color: var(--brand-dark);
    box-shadow: 0 4px 15px rgba(121, 22, 39, 0.3);
}


/* --- Header Logo Styling --- */
.header-logo {
    max-height: 55px; /* Logo ki height header ke hisaab se fix ki hai */
    width: auto;      /* Width apne aap proportional rahegi */
    display: block;
    transition: transform 0.3s ease;
}

.header-logo:hover {
    transform: scale(1.05); /* Mouse le jaane par thoda sa pop hoga */
}

/* Mobile par logo thoda aur chhota ho jaye taaki menu fit aaye */
@media (max-width: 768px) {
    .header-logo {
        max-height: 40px;
    }
}

/* --- Page Hero Headers --- */
.page-banner {
    background: linear-gradient(135deg, rgba(121, 22, 39, 0.95), rgba(40, 5, 10, 0.9)), url('https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    padding: 80px 0;
    text-align: center;
    color: var(--white);
}

.page-banner h1 {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 10px;
}

.page-banner p {
    font-size: 1.1rem;
    color: var(--accent-gold);
    letter-spacing: 1px;
}

/* --- Hero Slider (Sliding Animation) --- */
.hero {
    height: 82vh;
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease-in-out; /* Smooth Left-Right Slide */
}

/* --- Slider Arrow Buttons --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(121, 22, 39, 0.4); /* Subtle brand color bg */
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.slider-btn:hover {
    background: var(--brand-color);
    border-color: var(--brand-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.prev-btn { left: 25px; }
.next-btn { right: 25px; }

/* --- Buttons --- */
.btn-premium {
    background-color: transparent;
    color: var(--brand-color);
    border: 2px solid var(--brand-color);
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-premium:hover {
    background-color: var(--brand-color);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(121, 22, 39, 0.25);
}

.btn-solid {
    background-color: var(--brand-color);
    color: var(--white);
    border: 2px solid var(--brand-color);
}

.btn-solid:hover {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

/* --- Features Section --- */
.features {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

.feature-box {
    background: var(--white);
    padding: 35px 25px;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    flex: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(121, 22, 39, 0.15);
}

.feature-box i {
    font-size: 2.4rem;
    color: var(--brand-color);
    margin-bottom: 15px;
}

.feature-box h3 {
    font-size: 1.25rem;
    color: var(--brand-color);
    margin-bottom: 10px;
}

/* --- Stamp Effect for ISI --- */
.stamp-card {
    position: relative;
    overflow: hidden;
}

.stamp-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(3) rotate(-15deg);
    opacity: 0;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--brand-color);
    border: 3px dashed var(--brand-color);
    padding: 6px 18px;
    letter-spacing: 3px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stamp-card:hover .stamp-overlay {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1) rotate(-12deg);
}

/* --- Termite Crawling Effect --- */
.termite-card {
    position: relative;
    overflow: hidden;
}

.termite-card .termite-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background: rgba(121, 22, 39, 0.03);
}

.termite-card:hover .termite-container {
    opacity: 1;
}

.termite-card i, .termite-card h3, .termite-card p {
    position: relative;
    z-index: 2;
}

.termite-bug {
    position: absolute;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23791627' d='M100,20 C96,20 93,24 93,28 C93,33 96,37 98,40 C94,43 90,50 90,58 C90,72 95,78 95,85 C95,90 92,93 88,95 C82,88 72,82 62,80 C58,79 56,83 58,86 C66,91 74,97 80,105 C75,108 68,109 60,108 C56,107 54,111 57,114 C64,117 72,118 78,118 C72,125 64,132 55,138 C51,141 53,145 57,144 C68,139 78,130 85,121 C88,128 92,136 92,145 C92,170 95,195 100,195 C105,195 108,170 108,145 C108,136 112,128 115,121 C122,130 132,139 143,144 C147,145 149,141 145,138 C136,132 128,125 122,118 C128,118 136,117 143,114 C146,111 144,107 140,108 C132,109 125,108 120,105 C126,97 134,91 142,86 C144,83 142,79 138,80 C128,82 118,88 112,95 C108,93 105,90 105,85 C105,78 110,72 110,58 C110,50 106,43 102,40 C104,37 107,33 107,28 C107,24 104,20 100,20 Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
    animation: crawlBug 3s infinite linear;
}

@keyframes crawlBug {
    0% { transform: translate(-10px, 20px) rotate(35deg); opacity: 0; }
    20% { opacity: 0.9; }
    75% { opacity: 0.9; }
    100% { transform: translate(240px, -70px) rotate(35deg); opacity: 0; }
}

/* --- Waterproof Rain Effect --- */
.water-proof-card {
    position: relative;
    overflow: hidden;
}

.water-proof-card .rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    background: linear-gradient(to bottom, rgba(121, 22, 39, 0.05), rgba(0, 100, 200, 0.08));
}

.water-proof-card:hover .rain-container { opacity: 1; }
.water-proof-card i, .water-proof-card h3, .water-proof-card p { position: relative; z-index: 2; }

.drop {
    position: absolute;
    background: linear-gradient(transparent, #791627);
    width: 2px;
    height: 15px;
    opacity: 0.6;
    animation: fall 0.6s linear infinite;
    border-radius: 50%;
}

@keyframes fall {
    0% { transform: translateY(-20px); opacity: 0.8; }
    100% { transform: translateY(220px); opacity: 0.2; }
}

/* --- 3D Gold USP Section --- */
.usp-warranty-clean {
    background: transparent;
    padding: 60px 15px;
    margin: 30px auto;
    text-align: center;
    max-width: 1100px;
}

.badge-tag {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-color);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 15px;
    background: rgba(121, 22, 39, 0.06);
    padding: 7px 20px;
    border-radius: 50px;
    border: 1px solid rgba(121, 22, 39, 0.2);
}

.gold-clean-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 15px 0 20px 0;
    line-height: 1.1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
}

.gold-clean-text .char {
    display: inline-block;
    background: linear-gradient(180deg, #ffe28a 0%, #d4af37 40%, #aa771c 70%, #fbf5b7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    opacity: 0;
    transform: scale(2.8) translateY(-10px);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    white-space: pre;
}

.gold-clean-text.animated .char {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.usp-description {
    font-size: 1.05rem;
    color: #555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
}

/* --- Counter Section --- */
.counters {
    display: flex;
    justify-content: space-around;
    background: var(--brand-color);
    color: var(--white);
    padding: 50px 0;
    border-radius: 6px;
    margin: 40px 0;
}

.counter-box {
    text-align: center;
}

.counter-box h3 {
    font-size: 3rem;
    color: var(--accent-gold);
    margin-bottom: 5px;
}

.counter-box p {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Cards & Grid Layouts --- */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.card {
    background: var(--white);
    border-radius: 6px;
    padding: 35px 25px;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(121, 22, 39, 0.1);
    border-color: #ffd2dc;
}

/* --- Footer (Brand Color & Floating Top Edge) --- */
footer {
    background-color: var(--brand-color); /* Footer ab Maroon color ka hoga */
    color: rgba(255, 255, 255, 0.85); /* Text thoda off-white for readability */
    padding: 70px 0 0 0;
    margin-top: 80px;
    
    /* Floating Top Edge Effect */
    border-top-left-radius: 50px; 
    border-top-right-radius: 50px;
    box-shadow: 0 -15px 40px rgba(121, 22, 39, 0.25); /* Upar ki taraf ek soft glowing shadow */
    position: relative;
    z-index: 10;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 50px;
}

.footer-info h3, .footer-col h3 {
    color: var(--white);
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-family: var(--font-heading);
}

.footer-links {
    list-style: none;
}

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

.footer-links li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Hover karne par text Gold hoga aur thoda aage slide hoga */
.footer-links li a:hover {
    color: var(--accent-gold);
    transform: translateX(5px); 
}

.footer-col p i {
    color: var(--accent-gold); /* Icons ko gold color diya hai */
    margin-right: 8px;
}

.copyright {
    background-color: var(--brand-dark); /* Copyright strip aur dark maroon hogi */
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* Mobile Responsiveness for Footer */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    footer {
        border-top-left-radius: 30px; 
        border-top-right-radius: 30px;
    }
}

/* --- Responsive Styling --- */
@media (max-width: 992px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .gold-clean-text { font-size: 2.4rem; }
}

@media (max-width: 768px) {
    .features, .counters, .grid-3 { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .nav-links { display: none; }
    .hero-content h1 { font-size: 2.2rem; }
    .gold-clean-text { font-size: 1.5rem; letter-spacing: 1px; }
    .footer-content { grid-template-columns: 1fr; }
}

/* --- Splash Screen / Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white); /* White background to match logo */
    z-index: 99999; /* Ensures it stays on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fades out the entire white screen at 4.5 seconds */
    animation: fadeOutPreloader 0.5s ease-in-out 4.5s forwards;
}

.preloader-logo {
    width: 350px; /* Logo ka size */
    max-width: 80%;
    /* 1. Zoom in/fade in hoga. 2. Maroon glow ke sath pulse karega */
    animation: logoEntrance 1s ease-out forwards, logoPulse 2s ease-in-out 1s infinite;
}

/* Animations */
@keyframes logoEntrance {
    0% { transform: scale(0.6); opacity: 0; }
    80% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes logoPulse {
    0% { filter: drop-shadow(0 0 0px rgba(121, 22, 39, 0)); }
    50% { filter: drop-shadow(0 0 25px rgba(121, 22, 39, 0.4)); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 0px rgba(121, 22, 39, 0)); }
}

@keyframes fadeOutPreloader {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* --- Uses / Applications Section Grid (Premium Hover Animation) --- */
.uses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.use-card {
    background: var(--white);
    border: 1px solid rgba(121, 22, 39, 0.1);
    padding: 35px 20px;
    text-align: center;
    border-radius: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Background animation ko box ke bahar jaane se rokega */
    z-index: 1;
}

/* Hover ke time Maroon color ka sweep effect (Peeche se upar aayega) */
.use-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--brand-color);
    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth bounce effect */
    z-index: -1;
}

.use-card:hover::before {
    height: 100%; /* Cursor aane par background poora bhar jayega */
}

.use-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(121, 22, 39, 0.15);
    border-color: var(--brand-color);
}

.use-card i {
    font-size: 2.8rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
    display: inline-block;
    transition: all 0.5s ease;
}

/* Hover par Icon 3D spin hoga aur White ho jayega */
.use-card:hover i {
    color: var(--white);
    transform: scale(1.15) rotateY(360deg); 
}

.use-card h4 {
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

/* Hover par Text White ho jayega */
.use-card:hover h4 {
    color: var(--white);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .uses-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Mobile Responsiveness for Uses Grid */
@media (max-width: 992px) {
    .uses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* --- About Brand Section (Home Page - Left Image & Right Text) --- */
.about-brand-section {
    background-color: var(--brand-color); /* Maroon Background */
    padding: 80px 0;
    margin: 30px 0 60px 0;
}

.about-brand-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-brand-image {
    flex: 1;
}

.about-brand-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); /* Image ke peeche slight shadow */
    display: block;
}

.about-brand-content {
    flex: 1;
    color: var(--white);
}

.about-brand-content h2.section-title {
    color: var(--white); /* Heading White */
    text-align: left;
}

.about-brand-content h2.section-title::after {
    margin: 15px 0 30px 0;
    background-color: var(--accent-gold); /* Gold line maroon par bahut premium lagegi */
}

.about-brand-content p {
    color: rgba(255, 255, 255, 0.9); /* Paragraph text slightly off-white for readability */
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* White Button for Maroon Background */
.btn-white-outline {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-white-outline:hover {
    background-color: var(--white);
    color: var(--brand-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsiveness for this section */
@media (max-width: 992px) {
    .about-brand-container {
        flex-direction: column;
        text-align: center;
    }
    .about-brand-content h2.section-title {
        text-align: center;
    }
    .about-brand-content h2.section-title::after {
        margin: 15px auto 30px auto;
    }
}

/* --- Actual Product Images styling (Cards) --- */
.product-img {
    width: 100%;
    height: 240px; /* Fix height taaki teeno cards barabar lagein */
    object-fit: contain; /* Image stretch na ho, apne original shape me fit ho */
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.15)); /* Plywood/Doors par real 3D shadow */
}

/* Jab mouse card par jayega toh image thodi upar uthegi aur badi hogi */
.card:hover .product-img {
    transform: scale(1.08) translateY(-10px);
    filter: drop-shadow(0 20px 25px rgba(121, 22, 39, 0.2)); /* Shadow maroon tint me change hogi */
}

/* --- Footer Logo Styling --- */
.footer-logo {
    max-width: 220px; /* Logo ki width footer ke hisaab se set ki hai */
    height: auto;
    margin-bottom: 20px; /* Neeche wale text se thoda gap */
    display: block;
}

@media (max-width: 768px) {
    .footer-logo {
        margin: 0 auto 20px auto; /* Mobile par logo ko center karne ke liye */
    }
}



/* =========================================
   ABOUT US PAGE STYLES
========================================= */

/* --- About Grid (Text & Vision) --- */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
}

.about-text p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.vision-box {
    background: var(--bg-light);
    padding: 30px;
    border-left: 4px solid var(--accent-gold);
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.vision-box:hover {
    transform: translateX(10px);
}

.vision-box i {
    font-size: 2rem;
    color: var(--brand-color);
    margin-bottom: 15px;
}

.vision-box h3 {
    color: var(--brand-dark);
    margin-bottom: 10px;
}

.mt-4 {
    margin-top: 25px;
}

/* --- Manufacturing Process Grid --- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.process-step {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-10px);
    border-color: var(--accent-gold);
}

.step-icon {
    width: 70px;
    height: 70px;
    background: var(--white);
    color: var(--brand-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    margin: 0 auto 20px auto;
    transition: all 0.5s ease;
}

.process-step:hover .step-icon {
    background: var(--accent-gold);
    color: var(--white);
    transform: rotateY(360deg);
}

.process-step h4 {
    color: var(--accent-gold);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.process-step p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* --- Terms & Privacy Content --- */
.terms-content h3 {
    color: var(--brand-color);
    margin: 25px 0 10px 0;
    font-size: 1.3rem;
}

.terms-content p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* --- Mobile Responsiveness for About Page --- */
@media (max-width: 992px) {
    .about-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .process-grid { grid-template-columns: 1fr; }
    .about-text h2.section-title { text-align: center; }
    .about-text h2.section-title::after { margin: 15px auto 30px auto; }
}

/* --- Creative Agency Style Animated Stats Section --- */
.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 240, 242, 0.95));
    padding: 45px 30px;
    border-radius: 16px;
    border: 1px solid rgba(121, 22, 39, 0.15);
    box-shadow: 0 20px 40px rgba(121, 22, 39, 0.06);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Background Glowing Ambient Light Effect */
.stats-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
    pointer-events: none;
    animation: rotateGlow 10s linear infinite;
}

@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.stat-box {
    text-align: center;
    padding: 20px 10px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid rgba(121, 22, 39, 0.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* ==========================================================
   CREATIVE AGENCY ABOUT US STYLES (Minimal & Premium)
========================================================== */

/* --- Agency Visual Split Grid --- */
.agency-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 70px;
}

.agency-about-img-wrapper {
    position: relative;
}

.creative-fac-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(121, 22, 39, 0.15);
    transition: transform 0.5s ease;
}

.creative-fac-img:hover {
    transform: scale(1.02);
}

/* Floating Experience Badge on Image */
.experience-badge-floating {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: var(--brand-color);
    color: var(--white);
    padding: 25px 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
    border: 2px solid var(--accent-gold);
}

.experience-badge-floating h3 {
    font-size: 2.2rem;
    color: var(--accent-gold);
    font-family: var(--font-heading);
    margin-bottom: -5px;
}

.experience-badge-floating p {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.9);
}

.sub-heading-tag {
    display: inline-block;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.agency-about-content p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* --- Core Pillars Grid --- */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.pillar-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid rgba(121, 22, 39, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-color);
    transition: height 0.3s ease;
}

.pillar-card:hover::before {
    height: 100%;
    opacity: 0.03;
}

.pillar-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-color);
    box-shadow: 0 20px 40px rgba(121, 22, 39, 0.1);
}

.pillar-icon {
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.pillar-card:hover .pillar-icon {
    transform: scale(1.15) rotate(10deg);
    color: var(--brand-color);
}

.pillar-card h3 {
    color: var(--brand-dark);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-family: var(--font-heading);
}

.pillar-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Responsive adjustments for agency layout */
@media (max-width: 992px) {
    .agency-about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .experience-badge-floating {
        bottom: 20px;
        right: 20px;
        padding: 15px 20px;
    }
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Super Animated Parallax Showcase Banner --- */
.visual-showcase-parallax {
    background: linear-gradient(135deg, rgba(40, 5, 10, 0.85), rgba(121, 22, 39, 0.9)), url('SF.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Smooth Parallax Scrolling effect */
    padding: 100px 0;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.showcase-content h2 {
    font-size: 2.8rem;
    font-family: var(--font-heading);
    color: var(--accent-gold);
    margin-bottom: 20px;
    letter-spacing: 2px;
    animation: pulseGlowText 3s ease-in-out infinite;
}

@keyframes pulseGlowText {
    0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
    50% { text-shadow: 0 0 25px rgba(212, 175, 55, 0.6); }
}

.showcase-content p {
    max-width: 750px;
    margin: 0 auto 35px auto;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* Enhanced 3D Tilt & Interactive Pulse for Pillar Cards */
.pillar-card {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pillar-card:hover {
    transform: translateY(-15px) rotateX(3deg) rotateY(3deg);
    border-color: var(--accent-gold);
    box-shadow: 0 25px 50px rgba(121, 22, 39, 0.15);
}

/* Floating Badge Animation */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.experience-badge-floating {
    animation: floatBadge 4s ease-in-out infinite;
}

/* ==========================================================
   FULL-WIDTH END-TO-END E-COMMERCE STATS SLIDER
========================================================== */
.stats-slider-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 60px;
    background: transparent; /* Outer box bilkul hata diya hai */
    padding: 45px 0;
    overflow: hidden;
}

/* Left & Right Smooth Fade-Out Mask Effect */
.stats-slider-wrapper::before,
.stats-slider-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.stats-slider-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-light), transparent);
}
.stats-slider-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-light), transparent);
}

.stats-track {
    display: flex;
    gap: 35px;
    width: max-content;
    animation: ecomSliderScroll 28s linear infinite;
}

.stats-slider-wrapper:hover .stats-track {
    animation-play-state: paused;
}

@keyframes ecomSliderScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 17.5px)); }
}

/* --- Larger & Premium Stat Box Styling --- */
.stat-box {
    text-align: center;
    padding: 35px 40px; /* Size bada aur spacious kiya hai */
    background: var(--white);
    border-radius: 16px;
    border: 1px solid rgba(121, 22, 39, 0.08);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    min-width: 310px; /* Cards ki width badi ki hai */
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.stat-box::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-color), var(--accent-gold));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-box:hover::before {
    transform: scaleX(1);
}

.stat-box:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 20px 45px rgba(121, 22, 39, 0.15);
}

.stat-box h2 {
    font-size: 3.2rem; /* Numbers ka size aur bada kiya hai */
    color: var(--brand-color);
    font-family: var(--font-heading);
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.stat-box:hover h2 {
    transform: scale(1.08);
    color: var(--brand-dark);
}

.stat-box p {
    font-size: 0.95rem; /* Text size thoda prominent kiya hai */
    color: #555;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}


/* ==========================================================
   HERO VIDEO & GLASS VERTICAL PLAYING CARDS SLIDER CSS
========================================================== */
.hero-platinum-showcase {
    position: relative;
    height: 88vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Bilkul saaf original video dikhegi */
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: center;
    width: 100%;
}

/* ==========================================================
   EXACT POSITIONED LARGE GLASS CARD FOR HERO SECTION
========================================================== */
.hero-platinum-showcase {
    position: relative;
    height: 88vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

/* Container layout changed to handle absolute positioning */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Text ko right side shift karne ke liye */
    align-items: center;
}

/* --- Glass Vertical Card (Increased Height & Size) --- */
.hero-glass-slider-card {
    position: absolute;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    padding: 40px 35px; /* Uper aur neeche ki padding badha di hai taaki card lamba ho jaye */
    width: 480px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.glass-card-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Glass Vertical Card (Increased Height Only) --- */
.hero-glass-slider-card {
    position: absolute;
    left: -140px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 28px;
    padding: 60px 40px; /* Uper aur neeche ki padding aur badha di hai taaki card lamba ho jaye */
    width: 540px; /* Width wahi rakhi hai jo abhi thi */
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55);
    z-index: 10;
}

.glass-card-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================
   FINAL HERO SECTION & LEFT-TO-RIGHT SLIDING 3D CARDS CSS
========================================================== */

.hero-platinum-showcase {
    position: relative;
    height: 88vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* --- Large Glass Card Placed on Dark Wall --- */
.hero-glass-slider-card {
    position: absolute;
    left: -140px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 28px;
    padding: 60px 40px;
    width: 540px;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55);
    z-index: 10;
}

.glass-card-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Playing Cards Stack Container with Left-to-Right Slide */
.playing-cards-stack {
    position: relative;
    height: 560px; 
    width: 100%;
    overflow: hidden;
}

.play-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    
    /* Jab card inactive ho ya piche ja raha ho, toh right side (+150px) par rahega */
    opacity: 0;
    transform: translateX(150px);
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    pointer-events: none;
}

/* Jab card active hoga, toh left se chal kar center (0) par aayega */
.play-card.active {
    opacity: 1;
    transform: translateX(0px);
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    pointer-events: auto;
    z-index: 2;
}

/* Jab card active se hat kar piche jayega, toh center (0) se right (+150px) ki taraf chala jayega */
.play-card.exit {
    opacity: 0;
    transform: translateX(150px);
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    pointer-events: none;
}

.play-card img {
    width: 400px; /* Image ki width aur badi kar di hai */
    height: 467px; /* Image ki height bhi badha di hai */
    object-fit: contain;
    margin-top: 35px; /* Image ko thoda upar shift kiya hai taaki space ban sake */
    margin-bottom: 15px;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4));
}

.play-card h4 {
    font-size: 1.7rem;
    color: var(--white);
    margin-top: 15px; /* Text ko aur neeche shift karne ke liye margin diya hai */
    margin-bottom: 4px;
    font-family: var(--font-heading);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.play-card p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.5px;
}


/* Right Side Main Text */
.hero-main-text {
    width: 58%;
    padding-left: 40px;
}

.hero-main-text .hero-badge {
    display: inline-block;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: rgba(212, 175, 55, 0.1);
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-main-text h1 {
    font-size: 3.2rem;
    font-family: var(--font-heading);
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-main-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .hero-glass-slider-card {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: 380px;
        margin-bottom: 30px;
    }
    .hero-main-text {
        width: 100%;
        padding-left: 0;
    }
    .hero-platinum-showcase {
        height: auto;
        padding: 60px 0;
    }
}

/* Right Side Main Text */
.hero-main-text {
    width: 58%; /* Text right side mein properlyaligned rahega */
    padding-left: 40px;
}

.hero-main-text .hero-badge {
    display: inline-block;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: rgba(212, 175, 55, 0.1);
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-main-text h1 {
    font-size: 3.2rem;
    font-family: var(--font-heading);
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-main-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .hero-glass-slider-card {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: 380px;
        margin-bottom: 30px;
    }
    .hero-main-text {
        width: 100%;
        padding-left: 0;
    }
    .hero-platinum-showcase {
        height: auto;
        padding: 60px 0;
    }
}

/* Right Side Text Styling */
.hero-main-text .hero-badge {
    display: inline-block;
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: rgba(212, 175, 55, 0.1);
    padding: 8px 18px;
    border-radius: 30px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hero-main-text h1 {
    font-size: 3.2rem;
    font-family: var(--font-heading);
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-main-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-glass-slider-card {
        max-width: 320px;
        margin: 0 auto;
    }
    .hero-platinum-showcase {
        height: auto;
        padding: 60px 0;
    }
    .hero-main-text h1 {
        font-size: 2.4rem;
    }
}


/* ==========================================================
   EXPANDED ANIMATED PREMIUM COLLECTION SECTION
========================================================== */

/* Tabs Styling */
.product-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.tab-btn {
    background: transparent;
    border: 2px solid var(--accent-gold);
    color: var(--brand-dark);
    padding: 12px 35px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1.5px;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.tab-btn:hover {
    background: rgba(212, 175, 55, 0.1);
}

.tab-btn.active {
    background: var(--accent-gold);
    color: var(--white);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

/* Category Content Logic & Animation */
.category-content {
    display: none;
    animation: fadeInSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.category-content.active {
    display: block;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Premium Card Design */
.premium-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.premium-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* Image Wrapper & USP Badge */
.card-img-wrapper {
    position: relative;
    padding: 40px 30px;
    background: #fdfbf7;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.card-img-wrapper img {
    height: 280px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
    transition: transform 0.5s ease;
}

.premium-card:hover .card-img-wrapper img {
    transform: scale(1.08); /* Hover par image thodi zoom hogi */
}

/* Warranty Badge Highlights */
.usp-badge {
    position: absolute;
    top: 25px;
    right: -10px;
    background: var(--brand-dark);
    color: var(--white);
    padding: 10px 22px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    border-radius: 30px 0 0 30px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
    z-index: 2;
    text-transform: uppercase;
}

.usp-badge.diamond {
    background: #1a365d; /* Diamond Theme Blue/Dark */
}

.usp-badge.platinum {
    background: var(--accent-gold); /* Platinum/Gold Theme */
    color: var(--brand-dark);
}

/* Card Info Section */
.card-info {
    padding: 35px 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-info h3 {
    font-size: 1.6rem;
    color: var(--brand-dark);
    margin-bottom: 25px;
    font-family: var(--font-heading);
    text-align: center;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1;
}

.features-list li {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
    font-weight: 500;
}

.features-list li i {
    color: var(--accent-gold);
    margin-top: 3px;
    font-size: 1.2rem;
}

/* Thickness Info Box */
.thickness-box {
    background: rgba(121, 22, 39, 0.05);
    padding: 18px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--brand-dark);
    font-weight: 700;
    border: 1px dashed rgba(121, 22, 39, 0.3);
}

.thickness-box span {
    display: block;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .product-tabs {
        flex-direction: column;
        align-items: center;
    }
    .tab-btn {
        width: 100%;
        max-width: 300px;
    }
}


/* ==========================================================
   LUXURY CINEMATIC HORIZONTAL SHOWCASE
========================================================== */
.luxury-showcase {
    background-color: #F8F6F3;
    color: #111111;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Subtle paper texture */
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
    background-blend-mode: multiply;
}

.horizontal-track {
    display: flex;
    width: 700vw; /* 7 Slides = 700vw */
    height: 100vh;
    will-change: transform;
}

.h-slide {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background Huge Numbers */
.bg-huge-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -5px;
}

.slide-inner {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
}

/* Text Content Area */
.slide-text {
    flex: 1;
    max-width: 600px;
}

.category-tag {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #C7A56A;
    margin-bottom: 20px;
}

.category-tag hr {
    width: 40px;
    border: none;
    border-top: 2px solid #C7A56A;
    margin: 0;
}

.slide-text h2 {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
    font-family: var(--font-heading);
    color: #111;
}

.slide-text h3 {
    font-size: 1.5rem;
    font-weight: 300;
    color: #666;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.premium-warranty-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

.premium-warranty-box i {
    font-size: 2.5rem;
    color: #7A1421; /* Shreedha Maroon */
}

.premium-warranty-box span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    font-weight: 700;
}

.premium-warranty-box h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 5px 0 0 0;
    color: #111;
}

.premium-usps {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.premium-usps li {
    font-size: 1.05rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #444;
}

.premium-usps li i {
    color: #C7A56A;
}

.thickness-info span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.thickness-info p {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
}

/* Image Area */
.slide-image {
    flex: 1;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

.slide-image img {
    max-height: 75vh;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 40px 40px rgba(0,0,0,0.2));
    border-radius: 4px;
}

/* Left Progress Indicator */
.scroll-indicator {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.indicator-num {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #7A1421;
}

.indicator-num.text-muted {
    color: #ccc;
}

.progress-line {
    width: 2px;
    height: 150px;
    background: #ddd;
    position: relative;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14%; /* Updates via JS */
    background: #7A1421;
    transition: height 0.3s ease;
}

/* Responsive */
@media (max-width: 1024px) {
    .slide-text h2 { font-size: 3rem; }
    .slide-image img { max-height: 60vh; }
}

/* ==========================================================
   EDITORIAL INTERACTIVE SHOWCASE
========================================================== */
.editorial-showcase {
    display: flex;
    min-height: 100vh;
    background-color: #F8F6F3;
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
    background-blend-mode: multiply;
    font-family: var(--font-body);
    color: #111;
    overflow: hidden;
}

/* Sidebar Navigation */
/* Sidebar Performance & Click Fix */
.editorial-sidebar {
    width: 320px;
    padding: 60px 40px;
    border-right: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    
    /* YAHAN FIX KIYA HAI - Sidebar ko sabse upar laane ke liye */
    position: relative;
    z-index: 999 !important; 
    pointer-events: auto !important;
    
    background: #F8F6F3; 
}

.sidebar-header h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 5px;
    font-family: var(--font-heading);
}

.sidebar-header p {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 40px;
}

/* Accordion Logic */
.category-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cat-group {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 10px;
}

.cat-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #111;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

.cat-btn i {
    font-size: 0.8rem;
    color: #C7A56A;
    transition: transform 0.3s;
}

.cat-group.active .cat-btn i {
    transform: rotate(45deg);
}

.sub-menu {
    display: none;
    padding: 10px 0 20px 0;
}
.cat-group.active .sub-menu {
    display: block;
    animation: fadeInMenu 0.3s ease-out forwards;
}
@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sub-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 1.05rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    padding-left: 25px;
}

.sub-btn .num {
    position: absolute;
    left: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #C7A56A;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}

.sub-btn:hover { color: #111; padding-left: 30px; }

.sub-btn.active {
    color: #7A1421;
    font-weight: 700;
    padding-left: 30px;
}
.sub-btn.active .num { opacity: 1; }

/* Main Stage / Showcase */
.editorial-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-huge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 38vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    user-select: none;
    pointer-events: none;
    letter-spacing: -10px;
    line-height: 1;
}

/* Image & View Performance Fix */
.product-view {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    /* Hardware acceleration for smooth transitions */
    will-change: opacity, transform; 
}

.prod-img {
    max-height: 75vh;
    width: auto;
    object-fit: contain;
    /* Shadow ko thoda light kiya hai taaki GPU par load kam ho */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); 
    will-change: transform, opacity;
}

.anim-el {
    will-change: transform, opacity;
}

.product-view.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.view-content {
    display: flex;
    width: 90%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    z-index: 2;
}

/* Text Elements Styling */
.text-col { flex: 1; max-width: 500px; }
.image-col { flex: 1; display: flex; justify-content: center; perspective: 1200px; }

.cat-label {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #C7A56A;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid #C7A56A;
    padding-bottom: 5px;
}

.text-col h2 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    margin-bottom: 5px;
    font-family: var(--font-heading);
}

.text-col h3 {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 30px;
    font-weight: 400;
}

.warranty-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border-left: 4px solid #7A1421;
}
.warranty-box i { font-size: 2rem; color: #7A1421; }
.warranty-box span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #888; font-weight: 700; }
.warranty-box h4 { font-size: 1.1rem; color: #111; margin: 0; font-weight: 800; }

.warranty-box.diamond-bg { border-left-color: #1a365d; }
.warranty-box.diamond-bg i { color: #1a365d; }
.warranty-box.platinum-bg { border-left-color: #d4af37; background: linear-gradient(to right, #fff, #fffcf5); }
.warranty-box.platinum-bg i { color: #d4af37; }

.usps { list-style: none; padding: 0; margin-bottom: 30px; }
.usps li { margin-bottom: 12px; font-size: 1rem; color: #444; display: flex; gap: 12px; align-items: center; }
.usps li i { color: #C7A56A; }

.thickness {
    background: rgba(0,0,0,0.03);
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    color: #111;
    font-size: 1rem;
}
.thickness span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 4px; }

/* Image Pop out */
.prod-img {
    max-height: 75vh;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.25));
}


/* ==========================================================
   NETWORK PAGE - DARK LUXURY SPLIT LAYOUT
========================================================== */
.shreedha-network-hero {
    background-color: #0d0406; /* Deep dark maroon/black */
    padding: 120px 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--white);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

/* Huge Faded Text in Background */
.bg-massive-text {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    font-size: 30vw;
    font-weight: 900;
    font-family: var(--font-heading);
    color: rgba(255, 255, 255, 0.02);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    letter-spacing: -10px;
}

.network-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left Side Content */
.net-left-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
}

.net-subtitle {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.net-title {
    font-size: 4.5rem;
    font-family: var(--font-heading);
    line-height: 1.05;
    margin-bottom: 30px;
    color: var(--white);
    letter-spacing: -1px;
}

.net-desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    margin-bottom: 50px;
    max-width: 90%;
}

/* Stats Row */
.net-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.net-stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 20px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.net-stat-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.net-stat-box h3, .net-stat-box span {
    display: inline-block;
    font-size: 2.2rem;
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 5px;
}

.net-stat-box span { color: var(--accent-gold); }

.net-stat-box p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* Right Side Video */
.net-right-video {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.video-rounded-wrapper {
    width: 100%;
    max-width: 550px;
    aspect-ratio: 4 / 5; /* Reference jaisa rectangle */
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    /* GSAP ke liye shuru mein chota rakhenge */
    transform: scale(0.8);
    opacity: 0;
}

.network-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-glass-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 40px;
    box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.2);
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Responsive Network Section */
@media (max-width: 992px) {
    .network-split-layout { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .net-left-content { padding-right: 0; align-items: center; }
    .net-title { font-size: 3.5rem; }
    .net-desc { max-width: 100%; }
    .net-right-video { justify-content: center; }
}
@media (max-width: 768px) {
    .net-stats-grid { grid-template-columns: 1fr; width: 100%; max-width: 300px; }
    .net-title { font-size: 2.8rem; }
}

/* ==========================================================
   DRAWER FOLDER MAP SECTION (ULTRA-WIDE & CENTER ALIGNED)
========================================================== */
/* 1. Main container ko extra width dene ke liye override */
#network-map-section.container {
    max-width: 1450px; /* Container ki width badha di */
    width: 95%;
}

.drawer-accordion-container {
    max-width: 100%; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* File Folder Look */
.drawer-folder {
    background: var(--white);
    border: 1px solid rgba(121, 22, 39, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    position: relative;
}

.drawer-folder:not(.active):hover {
    box-shadow: 0 10px 25px rgba(121, 22, 39, 0.08);
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.4);
}

.drawer-folder.active {
    border-color: var(--accent-gold);
    box-shadow: 0 15px 35px rgba(121, 22, 39, 0.12);
    margin: 10px 0; 
}

/* Drawer Tab/Header */
.drawer-header {
    padding: 22px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #ffffff, #fafafa);
    cursor: pointer;
    user-select: none;
    border-left: 6px solid var(--brand-color);
    transition: all 0.3s ease;
}

.drawer-folder.active .drawer-header {
    border-left-color: var(--accent-gold);
    background: linear-gradient(to right, rgba(212,175,55,0.05), #ffffff);
}

.drawer-header h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--brand-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-header h3 i {
    color: var(--brand-color);
    font-size: 1.2rem;
    transition: 0.3s ease;
}

.drawer-folder.active .drawer-header h3 i { color: var(--accent-gold); }

.toggle-icon i {
    color: var(--accent-gold);
    font-size: 1.2rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.drawer-folder.active .toggle-icon i { transform: rotate(180deg); }

/* Content Area inside Folder */
.drawer-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fffdf9;
}

.drawer-folder.active .drawer-content {
    max-height: 1200px; 
    opacity: 1;
}

.drawer-content-inner {
    padding: 50px 40px;
    display: grid;
    /* Map ko 40% aur Cities ko 60% space diya hai */
    grid-template-columns: 0.4fr 0.6fr; 
    gap: 60px;
    /* YAHAN FIX KIYA: Map ab exactly beech me (vertically centered) align hoga */
    align-items: center; 
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Map Image */
.drawer-map {
    text-align: center;
    perspective: 1000px;
    /* Sticky position hata di taaki center alignment properly kaam kare */
}

.drawer-map img {
    width: 100%;
    max-height: 480px; /* Map ko thoda aur bada kiya hai */
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
    transition: transform 0.5s ease;
}

.drawer-folder.active .drawer-map img {
    animation: mapPopIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes mapPopIn {
    0% { transform: scale(0.7) translateY(30px) rotateX(15deg); opacity: 0; }
    100% { transform: scale(1) translateY(0) rotateX(0deg); opacity: 1; }
}

/* Cities List Animation & GRID LAYOUT */
.drawer-cities h4 {
    color: var(--brand-color);
    font-size: 1.2rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--accent-gold);
    display: inline-block;
    padding-bottom: 8px;
    transform: translateX(-20px);
    opacity: 0;
}

.drawer-cities ul {
    list-style: none;
    padding: 0;
    display: grid;
    /* Column width thodi badhai hai taaki names perfectly fit aayein */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); 
    gap: 15px;
}

.drawer-cities ul li {
    font-size: 0.95rem;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transform: translateX(30px);
    opacity: 0;
    transition: all 0.3s ease;
}

.drawer-cities ul li i {
    color: var(--accent-gold);
    font-size: 1.1rem;
}

.drawer-cities ul li:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: var(--accent-gold);
    transform: translateY(-2px) !important;
}

/* Staggered slide in for elements when folder opens */
.drawer-folder.active .drawer-cities h4 {
    animation: slideInText 0.5s ease forwards 0.2s;
}

.drawer-folder.active .drawer-cities ul li { 
    animation: slideInText 0.5s ease forwards 0.3s; 
}

@keyframes slideInText {
    to { transform: translateX(0); opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    #network-map-section.container { width: 90%; }
    .drawer-content-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 20px;
    }
    .drawer-map img { max-height: 300px; }
}
@media (max-width: 768px) {
    .drawer-cities ul { grid-template-columns: repeat(2, 1fr); }
    .drawer-header { padding: 18px 20px; }
    .drawer-header h3 { font-size: 1.15rem; }
}
@media (max-width: 480px) {
    .drawer-cities ul { grid-template-columns: 1fr; }
}



/* ==========================================================
   EXPANDING LUXURY DISTRIBUTION SECTION (DARK THEME)
========================================================== */
.expanding-luxury-section {
    /* Very dark background (Black with a subtle maroon tint) */
    background-color: #0a0304; 
    padding: 100px 0 120px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Header Text Styling */
.luxury-header {
    max-width: 800px;
    margin: 0 auto 70px auto;
}

.sub-heading-pan {
    display: inline-block;
    color: var(--accent-gold);
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 25px;
}

.luxury-header h2 {
    font-size: 4rem;
    font-family: var(--font-body); /* Reference image uses a clean sans-serif */
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #ffffff;
    letter-spacing: -1.5px;
}

.luxury-header h2 .highlight-gold {
    color: var(--accent-gold);
}

.luxury-header p {
    font-size: 1.05rem;
    color: #888888;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}

/* Luxury Cards Grid */
.luxury-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.lux-card {
    /* Subtle dark wood texture with heavy black gradient overlay */
    background-color: #110507;
    background-image: linear-gradient(to bottom, rgba(14, 5, 7, 0.85), rgba(10, 3, 4, 0.98)), url('https://images.unsplash.com/photo-1550684376-efcbd6e3f031?q=80&w=600&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Hover Effect - Brightens up slightly and lifts */
.lux-card:hover {
    transform: translateY(-12px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.08);
}

/* Card Content Details */
.lux-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lux-num {
    font-size: 2.8rem;
    color: var(--accent-gold);
    font-weight: 400;
    margin-bottom: 30px;
    font-family: var(--font-body);
}

.lux-card-content h4 {
    font-size: 1.7rem;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.lux-card-content p {
    font-size: 0.95rem;
    color: #777777;
    line-height: 1.7;
    flex-grow: 1; /* Pushes the dots to the bottom */
}

/* Slider Dots on Card 3 */
.lux-dots {
    display: flex;
    gap: 8px;
    margin-top: 30px;
}

.lux-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #333333;
    transition: 0.3s ease;
}

.lux-dots .dot.active {
    background-color: var(--accent-gold);
}

/* Responsive Grid Adjustments */
@media (max-width: 992px) {
    .luxury-header h2 { font-size: 3rem; }
    .luxury-cards-grid { grid-template-columns: repeat(2, 1fr); max-width: 800px;}
}

@media (max-width: 768px) {
    .luxury-header h2 { font-size: 2.5rem; }
    .luxury-cards-grid { grid-template-columns: 1fr; max-width: 400px; }
    .lux-card { min-height: auto; padding: 40px 30px; }
}



/* ==========================================================
   GALLERY PAGE STYLES
========================================================== */
.gallery-hero {
    padding: 80px 0 40px 0;
    background-color: var(--bg-light);
}

.gallery-title {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    color: var(--brand-color);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.gallery-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Gallery Filters */
.gallery-section {
    padding-bottom: 100px;
}

.gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
}

.filter-btn {
    background: var(--white);
    border: 1px solid rgba(121, 22, 39, 0.15);
    padding: 10px 25px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--brand-dark);
    border-radius: 30px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.filter-btn:hover {
    border-color: var(--accent-gold);
    color: var(--brand-color);
}

.filter-btn.active {
    background: var(--brand-color);
    color: var(--white);
    border-color: var(--brand-color);
    box-shadow: 0 8px 20px rgba(121, 22, 39, 0.25);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Perfect rectangle proportion */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    cursor: pointer;
    background-color: #eee;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Hover Overlay */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(121, 22, 39, 0.95) 0%, rgba(121, 22, 39, 0.4) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: all 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 15px;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}

.gallery-overlay h4 {
    color: var(--white);
    font-size: 1.4rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.2s;
}

.gallery-item:hover .gallery-overlay i,
.gallery-item:hover .gallery-overlay h4 {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .gallery-title { font-size: 2.8rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}

@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-filters { gap: 10px; }
    .filter-btn { padding: 8px 18px; font-size: 0.8rem; }
}



/* ==========================================================
   CONTACT US PAGE LUXURY STYLES
========================================================== */
.contact-hero {
    background: linear-gradient(135deg, rgba(121, 22, 39, 0.92), rgba(26, 4, 8, 0.98)), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    padding: 100px 20px;
    color: var(--white);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin-bottom: 60px;
}

.contact-hero-title {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
}

.contact-main-section {
    padding-bottom: 80px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
}

.contact-card {
    background: var(--white);
    padding: 45px;
    border-radius: 20px;
    border: 1px solid rgba(121, 22, 39, 0.08);
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

.contact-card-header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 20px;
}

.contact-card-header h3 {
    font-size: 1.8rem;
    color: var(--brand-color);
    font-family: var(--font-heading);
    margin-bottom: 8px;
}

.contact-card-header p {
    color: #666;
    font-size: 0.95rem;
}

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

.contact-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #fafafa;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--brand-color);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(121, 22, 39, 0.08);
}

.btn-solid-submit {
    background: #25D366; /* WhatsApp Green for high conversion */
    color: var(--white);
    border: none;
    width: 100%;
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
    margin-top: 10px;
}

.btn-solid-submit:hover {
    background: #1EBE5D;
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(37, 211, 102, 0.3);
}

/* Office Info List */
.office-info-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.info-icon {
    width: 50px;
    height: 50px;
    background: rgba(121, 22, 39, 0.06);
    color: var(--brand-color);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-item h4 {
    font-size: 1.05rem;
    color: var(--brand-dark);
    margin-bottom: 4px;
    font-family: var(--font-heading);
}

.info-item p {
    color: #666;
    font-size: 0.95rem;
}

.btn-outline-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    border: 2px solid #25D366;
    color: #25D366;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-whatsapp:hover {
    background: #25D366;
    color: var(--white);
}

/* Map Section */
.map-section {
    padding: 0 0 100px 0;
}

.map-header {
    margin-bottom: 40px;
}

.map-header h3 {
    font-size: 2.2rem;
    color: var(--brand-color);
    font-family: var(--font-heading);
    margin-bottom: 10px;
}

.map-container-box {
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 4px solid var(--white);
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-hero-title { font-size: 2.8rem; }
}