/* --- FLUENCY MAIN STYLES (Protocol & Split Menu) --- */
:root {
    --primary-color: #d66f00;
    /* Fluency Orange */
    --primary-dark: #b55e00;
    --premium-dark: #0a192f;
    /* Midnight Blue */
    --text-color: #111111;
    --text-light: #666666;
    --bg-color: #ffffff;
    --overlay-bg: #f4f4f4;
    --border-color: #e0e0e0;
    --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Service Page Specifics (Hybrid Look) */
body.service-page {
    background-color: #fff;
    /* Reset to white for body content */
    color: var(--text-color);
}

body.service-page .navbar {
    background: rgba(255, 255, 255, 0.95);
    /* Light navbar again for content consistency, or keep dark if preferred. Let's go dark overlay for hero but sticky needs to be visible. Let's stick to standard navbar but transparent initially? Simpler: Standard Navbar */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.service-page .header-cta,
body.service-page .burger-menu span {
    color: #000;
    background-color: #000;
}

/* Hero Service with Background Image */
.hero-service {
    position: relative;
    height: 80vh;
    /* Tall hero */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.hero-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Dark overlay for text readability */
    z-index: 1;
}

.hero-service .hero-content {
    position: relative;
    z-index: 2;
}

/* Reset typography for Service Body */
body.service-page .section-header-simple h2,
body.service-page .section-desc,
body.service-page .protocol-step h3,
body.service-page .step-detail {
    color: inherit;
    /* Use default text colors */
}

body.service-page .step-detail {
    color: var(--text-light);
}

body.service-page .protocol-step {
    border-top-color: var(--border-color) !important;
    /* Reset border color */
}

/* Tactical Product Block in Service Page */
.tactical-block {
    background: #f8f8f8;
    /* Light gray background for separation */
    color: var(--text-color);
    padding: 60px;
    margin-top: 80px;
    border-radius: 4px;
}

.tactical-block h2,
.tactical-block h3 {
    color: #000;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

.container {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px;
}

h1,
h2,
h3,
h4 {
    font-weight: 800;
    color: #000;
    margin-top: 0;
}

/* --- NAVIGATION (Sticky & Minimal) --- */
.navbar {
    position: sticky;
    top: 0;
    background: transparent;
    backdrop-filter: blur(0px);
    z-index: 2000;
    padding: 20px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.4s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.nav-brand img {
    height: 55px;
    display: block;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header-cta {
    text-decoration: none;
    color: #fff;
    background-color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 12px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
}

.header-cta:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Hamburger Icon */
.burger-menu {
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    z-index: 2001;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #000;
    position: absolute;
    transition: all 0.3s var(--transition);
}

.burger-menu span:nth-child(1) {
    top: 0;
}

.burger-menu span:nth-child(2) {
    top: 9px;
}

.burger-menu span:nth-child(3) {
    top: 18px;
}

.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 9px;
}

/* --- SPLIT MENU OVERLAY --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    /* White clean background */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.overlay-container {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1600px;
}

.overlay-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}

/* Left Column: Main Nav */
.main-nav-column {
    background-color: var(--primary-color);
    color: #fff;
    align-items: flex-end;
    /* Align to center divide */
    padding-right: 80px;
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-link {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform 0.3s;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(20px);
}

.menu-overlay.active .main-link {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay.active .main-link:nth-child(1) {
    transition-delay: 0.1s;
}

.menu-overlay.active .main-link:nth-child(2) {
    transition-delay: 0.2s;
}

.menu-overlay.active .main-link:nth-child(3) {
    transition-delay: 0.3s;
}

.menu-overlay.active .main-link:nth-child(4) {
    transition-delay: 0.4s;
}

.main-link:hover {
    transform: translateX(20px);
    color: #000;
}

/* Right Column: Site Map */
.sitemap-column {
    background-color: #f9f9f9;
    align-items: flex-start;
    padding-left: 80px;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 150px;
}

.sitemap-group {
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.menu-overlay.active .sitemap-group {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay.active .sitemap-group:nth-child(1) {
    transition-delay: 0.3s;
}

.menu-overlay.active .sitemap-group:nth-child(2) {
    transition-delay: 0.4s;
}

.menu-overlay.active .sitemap-group:nth-child(3) {
    transition-delay: 0.5s;
}

.sitemap-group h4 {
    font-size: 1.1rem;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.sitemap-group a {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    font-size: 1rem;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.sitemap-group a:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.overlay-footer-info {
    margin-top: auto;
    font-size: 0.85rem;
    color: #999;
}

/* --- HERO SECTION --- */
.hero-section {
    padding: 140px 20px 100px;
    text-align: center;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 5rem;
    line-height: 1;
    max-width: 1100px;
    margin: 0 auto 30px;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--primary-color);
}

.text-filled {
    color: var(--primary-color);
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto 50px;
}

.cta-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 20px 45px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s;
}

.cta-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-5px);
}

/* --- PROTOCOL SECTION (Elegant) --- */
.protocol-section {
    padding: 120px 0;
    background-color: #fff;
    text-align: center;
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-desc {
    max-width: 600px;
    margin: 0 auto 80px;
    color: var(--text-light);
    font-size: 1.1rem;
}

.protocol-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Force 4 columns on Desktop */
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto !important;
    padding: 0 40px;
    justify-content: center !important;
    justify-items: start;
    /* Align items to start for clean text follow-up */
}

@media (max-width: 1024px) {
    .protocol-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 on Tablet */
    }
}

@media (max-width: 768px) {
    .protocol-grid {
        grid-template-columns: 1fr;
        /* 1x1 on Mobile */
    }
}

.protocol-step {
    text-align: left;
    padding: 40px 30px;
    border-top: 1px solid #ddd;
    border-left: 1px solid transparent;
    transition: all 0.4s ease;
    background: #fff;
    position: relative;
}

.protocol-step:hover {
    border-top-color: var(--primary-color);
    background: #fdfdfd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

.step-number {
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 10px;
}

.protocol-step h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.step-detail {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* --- HYBRID SECTION (4-Col Grid) --- */
.hybrid-section {
    min-height: 600px;
    border-top: 1px solid var(--border-color);
    background-color: #fff;
    padding-bottom: 60px;
}

.hybrid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Strict 4 columns */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 0;
    /* Clean gap handling for bordered items */
}

.hybrid-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text */
    padding: 60px 20px;
    /* Reduce side padding slightly for 4 cols */
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    transition: background 0.5s ease;
    min-height: 400px;
    /* Uniform height */
    width: 100%;
    /* Ensure full width in grid cell */
    box-sizing: border-box;
    /* Prevent padding overflow */
}

/* Remove border from last item in row if needed, but grid borders are tricky. Keeping right border is fine. */

.hybrid-block:hover {
    background-color: #f9f9f9;
}

.content-overlay {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.block-outline {
    -webkit-text-stroke: 1px var(--text-color);
    color: transparent;
}

.hybrid-block h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    /* Adjusted for 4 cols */
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1;
    min-height: 100px;
    /* ALIGNMENT: Ensures description starts at same height */
    display: flex;
    align-items: flex-end;
    /* Bottom align text usually looks best with fixed height */
}

.hybrid-tagline {
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 0.9rem;
    min-height: 3em;
    /* Optional: align lists too */
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.service-list li {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
    font-size: 0.95rem;
    color: var(--text-light);
}

.service-list li::before {
    content: '•';
    color: var(--primary-color);
    position: absolute;
    left: 0;
}

/* Button aligned to bottom */
.service-cta {
    margin-top: auto;
    /* Pushes button to bottom */
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-weight: 700;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s;
    align-self: flex-start;
}

.service-cta:hover {
    color: var(--primary-color);
    letter-spacing: 1px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
    .hybrid-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 Grid on Tablet */
    }

    .hybrid-block {
        border-right: 1px solid var(--border-color);
    }

    .hybrid-block:nth-child(2n) {
        border-right: none;
        /* Remove border on 2nd item of row */
    }
}

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

    .overlay-column {
        padding: 40px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .main-nav-column {
        align-items: flex-start;
        padding-right: 0;
        flex: 0.4;
    }

    .sitemap-column {
        padding-left: 20px;
        flex: 0.6;
    }

    .main-link {
        font-size: 2.5rem;
    }

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

    /* Hybrid Section Mobile */
    .hybrid-section,
    .products-section,
    .protocol-section {
        text-align: center;
    }

    .hybrid-container {
        grid-template-columns: 1fr;
        /* 1 col on Mobile */
    }

    .hybrid-block {
        width: auto;
        border-right: none;
        padding: 50px 30px;
    }

    .cta-area {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

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

/* --- HERO SLIDER --- */
.hero-slider-container {
    position: relative;
    height: 90vh;
    width: 100%;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Slide Variants */
.slide-white {
    background: radial-gradient(circle at 50% 50%, #fffbf7 0%, #fff 70%);
}

.slide-orange {
    background-color: var(--primary-color);
    color: #fff !important;
}

.slide-black {
    background-color: #050505;
    color: #fff;
}

/* Animations */
.hero-slide .animate-text,
.hero-slide .animate-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.hero-slide.active .animate-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.hero-slide.active .animate-up {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* Slide 2 & 3 Specifics */
.slide-orange h1,
.slide-black h1 {
    color: #fff;
}

/* Mobile Stack Container (Floating Buttons) */
.mobile-stack-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

@media (max-width: 768px) {
    .mobile-stack-container {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        align-items: center;
        width: 100%;
        max-width: 300px;
        /* Prevent being too wide */
    }
}

.text-filled-white {
    color: #fff;
}

.text-outline-white {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}

.text-outline-dark {
    color: transparent;
    -webkit-text-stroke: 2px var(--primary-color);
}

.text-gray {
    color: #888;
}

.quote-icon {
    font-size: 6rem;
    color: #333;
    line-height: 0;
    margin-bottom: 30px;
    font-family: serif;
}

.quote-text {
    font-size: 3rem !important;
    font-weight: 300 !important;
    max-width: 800px;
    font-style: italic;
}

/* Buttons Variants */
.btn-dark {
    background-color: #000;
    color: #fff;
}

.btn-dark:hover {
    background-color: var(--primary-color);
}

.btn-white {
    background-color: #fff;
    color: var(--primary-color);
}

.btn-white:hover {
    background-color: #000;
    color: #fff;
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
    mix-blend-mode: difference;
    color: #fff;
}

.slide-indicator {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.slide-indicator::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.3s;
}

.slide-indicator.active {
    color: #fff;
    font-size: 1.5rem;
}

.slide-indicator.active::after {
    width: 15px;
}



/* =========================================
   Product Page Styles (Tactical Store)
   ========================================= */

/* Product Hero (Smaller than Service Hero) */
.product-hero {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-color: var(--premium-dark);
    /* Fallback */
}

.product-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 25, 47, 0.4), rgba(10, 25, 47, 0.9));
    z-index: 1;
}

.product-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

/* Product Content Grid */
.product-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

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

/* Specs Table */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.specs-table th,
.specs-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.specs-table th {
    font-weight: 600;
    color: var(--premium-dark);
    width: 40%;
}

.specs-table td {
    color: var(--text-light);
}

/* Pricing Card & Options */
.product-pricing-card {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    position: sticky;
    top: 100px;
}

.price-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--premium-dark);
    margin: 20px 0;
    display: block;
}

.price-unit {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-light);
}

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

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--premium-dark);
}

.form-select,
.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

/* Upsell Block */
.upsell-block {
    margin-top: 30px;
    padding: 20px;
    background: rgba(214, 111, 0, 0.1);
    /* Light Orange */
    border: 1px solid var(--accent-orange);
    border-radius: 6px;
}

.upsell-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 10px;
}

/* Floating WhatsApp */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-size: 30px;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    background-color: #22bf5b;
}

/* Button Full Width for Product */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.slide-indicator::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s;
}

.slide-indicator.active {
    color: #fff;
    font-size: 1.5rem;
}

.slide-indicator.active::after {
    width: 100%;
}

/* --- PRODUCTS STORE SECTION --- */
.products-section {
    padding: 100px 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid var(--border-color);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    max-width: 1300px;
    margin: 50px auto 0;
    padding: 0 40px;
}

.product-card {
    background: #fff;
    padding: 40px 30px;
    border: 1px solid transparent;
    transition: all 0.3s var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color);
}

.product-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.product-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.product-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.product-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-top: auto;
    transition: letter-spacing 0.3s;
}

.product-card:hover .product-link {
    letter-spacing: 1px;
}

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

/* Product Icon Styling */
.product-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #000;
    /* Black Circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-icon-img {
    width: 70% !important;
    /* 70% size as requested */
    height: 70% !important;
    margin: auto;
    display: block;
    object-fit: contain;
    z-index: 10;
    position: relative;
    /* Specific Filter for Orange Fluency #FF8C00 */
    filter: brightness(0) saturate(100%) invert(56%) sepia(96%) saturate(6000%) hue-rotate(10deg) contrast(100%) !important;
}

/* --- SOCIAL PROOF CAROUSEL --- */
.social-proof-section {
    padding: 60px 0;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
    overflow: hidden;
}

.section-title-small {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.logos-track-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 10px 0;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logos-track {
    display: flex;
    gap: 20px !important;
    /* Dense 20px Gap */
    width: max-content;
    padding-inline: 0 !important;
    animation: scroll 60s linear infinite;
    align-items: center;
}



.logos-track:hover {
    animation-play-state: paused;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    min-width: 240px;
    /* Increased to accommodate 220px logos */
    padding: 0 10px;
}

/* Force Brute CSS - Partner Logo */
.logo-item img,
img.partner-logo {
    width: 220px !important;
    /* Brute Force Width */
    height: 100px !important;
    /* Fixed Height */
    object-fit: contain !important;
    filter: grayscale(100%) brightness(0);
    /* Black Silhouettes */
    opacity: 0.8;
    transition: all 0.3s ease;
    display: block;
}



.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Optional: Slight scale on hover for the item container */
.logo-item:hover {
    transform: scale(1.05);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Move half the width since we have 2 sets */
        transform: translateX(-50%);
    }
}

/* Mobile Responsiveness for Logs */
@media (max-width: 768px) {
    .logos-track {
        gap: 40px;
        /* Reduce gap on mobile to show more logos */
        animation-duration: 40s;
        /* Slightly faster on mobile feels better? or keep slow. Let's keep smooth. */
    }

    .logo-item img {
        max-height: 40px;
        /* Slightly smaller on mobile */
    }
}

/* --- FOOTER (New 3-Col Layout) --- */
.main-footer {
    background-color: #0a192f;
    color: #fff;
    padding: 80px 0 40px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr;
    gap: 60px;
}

.footer-col h4 {
    font-family: 'Oswald', sans-serif;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-nav a {
    color: #a8b2d1;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #fff;
}

.footer-col p {
    color: #a8b2d1;
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-col a {
    color: #fff;
    text-decoration: none;
}

.footer-col .cta-button {
    margin-top: 10px;
    display: inline-block;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* --- STORE SLIDER (Infinite) --- */
.store-slider-container {
    width: 100%;
    max-width: 1400px;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
    background: #fff;
    margin: 0 auto !important;
}

.store-track {
    display: flex;
    gap: 30px;
    width: max-content;
    padding: 20px;
    will-change: transform;
}

.store-track .product-card {
    width: 300px;
    flex-shrink: 0;
}

/* --- NEWS SECTION --- */
.news-section {
    padding: 100px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 0 !important;
    padding: 0 20px;
    justify-content: center !important;
    justify-items: center !important;
}

.news-card {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    text-align: left;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color);
}

.news-tag {
    color: var(--primary-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
}

.news-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}