/* 
   Theme: PharmaOverseas
   Colors: Medical Blue, Clean White, Trustworthy Grey, Action Green
*/

:root {
    /* Brand Colors Updated from Logo */
    --primary-color: #0e2b5c;
    /* Navy Blue */
    --secondary-color: #2d65a8;
    /* Royal Blue */
    --accent-color: #f4c142;
    /* Success/Action Green */
    --dark-color: #1a1a1a;
    --light-color: #f8f9fa;
    --text-color: #333333;
    --text-muted: #666666;
    --white: #ffffff;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}

/* Dark Mode Variables */
body.dark-mode {
    --light-color: #121212;
    --text-color: #e0e0e0;
    --white: #1e1e1e;
    --text-muted: #a0a0a0;
    /* Adjust these if primary color is too dark for dark mode */
    --primary-color: #4facfe;
    /* Use the lighter blue for better contrast */
    --secondary-color: #2d65a8;
}

/* Specific Dark Mode Overrides */
body.dark-mode .nav-links a {
    color: var(--primary-color);
}

body.dark-mode .nav-links a:hover {
    color: var(--white);
}

body.dark-mode .social-sidebar .social-icon {
    color: var(--primary-color);
}

body.dark-mode .social-sidebar .social-icon:hover {
    color: var(--white);
}

body.dark-mode .icon-btn {
    color: var(--primary-color);
}

body.dark-mode .mobile-menu-btn {
    color: var(--primary-color);
}

/* Fix Hero Button Text in Dark Mode */
body.dark-mode .hero-left .btn-primary {
    background-color: #ffffff;
    /* User request: "just the text color" changes. Keep bg white. */
    color: var(--primary-color);
    /* Ensure it is light blue */
}

body.dark-mode .hero-left .btn-primary:hover {
    background-color: #e6e6e6;
    /* Match light mode hover bg */
}

/* Arrows in Header */
body.dark-mode .dropdown>a i {
    color: var(--primary-color) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 15px;
    transition: var(--transition);
    font-size: 1.2rem;
}

.theme-toggle-btn:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: rotate(15deg);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
    /* base 16px */
}

/* Responsive Typography Base */
@media (max-width: 1200px) {
    html {
        font-size: 95%;
    }
}

@media (max-width: 900px) {
    html {
        font-size: 90%;
    }
}

body {
    font-family: 'Funnel Display', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-color);
    /* Light grey global background prevents white leaks */
    overflow-x: hidden;
    /* Ensure body font size is consistent if not inherited */
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Funnel Display', sans-serif;
    color: var(--dark-color);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    /* Increased padding for full-width look */
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

.section {
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

/* Underline removed */

.btn-primary {
    display: inline-block;
    padding: clamp(8px, 1.5vh, 12px) clamp(15px, 2vw, 30px);
    /* Fluid padding */
    padding: 12px 30px;
    background-color: var(--white);
    /* White background for header contrast */
    color: var(--primary-color);
    /* Navy text */
    font-weight: 700;
    font-size: clamp(0.85rem, 2vw, 1rem);
    /* Fluid font size */
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: #e6e6e6;
    /* Light gray on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 600;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    cursor: pointer;
}

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

/* Floating Social Sidebar */
.social-sidebar {
    position: fixed;
    left: -50px;
    /* Hide off-screen (width of sidebar) */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Remove gap for continuous look */
    z-index: 2500;
    /* Above Loader (2000) but below Password (3000) */
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Springy transition */
    padding: 10px 0;
    /* Vertical padding */
    background-color: rgba(3, 14, 34, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Acrylic Navy */
    border: none;
    border-radius: 0 15px 15px 0;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    width: 50px;
    align-items: center;
}

.social-sidebar.active {
    left: 0;
    /* Slide out to edge */
}

.social-sidebar .social-icon {
    width: 100%;
    height: 40px;
    /* Rectangular touch target */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    transition: var(--transition);
    text-decoration: none;
    font-size: 1.2rem;
    opacity: 0.8;
}

.social-sidebar .social-icon:hover {
    transform: translateX(3px);
    color: var(--accent-color);
    opacity: 1;
}

/* Sidebar Toggle Handle */
.sidebar-toggle {
    position: absolute;
    right: -20px;
    /* Reduced from -30px to match new width */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    /* Matched to navbar handle "height" */
    height: 40px;
    /* Matched to navbar handle "width" */
    background-color: rgba(3, 14, 34, 0.25);
    /* Acrylic Navy */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 0 10px 10px 0;
    /* Matched to navbar handle radius */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 2501;
}

/* Fillets for Smooth Connection */
.sidebar-toggle::before {
    content: '';
    position: absolute;
    top: -10px;
    /* Match new 10px radius */
    left: 0;
    width: 10px;
    /* Flat part of 20px toggle with 10px corner radius */
    height: 10px;
    background: radial-gradient(circle at 100% 0, transparent 10px, rgba(3, 14, 34, 0.25) 10.5px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
}

.sidebar-toggle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    /* Match new 10px radius */
    left: 0;
    width: 10px;
    /* Flat part of 20px toggle with 10px corner radius */
    height: 10px;
    background: radial-gradient(circle at 100% 100%, transparent 10px, rgba(3, 14, 34, 0.25) 10.5px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
}

/* Hover effect removed as per user request */
/* .sidebar-toggle:hover {
    background-color: var(--secondary-color);
} */

.sidebar-toggle i {
    transition: transform 0.4s ease;
    font-size: 0.9rem;
    animation: attention-pulse 2s infinite;
    /* Faster 2s loop */
}

.social-sidebar.active .sidebar-toggle i {
    transform: rotate(180deg);
    animation: none;
    /* Stop animation when open */
}

/* Attention Animation for Closed State: Faster, Brighter Neon Flicker */
@keyframes attention-pulse {

    0%,
    40%,
    100% {
        transform: translateX(0);
        color: var(--white);
        text-shadow: none;
    }

    /* First Movement + Neon Flicker */
    5% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 10px #f4c142, 0 0 20px #f4c142;
    }

    7% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: none;
    }

    9% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 20px #f4c142, 0 0 40px #f4c142, 0 0 60px #f4c142;
    }

    11% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 5px #f4c142;
    }

    13% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 15px #f4c142, 0 0 30px #f4c142;
    }

    20% {
        transform: translateX(0);
        color: var(--white);
        text-shadow: none;
    }

    /* Second Movement + Neon Flicker */
    25% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 10px #f4c142, 0 0 20px #f4c142;
    }

    27% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: none;
    }

    29% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 20px #f4c142, 0 0 40px #f4c142, 0 0 60px #f4c142;
    }

    31% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 5px #f4c142;
    }

    33% {
        transform: translateX(5px);
        color: #f4c142;
        text-shadow: 0 0 15px #f4c142, 0 0 30px #f4c142;
    }
}

/* Unified Glow Effect Removed */
.social-sidebar {
    transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* .social-sidebar:has(.sidebar-toggle:hover) {
    filter: drop-shadow(0 0 10px rgba(45, 101, 168, 0.8));
    z-index: 1002;
} */

@media (max-width: 768px) {
    .social-sidebar {
        display: none;
    }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Acrylic Effect: Black base with transparency */
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* Safari support */
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    padding: 15px 0;
    border-bottom: 0;
}

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

/* Three Flex Boxes for Header */
.nav-left {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px;
    gap: 15px;
    flex-shrink: 0;
    /* Critical: Prevent the left section from shrinking */
}

/* Ensure the anchor tag itself doesn't shrink */
.nav-left .logo {
    display: block;
    flex-shrink: 0;
}

.nav-middle {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px;
    gap: 15px;
}

.logo-img {
    height: 50px;
    /* Fixed height */
    width: auto;
    display: block;
    flex-shrink: 0;
    /* Prevent resizing */
    filter: brightness(0) invert(1);
    /* Make logo white in Hero section */
    transition: filter 0.4s ease;
}

/* Pulled Down Navbar - Restore original logo colors */
.navbar.fixed-active .logo-img {
    filter: none;
}

.nav-right {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 5px;
    gap: 5px;
}

/* Nav Middle adjustments */
.nav-middle {
    flex-grow: 1;
    justify-content: center;
}

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

.nav-links a {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 200;
    /* Fluid typography: Min 0.6rem, Pref 1.5vw, Max 1rem */
    font-size: clamp(0.6rem, 1.5vw, 1rem);
    white-space: nowrap;
    /* Prevent individual words from wrapping */
    color: var(--white);
    /* White text for navy header */
}

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

/* Dropdown Styles */
.dropdown {
    position: relative;
    padding: 10px 0;
    /* Add padding to help with hover bridge */
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--primary-color);
    /* Matches header */
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    padding: 10px 0;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    /* Updated to rem */
    color: var(--white);
    white-space: nowrap;
    transition: background-color 0.2s;
}

.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Icon Buttons in Nav Right */
.icon-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--white);
    /* White icons */
    cursor: pointer;
    transition: var(--transition);
    padding: 5px;
}

.icon-btn:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--white);
    /* White hamburger menu */
    cursor: pointer;
    margin-left: 10px;
}

.desktop-icons {
    display: flex;
    gap: 5px;
}

.mobile-icons {
    display: none;
    /* Hidden by default */
}

/* Hero Section */
/* Scrollytelling Track */
.hero-scrollytelling-track {
    height: 150vh;
    /* Adjusted track for fast animation that ends exactly when hero leaves */
    position: relative;
    background-color: var(--light-color);
}

.hero {
    min-height: 100vh;
    height: 100vh;
    /* Pin to full viewport height */
    padding: 0;
    /* Remove padding as we center with flex */
    /* background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('assets/hero-bg.jpg') no-repeat center center/cover; */
    background-color: var(--primary-color);
    /* Fallback */
    position: relative;
    /* Changed from sticky for better canvas positioning context, or generic sticky handling */
    position: sticky;
    /* Keep sticky as requested for scrollytelling usually */
    top: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Center content vertically */
}

#hero-sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Ensure full width inside stuck container */
    /* max-width removed to allow 80% screen width card */
}

.hero-acrylic-card {
    /* Transparent Background */
    background-color: transparent;
    padding: 60px;
    /* Increased padding for larger card */

    /* L.pharma-glow .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: inherit;
} */
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;

    /* Dimensions: 80% Width & 40% Height of Hero */
    width: 80%;
    min-height: 30vh;
    margin: 0 auto;
    /* Center horizontally */
}

.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Float Animation Removed */

@keyframes float-phone {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@media (max-width: 900px) {
    .hero-acrylic-card {
        display: flex;
        /* Switch back to flex column for mobile */
        flex-direction: column;
        padding: 30px;
        gap: 30px;
        height: auto;
        min-height: auto;
    }

    .hero-image-placeholder {
        height: 250px;
    }
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--white);
    /* Fallback */
    background: linear-gradient(135deg, #ffffff 0%, #285b9d 100%);
    /* White to Light Steel Blue */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Acrylic Styles Removed */
}

.hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    max-width: 100%;
    /* Allow full width of left column */
}

.pre-headline {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.75rem;
    /* Half of 3.5rem default */
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.2;
    font-family: 'Outfit', sans-serif;
    display: block;
}

@media (max-width: 900px) {
    .pre-headline {
        font-size: 1.25rem;
        /* Half of 2.5rem mobile */
    }
}

/* Hero Shape Removed for Full Background Visibility */
.hero-shape {
    display: none;
}

/* Hero Buttons Specific Styles */
.hero-buttons .btn-primary {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-buttons .btn-primary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: transparent;
}

.hero-buttons .btn-secondary {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--white);
    color: var(--white);
}

.hero-buttons .btn-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
}




/* Stats */
.stats {
    background-color: transparent;
    padding: 0;
    position: relative;
    z-index: 100;
    margin-top: -85px;
    /* Half of approx. 170px total height */
    margin-bottom: 0;
    /* Let overflow be naturally handled by section padding */
}

.stats-grid {
    /* Updated Dark Glow Style */
    /* White Acrylic Style */
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);

    /* Soft Shadow */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    border-radius: 24px;
    padding: 40px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 30px;
    text-align: center;
    width: 70%;
    margin: 0 auto;

    /* Floating Effect */
    position: relative;
    z-index: 100;
    margin-top: 0;
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

body.dark-mode .stats-grid {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Gradient Glow Pseudo-element Removed */
/* .stats-grid::before { ... } */

.stats-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.stat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    mix-blend-mode: normal;
}

.stat-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    mix-blend-mode: normal;
    /* Removed difference mode */
    line-height: 1.4;
    opacity: 0.9;
}

/* Hover Effect: Icon Color Change */
.stat-item:hover .stat-icon {
    color: #f4c142;
    /* Yellow */
    text-shadow: 0 0 15px rgba(244, 193, 66, 0.9);
    transform: scale(1.1);
}

@media (max-width: 900px) {

    /* Fix Stats Bar Drop */
    .stats {
        margin-top: -85px !important;
        position: relative;
        z-index: 200;
    }

    .stats-grid {
        flex-direction: column;
        padding: 30px;
        gap: 20px;
    }

    .stat-item {
        flex-direction: row;
        text-align: left;
        align-items: center;
        width: 100%;
    }

    .stat-text {
        font-size: 1rem;
    }
}

/* About */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.placeholder-box {
    width: 100%;
    height: 400px;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-weight: 500;
    border-radius: var(--radius-md);
}

.feature-list {
    margin: 30px 0;
}

.feature-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.feature-list i {
    color: var(--accent-color);
}

.btn-text {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text:hover {
    gap: 12px;
}

/* Services */
.services {
    background-color: var(--light-color);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header p {
    color: var(--text-muted);
}

.section-header .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

#services.section {
    background-color: var(--light-color);
    min-height: 100vh;
    /* Make section 2 full viewport height */
    padding-top: 100px;
    padding-bottom: 80px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center slider vertically */
    position: relative;
    overflow: hidden;
}

#services-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Let clicks pass through */
}

#services .container-fluid {
    position: relative;
    z-index: 1;
}

#services .section-title {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-color);
    /* Fallback */
}

.services-slider {
    width: 100%;
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

.services-track {
    display: flex;
    width: max-content;
    /* Allow track to expand as needed */
    gap: 30px;
    align-items: stretch;
    /* Ensure all cards stretch to same height */
    cursor: grab;
    user-select: none;
    /* Prevent text selection while dragging */
    will-change: transform;
}

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

.service-card-slider {
    flex: 0 0 350px;
    min-height: 400px;
    /* Reverted to 400px */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(225, 231, 255, 0.3);
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */
    height: auto;
    /* Allow to expand */
}

.service-card-slider:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.service-card-slider .icon-box {
    margin-bottom: 20px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 86, 179, 0.1);
    border-radius: 50%;
}

.service-icon {
    width: 80px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.service-card-slider:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-card-slider h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--primary-color);
    min-height: 3.5rem;
    /* Reserve space for 2 lines to align paragraphs */
    display: flex;
    align-items: flex-start;
    /* Vertically center short titles in this space */
}

.service-card-slider p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* Animation keyframes removed - now handled by JS for interactivity */


.icon-box {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 86, 179, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Contact */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info .method {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.contact-info .method i {
    width: 50px;
    height: 50px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.full-width {
    width: 100%;
}

/* Gradient Wrapper for Contact + Footer */
.footer-gradient-wrapper {
    /* Match Arsenal's bg (light-color) then fade to white then to blue */
    /* Pushing the blue transition lower (starting around 60-70%) per user request */
    background: linear-gradient(180deg, var(--light-color) 0%, var(--white) 10%, var(--primary-color) 100%);
    position: relative;
    width: 100%;
}

/* Footer */
.footer {
    background-color: transparent;
    color: #e9ecef;
    padding: 80px 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-logo {
    color: var(--white);
    display: block;
    margin-bottom: 20px;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 20px;
}

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

.footer-col ul li a {
    color: #adb5bd;
}

.footer-col ul li a:hover {
    color: var(--white);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 0.9rem;
    color: #adb5bd;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .navbar .nav-links {
        display: None;
        /* Hidden by default on mobile, toggled with JS */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow-md);
        max-height: 80vh;
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar .nav-links a {
        color: var(--dark-color);
        /* Dark text for white mobile menu */
        font-size: 1.1rem;
        padding: 15px 0;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .navbar .nav-links a:hover {
        padding-left: 10px;
        color: var(--secondary-color);
        background-color: transparent;
    }

    /* Dropdown Handling for Mobile */
    .dropdown-menu {
        position: static;
        /* Relative in flow for mobile */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.02);
        padding-left: 20px;
        display: none;
        /* Hidden by default, could use JS to toggle, or just show all */
        min-width: 100%;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        /* distinct from desktop hover */
    }

    .nav-links li {
        width: 100%;
    }

    .navbar .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    /* Toggle Icon Visibility */
    .desktop-icons {
        display: none;
    }

    .mobile-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--light-color);
    }

    .mobile-icons .icon-btn {
        font-size: 1.5rem;
        /* Larger touch targets */
    }

    /* --- Mobile Header Sizing Fix --- */
    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-right .btn-primary {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .theme-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        margin-right: 5px;
    }

    /* -------------------------------- */

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

    .hero-acrylic-card {
        width: 95%;
        /* Wider on mobile */
        padding: 20px;
    }

    /* Fix Stats Grid moved to earlier media query, ensuring full width here */
    .stats-grid {
        width: 90%;
    }

    .about-grid,
    .contact-container,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero-shape {
        opacity: 0.3;
        width: 100%;
    }

    /* Prevent Horizontal Scroll on Mobile specifically */
    .hero-scrollytelling-track,
    .footer-gradient-wrapper,
    .arsenal-section {
        overflow-x: hidden;
        width: 100%;
    }
}

/* Pull-Down Navbar Interaction */

/* 1. Static Navbar (Default State) */
.navbar {
    position: absolute;
    /* Changes from fixed to absolute */
    top: 0;
    left: 0;
    width: 100%;
    /* Keep current styles */
    background-color: transparent;
    /* Initially transparent on Hero */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 1000;
    box-shadow: none;
    /* No shadow initially */
    padding: 15px 0;
    border-bottom: 0;
    transition: transform 0.4s ease, background-color 0.4s ease;
}

/* 2. Fixed Hidden State (Scrolled Past Hero) */
.navbar.fixed-hidden {
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    /* Hides it above viewport */
    background-color: rgba(3, 14, 34, 0.95);
    /* Apply background for readability when pulled down */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

/* 3. Fixed Active State (Pulled Down) */
.navbar.fixed-active {
    position: fixed;
    top: 0;
    transform: translateY(0);
    /* Slides down */
    background-color: rgba(3, 14, 34, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

/* 4. Pull-Down Handle */
.navbar-handle {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    /* Hidden by default */
    width: 40px;
    height: 20px;
    background-color: rgba(3, 14, 34, 0.25);
    /* Acrylic Navy - Matched to Sidebar */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    border-radius: 0 0 10px 10px;
    /* Rounded bottom */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1001;
    /* Above Navbar */
    transition: transform 0.4s ease, background-color 0.3s ease, height 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Fillets for Smooth Top Connection */
.navbar-handle::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 0 100%, transparent 15px, rgba(3, 14, 34, 0.25) 15.5px);
    z-index: 1001;
}

.navbar-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 100% 100%, transparent 15px, rgba(3, 14, 34, 0.25) 15.5px);
    z-index: 1001;
}

.navbar-handle i {
    font-size: 0.8rem;
    animation: bounce-down 2s infinite;
}

/* Hover Effect Removed as per user request */


/* Visible State for Handle */
.navbar-handle.visible {
    transform: translateX(-50%) translateY(0);
}

/* Animation for handle icon */
@keyframes bounce-down {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(3px);
    }

    60% {
        transform: translateY(1px);
    }
}


/* 
   ==========================================================================
   PHARMA-GLOW EFFECT (EXACT IMPLEMENTATION)
   ==========================================================================
*/

:root {
    --h: 210;
    /* Default blue hue */
    --dark: #030e22;
    /* Synced with your sidebar base */
    --glow-sens: 30;
    --card-bg: linear-gradient(8deg, var(--dark) 75%, color-mix(in hsl, var(--dark), white 2.5%) 75.5%);
    --blend: soft-light;
    --glow-blend: plus-lighter;
    --glow-color: 40deg 80% 80%;
    --glow-boost: 0%;
}

body.light {
    --card-bg: linear-gradient(8deg, color-mix(in hsl, hsl(260, 25%, 95%), var(--dark) 2.5%) 75%, hsl(260, 25%, 95%) 75.5%);
    --blend: darken;
    --glow-blend: luminosity;
    --glow-color: 280deg 90% 95%;
    --glow-boost: 15%;
    --fg: black;
}

.pharma-glow {
    --pads: 0px;
    /* Padding handled by button */
    --color-sens: calc(var(--glow-sens) + 20);
    --pointer-°: 45deg;

    position: relative;
    border-radius: var(--radius-md) !important;
    /* Force match with .btn-primary */
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    /* Removed display, background, and specific border to inherit from button */
}

.pharma-glow::before,
.pharma-glow::after,
.pharma-glow>.glow {
    content: "";
    position: absolute;
    inset: -1px;
    /* Cover border */
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

.pharma-glow:not(:hover):not(.animating)::before,
.pharma-glow:not(:hover):not(.animating)::after,
.pharma-glow:not(:hover):not(.animating)>.glow {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

.pharma-glow::before {
    /* mesh gradient border */
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(0, 0, 0, 0) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
        radial-gradient(at 80% 55%, rgb(59, 126, 185) 0px, transparent 50%) border-box,
        radial-gradient(at 69% 34%, rgb(235, 163, 48) 0px, transparent 50%) border-box,
        radial-gradient(at 8% 6%, rgb(13, 126, 179) 0px, transparent 50%) border-box,
        radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 86% 85%, rgb(71, 123, 175) 0px, transparent 50%) border-box,
        radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) border-box,
        radial-gradient(at 51% 4%, rgb(228, 203, 59) 0px, transparent 50%) border-box,
        linear-gradient(#0a3864 0 100%) border-box;

    /* opacity increases as pointer gets near edge */
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));

    /* border is masked to a cone, originating from the center towards the pointer */
    mask-image:
        conic-gradient(from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.pharma-glow::after {
    /* mesh gradient background */
    border: 1px solid transparent;
    background:
        radial-gradient(at 80% 55%, rgb(16, 14, 125) 0px, transparent 50%) padding-box,
        radial-gradient(at 69% 34%, rgb(90, 176, 213) 0px, transparent 50%) padding-box,
        radial-gradient(at 8% 6%, rgb(217, 174, 47) 0px, transparent 50%) padding-box,
        radial-gradient(at 41% 38%, rgb(118, 204, 225) 0px, transparent 50%) padding-box,
        radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) padding-box,
        radial-gradient(at 82% 18%, rgb(225, 219, 181) 0px, transparent 50%) padding-box,
        radial-gradient(at 51% 4%, rgb(89, 123, 148) 0px, transparent 50%) padding-box,
        linear-gradient(#f5be33 0 100%) padding-box;

    /* 5 radial masks to create a squircle-cut-out, and then a cone-gradient 
            originating from the center towards the pointer to highlight the edges */
    mask-image:
        linear-gradient(to bottom, black, black),
        radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
        radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
        radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    mask-composite: subtract, add, add, add, add, add;

    /* opacity increases as pointer gets near edge */
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
    mix-blend-mode: var(--blend);
}

.pharma-glow>.glow {
    /* glowing border edges */
    --outset: 30px;
    /* Fixed outset for glow */

    /* outer padding so the glow can overflow the element without being masked */
    inset: calc(var(--outset) * -1);
    pointer-events: none;
    z-index: 2;

    /* glow is masked to a cone, originating from the center towards the pointer */
    mask-image:
        conic-gradient(from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);

    /* opacity increases as pointer gets near edge */
    opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
    mix-blend-mode: var(--glow-blend);
}

.pharma-glow>.glow::before {
    content: "";
    position: absolute;
    inset: var(--outset);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px hsl(var(--glow-color) / 100%),
        inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
        0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
}

.pharma-glow .inner {
    position: relative;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    /* Let clicks pass to the anchor */
}

/* ISO Certificate Section Styles */
.iso-certificate-section {
    padding: 80px 0;
    /* Use a dark background to make the certificate pop, or keep white */
    background-color: var(--light-color);
}

.certificate-card {
    position: relative;
    width: 95vw;
    max-width: 100%;
    /* aspect-ratio: 16/10; Removed to allow better scaling on wide screens if needed, or keep? Keeping for shape. */
    aspect-ratio: 16/9;
    /* Making it slightly wider since we are going full viewport width */
    padding: 20px;
    background: linear-gradient(135deg, #e0f0ff 0%, #fff5e6 50%, #e6f0ff 100%);
    /* Subtle mesh-like gradient */
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 100px rgba(45, 101, 168, 0.1) inset;
    overflow: hidden;
}

body.dark-mode .certificate-card {
    /* Grey -> Light Blue -> Grey Gradient */
    background: linear-gradient(135deg, #4facfe 0%, #2c3e50 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Blend Mode Difference for Legibility in Dark Mode */
body.dark-mode .certificate-card .cert-content p,
body.dark-mode .certificate-card .cert-content h2,
body.dark-mode .certificate-card .cert-content span {
    mix-blend-mode: difference;
    color: var(--dark-color);
    /* Ensure base color helps the difference mode pop */
}

body.dark-mode .certificate-card .cert-content .cert-title {
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
}

#cert-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: inherit;
    pointer-events: auto;
    /* Allow mouse interaction for the effect */
}

/* Decorative Inner Border */
.cert-inner-border {
    width: 100%;
    height: 100%;
    border: 3px solid var(--primary-color);
    border-radius: 15px;
    z-index: 1;
    /* Sit above canvas */
    position: relative;
    /* ... rest of properties ... */
    border-top-right-radius: 80px;
    border-bottom-left-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;
    /* Let mouse pass through to canvas if possible, or we attach listener to card */
}

.cert-content {
    text-align: center;
    width: 100%;
    max-width: 700px;
    pointer-events: auto;
    /* Re-enable text selection/interaction */
}

/* Stars */
.cert-decor {
    position: absolute;
    color: var(--primary-color);
    font-size: 1.5rem;
    animation: twinkle 3s infinite ease-in-out;
}

.top-left {
    top: 30px;
    left: 30px;
}

.top-right {
    top: 30px;
    right: 30px;
}

.bottom-left {
    bottom: 30px;
    left: 30px;
}

.bottom-right {
    bottom: 30px;
    right: 30px;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Typography */
.cert-overline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.cert-overline::before,
.cert-overline::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    background: var(--text-muted);
    position: absolute;
    top: 50%;
}

.cert-overline::before {
    left: -40px;
}

.cert-overline::after {
    right: -40px;
}

.cert-title {
    font-family: 'Funnel Display', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    letter-spacing: -2px;
    /* Gradient Text */
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cert-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.cert-body-text {
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 50px;
    padding: 0 40px;
    font-style: italic;
    opacity: 0.8;
}

/* Footer Area with Seal and 'Signatures' */
.cert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cert-badge-block {
    text-align: center;
}

.cert-label {
    display: block;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    padding: 5px 15px;
    transform: skew(-10deg);
}

.cert-value {
    display: block;
    font-size: 0.8rem;
    margin-top: 5px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--text-muted);
}

/* Seal */
.cert-seal-container {
    position: relative;
}

.cert-seal {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: #8a6e00;
    font-weight: bold;
    border: 4px double #fff;
    outline: 2px dashed #FDB931;
    outline-offset: 4px;
}

.cert-seal i {
    font-size: 2rem;
    margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .certificate-card {
        aspect-ratio: auto;
        padding-bottom: 40px;
    }

    .cert-title {
        font-size: 3rem;
    }

    .cert-footer {
        flex-direction: column;
        gap: 30px;
    }
}

/* Our Arsenal Section Styles */

.arsenal-section {
    padding: 80px 0;
    background-color: var(--light-color);
    position: relative;
    z-index: 2;
    color: var(--text-color);
}

.arsenal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    perspective: 2000px;
    /* Enable 3D space */
}

.arsenal-text-content {
    text-align: center;
    max-width: 100%;
    z-index: 5;
    /* Ensure text stays on top */
}

.arsenal-section .section-title {
    font-size: 5rem;
    /* Requested 5rem */
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1;
    /* Gradient: Dark Blue to Light Blue */
    background: linear-gradient(135deg, var(--primary-color) 0%, #4facfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
}

.section-desc {
    /* Serves as base class, ensuring visibility */
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* GSAP Text Fill Animation */
.fill-text {
    margin: 0;
    font-size: 2.5rem;
    /* Requested 2.5rem */
    font-weight: 700;
    /* Bold */
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: pretty;
    font-family: 'Space Grotesk', sans-serif;
    /* Requested Font */
    margin-bottom: 2rem;
}

.fill-text>span {
    -webkit-background-clip: text;
    background-clip: text;
    /* Unfilled State: Light Blue */
    background-color: #a6c0fe;
    /* Gradient for fill effect: Light Blue start -> Yellow/Blue end */
    background-image: linear-gradient(135deg, #4facfe 0%, #f6d365 50%, #a6c0fe 50.1%);
    background-position: 0 0;
    background-repeat: no-repeat;
    /* We animate size to cover. */
    background-size: 0% 100%;
    color: transparent;
    display: inline;
    will-change: background-size;
}

@media (prefers-reduced-motion: reduce) {
    .fill-text>span {
        background-size: 100% 100%;
        background-color: transparent;
        background-image: linear-gradient(135deg, #4facfe 0%, #f6d365 100%);
    }
}

.arsenal-text-content .btn {
    padding: 12px 30px;
}

/* Bento Grid Layout */
/* Safari & Flickering Fixes */
.arsenal-bento-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile: 1 col */
    gap: 15px;
    padding: 0;
    width: 90vw;
    max-width: 100%;

    /* 3D Properties */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Safari Fix */
    transition: transform 0.5s ease;
}

/* Pause floating on hover to stop moving target issues */
.arsenal-bento-grid:hover {
    animation-play-state: paused;
}

@media (min-width: 992px) {

    /* ... existing media query setup ... */
    .arsenal-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .arsenal-text-content {
        text-align: left;
        flex: 0 0 45%;
        padding-right: 40px;
    }

    .arsenal-bento-grid {
        flex: 0 0 50%;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(130px, auto);
        grid-auto-flow: dense;
        width: 35vw;
        margin-right: 5%;

        /* 3D Floating */
        transform: rotateY(-12deg) rotateX(2deg) translateZ(0);
        -webkit-transform: rotateY(-12deg) rotateX(2deg) translateZ(0);
        /* Safari */
        animation: float-grid 6s ease-in-out infinite;
        box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.1);
    }

    .bento-tall {
        grid-row: span 2;
    }

    .bento-wide {
        grid-column: span 2;
    }
}

@keyframes float-grid {

    0%,
    100% {
        transform: rotateY(-12deg) rotateX(2deg) translateY(0px);
    }

    50% {
        transform: rotateY(-12deg) rotateX(2deg) translateY(-20px);
    }
}

.arsenal-card {
    background: var(--white);
    border-radius: 15px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Safari Fix: Isolate layer to prevent clipping bugs with overflow:hidden + 3d */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

.arsenal-card:hover {
    transform: translateY(-5px) scale(1.02) translateZ(10px);
    /* Lift up, sticking to Z */
    box-shadow: 0 15px 40px rgba(14, 43, 92, 0.15);
    border-color: rgba(14, 43, 92, 0.1);
    z-index: 20;
    /* Ensure hovered card pops above neighbors */
}

/* Big Faded Icon Background */
.arsenal-icon-bg {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 6rem;
    color: var(--secondary-color);
    opacity: 0.05;
    transform: rotate(-20deg);
    transition: all 0.6s ease;
    z-index: 0;
    pointer-events: none;
    /* Prevent mouse interaction */
}

.arsenal-card:hover .arsenal-icon-bg {
    opacity: 0.1;
    transform: rotate(0deg) scale(1.1);
    color: var(--primary-color);
}

.arsenal-content {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    transform: translateZ(30px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* Safari */
    pointer-events: none;
    /* KEY FIX: Pass all hover events to the parent card */
}

.arsenal-icon {
    font-size: 1.8rem;
    position: relative;
    z-index: 11;
    color: var(--secondary-color);
    margin-bottom: 10px;
    background: rgba(14, 43, 92, 0.03);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    /* Fix flickering */
}

.arsenal-card:hover .arsenal-icon {
    background: var(--primary-color);
    transform: translateY(-3px) translateZ(10px);
    box-shadow: 0 5px 15px rgba(14, 43, 92, 0.3);
    color: white;
}

.arsenal-number {
    font-family: 'Funnel Display', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 5px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(1px);
    position: relative;
    z-index: 12;
    pointer-events: none;
    /* Fix flickering */
}

.bento-tall .arsenal-number {
    font-size: 3rem;
}

.arsenal-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transform: translateZ(1px);
    pointer-events: none;
    /* Fix flickering */
}

.arsenal-card:hover .arsenal-label {
    color: var(--primary-color);
}


/* Glass Shimmer Button */
.arsenal-text-content .btn {
    position: relative;
    overflow: hidden;
    /* Gradient: Light Blue to White-ish with 50% Opacity */
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.5) 0%, rgba(240, 242, 245, 0.5) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--primary-color);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.2);
}

.arsenal-text-content .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(14, 43, 92, 0.5);
}

/* Glass Shimmer Effect */
.arsenal-text-content .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

.arsenal-text-content .btn:hover::before {
    animation: glass-shimmer 0.75s;
}

@keyframes glass-shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* 
   ==========================================================================
   GLASS CARD CONTACT SECTION
   ==========================================================================
*/

/* Wrapper for 3D Perspective */
.glass-assembly-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    perspective: 2000px;
    /* Deep perspective for flying parts */
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* The Main Card Container */
.glass-card {
    position: relative;
    width: 100%;
    border-radius: 30px;
    /* We don't set overflow hidden here so parts can fly in from outside, 
       but we might need it for the final state. */
    transform-style: preserve-3d;
}

/* Decorative Layers (The "Parts") */
.glass-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    pointer-events: none;
    /* Let clicks pass to form */
    will-change: transform, opacity;
}

/* Layer 1: The Base (Dark/Blurred) */
.layer-back {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
    transform: translateZ(-50px);
    /* Start depth */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Layer 2: The Frost (Lighter) */
.layer-middle {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: translateZ(0);
}

/* Layer 3: The Frame (Highlight) */
.layer-border {
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
    background: transparent;
    transform: translateZ(50px);
    /* Clip path animation support if needed, or just scale */
}

/* Content sitting on top */
.glass-content {
    position: relative;
    z-index: 10;
    padding: 60px !important;
    /* Override container padding */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: transparent !important;
    /* Remove old bg */
    opacity: 0;
    /* JS will fade this in */
    transform: translateZ(60px);
}

/* Overriding old contact styles for Glass Mode */
.contact-container {
    /* Reset grid logic inside glass content */
    width: 100%;
    max-width: none;
}

.contact-form {
    background: rgba(255, 255, 255, 0.1) !important;
    /* Semi-transparent white */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-info p,
.contact-info .method p {
    color: var(--text-color);
    /* Ensure readability */
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .glass-content {
        grid-template-columns: 1fr;
        padding: 30px !important;
        gap: 30px;
    }

    .glass-assembly-wrapper {
        padding: 0;
    }

    .glass-card {
        border-radius: 0;
        /* Full bleed on mobile maybe? Or smaller radius */
    }
}

/* --- Experimental: Preview Password Overlay --- */
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    z-index: 3000;
    /* Highest priority */
    display: flex;

    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

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

.preview-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(14, 43, 92, 0.4);
    /* Navy tint */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: -1;
}

.preview-content {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 500px;
    width: 90%;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.preview-logo img {
    height: 60px;
    width: auto;
    margin: 0 auto 20px;
}

.preview-content h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.preview-content p {
    color: var(--text-color);
    margin-bottom: 15px;
}

.preview-content .disclaimer {
    font-size: 0.9rem;
    color: var(--text-muted);
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.preview-content .input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-content input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-family: inherit;
}

.preview-content button {
    padding: 12px 25px;
    border-radius: var(--radius-md);
}

.error-msg {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 10px;
    display: none;
}

/* --- Experimental: Loading Screen --- */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    background-color: var(--primary-color);
    z-index: 2000;
    /* Below Password (3000) & Sidebar (2500) but above Navbar (1000) */
    display: flex;

    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    color: var(--white);
    width: 300px;
}

.logo-img-loader {
    height: 80px;
    width: auto;
    margin: 0 auto 30px;
    filter: brightness(0) invert(1);
    /* Make it white */
    animation: loader-pulse 2s infinite ease-in-out;
}

.loading-bar-container {
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.loading-bar {
    width: 0%;
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 2px;
    transition: width 0.3s ease-out;
    box-shadow: 0 0 10px var(--accent-color);
}

.loading-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

@keyframes loader-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Responsive adjustments for Password Overlay */
@media (max-width: 768px) {
    .preview-content {
        padding: 30px 20px;
    }

    .preview-content .input-group {
        flex-direction: column;
    }

    .preview-content button {
        width: 100%;
    }
}

/* --- Disclaimer Checkbox Styles --- */
.disclaimer-acknowledgment {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

.custom-checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
    position: relative;
    user-select: none;
}

.custom-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark-box {
    height: 24px;
    width: 24px;
    background-color: #eee;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: relative;
}

.custom-checkbox-container:hover .checkmark-box {
    background-color: #ccc;
}

.custom-checkbox-container input:checked~.checkmark-box {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Checkmark Icon (Pseudo-element) */
.checkmark-box::after {
    content: '';
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox-container input:checked~.checkmark-box::after {
    display: block;
}

/* --- Morph & Jump Animation (Error State) --- */
.checkmark-box.morph-jump {
    /* Morph to Hollow Arrow (Caret) */
    clip-path: none;
    /* Remove clip path */
    background-color: transparent;
    /* No fill */
    border-color: #dc3545;
    /* Red warning color */

    /* Create ^ shape by hiding bottom and right borders after rotation */
    border-bottom-color: transparent;
    border-right-color: transparent;

    border-radius: 0;
    /* Sharp corners for arrow */

    /* Rotate to point up */
    transform: rotate(45deg) scale(0.9);

    /* Jump Animation using translate property to avoid transform conflict */
    animation: jump-point 0.5s ease-in-out 3;
}

/* Remove checkmark during morph */
.checkmark-box.morph-jump::after {
    display: none;
}

/* Jump Animation pointing upwards */
@keyframes jump-point {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -15px;
        /* Jump up */
    }
}