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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #1e293b;
    background-color: #ffffff;
}

.container {
    max-width: 1200px;
    margin: 1px auto;
    padding: 2px 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
    color: #1e1e1e;
}

/* Colors */
:root {
    --primary-color: #1e3a8a;
    --primary-dark: #1e3a8a;
    --primary-light: #3b82f6;
    --secondary-color: #0d9488;
    --accent-color: #f97316;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

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

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

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

.btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
}

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e5e7eb;
}

.nav {
    padding: 0;
}

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

/* Brand Section */
.nav-brand {
    flex-shrink: 0;
}

.brand-link {
    display: inline-block;
    transition: transform 0.35s ease;
}

.main-logo {
    height: 60px;
    width: auto;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.brand-link:hover .main-logo {
   transform: scale(1.50);
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0 auto;
}

.nav-menu li {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link i {
    font-size: 1.0rem;
    width: 16px;
    text-align: center;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: #3b82f6;
}

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

.nav-link.active {
    color: #3b82f6;
}

.nav-link.active::after {
    width: 80%;
}


/* Navigation Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.btn-primary-nav {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.btn-primary-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.nav-toggle:hover {
    background: #f3f4f6;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Responsive Navigation */
@media (max-width: 1024px) {
    .nav-menu {
        gap: 0.25rem;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1.5rem;
        gap: 0;
        transform: translateY(-150%);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #e5e7eb;
    }
    
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        padding: 1rem;
        text-align: left;
    }
    
    .nav-link::after {
        display: none;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: #f9fafb;
        color: #3b82f6;
    }
    
    .btn-primary-nav {
        display: none;
    }
    
    .main-logo {
        height: 45px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .main-logo {
        height: 40px;
    }
    
    .nav-menu {
        top: 60px;
        padding: 1rem;
    }
    
    .nav-link {
        padding: 0.875rem;
        font-size: 0.9rem;
    }
}

/* Hero Section */
/* Unique Split-Screen Hero Section 2026 */
.hero-split {
    position: relative;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.hero-left-panel {
    flex: 1;
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25rem;
    overflow: hidden;
}

.creative-showcase {
    position: relative;
    width: 100%;
    max-width: 750px;
    height: 85vh;
    max-height: 700px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
}


/* Rotating Gallery */
.rotating-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
}

.gallery-wheel {
    position: relative;
    width: 600px;
    height: 600px;
    animation: wheelRotate 30s linear infinite;
}

.wheel-item {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.item-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.item-2 {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.item-3 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.item-4 {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.wheel-item:hover {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.wheel-item.active {
    border: 3px solid #3b82f6;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.item-content {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.item-title {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.item-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
}

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

/* Center Display */
.center-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 100px rgba(59, 130, 246, 0.5);
    z-index: 10;
}

.center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.center-display:hover .center-image {
    transform: scale(1.1);
}

.center-frame {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #3b82f6;
}

.tl {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
    border-radius: 20px 0 0 0;
}

.tr {
    top: -1px;
    right: -1px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 20px 0 0;
}

.bl {
    bottom: -1px;
    left: -1px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 20px;
}

.br {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 20px 0;
}

/* Floating Logos */
.floating-logos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-logo {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    animation: logoFloat 8s ease-in-out infinite;
}

.logo-1 {
    top: 20%;
    left: -20px;
    animation-delay: 0s;
}

.logo-2 {
    top: 70%;
    right: -20px;
    animation-delay: 2s;
}

.logo-3 {
    bottom: -20px;
    left: 30%;
    animation-delay: 4s;
}

.logo-4 {
    top: -20px;
    right: 30%;
    animation-delay: 6s;
}

.logo-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

@keyframes logoFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -15px) rotate(5deg); }
}

/* Modern Stats Visual - New Style */
.stats-visual {
    bottom: 4rem;
    left: 4rem;
    right: 5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    z-index: 5;
}

.stat-modern {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    transition: all 0.3s ease;
    min-width: 80px;
    text-align: left;
    cursor: pointer;
}

.stat-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6, #f97316);
    border-radius: 2px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.stat-modern:hover::before {
    width: 4px;
    opacity: 1;
}

.stat-modern:hover {
    transform: translateX(2px);
}


.stat-content {
    text-align: left;
    padding-left: 0.75rem;
    flex: 1;
}

.stat-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.125rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: block;
}

.stat-label {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
}

.stat-desc {
    display: none;
}


@keyframes progressGrow {
    to { width: var(--progress-width); }
}

@keyframes progressPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.stat-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488, #3b82f6);
    background-size: 400% 400%;
    z-index: -1;
    animation: statGlow 3s ease-in-out infinite;
    filter: blur(15px);
    opacity: 0.6;
}

@keyframes statGlow {
    0%, 100% { 
        background-position: 0% 50%; 
        opacity: 0.6; 
        transform: scale(1); 
    }
    50% { 
        background-position: 100% 50%; 
        opacity: 0.8; 
        transform: scale(1.05); 
    }
}


.hero-right-panel {
    flex: 1;
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
}

/* Animated Background Elements */
.hero-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.glowing-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: orbFloat 8s ease-in-out infinite;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    bottom: -80px;
    left: -80px;
    animation-delay: 2s;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 4s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(20px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-10px, 20px) scale(0.95);
    }
    75% {
        transform: translate(-20px, -10px) scale(1.05);
    }
}

.floating-shape {
    position: absolute;
    opacity: 0.1;
    animation: shapeFloat 10s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    border: 2px solid #3b82f6;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 20%;
    right: 15%;
    animation-delay: 0s;
}

.shape-2 {
    width: 80px;
    height: 80px;
    border: 2px solid #f97316;
    border-radius: 50%;
    bottom: 25%;
    left: 10%;
    animation-delay: 3s;
}

@keyframes shapeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

/* Modern Content Layout */
.modern-content {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    height: 100%;
    justify-content: center;
    z-index: 1;
}

/* Hero Content */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Hero Title */
.hero-title-section {
    text-align: center;
    animation: fadeInUp 1s ease-out 0.5s forwards;
    opacity: 0;
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.title-word {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slideInUp 0.8s ease-out forwards;
    opacity: 0;
}

.title-word:nth-child(1) { animation-delay: 0.6s; }
.title-word:nth-child(2) { animation-delay: 0.8s; }
.title-word:nth-child(3) { animation-delay: 1s; }

.title-word.highlight {
    background: linear-gradient(135deg, #f97316, #ea580c, #dc2626);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: slideInUp 0.8s ease-out 0.8s forwards, gradientShift 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(249, 115, 22, 0.5);
}

.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.deco-line {
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: expandLine 1s ease-out 1.2s forwards;
    transform: scaleX(0);
}

.deco-line.line-2 {
    animation-delay: 1.4s;
}

.deco-dots {
    display: flex;
    gap: 0.5rem;
}

.deco-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #f97316);
    animation: dotPulse 2s ease-in-out infinite;
}

.deco-dots span:nth-child(1) { animation-delay: 0s; }
.deco-dots span:nth-child(2) { animation-delay: 0.2s; }
.deco-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes expandLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

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

/* Hero Description */
.hero-description {
    text-align: center;
    animation: fadeInUp 1s ease-out 1.2s forwards;
    opacity: 0;
}

.hero-description p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 500px;
    margin: 0 auto;
}

/* Hero Actions */
.hero-actions {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 1.4s forwards;
    opacity: 0;
    justify-content: center;
}

.cta-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    justify-content: center;
}

.cta-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}

.cta-primary:hover::before {
    left: 100%;
}

.cta-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

.btn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transition: width 0.6s ease, height 0.6s ease;
}

.cta-primary:hover .btn-glow {
    width: 300px;
    height: 300px;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.cta-button:hover .btn-icon {
    transform: translateX(5px);
}

.cta-button svg {
    width: 18px;
    height: 18px;
}

/* Trust Section */
.trust-section {
    animation: fadeInUp 1s ease-out 1.6s forwards;
    opacity: 0;
    margin-top: 1rem;
}

.trust-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.trust-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, #3b82f6, #f97316);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease-in-out infinite;
}

.trust-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.certification-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.cert-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
}

.cert-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(249, 115, 22, 0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cert-badge:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
}

.cert-badge:hover::before {
    opacity: 1;
}

.cert-badge img {
    width: 100%;
    height: 45px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: brightness(1.3);
    transition: filter 0.4s ease;
}

.cert-badge:hover img {
    filter: brightness(1.5);
}

.cert-tooltip {
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.cert-badge:hover .cert-tooltip {
    bottom: calc(100% + 8px);
    opacity: 1;
}

/* Contact Strip */
.contact-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1rem;
    animation: fadeInUp 1s ease-out 1.8s forwards;
    opacity: 0;
}

.contact-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    transition: all 0.3s ease;
}

.contact-block:hover {
    transform: translateX(5px);
}

.contact-icon-box {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(249, 115, 22, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-block:hover .contact-icon-box {
    background: linear-gradient(135deg, #3b82f6, #f97316);
    transform: scale(1.1) rotate(-5deg);
}

.contact-icon-box svg {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.contact-block:hover .contact-icon-box svg {
    color: white;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contact-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Responsive Design for Hero Right Panel */
@media (max-width: 1024px) {
    .certification-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-right-panel {
        padding: 1.5rem;
    }
    
    .title-word {
        font-size: 2rem;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .cta-button {
        width: auto;
    }
    
    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-strip {
        flex-direction: column;
        gap: 1rem;
    }
    
    .contact-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    }
    
    .contact-block {
        justify-content: center;
    }
    
    .glowing-orb {
        display: none;
    }
    
    .floating-shape {
        display: none;
    }
}

@media (max-width: 480px) {
    .title-word {
        font-size: 1.75rem;
    }
    
    .certification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .cert-badge {
        padding: 0.5rem;
    }
    
    .cert-badge img {
        height: 35px;
    }
}

.image-showcase {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.main-image-container {
    position: relative;
    width: 100%;
    height: 600px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.main-image-container:hover .main-image {
    transform: scale(1.05);
}

.image-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    pointer-events: none;
}

.floating-certs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.floating-cert {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: float 6s ease-in-out infinite;
}

.cert-1 {
    top: 20px;
    right: 20px;
    animation-delay: 0s;
}

.cert-2 {
    bottom: 20px;
    left: 20px;
    animation-delay: 2s;
}

.cert-3 {
    top: 50%;
    right: -30px;
    animation-delay: 4s;
}

.cert-small {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.image-gallery-mini {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
}

.gallery-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gallery-thumb:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
}

.gallery-thumb.active {
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.content-split {
    max-width: 600px;
    width: 100%;
}

.branding-section {
    margin-bottom: 3rem;
}

.logo-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.8s forwards;
}

.brand-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    border-radius: 1px;
}

.brand-tagline {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.title-section {
    margin-bottom: 2rem;
}

.title-pre {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.title-main {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.title-word {
    display: block;
    margin-bottom: 0.5rem;
    color: #1e293b;
    animation: wordSlideUp 0.8s ease-out forwards;
    opacity: 0;
}

.title-word.accent {
    background: linear-gradient(45deg, #3b82f6, #f97316);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wordSlideUp 0.8s ease-out 0.2s forwards, gradientShift 3s ease-in-out infinite;
}

.title-word:nth-child(1) { animation-delay: 0.1s; }
.title-word:nth-child(2) { animation-delay: 0.3s; }
.title-word:nth-child(3) { animation-delay: 0.5s; }
.title-word:nth-child(4) { animation-delay: 0.7s; }

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

/* Modern Animations */
@keyframes fadeInDown {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes slideInRight {
from {
    opacity: 0;
    transform: translateX(30px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}

@keyframes expandWidth {
from {
    transform: scaleX(0);
}
to {
    transform: scaleX(1);
}
}

.title-separator {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    margin-top: 1.5rem;
    animation: separatorGrow 1s ease-out 0.8s forwards;
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes separatorGrow {
    to { transform: scaleX(1); }
}

.description-section {
    margin-bottom: 3rem;
}

.main-description {
    font-size: 1.125rem;
    line-height: 1.8;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.9), rgba(249, 115, 22, 0.9), rgba(13, 148, 136, 0.9));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: fadeInUp 1s ease-out 1s forwards, gradientShift 3s ease-in-out infinite;
    margin-bottom: 2rem;
    text-align: center;
}

.key-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.2s forwards;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 3px solid #3b82f6;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

.feature-text {
    flex: 1;
}

.feature-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.feature-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
}

.feature-item span {
    font-weight: 600;
    color: #1e293b;
}

.action-section {
    margin-bottom: 3rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.4s forwards;
}

.action-btn-modern {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.action-btn-modern.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.action-btn-modern.secondary {
    background: transparent;
    color: #3b82f6;
    border: 2px solid #3b82f6;
}

.action-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.action-btn-modern:hover .btn-arrow {
    transform: translateX(3px);
}

.btn-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.action-btn-modern:hover .btn-bg-effect {
    transform: translateX(100%);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.6s forwards;
}

.contact-item {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 3px solid #3b82f6;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.achievement-badges {
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.8s forwards;
}

.badge-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.badge-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.badge-img:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.scroll-indicator-modern {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #3b82f6, transparent);
    animation: lineGrow 2s ease-in-out infinite;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

.scroll-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: labelFade 2s ease-in-out infinite;
}

@keyframes lineGrow {
    0%, 100% { height: 20px; opacity: 0.5; }
    50% { height: 40px; opacity: 1; }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes labelFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

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

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Responsive Styles for Split-Screen Hero */
@media (max-width: 1024px) {
    .hero-split {
        flex-direction: column;
    }
    
    .hero-left-panel,
    .hero-right-panel {
        flex: none;
        min-height: 50vh;
    }
    
    .creative-showcase {
        max-width: 600px;
        height: 600px;
    }
    
    .gallery-wheel {
        width: 500px;
        height: 500px;
    }
    
    .wheel-item {
        width: 150px;
        height: 150px;
    }
    
    .center-display {
        width: 270px;
        height: 270px;
    }
    
    .title-main {
        font-size: 2.5rem;
    }
    
    /* Modern Design Responsive */
    .modern-content {
        gap: 2rem;
    }
    
    .hero-title .title-line {
        font-size: 2.5rem;
    }
    
    .value-card {
        padding: 1.25rem;
    }
    
    .value-icon {
        width: 50px;
        height: 50px;
    }
    
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-left-panel,
    .hero-right-panel {
        padding: 1rem;
    }
    
    .creative-showcase {
        max-width: 500px;
        height: 500px;
    }
    
    .gallery-wheel {
        width: 450px;
        height: 450px;
    }
    
    .wheel-item {
        width: 135px;
        height: 135px;
    }
    
    .center-display {
        width: 240px;
        height: 240px;
    }
    
    .float-logo {
        width: 50px;
        height: 50px;
    }
    
    .logo-img {
        width: 35px;
        height: 35px;
    }
    
    .stat-modern {
        min-width: 75px;
    }
    
        
    .stat-number {
        font-size: 1rem;
    }
    
    .stat-label {
        font-size: 0.55rem;
    }
    
    .stat-desc {
        font-size: 0.75rem;
    }
    
    .title-main {
        font-size: 2rem;
    }
    
    .main-description {
        font-size: 1rem;
    }
    
    /* Modern Design Tablet Responsive */
    .modern-content {
        gap: 1.5rem;
    }
    
    .hero-title .title-line {
        font-size: 2rem;
    }
    
    .hero-description p {
        font-size: 1rem;
    }
    
    .value-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .value-icon {
        width: 60px;
        height: 60px;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .cta-primary,
    .cta-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .action-btn-modern {
        width: 100%;
        max-width: 280px;
    }
    
    .badge-row {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-left-panel,
    .hero-right-panel {
        min-height: 60vh;
    }
    
    .creative-showcase {
        max-width: 400px;
        height: 400px;
    }
    
    .gallery-wheel {
        width: 350px;
        height: 350px;
    }
    
    .wheel-item {
        width: 105px;
        height: 105px;
    }
    
    .center-display {
        width: 190px;
        height: 190px;
    }
    
    .float-logo {
        width: 40px;
        height: 40px;
    }
    
    .logo-img {
        width: 30px;
        height: 30px;
    }
    
    .stat-modern {
        min-width: 70px;
    }
    
        
    .stat-number {
        font-size: 0.85rem;
    }
    
    .stat-label {
        font-size: 0.5rem;
    }
    
    .stat-desc {
        font-size: 0.6rem;
    }
    
    .title-main {
        font-size: 1.75rem;
    }
    
    .logo-badge {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .brand-line {
        width: 30px;
    }
    
    .brand-tagline {
        font-size: 0.8rem;
    }
    
    .main-description {
        font-size: 0.95rem;
    }
    
    /* Modern Design Mobile Responsive */
    .modern-content {
        gap: 1rem;
    }
    
    .hero-title .title-line {
        font-size: 1.75rem;
    }
    
    .hero-description p {
        font-size: 0.95rem;
    }
    
    .value-card {
        padding: 1rem;
    }
    
    .value-icon {
        width: 50px;
        height: 50px;
    }
    
    .value-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .value-content h3 {
        font-size: 1.1rem;
    }
    
    .value-content p {
        font-size: 0.8rem;
    }
    
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .cert-item img {
        height: 50px;
    }
    
    .contact-info .contact-item {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
    
    .feature-item {
        padding: 0.75rem;
    }
    
    .feature-icon {
        width: 35px;
        height: 35px;
    }
    
    .feature-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-modern {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .contact-item {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
    
    .badge-img {
        width: 40px;
        height: 40px;
    }
}

.gallery-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

.gallery-slide.active {
    opacity: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

.gallery-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 10;
    pointer-events: none;
}

.gallery-btn {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    color: white;
}

.gallery-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.gallery-btn svg {
    width: 24px;
    height: 24px;
}

.gallery-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: white;
    border-color: white;
    transform: scale(1.2);
}

.indicator:hover {
    border-color: white;
    transform: scale(1.1);
}

.hero-content-immersive {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.content-wrapper {
    max-width: 800px;
}

.hero-header {
    margin-bottom: 3rem;
}

.experience-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.experience-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cert-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-text {
    display: flex;
    flex-direction: column;
}

.badge-title {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.badge-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488, #3b82f6);
    background-size: 400% 400%;
    border-radius: 100px;
    z-index: -1;
    animation: borderGlow 4s ease-in-out infinite;
    filter: blur(8px);
}

.hero-title-section {
    margin-bottom: 2rem;
}

.hero-title-immersive {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
    color: white;
    margin: 0;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: titleReveal 0.8s ease-out forwards;
}

.title-line:nth-child(1) { animation-delay: 0.1s; }
.title-line:nth-child(2) { animation-delay: 0.3s; }
.title-line:nth-child(3) { animation-delay: 0.5s; }

.title-line.accent {
    background: linear-gradient(135deg, #3b82f6, #f97316);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: titleReveal 0.8s ease-out forwards, gradientShift 3s ease-in-out infinite 0.5s;
}

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

.title-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    border-radius: 2px;
    margin-top: 1rem;
    animation: underlineGrow 1s ease-out 0.8s forwards;
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes underlineGrow {
    to { transform: scaleX(1); }
}

.hero-description-immersive {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1s forwards;
}

.hero-stats-immersive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.2s forwards;
}

.stat-item-immersive {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.stat-item-immersive:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.stat-visual {
    flex-shrink: 0;
}

.stat-circle {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.progress-fill {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: progressFill 2s ease-out 1.5s forwards;
}

.progress-fill[data-progress="85"] { stroke-dashoffset: 15; }
.progress-fill[data-progress="65"] { stroke-dashoffset: 35; }
.progress-fill[data-progress="95"] { stroke-dashoffset: 5; }

@keyframes progressFill {
    to { stroke-dashoffset: var(--offset); }
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    z-index: 2;
}

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

.stat-label {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.stat-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-actions-immersive {
    display: flex;
    gap: 1rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 1.4s forwards;
}

.action-btn {
    position: relative;
    padding: 1.25rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.action-btn.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.action-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.action-btn:hover .btn-icon {
    transform: translateX(3px);
}

.btn-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488, #3b82f6);
    background-size: 400% 400%;
    border-radius: 50px;
    z-index: -1;
    animation: btnGlow 3s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-btn:hover .btn-glow {
    opacity: 0.8;
}

.certification-strip {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.strip-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1.5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.cert-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.cert-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 8px;
}

.cert-name {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.scroll-section {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.scroll-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.6);
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes arrowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* SVG Gradient Definition */
@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes btnGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* SVG Gradient for Progress Rings */
.progress-fill {
    stroke: #3b82f6;
}

/* Responsive Styles for Immersive Hero */
@media (max-width: 768px) {
    .hero-title-immersive {
        font-size: 3rem;
    }

    .hero-stats-immersive {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 400px;
        margin: 0 auto 3rem;
    }

    .hero-actions-immersive {
        flex-direction: column;
        align-items: center;
    }

    .action-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .strip-content {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .cert-item {
        flex: 0 0 calc(33.333% - 1rem);
    }

    .gallery-controls {
        padding: 0 1rem;
    }

    .gallery-btn {
        width: 50px;
        height: 50px;
    }

    .gallery-btn svg {
        width: 20px;
        height: 20px;
    }

    .hero-content-immersive {
        padding: 0 1rem;
    }

    .content-wrapper {
        max-width: 100%;
    }

    .stat-circle {
        width: 70px;
        height: 70px;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .cert-img {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .hero-title-immersive {
        font-size: 2.5rem;
    }

    .hero-description-immersive {
        font-size: 1.1rem;
    }

    .experience-badge {
        padding: 0.75rem 1.25rem;
    }

    .badge-icon {
        width: 35px;
        height: 35px;
    }

    .badge-title {
        font-size: 0.8rem;
    }

    .badge-subtitle {
        font-size: 0.7rem;
    }

    .stat-item-immersive {
        padding: 1rem;
        gap: 1rem;
    }

    .stat-circle {
        width: 60px;
        height: 60px;
    }

    .stat-number {
        font-size: 1.125rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    .stat-description {
        font-size: 0.8rem;
    }

    .action-btn {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }

    .cert-item {
        flex: 0 0 calc(50% - 1rem);
    }

    .cert-img {
        width: 45px;
        height: 45px;
    }

    .cert-name {
        font-size: 0.65rem;
    }

    .gallery-indicators {
        bottom: 20px;
        gap: 0.5rem;
    }

    .indicator {
        width: 10px;
        height: 10px;
    }

    .certification-strip {
        bottom: 80px;
    }

    .strip-content {
        padding: 1rem;
    }
}

.gradient-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(249, 115, 22, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.2) 0%, transparent 70%),
        linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    animation: meshShift 20s ease-in-out infinite;
}

@keyframes meshShift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

.glass-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.glass-orbs::before,
.glass-orbs::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: floatOrbs 15s ease-in-out infinite;
}

.glass-orbs::before {
    top: 10%;
    left: 20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent);
    animation-delay: 0s;
}

.glass-orbs::after {
    bottom: 20%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4), transparent);
    animation-delay: 5s;
}

@keyframes floatOrbs {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.9); }
}

.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.floating-shapes::before,
.floating-shapes::after {
    content: '';
    position: absolute;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(249, 115, 22, 0.1));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: shapeFloat 25s ease-in-out infinite;
}

.floating-shapes::before {
    top: 20%;
    left: 10%;
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.floating-shapes::after {
    bottom: 30%;
    right: 15%;
    width: 150px;
    height: 150px;
    animation-delay: 10s;
}

@keyframes shapeFloat {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
}

.noise-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.1) 4px);
    pointer-events: none;
}

.hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 100vh;
}

.hero-main {
    animation: slideInLeft 1s ease-out;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.hero-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.tag-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(45deg, #3b82f6, #f97316);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.tag-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.hero-headline {
    position: relative;
    margin-bottom: 2rem;
}

.headline-main {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
    color: #ffffff;
    margin: 0;
}

.word {
    display: inline-block;
    margin-right: 0.1em;
    animation: wordReveal 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(50px);
}

.word:nth-child(1) { animation-delay: 0.1s; }
.word:nth-child(2) { animation-delay: 0.3s; }
.word:nth-child(3) { animation-delay: 0.5s; }
.word:nth-child(4) { animation-delay: 0.7s; }

.word.accent {
    background: linear-gradient(135deg, #3b82f6, #f97316);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: wordReveal 0.8s ease-out forwards, gradientShift 3s ease-in-out infinite 0.8s;
}

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

.headline-decoration {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    border-radius: 2px;
    animation: decorationGrow 1s ease-out 0.8s forwards;
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes decorationGrow {
    to { transform: scaleX(1); }
}

.hero-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
    animation: fadeInUp 1s ease-out 1s forwards;
    opacity: 0;
    transform: translateY(30px);
}

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

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    animation: fadeInUp 1s ease-out 1.2s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.metric-item {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.metric-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.metric-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
}

.suffix {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3b82f6;
}

.metric-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.metric-progress {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    border-radius: 1px;
    animation: progressGrow 2s ease-out 1.5s forwards;
    transform: scaleX(0);
    transform-origin: left;
}

.progress-fill:nth-child(1) { width: 85%; }
.progress-fill:nth-child(2) { width: 65%; }
.progress-fill:nth-child(3) { width: 95%; }

@keyframes progressGrow {
    to { transform: scaleX(1); }
}

.hero-cta {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 1.4s forwards;
    opacity: 0;
    transform: translateY(30px);
}

.cta-primary,
.cta-secondary {
    position: relative;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cta-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.cta-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.cta-primary:hover,
.cta-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cta-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.cta-primary:hover .cta-icon,
.cta-secondary:hover .cta-icon {
    transform: translateX(3px);
}

.cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cta-primary:hover .cta-bg,
.cta-secondary:hover .cta-bg {
    transform: translateX(100%);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInRight 1s ease-out;
}

.visual-container {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.core-circle {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-inner {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #f97316);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.5);
    animation: corePulse 4s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 50px rgba(59, 130, 246, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 70px rgba(59, 130, 246, 0.7); }
}

.core-ring {
    position: absolute;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: ringRotate 10s linear infinite;
}

.ring-1 {
    width: 100px;
    height: 100px;
    animation-duration: 8s;
}

.ring-2 {
    width: 140px;
    height: 140px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.ring-3 {
    width: 180px;
    height: 180px;
    animation-duration: 15s;
}

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

.orbiting-elements {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
}

.orbit {
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: orbitRotate 20s linear infinite;
}

.orbit-1 {
    width: 200px;
    height: 200px;
    top: 100px;
    left: 100px;
    animation-duration: 15s;
}

.orbit-2 {
    width: 250px;
    height: 250px;
    top: 75px;
    left: 75px;
    animation-duration: 20s;
    animation-direction: reverse;
}

.orbit-3 {
    width: 300px;
    height: 300px;
    top: 50px;
    left: 50px;
    animation-duration: 25s;
}

.orbit-4 {
    width: 350px;
    height: 350px;
    top: 25px;
    left: 25px;
    animation-duration: 30s;
    animation-direction: reverse;
}

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

.orbit-item {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.orbit-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%) scale(1.1);
}

.item-icon {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.item-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    animation: floatAround 20s ease-in-out infinite;
}

.icon-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.icon-2 {
    top: 70%;
    left: 80%;
    animation-delay: 5s;
}

.icon-3 {
    top: 30%;
    right: 15%;
    animation-delay: 10s;
}

.icon-4 {
    bottom: 20%;
    left: 20%;
    animation-delay: 15s;
}

@keyframes floatAround {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -40px) rotate(90deg); }
    50% { transform: translate(-20px, 30px) rotate(180deg); }
    75% { transform: translate(40px, 20px) rotate(270deg); }
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.scroll-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Missing Animations */
@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Responsive Styles for Modern Hero */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-main {
        animation: slideInUp 1s ease-out;
    }

    .hero-visual {
        height: 400px;
    }

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

    .hero-description {
        font-size: 1.1rem;
        max-width: 100%;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 300px;
        margin: 0 auto 3rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .cta-primary,
    .cta-secondary {
        width: 100%;
        max-width: 300px;
    }

    .visual-container {
        height: 400px;
    }

    .core-circle {
        width: 100px;
        height: 100px;
    }

    .core-inner {
        width: 50px;
        height: 50px;
    }

    .ring-1 {
        width: 80px;
        height: 80px;
    }

    .ring-2 {
        width: 120px;
        height: 120px;
    }

    .ring-3 {
        width: 160px;
        height: 160px;
    }

    .orbiting-elements {
        width: 300px;
        height: 300px;
    }

    .orbit-1 {
        width: 150px;
        height: 150px;
        top: 75px;
        left: 75px;
    }

    .orbit-2 {
        width: 200px;
        height: 200px;
        top: 50px;
        left: 50px;
    }

    .orbit-3 {
        width: 250px;
        height: 250px;
        top: 25px;
        left: 25px;
    }

    .orbit-4 {
        width: 280px;
        height: 280px;
        top: 10px;
        left: 10px;
    }

    .float-icon {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .headline-main {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-tag {
        padding: 0.625rem 1.25rem;
        font-size: 0.8rem;
    }

    .number {
        font-size: 2rem;
    }

    .suffix {
        font-size: 1.25rem;
    }

    .metric-label {
        font-size: 0.8rem;
    }

    .cta-primary,
    .cta-secondary {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    .visual-container {
        height: 350px;
    }

    .core-circle {
        width: 80px;
        height: 80px;
    }

    .core-inner {
        width: 40px;
        height: 40px;
    }

    .ring-1 {
        width: 60px;
        height: 60px;
    }

    .ring-2 {
        width: 100px;
        height: 100px;
    }

    .ring-3 {
        width: 140px;
        height: 140px;
    }

    .orbiting-elements {
        width: 250px;
        height: 250px;
    }

    .orbit-1 {
        width: 120px;
        height: 120px;
        top: 65px;
        left: 65px;
    }

    .orbit-2 {
        width: 160px;
        height: 160px;
        top: 45px;
        left: 45px;
    }

    .orbit-3 {
        width: 200px;
        height: 200px;
        top: 25px;
        left: 25px;
    }

    .orbit-4 {
        width: 230px;
        height: 230px;
        top: 10px;
        left: 10px;
    }

    .float-icon {
        width: 30px;
        height: 30px;
    }

    .item-icon {
        width: 20px;
        height: 20px;
    }

    .item-label {
        font-size: 0.7rem;
    }
}

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

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(13, 148, 136, 0.08) 0%, transparent 70%);
    animation: gradientShift 15s ease-in-out infinite;
}

.vector-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.vector-pattern {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(59, 130, 246, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(249, 115, 22, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(13, 148, 136, 0.3), transparent),
        radial-gradient(1px 1px at 80% 20%, rgba(59, 130, 246, 0.3), transparent);
    background-size: 200px 200px, 150px 150px, 100px 100px, 250px 250px;
    animation: particlesFloat 20s linear infinite;
    z-index: 2;
}

/* Vector Background Animations */
.molecular-pattern {
    animation: molecularFloat 25s ease-in-out infinite;
}

.molecule-node {
    animation: nodePulse 4s ease-in-out infinite;
}

.molecule-node:nth-child(odd) {
    animation-delay: 0s;
}

.molecule-node:nth-child(even) {
    animation-delay: 2s;
}

.molecule-bond {
    animation: bondGlow 6s ease-in-out infinite;
}

.dna-pattern {
    animation: dnaWave 20s linear infinite;
}

.dna-strand-bg {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: dnaFlow 8s linear infinite;
}

.hexagon-pattern {
    animation: hexagonRotate 30s linear infinite;
}

.hexagon {
    animation: hexagonPulse 5s ease-in-out infinite;
}

.hexagon:nth-child(odd) {
    animation-delay: 0s;
}

.hexagon:nth-child(even) {
    animation-delay: 2.5s;
}

.wave-pattern {
    animation: waveMove 15s ease-in-out infinite;
}

.wave-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    animation: waveFlow 10s linear infinite;
}

.particle-group {
    animation: particleSwarm 20s ease-in-out infinite;
}

.particle {
    animation: particleTwinkle 3s ease-in-out infinite;
}

.particle:nth-child(odd) {
    animation-delay: 0s;
}

.particle:nth-child(even) {
    animation-delay: 1.5s;
}

.connection-pattern {
    animation: connectionPulse 8s ease-in-out infinite;
}

.connection-line {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    animation: connectionFlow 12s linear infinite;
}

/* Vector Background Keyframes */
@keyframes molecularFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -10px) scale(1.05); }
    50% { transform: translate(-10px, 20px) scale(1.1); }
    75% { transform: translate(10px, 10px) scale(1.05); }
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes bondGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

@keyframes dnaWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

@keyframes dnaFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

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

@keyframes hexagonPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes waveMove {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes waveFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

@keyframes particleSwarm {
    0% { transform: translate(0, 0); }
    25% { transform: translate(30px, -20px); }
    50% { transform: translate(-20px, 30px); }
    75% { transform: translate(20px, 20px); }
    100% { transform: translate(0, 0); }
}

@keyframes particleTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

@keyframes connectionPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

@keyframes connectionFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -50; }
}

/* Enhanced Spectacular Hero Styles */
.hero-badge.spectacular {
    position: relative;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(249, 115, 22, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
    overflow: visible;
}

.badge-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488, #3b82f6);
    background-size: 400% 400%;
    border-radius: 50px;
    z-index: -1;
    animation: borderGlow 4s ease-in-out infinite;
    filter: blur(8px);
}

@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-title.spectacular {
    position: relative;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.title-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    animation: titleScan 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes titleScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.hero-subtitle.spectacular {
    position: relative;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.subtitle-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: subtitleScan 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes subtitleScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.stat-card.enhanced {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(59, 130, 246, 0.3);
    overflow: visible;
    transform: perspective(1000px) rotateX(0deg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card.enhanced:hover {
    transform: perspective(1000px) rotateX(-5deg) translateY(-10px);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4);
}

.card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488);
    background-size: 300% 300%;
    border-radius: 16px;
    z-index: -1;
    animation: cardGlow 5s ease-in-out infinite;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card.enhanced:hover .card-glow {
    opacity: 0.7;
}

@keyframes cardGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6), transparent);
    border-radius: 50%;
    animation: iconPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes iconPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.btn-futuristic.enhanced {
    position: relative;
    overflow: visible;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-futuristic.enhanced:hover {
    transform: translateY(-5px) scale(1.05);
}

.btn-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #f97316, #0d9488, #3b82f6);
    background-size: 400% 400%;
    border-radius: 50px;
    z-index: -1;
    animation: btnGlow 3s ease-in-out infinite;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-futuristic.enhanced:hover .btn-glow {
    opacity: 0.8;
}

@keyframes btnGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.floating-element.spectacular {
    position: relative;
    overflow: visible;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.element-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent);
    border-radius: 50%;
    z-index: -1;
    animation: elementGlow 3s ease-in-out infinite;
    filter: blur(12px);
}

@keyframes elementGlow {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.hero-orb.spectacular {
    position: relative;
    overflow: visible;
}

.orb-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6), rgba(249, 115, 22, 0.4), transparent);
    border-radius: 50%;
    z-index: -1;
    animation: orbGlow 4s ease-in-out infinite;
    filter: blur(20px);
}

@keyframes orbGlow {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

.cert-badge.enhanced {
    position: relative;
    overflow: visible;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.cert-badge .badge-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #f97316, #ea580c);
    background-size: 200% 200%;
    border-radius: 25px;
    z-index: -1;
    animation: certGlow 2s ease-in-out infinite;
    filter: blur(6px);
}

@keyframes certGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.scroll-indicator.spectacular {
    position: relative;
    overflow: visible;
}

.scroll-glow {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent);
    border-radius: 50%;
    z-index: -1;
    animation: scrollGlow 2s ease-in-out infinite;
    filter: blur(10px);
}

@keyframes scrollGlow {
    0%, 100% { transform: translateX(-50%) scale(0.8); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
}

/* Enhanced Vector Background Animations */
.molecular-network {
    animation: networkPulse 8s ease-in-out infinite;
}

@keyframes networkPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

.hub-node {
    animation: hubPulse 3s ease-in-out infinite;
}

@keyframes hubPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.satellite-node {
    animation: satelliteOrbit 15s linear infinite;
}

@keyframes satelliteOrbit {
    0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

.connection {
    stroke-dasharray: 10, 5;
    animation: connectionFlow 2s linear infinite;
}

.enhanced-dna {
    animation: dnaSwirl 20s linear infinite;
}

@keyframes dnaSwirl {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(-100px) rotate(360deg); }
}

.dna-major {
    stroke-dasharray: 20, 10;
    animation: dnaMajorFlow 4s linear infinite;
}

@keyframes dnaMajorFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -30; }
}

.base-pair-enhanced {
    animation: basePairPulse 2s ease-in-out infinite;
}

.base-pair-enhanced:nth-child(odd) {
    animation-delay: 0s;
}

.base-pair-enhanced:nth-child(even) {
    animation-delay: 1s;
}

@keyframes basePairPulse {
    0%, 100% { opacity: 0.6; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.5); }
}

.hexagon-grid {
    animation: hexagonFloat 25s ease-in-out infinite;
}

@keyframes hexagonFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

.hex-main {
    animation: hexMainPulse 4s ease-in-out infinite;
}

.hex-main:nth-child(odd) {
    animation-delay: 0s;
}

.hex-main:nth-child(even) {
    animation-delay: 2s;
}

@keyframes hexMainPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.energy-waves {
    animation: energyExpand 10s ease-in-out infinite;
}

@keyframes energyExpand {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.energy-ring {
    stroke-dasharray: 20, 10;
    animation: energyRingFlow 3s linear infinite;
}

.energy-ring:nth-child(1) { animation-delay: 0s; }
.energy-ring:nth-child(2) { animation-delay: 0.5s; }
.energy-ring:nth-child(3) { animation-delay: 1s; }
.energy-ring:nth-child(4) { animation-delay: 1.5s; }

@keyframes energyRingFlow {
    0% { stroke-dashoffset: 0; opacity: 0.8; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: -30; opacity: 0.8; }
}

.particle-field {
    animation: particleFieldSwarm 20s ease-in-out infinite;
}

@keyframes particleFieldSwarm {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(50px, -30px); }
    50% { transform: translate(-30px, 50px); }
    75% { transform: translate(30px, 30px); }
}

.particle-enhanced {
    animation: particleEnhancedTwinkle 2s ease-in-out infinite;
}

.particle-enhanced:nth-child(odd) {
    animation-delay: 0s;
}

.particle-enhanced:nth-child(even) {
    animation-delay: 1s;
}

@keyframes particleEnhancedTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(2); }
}

.hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-left {
    animation: slideInLeft 1s ease-out;
}

.hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInRight 1s ease-out;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    animation: badgeGlow 3s ease-in-out infinite;
}

.badge-icon {
    color: #3b82f6;
    font-size: 1rem;
}

.badge-text {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.hero-title {
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.title-line {
    display: block;
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
}

.title-line.highlight {
    background: linear-gradient(135deg, #3b82f6, #f97316, #0d9488);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradientShift 4s ease-in-out infinite;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-align: center;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.stat-icon {
    color: #3b82f6;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-number {
    display: block;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-futuristic {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-futuristic.primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn-futuristic.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #4f8bfa, #2563eb);
}

.btn-futuristic.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.btn-futuristic.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

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

.btn-icon {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.btn-futuristic:hover .btn-icon {
    transform: translateX(2px);
}

.hero-visual {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.floating-element {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.floating-element:hover {
    transform: scale(1.1);
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.vector-icon {
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

/* Microscope Animations */
.microscope-group {
    transform-origin: center;
}

.microscope-icon:hover .microscope-group {
    animation: microscopeFocus 2s ease-in-out infinite;
}

@keyframes microscopeFocus {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.05) rotate(2deg); }
    50% { transform: scale(1.1) rotate(0deg); }
    75% { transform: scale(1.05) rotate(-2deg); }
}

.microscope-icon:hover .focus-knob {
    animation: knobRotate 3s linear infinite;
}

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

/* DNA Animations */
.dna-strand-1 {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: dnaFlow1 4s ease-in-out infinite;
}

.dna-strand-2 {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: dnaFlow2 4s ease-in-out infinite;
}

.base-pair {
    animation: basePulse 2s ease-in-out infinite;
}

.base-pair:nth-child(odd) {
    animation-delay: 0s;
}

.base-pair:nth-child(even) {
    animation-delay: 1s;
}

@keyframes dnaFlow1 {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: -20; }
}

@keyframes dnaFlow2 {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 20; }
}

@keyframes basePulse {
    0%, 100% { opacity: 0.6; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.2); }
}

/* Pill Animations */
.capsule-top {
    animation: capsuleFloat 3s ease-in-out infinite;
}

.capsule-bottom {
    animation: capsuleFloat 3s ease-in-out infinite 1.5s;
}

.pill-icon:hover .capsule-top,
.pill-icon:hover .capsule-bottom {
    animation-duration: 1s;
}

@keyframes capsuleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.pill-icon:hover .pill-group rect {
    animation: pillRotate 2s ease-in-out infinite;
}

@keyframes pillRotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

/* Heart Animations */
.heart-shape {
    animation: heartBeat 2s ease-in-out infinite;
}

.pulse-line {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    animation: pulseFlow 3s ease-in-out infinite;
}

.heart-icon:hover .heart-shape {
    animation-duration: 1s;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.05); }
}

@keyframes pulseFlow {
    0% { stroke-dashoffset: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { stroke-dashoffset: -50; opacity: 0; }
}

.element-1 {
    top: 10%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.element-2 {
    top: 20%;
    right: 15%;
    animation: float 8s ease-in-out infinite 1s;
}

.element-3 {
    bottom: 30%;
    left: 20%;
    animation: float 7s ease-in-out infinite 2s;
}

.element-4 {
    bottom: 15%;
    right: 10%;
    animation: float 9s ease-in-out infinite 3s;
}

.hero-orb {
    position: relative;
    width: 200px;
    height: 200px;
}

.orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #3b82f6, #1d4ed8);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.5);
    animation: orbPulse 4s ease-in-out infinite;
}

.orb-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: ringRotate 10s linear infinite;
}

.ring-1 {
    width: 120px;
    height: 120px;
    animation-duration: 8s;
}

.ring-2 {
    width: 160px;
    height: 160px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.ring-3 {
    width: 200px;
    height: 200px;
    animation-duration: 15s;
}

.certification-badges {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
}

.cert-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cert-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.cert-badge i {
    color: #f97316;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scroll-arrow {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.25rem;
}

/* Futuristic Hero Animations */
@keyframes gradientShift {
    0%, 100% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
}

@keyframes particlesFloat {
    0% { 
        transform: translateY(0) translateX(0);
    }
    25% { 
        transform: translateY(-20px) translateX(10px);
    }
    50% { 
        transform: translateY(-10px) translateX(-10px);
    }
    75% { 
        transform: translateY(-30px) translateX(5px);
    }
    100% { 
        transform: translateY(0) translateX(0);
    }
}

@keyframes gridMove {
    0% { 
        transform: translate(0, 0);
    }
    100% { 
        transform: translate(50px, 50px);
    }
}

@keyframes textGradientShift {
    0%, 100% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
}

@keyframes slideInLeft {
    0% { 
        opacity: 0;
        transform: translateX(-50px);
    }
    100% { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% { 
        opacity: 0;
        transform: translateX(50px);
    }
    100% { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes badgeGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% { 
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-20px);
    }
}

@keyframes orbPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 50px rgba(59, 130, 246, 0.5);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 70px rgba(59, 130, 246, 0.7);
    }
}

@keyframes ringRotate {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes slideInUp {
    0% { 
        opacity: 0;
        transform: translateY(50px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.slider-dots {
    display: flex;
    gap: 0.75rem;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot:hover,
.slider-dot.active {
    background: white;
    border-color: white;
    transform: scale(1.2);
}

.slider-arrows {
    display: flex;
    gap: 1rem;
}

.slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .slider-controls {
        bottom: 20px;
        gap: 1rem;
    }
    
    .slider-dots {
        gap: 0.5rem;
    }
    
    .slider-dot {
        width: 10px;
        height: 10px;
    }
    
    .slider-arrow {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Stats Section */
.stats {
    padding: 60px 0;
    background: var(--bg-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.stat-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-light);
    font-weight: 500;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-align: center;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
}

/* About Preview */
.about-preview {
    padding: 60px 0;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.certification-badges {
    display: grid;
    gap: 1rem;
}

.badge {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.badge:hover {
    transform: translateX(5px);
}

.badge i {
    font-size: 2rem;
    color: var(--primary-color);
}

/* Products Preview */
.products-preview {
    padding: 80px 0;
    background: var(--bg-light);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-category {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.product-category:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.category-icon i {
    font-size: 2rem;
    color: white;
}

.product-category h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.product-category p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.category-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.category-link:hover {
    color: var(--primary-dark);
}

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

/* Leading Brands */
.leading-brands {
    padding: 80px 0;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.brand-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.brand-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.brand-image {
    width: 80px;
    height: 80px;
    background: var(--bg-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-info h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.brand-info p {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.brand-category {
    display: inline-block;
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Global Presence Preview */
.global-preview {
    padding: 80px 0;
    background: var(--bg-light);
}

.global-map {
    margin-bottom: 3rem;
}

.map-container {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.world-map {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.map-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.marker {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.marker:hover {
    transform: scale(1.5);
}

.marker.active {
    background: var(--primary-color);
    animation: pulse 2s infinite;
}

.marker span {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-dark);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.marker:hover span {
    opacity: 1;
    visibility: visible;
}

.global-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-bottom: 3rem;
}

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

.global-stat .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.global-stat .stat-label {
    color: var(--text-light);
    font-weight: 500;
}

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

/* Values Section */
.values {
    padding: 60px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.value-item {
    text-align: center;
    padding: 2rem;
}

.value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.value-icon i {
    font-size: 2rem;
    color: white;
}

.value-item h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.value-item p {
    color: var(--text-light);
}

/* CTA Section */
.cta {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

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

/* Footer */
.footer {
    background: var(--text-dark);
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-logo img {
    height: 100px;
    margin-bottom: 1rem;
}

.footer-logo p {
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.footer-section h4 {
    margin-bottom: 1.5rem;
    color: white;
}

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

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.contact-item i {
    color: var(--primary-color);
    width: 20px;
}
.contact-item {
  color: rgba(20, 19, 19, 0.8);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: white;
}

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(30, 58, 138, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 58, 138, 0);
    }
}

/* Page Hero */
.page-hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    text-align: center;
}

.page-hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-hero-content p {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* About Page Styles */
.company-story {
    padding: 80px 0;
}

.story-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.story-text h2 {
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.story-text p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.story-highlights {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
}

.highlight-item i {
    font-size: 2rem;
    color: var(--primary-color);
}

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--shadow-md);
}

.timeline-year {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.timeline-content h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* Our Plant Section */
.our-plant {
    padding: 60px 0;
    background: var(--bg-light);
}

.plant-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.plant-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.plant-stat {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.plant-stat .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.plant-description h3 {
    color: var(--text-dark);
    margin: 1.5rem 0 0.5rem;
}

.plant-image {
    margin-bottom: 2rem;
}

.plant-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.plant-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.feature i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* Vision & Mission */
.vision-mission {
    padding: 80px 0;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.vm-card {
    padding: 3rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.vm-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.vm-icon i {
    font-size: 2rem;
    color: white;
}

.vm-card h3 {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.vm-card p {
    margin-bottom: 1rem;
}

/* India Global Pharma */
.india-global-pharma {
    padding: 80px 0;
    background: var(--bg-light);
}

.india-pharma-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
}

.india-pharma-text p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.pharma-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.pharma-stat {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.pharma-stat .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.market-share {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.share-circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    color: white;
}

.share-percentage {
    font-size: 2rem;
    font-weight: 700;
}

.share-label {
    font-size: 0.875rem;
}

/* Certifications */
.certifications {
    padding: 80px 0;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.certification-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.certification-item:hover {
    transform: translateY(-5px);
}

.cert-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.cert-logo i {
    font-size: 2rem;
    color: white;
}

.certification-item h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

/* Products Page Styles */
.product-filter {
    padding: 40px 0;
    background: var(--bg-light);
}

.filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.product-category-section {
    padding: 60px 0;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon i {
    font-size: 2rem;
    color: white;
}

.category-info h2 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.category-description {
    margin-bottom: 3rem;
}

.category-description h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.therapeutic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tag {
    background: var(--bg-light);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.product-image {
    height: 200px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info {
    padding: 1.5rem;
}

.product-info h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.product-generic {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.product-description {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.other-categories {
    padding: 80px 0;
    background: var(--bg-light);
}

.categories-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.category-summary {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.category-summary .category-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
}

.category-summary .category-icon i {
    font-size: 1.5rem;
}

.category-summary h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

/* Gallery Page Styles */
.video-section {
    padding: 60px 0;
}

.video-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: center;
}

.main-video {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.main-video video {
    width: 100%;
    height: auto;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: white;
    transform: scale(1.1);
}

.play-button i {
    font-size: 2rem;
    color: var(--primary-color);
}

.video-info h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.video-stats {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.video-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-light);
}

.video-stat i {
    color: var(--primary-color);
}

.photo-gallery {
    padding: 80px 0;
    background: var(--bg-light);
}

.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.gallery-filter-btn {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 25px;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.gallery-info h4 {
    color: white;
    margin-bottom: 0.5rem;
}

.gallery-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.virtual-tours {
    padding: 80px 0;
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.tour-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}

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

.tour-image {
    position: relative;
    height: 200px;
}

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

.tour-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tour-play:hover {
    background: white;
    transform: translate(-50%, -50%) scale(1.1);
}

.tour-play i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.tour-info {
    padding: 1.5rem;
}

.tour-info h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.testimonials {
    padding: 80px 0;
    background: var(--bg-light);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.testimonial-video {
    position: relative;
    height: 200px;
}

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

.testimonial-video .play-button {
    width: 50px;
    height: 50px;
}

.testimonial-video .play-button i {
    font-size: 1.25rem;
}

.testimonial-content {
    padding: 1.5rem;
}

.testimonial-content h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.testimonial-role {
    color: var(--primary-color);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    color: var(--text-light);
    font-style: italic;
}

/* Global Presence Page Styles */
.global-stats-hero {
    padding: 60px 0;
    background: var(--bg-light);
}

.stats-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-hero-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.stat-hero-item:hover {
    transform: translateY(-5px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.stat-icon i {
    font-size: 1.5rem;
    color: white;
}

.stat-hero-item .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.world-map-section {
    padding: 60px 0;
    position: relative;
}

.interactive-map {
    position: relative;
}

.map-container {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.world-map-bg {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.map-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.map-marker {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-marker:hover {
    transform: scale(1.1);
}

.marker-dot {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: var(--shadow-lg);
    animation: pulse 2s infinite;
}

.marker-info {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-dark);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    text-align: center;
}

.map-marker:hover .marker-info {
    opacity: 1;
    visibility: visible;
}

.marker-info h4 {
    margin-bottom: 0.5rem;
}

.marker-info span {
    display: block;
    font-size: 0.875rem;
    opacity: 0.8;
}

.regional-breakdown {
    padding: 80px 0;
    background: var(--bg-light);
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.region-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.region-card .region-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.region-card .region-icon i {
    font-size: 1.5rem;
    color: white;
}

.region-card h3 {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.region-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.region-countries span {
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
}

.region-stats {
    display: flex;
    justify-content: space-between;
}

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

.region-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.region-stat .stat-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.partnership-network {
    padding: 80px 0;
}

.partners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.partner-category h3 {
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.partner-list {
    display: grid;
    gap: 1.5rem;
}

.partner-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.partner-item:hover {
    transform: translateX(5px);
}

.partner-logo {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.partner-info h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.partner-info p {
    color: var(--text-light);
    font-size: 0.875rem;
}

.export-stats {
    padding: 80px 0;
    background: var(--bg-light);
}

.stats-visualization {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.chart-container {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.chart-container h3 {
    color: var(--text-dark);
    margin-bottom: 2rem;
    text-align: center;
}

.chart-bars {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 200px;
    gap: 1rem;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.bar {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.3s ease;
}

.bar:hover {
    transform: scaleY(1.05);
}

.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
}

.export-highlights {
    display: grid;
    gap: 1.5rem;
}

.highlight-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.highlight-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.highlight-icon i {
    font-size: 1.25rem;
    color: white;
}

.highlight-item h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.highlight-item p {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Careers Page Styles */
.why-join-us {
    padding: 80px 0;
}

.join-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.reason-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.reason-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.reason-icon i {
    font-size: 2rem;
    color: white;
}

.reason-card h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.company-culture {
    padding: 80px 0;
    background: var(--bg-light);
}

.culture-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.culture-text h2 {
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.culture-text p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

.culture-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.culture-value {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.culture-value i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 0.25rem;
}

.culture-value h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.team-image {
    margin-bottom: 2rem;
}

.team-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.culture-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.culture-stat {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.culture-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.benefits {
    padding: 80px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.benefit-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.benefit-icon i {
    font-size: 1.5rem;
    color: white;
}

.benefit-item h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.open-positions {
    padding: 80px 0;
    background: var(--bg-light);
}

.job-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.positions-list {
    display: grid;
    gap: 2rem;
}

.job-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.job-header h3 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.job-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.job-type, .job-location {
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.job-description p {
    margin-bottom: 1.5rem;
}

.job-requirements h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.job-requirements ul {
    list-style: none;
    padding-left: 0;
}

.job-requirements li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.job-requirements li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.job-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.application-form {
    padding: 80px 0;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
}

.career-form {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

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

.file-upload {
    position: relative;
}

.file-upload input[type="file"] {
    display: none;
}

.file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-label:hover {
    border-color: var(--primary-color);
    background: var(--bg-light);
}

.file-label i {
    font-size: 2rem;
    color: var(--primary-color);
}

.file-info {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.875rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.life-at-glow {
    padding: 80px 0;
    background: var(--bg-light);
}

.life-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.life-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.life-item:hover {
    transform: translateY(-5px);
}

.life-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.life-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.life-overlay h4 {
    color: white;
    margin-bottom: 0.5rem;
}

.life-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

/* Contact Page Styles */
.contact-info-section {
    padding: 60px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.contact-card {
    text-align: center;
    padding: 3rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.contact-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.contact-icon i {
    font-size: 2rem;
    color: white;
}

.contact-card h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.contact-card p {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.office-locations {
    padding: 80px 0;
    background: var(--bg-light);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
}

.location-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.location-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

.location-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-icon i {
    font-size: 1.5rem;
    color: white;
}

.location-details {
    padding: 2rem;
}

.location-details h4 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.location-contact {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.location-map {
    margin-top: 1.5rem;
}

.location-map img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.contact-forms {
    padding: 80px 0;
}

.forms-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header h2 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

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

.quick-contact {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.quick-contact h2 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.contact-options {
    display: grid;
    gap: 1rem;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.contact-option:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-lg);
}

.option-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-icon i {
    font-size: 1.25rem;
    color: white;
}

.option-content h4 {
    margin-bottom: 0.5rem;
}

.option-content p {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.option-content span {
    color: var(--primary-color);
    font-weight: 500;
}

.business-hours,
.emergency-contact {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.business-hours h3,
.emergency-contact h3 {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.hours-grid {
    display: grid;
    gap: 1rem;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.day {
    color: var(--text-dark);
    font-weight: 500;
}

.time {
    color: var(--text-light);
}

.emergency-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 8px;
    color: var(--accent-color);
    font-weight: 500;
}

/* Contact Form and Map Section */
.contact-map-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
    align-items: start;
}

.contact-form-wrapper {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.map-wrapper {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

.map-header {
    margin-bottom: 2rem;
    text-align: center;
}

.map-header h3 {
    color: var(--text-dark);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.map-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.map-container {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 3px solid white;
}

.google-map {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

.department-contacts {
    padding: 80px 0;
    background: var(--bg-light);
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.department-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.department-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.department-icon i {
    font-size: 1.5rem;
    color: white;
}

.department-card h3 {
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.department-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.875rem;
}

.faq-section {
    padding: 60px 0;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: var(--bg-light);
}

.faq-question h4 {
    color: var(--text-dark);
    margin: 0;
}

.faq-question i {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 1.5rem 1.5rem;
    max-height: 200px;
}

.faq-answer p {
    color: var(--text-light);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

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

    .hero-subtitle {
        font-size: 1rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

    .global-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .brands-grid {
        grid-template-columns: 1fr;
    }

    .brand-card {
        flex-direction: column;
        text-align: center;
    }

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

    .story-content,
    .plant-content,
    .culture-content,
    .india-pharma-content,
    .stats-visualization {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .vm-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .timeline {
        padding-left: 1rem;
    }

    .story-highlights,
    .culture-values {
        grid-template-columns: 1fr;
    }

    .plant-stats,
    .pharma-stats,
    .culture-stats {
        grid-template-columns: 1fr;
    }

    .category-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .product-actions,
    .form-actions,
    .job-actions {
        flex-direction: column;
    }

    .video-container,
    .forms-grid,
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .regions-grid,
    .benefits-grid,
    .join-reasons {
        grid-template-columns: 1fr;
    }

    .locations-grid {
        grid-template-columns: 1fr;
    }

    .departments-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .hero-title {
        font-size: 2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 250px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .contact-map-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-form-wrapper,
    .map-wrapper {
        padding: 2rem;
    }

    .map-container {
        height: 300px;
    }

    .map-header h3 {
        font-size: 1.5rem;
    }

    .map-header p {
        font-size: 1rem;
    }

    /* Futuristic Hero Responsive */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-left {
        animation: slideInUp 1s ease-out;
    }

    .hero-right {
        height: 400px;
    }

    .title-line {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 300px;
        margin: 0 auto 3rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .floating-elements {
        display: block;
    }

    .floating-element {
        width: 60px;
        height: 60px;
    }

    .vector-icon {
        width: 40px;
        height: 40px;
    }

    .vector-background {
        opacity: 0.6;
    }

    .vector-pattern {
        opacity: 0.7;
    }

    .hero-orb {
        width: 150px;
        height: 150px;
    }

    .orb-core {
        width: 60px;
        height: 60px;
    }

    .ring-1 {
        width: 90px;
        height: 90px;
    }

    .ring-2 {
        width: 120px;
        height: 120px;
    }

    .ring-3 {
        width: 150px;
        height: 150px;
    }

    .certification-badges {
        bottom: 5%;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 300px;
    }

    .title-line {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-orb {
        width: 120px;
        height: 120px;
    }

    .orb-core {
        width: 50px;
        height: 50px;
    }

    .ring-1 {
        width: 70px;
        height: 70px;
    }

    .ring-2 {
        width: 95px;
        height: 95px;
    }

    .ring-3 {
        width: 120px;
        height: 120px;
    }

    .btn-futuristic {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero-badge {
        padding: 0.625rem 1.25rem;
    }

    .badge-text {
        font-size: 0.8rem;
    }

    .floating-element {
        width: 50px;
        height: 50px;
    }

    .vector-icon {
        width: 30px;
        height: 30px;
    }

    .vector-background {
        opacity: 0.4;
    }

    .vector-pattern {
        opacity: 0.5;
    }
}

/* Gallery Section Styles - Modern Masonry Design */
.gallery-filter {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.filter-btn {
    padding: 0.75rem 1.75rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f9fafb;
}

.filter-btn.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Masonry Grid Layout */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 280px;
    gap: 1.5rem;
    margin-top: 2rem;
}

.gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 1;
}

.gallery-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-card.wide {
    grid-column: span 2;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-card:hover .card-image img {
    transform: scale(1.08);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

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

.overlay-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.5rem;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover .overlay-icon {
    transform: scale(1);
}

.video-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.25rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

.card-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}

.card-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Gallery Popup/Lightbox */
.gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.gallery-popup.active {
    display: flex;
}

.popup-content {
    position: relative;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.4s ease;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    color: #374151;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.popup-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    max-height: 90vh;
    overflow-y: auto;
}

.popup-media {
    position: relative;
    background: #f9fafb;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-container {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

.video-placeholder {
    text-align: center;
    color: #6b7280;
}

.video-placeholder i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #3b82f6;
}

.video-placeholder p {
    font-size: 1.1rem;
}

.popup-details {
    padding: 2.5rem;
    background: white;
    display: flex;
    flex-direction: column;
}

.popup-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 25px;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.popup-details h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.popup-details p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.popup-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.meta-item:hover {
    background: #f3f4f6;
    transform: translateX(5px);
}

.meta-item i {
    color: #1e293b;
    font-size: 1rem;
}

.meta-item span {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

/* Gallery Load More */
.gallery-load-more {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.load-more-btn {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.load-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.load-more-btn i {
    transition: transform 0.3s ease;
}

.load-more-btn:hover i {
    transform: translateY(3px);
}

/* Gallery Card Animation */
.gallery-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.gallery-card:nth-child(1) { animation-delay: 0.1s; }
.gallery-card:nth-child(2) { animation-delay: 0.2s; }
.gallery-card:nth-child(3) { animation-delay: 0.3s; }
.gallery-card:nth-child(4) { animation-delay: 0.4s; }
.gallery-card:nth-child(5) { animation-delay: 0.5s; }
.gallery-card:nth-child(6) { animation-delay: 0.6s; }
.gallery-card:nth-child(7) { animation-delay: 0.7s; }
.gallery-card:nth-child(8) { animation-delay: 0.8s; }

/* Hidden items for filtering */
.gallery-card.hidden {
    display: none;
}

/* Responsive Design for Gallery */
@media (max-width: 1200px) {
    .gallery-masonry {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .gallery-card.large {
        grid-column: span 2;
    }
    
    .gallery-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 1024px) {
    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-card.large {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .gallery-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .gallery-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.85rem;
    }
    
    .gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    
    .gallery-card.large,
    .gallery-card.wide {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .card-info h3 {
        font-size: 1rem;
    }
    
    .popup-body {
        grid-template-columns: 1fr;
    }
    
    .popup-media {
        min-height: 300px;
    }
    
    .popup-details {
        padding: 1.5rem;
    }
    
    .popup-details h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .gallery-filter {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .gallery-masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        gap: 1rem;
    }
    
    .card-info {
        padding: 1rem;
    }
    
    .card-info h3 {
        font-size: 0.95rem;
    }
    
    .card-meta {
        font-size: 0.75rem;
    }
    
    .gallery-popup {
        padding: 1rem;
    }
    
    .popup-content {
        max-height: 95vh;
    }
    
    .popup-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
}

/* Card Stack Slider Styles */
.card-stack-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.card-stack-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 500px;
    perspective: 1000px;
}

.stack-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform-origin: center bottom;
    max-width: none;
}

.stack-card.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  z-index: 10;
  width: 290%;
  height: 140%;
}

.stack-card.next {
    opacity: 0.9;
    visibility: visible;
    transform: translate(-50%, -50%) scale(0.95) rotate(-2deg);
    z-index: 9;
}

.stack-card.next-next {
    opacity: 0.7;
    visibility: visible;
    transform: translate(-50%, -50%) scale(0.9) rotate(-4deg);
    z-index: 8;
}

.stack-card.prev {
    opacity: 0.8;
    visibility: visible;
    transform: translate(-50%, -50%) scale(0.92) rotate(2deg);
    z-index: 7;
}

.stack-card.prev-prev {
    opacity: 0.6;
    visibility: visible;
    transform: translate(-50%, -50%) scale(0.85) rotate(4deg);
    z-index: 6;
}

.card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.stack-card:hover .card-image img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: white;
    border-radius: 0 0 20px 20px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.card-number {
    position: absolute;
    top: -1.5rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #1e3a8a, #0d9488);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3);
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.card-description {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

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

.card-tag {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.card-year {
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Stack Navigation */
.stack-navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 20;
    pointer-events: none;
}

.stack-navigation button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: white;
    color: #1f2937;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack-navigation button:hover {
    background: linear-gradient(135deg, #1e3a8a, #0d9488);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.3);
}

/* Stack Indicators */
.stack-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 20;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    width: 30px;
    border-radius: 5px;
    background: white;
    border-color: white;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Stack Progress */
.stack-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 20;
}

.progress-line {
    height: 100%;
    background: linear-gradient(90deg, #1e3a8a, #0d9488);
    width: 0%;
    transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card-stack-slider {
        padding: 1rem;
    }
    
    .card-stack-container {
        width: 100%;
        max-width: 100%;
        height: 400px;
    }
    
    .card-title {
        font-size: 1.5rem;
    }
    
    .card-description {
        font-size: 0.9rem;
    }
    
    .card-content {
        padding: 1.5rem;
    }
    
    .stack-navigation button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .card-stack-container {
        width: 100%;
        max-width: 100%;
        height: 350px;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    .card-content {
        padding: 1rem;
    }
    
    .card-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
        top: -1.2rem;
        left: 1rem;
    }
}

/* Wave Slider Styles */
.wave-slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 2rem;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.wave-slider {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(100%) scale(0.9);
}

.wave-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

.wave-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wave-image {
    position: relative;
    width: 100%;
    height: 70%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.wave-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wave-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(30, 58, 138, 0.1) 50%,
        transparent 70%
    );
    animation: waveMove 4s infinite ease-in-out;
}

@keyframes waveMove {
    0%, 100% {
        transform: translateX(-100%) translateY(0);
    }
    50% {
        transform: translateX(100%) translateY(-10px);
    }
}

.wave-info {
    text-align: center;
    margin-top: 1.5rem;
    padding: 0 2rem;
}

.wave-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.2s;
}

.wave-subtitle {
    font-size: 1rem;
    color: #6b7280;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.wave-slide.active .wave-title,
.wave-slide.active .wave-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Wave Navigation */
.wave-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 20;
    transform: translateY(-50%);
    pointer-events: none;
}

.wave-nav button {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-nav button:hover {
    background: linear-gradient(135deg, #1e3a8a, #0d9488);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(30, 58, 138, 0.3);
}

/* Wave Dots */
.wave-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 20;
}

.wave-dot {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(31, 41, 55, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.wave-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: #1e3a8a;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.wave-dot.active {
    background: #1e3a8a;
    transform: scale(1.2);
}

.wave-dot.active::before {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.3;
}

.wave-dot:hover {
    background: rgba(30, 58, 138, 0.6);
    transform: scale(1.1);
}

/* Wave Slider Responsive */
@media (max-width: 768px) {
    .wave-slider-container {
        height: 350px;
        margin-top: 1rem;
    }
    
    .wave-title {
        font-size: 1.5rem;
    }
    
    .wave-subtitle {
        font-size: 0.9rem;
    }
    
    .wave-nav button {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .wave-slider-container {
        height: 300px;
    }
    
    .wave-title {
        font-size: 1.3rem;
    }
    
    .wave-subtitle {
        font-size: 0.85rem;
    }
    
    .wave-info {
        margin-top: 1rem;
        padding: 0 1rem;
    }
    
    .wave-nav button {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
}

.carousel-nav button {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
}

/* Carousel Slider Styles */
.carousel-slider-container {
    position: relative;
    width: 100%;
    height: 450px;
    margin-top: 2rem;
    background: linear-gradient(135deg, #1e293b, #374151);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.8) rotateY(90deg);
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotateY(0deg);
}

.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.8) rotateY(90deg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    gap: 2rem;
}

.carousel-image-wrapper {
    position: relative;
    width: 60%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.carousel-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.carousel-text {
    width: 35%;
    text-align: left;
    color: white;
}

.carousel-number {
    font-size: 3rem;
    font-weight: 700;
    color: #60a5fa;
    margin-bottom: 1rem;
    text-shadow: 0 4px 8px rgba(96, 165, 250, 0.3);
}

.carousel-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.carousel-line {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #60a5fa, #0d9488);
    margin-bottom: 1rem;
    border-radius: 2px;
}

.carousel-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Circular Navigation */
.carousel-nav {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
}

.carousel-circle {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.carousel-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 0.8rem 1rem;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.carousel-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-5px);
}

.carousel-item.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: #60a5fa;
    transform: translateX(-10px);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.carousel-item.active .carousel-dot {
    background: #60a5fa;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);
}

.carousel-label {
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Carousel Controls */
.carousel-controls {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 30;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #60a5fa;
    transform: scale(1.1);
}

/* Carousel Responsive */
@media (max-width: 768px) {
    .carousel-slider-container {
        height: 400px;
        margin-top: 1rem;
    }
    
    .carousel-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .carousel-image-wrapper {
        width: 100%;
        height: 60%;
    }
    
    .carousel-text {
        width: 100%;
        text-align: center;
    }
    
    .carousel-number {
        font-size: 2.5rem;
    }
    
    .carousel-title {
        font-size: 1.3rem;
    }
    
    .carousel-nav {
        right: 1rem;
    }
    
    .carousel-controls {
        left: 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .carousel-slider-container {
        height: 350px;
    }
    
    .carousel-content {
        padding: 1rem;
    }
    
    .carousel-number {
        font-size: 2rem;
    }
    
    .carousel-title {
        font-size: 1.1rem;
    }
    
    .carousel-desc {
        font-size: 0.85rem;
    }
    
    .carousel-nav {
        right: 0.5rem;
    }
    
    .carousel-controls {
        left: 0.5rem;
    }
    
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Human Pharma Products Section */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #1e3a8a, #0d9488);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3);
    margin: 0.8rem 0;
}

/* Detailed Products */
.detailed-products {
    margin-top: 1rem;
}

.product-subcategory {
    margin-bottom: 1.5rem;
}

.subcategory-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.product-subcategory .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
}

.product-subcategory .product-item {
    padding: 0.8rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #1e3a8a;
    transition: all 0.3s ease;
}

.product-subcategory .product-item:hover {
    background: #f1f5f9;
    transform: translateX(3px);
}

.product-subcategory .product-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.product-subcategory .product-desc {
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.product-subcategory .product-dosage {
    font-size: 0.75rem;
    color: #0d9488;
    font-weight: 500;
    background: rgba(13, 148, 136, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    display: inline-block;
}

/* Gallery in products-grid */
.products-grid .product-gallery {
    display: none;
    margin: 1rem 0;
}

.products-grid .product-gallery.active {
    display: block;
}

.products-grid .gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.products-grid .gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.products-grid .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.products-grid .gallery-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.products-grid .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.products-grid .gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1.5rem 1rem 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.products-grid .gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.products-grid .gallery-caption {
    color: white;
    text-align: center;
}

.products-grid .gallery-caption h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.products-grid .gallery-caption p {
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 0.9;
}

.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
}

.filter-btn.glow-active {
    background: linear-gradient(135deg, #0d9488, #1e3a8a);
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.5);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(13, 148, 136, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(13, 148, 136, 0.8);
    }
}

/* Product Gallery */
.product-gallery {
    display: none;
    margin-bottom: 3rem;
    animation: fadeIn 0.5s ease-in-out;
}

.product-gallery.active {
    display: block;
}

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

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gallery-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 2rem 1.5rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

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

.gallery-caption {
    color: white;
    text-align: center;
}

.gallery-caption h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.gallery-caption p {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-category {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.product-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.category-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1e3a8a, #0d9488);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3);
}

.category-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-item {
    padding: 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #1e3a8a;
    transition: all 0.3s ease;
}

.product-item:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.3rem;
}

.product-desc {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.product-dosage {
    font-size: 0.85rem;
    color: #0d9488;
    font-weight: 500;
    background: rgba(13, 148, 136, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    display: inline-block;
}

/* Product Stats */
.product-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1e293b, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.3);
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.3rem;
    line-height: 1;
}

.stat-label {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
}

/* Products Section Responsive */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .product-category {
        padding: 1.5rem;
    }
    
    .category-header {
        gap: 0.8rem;
    }
    
    .category-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .category-title {
        font-size: 1.2rem;
    }
    
    .product-item {
        padding: 0.8rem;
    }
    
    .product-name {
        font-size: 1rem;
    }
    
    .product-desc {
        font-size: 0.85rem;
    }
    
    .product-dosage {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
    
    .product-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem;
        gap: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .product-category {
        padding: 1rem;
    }
    
    .category-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .category-title {
        font-size: 1.1rem;
    }
    
    .product-item {
        padding: 0.6rem;
    }
    
    .stat-card {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.8rem;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
}

/* Overlapping Slider Styles */
.overlap-slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin-top: 2rem;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.overlap-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.overlap-slide {
    position: absolute;
    width: 280px;
    height: 320px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.overlap-slide:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.overlap-image {
    position: relative;
    width: 100%;
    height: 70%;
    overflow: hidden;
}

.overlap-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.overlap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.overlap-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    text-align: center;
}

.overlap-badge {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 30px;
    text-align: center;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.overlap-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.3rem;
}

.overlap-text {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

/* Overlap Navigation */
.overlap-nav {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 30;
}

.overlap-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlap-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.4);
}

/* Overlap Slider Responsive */
@media (max-width: 768px) {
    .overlap-slider-container {
        height: 350px;
        margin-top: 1rem;
    }
    
    .overlap-slide {
        width: 240px;
        height: 280px;
    }
    
    .overlap-nav {
        bottom: 1rem;
    }
    
    .overlap-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .overlap-slider-container {
        height: 300px;
    }
    
    .overlap-slide {
        width: 200px;
        height: 240px;
    }
    
    .overlap-info {
        padding: 1rem;
    }
    
    .overlap-badge {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
        line-height: 25px;
    }
    
    .overlap-title {
        font-size: 1rem;
    }
    
    .overlap-text {
        font-size: 0.8rem;
    }
    
    .overlap-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Products Page Styles */

/* Products Hero Section */
.products-hero {
    position: relative;
    padding: 180px 0 100px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    overflow: hidden;
}

.products-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
    background-size: 50px 50px;
    opacity: 0.3;
}

.products-hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.products-hero-content h1 {
    font-size: 3.0rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.products-hero-content p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto 2rem;
}

.products-hero-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.products-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.products-hero-breadcrumb a:hover {
    color: #3b82f6;
}

/* Product Categories Section */
.product-categories-section {
    padding: 80px 0;
    background: #f8fafc;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.section-header p {
    font-size: 1.1rem;
    color: #64748b;
}

.section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #f97316);
    margin: 1.5rem auto 0;
    border-radius: 2px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.category-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.category-card.herbal:hover {
    border-color: #0d9488;
}

.category-card.tablets:hover {
    border-color: #3b82f6;
}

.category-card.capsules:hover {
    border-color: #f97316;
}

.category-card.syrups:hover {
    border-color: #8b5cf6;
}

.category-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.category-card.herbal .category-icon {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
}

.category-card.tablets .category-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.category-card.capsules .category-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

.category-card.syrups .category-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.category-card h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.category-card p {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.category-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-link:hover {
    color: #1d4ed8;
    gap: 0.75rem;
}

/* Herbal Section */
.herbal-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.herbal-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

.herbal-intro-content h3 {
    font-size: 2rem;
    color: #0d9488;
    margin-bottom: 1.5rem;
}

.herbal-intro-content p {
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.herbal-benefits {
    list-style: none;
    padding: 0;
}

.herbal-benefits li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: #1e293b;
    margin-bottom: 1rem;
    font-weight: 500;
}

.herbal-benefits i {
    color: #0d9488;
    font-size: 1.2rem;
}

.herbal-intro-image {
    position: relative;
}

.herbal-feature-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.herbal-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.herbal-product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.herbal-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.product-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.herbal-product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(13, 148, 136, 0.3);
}

.product-info {
    padding: 1.5rem;
}

.product-info h4 {
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.product-info p {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.product-details {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.product-dosage,
.product-category {
    font-size: 0.85rem;
    color: #0d9488;
    font-weight: 600;
    background: #f0fdf4;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

.product-info .btn {
    width: 100%;
}

/* Other Products Section */
.other-products-section {
    padding: 100px 0;
    background: white;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.product-card {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.product-card .product-image {
    height: 220px;
}

.product-card .product-info {
    padding: 1.5rem;
}

.product-card .product-info h4 {
    font-size: 1.15rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.product-card .product-info p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.product-card .product-info .btn {
    width: 100%;
}

/* Herbal Filter Buttons */
.herbal-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.herbal-filter-buttons .btn {
    background: #e0f2f7;
    color: #0d9488;
    border: 1px solid #0d9488;
    padding: 0.7rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.herbal-filter-buttons .btn:hover,
.herbal-filter-buttons .btn.active {
    background: #0d9488;
    color: white;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .herbal-filter-buttons {
        gap: 0.5rem;
        margin-bottom: 2rem;
    }

    .herbal-filter-buttons .btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .herbal-filter-buttons .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Products CTA Section */
.products-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.cta-buttons .btn-primary {
    background: white;
    color: #1e3a8a;
}

.cta-buttons .btn-primary:hover {
    background: #f8fafc;
    transform: translateY(-2px);
}

.cta-buttons .btn-secondary {
    background: transparent;
    color: white;
    border-color: white;
}

.cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Footer */
.footer {
    background: #031649;
    color: white;
    padding: 60px 0 30px;
}

/* Global Presence - Interactive World Map Tooltips */
.world-map-container {
    position: relative;
}

.world-map-interactive {
    position: relative;
    width: 90%;
    margin: 0 auto;
    user-select: none;
}

.world-map-interactive .world-map-image {
    width: 100%;
    height: auto;
    display: block;
}

.world-map-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.world-map-marker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #3b82f6);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 0 22px rgba(59, 130, 246, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.world-map-marker:hover .world-map-marker-dot {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.22), 0 0 30px rgba(59, 130, 246, 0.6);
}

.world-map-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(12px, 12px);
    max-width: 260px;
    background: rgba(15, 23, 42, 0.96);
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.world-map-tooltip .world-map-tooltip-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.world-map-tooltip .world-map-tooltip-subtitle {
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.world-map-interactive.is-tooltip-visible .world-map-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .world-map-interactive {
        width: 100%;
    }
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1.5rem;
    color: white;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #3b82f6;
}

.footer-section ul li i {
    margin-right: 0.75rem;
    color: #3b82f6;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Responsive Design for Products Page */
@media (max-width: 1024px) {
    .products-hero-content h1 {
        font-size: 2.75rem;
    }
    
    .herbal-intro {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .herbal-feature-img {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .products-hero {
        padding: 140px 0 80px;
    }
    
    .products-hero-content h1 {
        font-size: 2.25rem;
    }
    
    .products-hero-content p {
        font-size: 1rem;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .herbal-products-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .herbal-intro-content h3 {
        font-size: 1.5rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .products-hero-content h1 {
        font-size: 1.75rem;
    }
    
    .section-header h2 {
        font-size: 1.75rem;
    }
    
    .category-card {
        padding: 1.5rem;
    }
    
    .herbal-feature-img {
        height: 250px;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
}

/* Modern Products Page Styles */

/* Modern Hero Section */
.products-hero-modern {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: #3b82f6;
    top: -100px;
    right: -100px;
    animation: floatShape 8s ease-in-out infinite;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: #0d9488;
    bottom: -50px;
    left: -50px;
    animation: floatShape 10s ease-in-out infinite reverse;
}

.shape-3 {
    width: 200px;
    height: 200px;
    background: #f97316;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatShape 12s ease-in-out infinite;
}

@keyframes floatShape {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    color: white;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 1.5rem;
}

.hero-content h1 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: #06288b;
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
     -webkit-text-stroke: 0.5px #3b82f6;
}

.hero-content p {
  display: inline-block;
  font-size: 1.4rem;
  color: #ffff;
  margin-bottom: 2rem;
  line-height: 1.8;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

  /* Transparent Highlighted Background */
  background: rgba(30, 58, 138, 0.25);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);

  padding: 30px 30px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

 .hero-stats {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .hero-stats .stat-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hero-stats .stat-number {
            display: block;
            font-size: 1.8rem;
            font-weight: 700;
            color: #FFD700;
            margin-bottom: 0.5rem;
        }
        
        .hero-stats .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

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

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #03006b;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-actions {
    display: flex;
    gap: 1rem;
}

.hero-visual {
    position: relative;
    height: 400px;
}

.floating-product {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: floatProduct 6s ease-in-out infinite;
}

.floating-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.product-2 {
    top: 40%;
    right: 20%;
    animation-delay: 2s;
}

.product-3 {
    bottom: 10%;
    left: 40%;
    animation-delay: 4s;
}

@keyframes floatProduct {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* Quick Navigation */
.quick-nav {
    position: sticky;
    top: 86px;
    z-index: 100;
    background: white;
    padding: 1rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e5e7eb;
}

.quick-nav-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quick-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    border: 2px solid #e5e7eb;
    border-radius: 30px;
    text-decoration: none;
    color: #64748b;
    font-weight: 600;
    transition: all 0.3s ease;
}

.quick-nav-item:hover,
.quick-nav-item.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quick-nav-item i {
    font-size: 1rem;
}

.quick-nav-item .count {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

/* Modern Products Section */
.products-section {
    padding: 75px 0;
}

.products-section:nth-child(even) {
    background: #f8fafc;
}

.section-header-modern {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.section-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0B026B, #0B026B);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.section-text {
    flex: 1;
}

.section-text h2 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.section-text p {
    color: #64748b;
    margin: 0;
}

.section-badge {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Search Container */
.search-container {
    margin-bottom: 2rem;
}

.search-box {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    max-width: 600px;
}

.search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.search-box i {
    color: #64748b;
    font-size: 1.1rem;
    margin-right: 0.75rem;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #1e293b;
    background: transparent;
}

.search-box input::placeholder {
    color: #9ca3af;
}

.search-box .search-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-box .search-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Search Modal */
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.search-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.modal-header h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0;
}

.modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 10px;
    cursor: pointer;
    color: #64748b;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg);
}

.modal-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.search-result-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateX(5px);
}

.search-result-item:last-child {
    margin-bottom: 0;
}

.search-result-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.search-result-info {
    flex: 1;
}

.search-result-info h4 {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.search-result-info p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.search-result-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
}

.search-result-meta span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.search-result-meta i {
    color: #f97316;
}

.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.no-results i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-results h4 {
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.no-results p {
    font-size: 0.95rem;
    margin: 0;
}

/* Modern Products Grid */
.products-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card-modern {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.product-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.product-card-modern.featured {
    border: 2px solid #3b82f6;
}

.product-card-modern.popular {
    border: 2px solid #f97316;
}

.product-image-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card-modern:hover .product-image-wrapper img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    z-index: 2;
}

.featured-badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.popular-badge {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card-modern:hover .product-overlay {
    opacity: 1;
}

.quick-view-btn,
.wishlist-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: none;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.quick-view-btn:hover,
.wishlist-btn:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

.product-content {
    padding: 1.5rem;
}

.product-category-tag {
    display: inline-block;
    background: #f0fdf4;
    color: #0d9488;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.product-content h3 {
    font-size: 1.15rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.product-content p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.product-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #64748b;
}

.meta-item i {
    color: #f97316;
}

.product-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
}

/* Modern CTA Section */
.cta-section-modern {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    position: relative;
    overflow: hidden;
}

.cta-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta-content {
    color: white;
}

.cta-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.cta-content h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.cta-features {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.cta-feature i {
    color: #4ade80;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #1e3a8a;
    border: none;
}

.cta-btn:hover {
    background: #f8fafc;
    transform: translateY(-2px);
}

.cta-visual {
    position: relative;
    height: 300px;
}

.cta-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;
}

.circle-1 {
    width: 200px;
    height: 200px;
    background: #4ade80;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 3s ease-in-out infinite;
}

.circle-2 {
    width: 150px;
    height: 150px;
    background: #3b82f6;
    top: 30%;
    left: 30%;
    animation: pulse 3s ease-in-out infinite 1s;
}

.circle-3 {
    width: 100px;
    height: 100px;
    background: #f97316;
    bottom: 20%;
    right: 20%;
    animation: pulse 3s ease-in-out infinite 2s;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

/* Modern Footer */
.footer-modern {
    background: #0f172a;
    color: white;
    padding: 60px 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    margin: 1rem 0 1.5rem;
    line-height: 1.8;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #3b82f6;
    transform: translateY(-3px);
}

.footer-links h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 0.75rem;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.footer-links ul li a:hover {
    color: #3b82f6;
    gap: 0.75rem;
}

.footer-links ul li a i {
    font-size: 0.75rem;
}

.footer-contact h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
}

.footer-contact ul li {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.footer-contact ul li i {
    color: #3b82f6;
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.footer-contact ul li div {
    display: flex;
    flex-direction: column;
}

.footer-contact ul li div span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
}

.footer-contact ul li div a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact ul li div a:hover {
    color: #3b82f6;
}

.footer-bottom {
    padding: 1.5rem 0;
}

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

.footer-bottom-content p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: white;
}

/* Responsive Design for Modern Products Page */
@media (max-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-visual {
        display: none;
    }
    
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-hero-modern {
        padding: 100px 0 60px;
    }
    
    .hero-content h1 {
        font-size: 2.25rem;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .quick-nav-grid {
        gap: 0.5rem;
    }
    
    .quick-nav-item {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    .section-header-modern {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .products-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .cta-layout {
        grid-template-columns: 1fr;
    }
    
    .cta-visual {
        display: none;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .section-text h2 {
        font-size: 1.5rem;
    }
    
    .filter-buttons-wrapper {
        gap: 0.35rem;
    }
    
    .filter-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }
    
    
}

        .chairman-section{
            max-width:1200px;
            margin:auto;
        }

        .section-title{
            text-align:center;
            font-size:38px;
            font-weight:700;
            color:#17375e;
            margin-bottom:45px;
            position:relative;
        }

        .section-title:after{
            content:'';
            width:90px;
            height:4px;
            background:#2d89ef;
            display:block;
            margin:12px auto;
            border-radius:5px;
        }

        .chairman-card{

            display:flex;
            flex-wrap:wrap;
            background:rgba(255,255,255,.90);
            backdrop-filter:blur(8px);
            border-radius:18px;
            overflow:hidden;
            box-shadow:0 15px 40px rgba(0,0,0,.15);
            transition:.4s;
        }

        .chairman-card:hover{
            transform:translateY(-6px);
            box-shadow:0 25px 50px rgba(0,0,0,.20);
        }

        /* Left */

        .chairman-photo{
            width:330px;
            background:linear-gradient(180deg,#1d4e89,#2d89ef);
            text-align:center;
            padding:40px 25px;
            color:#fff;
        }

        .chairman-photo img{
            width:220px;
            height:220px;
            border-radius:50%;
            object-fit:cover;
            border:8px solid rgba(255,255,255,.25);
            box-shadow:0 10px 25px rgba(0,0,0,.30);
        }

        .chairman-photo h2{
            margin-top:25px;
            font-size:28px;
        }

        .chairman-photo span{
            display:block;
            margin-top:10px;
            color:#dbefff;
            font-size:17px;
        }

        /* Right */

        .chairman-message{

            flex:1;
            padding:50px;
            position:relative;
        }

        .chairman-message i{
            font-size:27px;
            color:#2d89ef;
            opacity:.15;
        }

        .chairman-message h3{
            font-size:30px;
            color:#17375e;
            margin-bottom:20px;
        }

      

        .signature{

            margin-top:35px;
            border-top:1px solid #ddd;
            padding-top:20px;

        }

        .signature h4{

            color:#17375e;
            font-size:24px;
            margin-bottom:6px;

        }

        .signature span{

            color:#777;
            font-size:16px;

        }

        @media(max-width:900px){

            .chairman-card{
                flex-direction:column;
            }

            .chairman-photo{
                width:100%;
            }

            .chairman-message{
                padding:35px;
            }

        }

/*============================*/

.board-section{
    padding:70px 8%;
}

.board-title{
    text-align:center;
    margin-bottom:60px;
}

.board-title h1{
    font-size:42px;
    color:#183153;
    font-weight:700;
}

.board-title p{
    color:#666;
    margin-top:12px;
    font-size:17px;
}

/*============================*/

.board-container{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:35px;
}

/*============================*/

.board-card{

    background:rgba(255,255,255,.95);
    border-radius:18px;
    padding:28px;
    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.35s;
    position:relative;
    overflow:hidden;
}

.board-card:before{

content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#0d6efd,#00c6ff);

}

.board-card:hover{

transform:translateY(-10px);

box-shadow:
0 20px 45px rgba(13,110,253,.18);

}

/*============================*/

.board-img{

width:130px;
height:130px;
margin:auto;
border-radius:50%;
overflow:hidden;
border:5px solid #0d6efd;
box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.board-img img{

width:100%;
height:100%;
object-fit:cover;

}

/*============================*/

.board-card h3{

margin-top:18px;
color:#183153;
font-size:23px;

}

.designation{

color:#0d6efd;
font-weight:600;
margin-top:8px;
font-size:15px;

}

.board-card p{

margin-top:15px;
font-size:15px;
line-height:1.7;
color:#666;

}

.social{

margin-top:18px;

}

.social a{

display:inline-flex;
justify-content:center;
align-items:center;

width:38px;
height:38px;
margin:4px;

border-radius:50%;

background:#0d6efd;
color:#fff;

text-decoration:none;

transition:.3s;

}

.social a:hover{

background:#183153;
transform:scale(1.1);

}

/*============================*/

@media(max-width:768px){

.board-title h1{

font-size:34px;

}

.board-card{

padding:22px;

}

}
/* Section */
.board-section1 {
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    text-align: center;
}

.board-section1 h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #222;
}

/* Carousel wrapper */
.carousel {
    position: relative;
    overflow: hidden;
    padding: 10px;
}

/* Track */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Card */
.card {
    flex: 0 0 calc(100% / 3);
    background: #fff;
    margin: 10px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
}

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

.card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #4CAF50;
}

.card h3 {
    margin-top: 12px;
    font-size: 18px;
}

.card p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}


/* Responsive */
@media (max-width: 992px) {
    .card {
        flex: 0 0 calc(100% / 2);
    }
}

@media (max-width: 600px) {
    .card {
        flex: 0 0 100%;
    }
}

/* Products Layout Sidebar Design */
.products-layout-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 3rem;
}

.products-sidebar {
    position: sticky;
    top: 100px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 15px;
    z-index: 10;
}

/* Custom Scrollbar for Sidebar */
.products-sidebar::-webkit-scrollbar {
    width: 6px;
}
.products-sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}
.products-sidebar::-webkit-scrollbar-thumb {
    background: rgba(240, 123, 12, 0.2);
    border-radius: 4px;
}
.products-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(240, 123, 12, 0.5);
}

.products-sidebar .quick-nav {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.products-sidebar .quick-nav .container {
    padding: 0;
}

.products-sidebar .quick-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.products-sidebar .quick-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 123, 12, 0.15);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.products-sidebar .quick-nav-item i {
    font-size: 2.0rem;
    color: #0B026B;
    margin-right: 1rem;
    transition: transform 0.3s ease;
}

.products-sidebar .quick-nav-item span:not(.count) {
    flex: 1;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.3;
}

.products-sidebar .quick-nav-item .count {
    background: rgba(240, 123, 12, 0.1);
    color: #1e293b;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.products-sidebar .quick-nav-item:hover,
.products-sidebar .quick-nav-item.active {
    transform: translateX(10px);
    background: linear-gradient(135deg, #0B026B, #A1BCDA);
    border-color: transparent;
    color: white;
    box-shadow: 0 10px 25px rgba(240, 123, 12, 0.3);
}

.products-sidebar .quick-nav-item:hover i,
.products-sidebar .quick-nav-item.active i {
    color: white;
    transform: scale(1.1);
}

.products-sidebar .quick-nav-item:hover .count,
.products-sidebar .quick-nav-item.active .count {
    background: white;
    color: #f07b0c;
}

.products-content {
    min-width: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 15px;
}

/* Custom Scrollbar for Products Content */
.products-content::-webkit-scrollbar {
    width: 6px;
}
.products-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}
.products-content::-webkit-scrollbar-thumb {
    background: rgba(240, 123, 12, 0.2);
    border-radius: 4px;
}
.products-content::-webkit-scrollbar-thumb:hover {
    background: rgba(240, 123, 12, 0.5);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .products-layout-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .products-sidebar {
        position: static;
        height: auto;
        padding-right: 0;
    }

    .products-content {
        max-height: none;
        overflow-y: visible;
        overscroll-behavior: auto;
        padding-right: 0;
    }

    .products-sidebar .quick-nav-grid {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
        scroll-snap-type: x mandatory;
    }

    .products-sidebar .quick-nav-item {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }
}
.board-section1{

padding: 80px 40px;
background: linear-gradient(135deg,#F4F6F9,#F4F6F9,#F4F6F9);
overflow: hidden;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
  color: #ff8f00;
}

.section-title h2{

font-size:40px;
font-weight:700;
margin-bottom:15px;
}

.section-title p{

font-size:17px;
opacity:.9;
}

.carousel-container{

position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.carousel-wrapper{

overflow:hidden;
width:100%;
max-width:1220px;
}

.carousel-track{

display:flex;
transition:transform .6s ease;
gap:25px;
}

.director-card{

flex:0 0 calc(100%/3 - 18px);

background:rgba(255,255,255,.18);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.25);

border-radius:25px;

padding:35px 25px;

text-align:center;

transition:.4s;

box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.director-card:hover{

transform:translateY(-10px);

background:#fff;
}

.img-box{

width:140px;
height:140px;
margin:auto;
border-radius:50%;
padding:6px;
background:linear-gradient(45deg,#00d2ff,#3a7bd5,#00ffcc);
}

.img-box img{

width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
border:5px solid #fff;
}

.director-card h3{

margin-top:20px;

font-size:24px;

color:#F17C0D;

transition:.4s;
}

.director-card span{

display:block;

margin:8px 0 15px;

font-weight:600;

color:#FFD700;
}

.director-card p{

color:#eef6ff;

line-height:1.7;

font-size:15px;
}

.director-card:hover h3{

color:#0B3D91;
}

.director-card:hover p{

color:#444;
}

.nav-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#fff;

color:#0B3D91;

font-size:28px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.2);

transition:.3s;

z-index:5;
}

.nav-btn:hover{

background:#F17C0D;

color:#fff;

transform:translateY(-50%) scale(1.1);
}

.prev{

left:-15px;
}

.next{

right:-15px;
}

.dots{

margin-top:40px;

display:flex;

justify-content:center;

gap:12px;
}

.dot{

width:14px;

height:14px;

border-radius:50%;

background:#fff;

opacity:.4;

cursor:pointer;

transition:.4s;
}

.dot.active{

opacity:1;

transform:scale(1.3);

background:#FFD700;
}

@media(max-width:991px){

.director-card{

flex:0 0 calc(100%/2 - 15px);
}

}

@media(max-width:768px){

.director-card{

flex:0 0 100%;
}

.section-title h2{

font-size:30px;
}

.nav-btn{

display:none;
}

}
.gallery-section{

width:90%;
margin:auto;
padding:70px 0;

}

.heading{

text-align:center;
margin-bottom:40px;

}

.heading h5{

color:#0d6efd;
letter-spacing:2px;

}

.heading h1{

font-size:42px;
margin:15px 0;

}

.heading p{

color:#777;
max-width:700px;
margin:auto;

}


.filter-buttons{

display:flex;
justify-content:center;
gap:15px;
margin-bottom:40px;
flex-wrap:wrap;

}

.filter-buttons button{

padding:12px 30px;
border:none;
background:white;
border-radius:50px;
cursor:pointer;
font-weight:600;
transition:.4s;
box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.filter-buttons button:hover,
.filter-buttons button.active{

background:#0d6efd;
color:white;

}


.gallery{

columns:4 280px;
column-gap:18px;

}

.card{

position:relative;
overflow:hidden;
border-radius:18px;
margin-bottom:18px;
cursor:pointer;
break-inside:avoid;
transition:.5s;

}

.card img{

width:100%;
display:block;
transition:.5s;

}

.card:hover img{

transform:scale(1.15);

}

.overlay{

position:absolute;
bottom:-100%;
left:0;
width:100%;
padding:25px;
background:linear-gradient(transparent,#000);
color:white;
transition:.4s;

}

.card:hover .overlay{

bottom:0;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.3);

}



.lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
display:none;
justify-content:center;
align-items:center;
z-index:9999;

}

.lightbox img{

max-width:80%;
max-height:80%;
border-radius:10px;

}

.close{

position:absolute;
top:25px;
right:40px;
font-size:50px;
color:white;
cursor:pointer;

}

.prev,
.next{

position:absolute;
top:50%;
transform:translateY(-50%);
background:white;
border:none;
font-size:40px;
width:60px;
height:60px;
border-radius:50%;
cursor:pointer;

}

.prev{

left:50px;

}

.next{

right:50px;

}

@media(max-width:768px){

.heading h1{

font-size:30px;

}

.lightbox img{

max-width:95%;

}

.prev,.next{

width:45px;
height:45px;
font-size:28px;

}

}

.gallery-section{

width:90%;
margin:60px auto;

}

.title{

text-align:center;
margin-bottom:40px;

}

.title h1{

font-size:42px;
color:#123456;
margin-bottom:10px;

}

.title p{

color:#666;
font-size:17px;

}

.gallery{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;

}

.item{

overflow:hidden;
border-radius:18px;
cursor:pointer;
position:relative;
box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.item img{

width:100%;
height:250px;
object-fit:cover;
transition:.5s;

}

.item:hover img{

transform:scale(1.15);

}

.item::before{

content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:linear-gradient(transparent,rgba(0,0,0,.5));
opacity:0;
transition:.4s;
z-index:2;

}

.item:hover::before{

opacity:1;

}

.btn-box{

text-align:center;
margin-top:45px;

}

button{
padding:-15px 40px;
border:none;
background:#005bea;
color:#fff;
font-size:17px;
border-radius:50px;
cursor:pointer;
transition:.4s;

}

button:hover{

background:#003d99;
transform:translateY(-5px);

}

.lightbox{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
justify-content:center;
align-items:center;
z-index:999;

}

.lightbox img{

max-width:90%;
max-height:90%;
border-radius:10px;

}

.lightbox span{

position:absolute;
top:30px;
right:50px;
font-size:45px;
color:white;
cursor:pointer;

}

@media(max-width:768px){

.title h1{

font-size:30px;

}

}

/* --- Isometric 3D Bar Chart Timeline Styles --- */
.iso-chart-container {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 3rem 2rem 2rem 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    width: 100%;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.iso-chart-title {
    text-align: center;
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.iso-chart-scene {
    position: relative;
    height: 450px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
    z-index: 2;
}

.iso-grid-floor {
    position: absolute;
    bottom: 60px;
    left: -10%;
    width: 120%;
    height: 120px;
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    transform-origin: bottom;
    transform: skewX(-45deg);
    z-index: 1;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.iso-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40px; /* Spacing between bars */
    position: relative;
    z-index: 3;
}

.iso-bar {
    width: 70px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Front face */
    background: var(--iso-front);
    box-shadow: 10px 10px 20px rgba(0,0,0,0.15); /* Shadow falling to the right */
}

/* Side face */
.iso-bar::before {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 30px; /* Depth */
    height: 100%;
    background: var(--iso-side);
    transform-origin: left bottom;
    transform: skewY(-45deg);
    transition: all 0.3s ease;
}

/* Top face */
.iso-bar::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 30px; /* Depth */
    background: var(--iso-top);
    transform-origin: left bottom;
    transform: skewX(-45deg);
    transition: all 0.3s ease;
}

/* Hover effects */
.iso-bar:hover {
    transform: translateY(-5px);
}
.iso-bar:hover::before, .iso-bar:hover::after {
    filter: brightness(1.1);
}

/* Colors matching the image */
.iso-c1 { --iso-front: #4facfe; --iso-side: #2b7fc4; --iso-top: #85c8ff; } /* Light Blue */
.iso-c2 { --iso-front: #ff6b6b; --iso-side: #c94040; --iso-top: #ff9999; } /* Coral Red */
.iso-c3 { --iso-front: #feca57; --iso-side: #c79633; --iso-top: #ffdb8a; } /* Yellow/Orange */
.iso-c4 { --iso-front: #1dd1a1; --iso-side: #0e9671; --iso-top: #65ebd0; } /* Teal/Green */
.iso-c5 { --iso-front: #54a0ff; --iso-side: #3574c4; --iso-top: #98c6ff; } /* Blue */
.iso-c6 { --iso-front: #ff9ff3; --iso-side: #b560a9; --iso-top: #ffc4f8; } /* Pink/Purple */
.iso-c7 { --iso-front: #fbc531; --iso-side: #b58c1a; --iso-top: #ffdf85; } /* Gold */

.iso-label {
    position: absolute;
    bottom: -60px; /* Drop down below the floor */
    font-weight: 700;
    color: #444;
    font-size: 1.25rem;
    transform: rotate(-30deg); /* Angled text looks cool on charts */
    white-space: nowrap;
}

/* Tooltip for hover */
.iso-tooltip {
    position: absolute;
    bottom: calc(100% + 25px); /* Above the top face */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    background: rgba(20, 20, 20, 0.95);
    color: white;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    width: max-content;
    max-width: 250px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.iso-bar:hover .iso-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.iso-tooltip h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
    color: var(--iso-top); /* Matches bar color */
    font-weight: 600;
}

.iso-tooltip p {
    margin: 0;
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.4;
}

/* Tooltip arrow */
.iso-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: rgba(20, 20, 20, 0.95) transparent transparent transparent;
}

@media (max-width: 900px) {
    .iso-bar { width: 25px; }
    .iso-bar::before { width: 12px; }
    .iso-bar::after { height: 12px; }
    .iso-bar-group { margin: 0 10px; }
    .iso-label { font-size: 0.85rem; bottom: -40px; transform: rotate(-45deg); }
}

@media (max-width: 768px) {
    .iso-bar { width: 18px; }
    .iso-bar::before { width: 10px; }
    .iso-bar::after { height: 10px; }
    .iso-bar-group { margin: 0 6px; }
    .iso-label { font-size: 0.75rem; bottom: -35px; transform: rotate(-45deg); }
    .iso-chart-scene { height: 250px; padding-bottom: 40px; }
    .iso-grid-floor { bottom: 40px; }
}
/* Timeline Chart Integration */
.timeline-chart-container {
    width: 100%;
    background: rgb(144 182 225);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}
.timeline-header {
    text-align: center;
    margin-bottom: 30px;
}
.timeline-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    background: linear-gradient(to right, #1e293b, #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.timeline-header p {
    color: #000000;
    font-size: 0.9rem;
    margin: 0;
}
.bars-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 300px;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    position: relative;
    margin-bottom: 80px;
}
.bars-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(255, 255, 255, 0.05) calc(100% - 1px)) 0 0 / 100% 25%;
    z-index: 0;
    pointer-events: none;
}
.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    flex: 1;
    transition: transform 0.3s ease;
    position: relative;
}
.bar-group:hover {
    transform: translateY(-5px);
}
.bar {
    width: 100%;
    max-width: 50px;
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    animation: growUp 1.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    transform-origin: bottom;
    opacity: 0;
}
.bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
}
.bar::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 50%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}
.bar-1993 { height: 60px; background: linear-gradient(to top, #00f2fe, #4facfe); animation-delay: 0.1s; }
.bar-2009 { height: 120px; background: linear-gradient(to top, #f093fb, #f5576c); animation-delay: 0.3s; }
.bar-2010 { height: 160px; background: linear-gradient(to top, #43e97b, #38f9d7); animation-delay: 0.5s; }
.bar-2016 { height: 210px; background: linear-gradient(to top, #fa709a, #fee140); animation-delay: 0.7s; }
.bar-2026 { height: 280px; background: linear-gradient(to top, #667eea, #764ba2); animation-delay: 0.9s; }
.year-label {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
}
.caption-card {
    position: absolute;
    top: 100%;
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    width: 100px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.4s ease;
    animation: fadeIn 1s forwards;
    pointer-events: none;
}
.bar-group:hover .caption-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 10;
}
.caption-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}
.caption-desc {
    font-size: 0.6rem;
    color: #8b9bb4;
    line-height: 1.2;
}
@keyframes growUp { 0% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes shine { 0% { left: -100%; top: -100%; } 20% { left: 200%; top: 200%; } 100% { left: 200%; top: 200%; } }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
.caption-1993 { animation-delay: 0.6s; }
.caption-2009 { animation-delay: 0.8s; }
.caption-2010 { animation-delay: 1.0s; }
.caption-2016 { animation-delay: 1.2s; }
.caption-2026 { animation-delay: 1.4s; }