/* Custom Styles for Sinaverse Website */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow-x: hidden;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1C39BB;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #153A7A;
}

/* Modern Navigation Styles */
.nav-modern {
    box-shadow: 0 4px 20px rgba(28, 57, 187, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-modern.scrolled {
    box-shadow: 0 8px 30px rgba(28, 57, 187, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Nav Link Styles */
.nav-link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.1), rgba(0, 166, 147, 0.15));
    border-radius: 0.5rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover .nav-link-bg,
.nav-link-active .nav-link-bg {
    opacity: 1;
    transform: scale(1);
}

.nav-link-active {
    color: #1C39BB !important;
}

.nav-link:hover {
    color: #1C39BB;
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1C39BB, #00A693, transparent);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link-active::after {
    transform: translateX(-50%) scaleX(1);
}

/* Nav Action Buttons */
.nav-action-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-action-btn:hover {
    transform: translateY(-2px);
}

/* Mobile Nav Links */
.mobile-nav-link {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mobile-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #1C39BB, #00A693);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s ease;
}

.mobile-nav-link:hover::before,
.mobile-nav-link:first-child::before {
    height: 60%;
}

/* Button Hover Effects */
button, .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

button::before, .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover::before, .btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Image Overlay Effects */
.image-overlay {
    position: relative;
    overflow: hidden;
}

.image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.8), rgba(0, 166, 147, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.image-overlay:hover::before {
    opacity: 1;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #1C39BB, #00A693);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Styles */
section {
    position: relative;
}

/* Form Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(28, 57, 187, 0.1);
}

/* Footer Styles */
footer{background:linear-gradient(135deg,#050816 0%,#0a1128 40%,#0d1a3a 70%,#081020 100%)!important}
footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    transform: translateX(5px);
}

.footer-logo {
    filter: brightness(0) invert(1);
}

/* Creative accents */
.bg-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0.18;
    pointer-events: none;
}

.bg-blob.blue {
    background: radial-gradient(circle at 30% 30%, #00A693, #1C39BB 50%, transparent 60%);
}

.bg-blob.cyan {
    background: radial-gradient(circle at 70% 40%, #00b5d8, #006f9c 45%, transparent 60%);
}

.glass {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #1C39BB, #00A693, #00b5d8);
    opacity: 0.8;
    z-index: 0;
}

.gradient-border > * {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 1.15rem;
}

.scroll-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: #1C39BB;
    font-weight: 600;
}

.scroll-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #1C39BB;
    animation: bounce 1.6s ease-in-out infinite;
}

.floating-buttons-container {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.floating-contact {
    display: flex;
}

.floating-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.2rem;
    background: linear-gradient(135deg, #1C39BB, #00A693);
    color: white;
    border-radius: 9999px;
    box-shadow: 0 15px 35px rgba(28, 57, 187, 0.35);
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-contact a:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(28, 57, 187, 0.45);
}

.back-to-top-button {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #1C39BB;
    color: white;
    border-radius: 9999px;
    box-shadow: 0 10px 25px rgba(28, 57, 187, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(28, 57, 187, 0.4);
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu.show {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
}

/* Utility Classes */
.backdrop-blur-custom {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shadow-custom {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Gradient Backgrounds */
.gradient-blue {
    background: linear-gradient(135deg, #1C39BB 0%, #00A693 100%);
}

.gradient-blue-purple {
    background: linear-gradient(135deg, #1C39BB 0%, #153A7A 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

/* Custom Border Radius */
.rounded-custom {
    border-radius: 1.5rem;
}

/* Text Shadow */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hero Image Effect */
.hero-image {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

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

/* Stats Counter Animation */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Product Card Styles */
.product-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.product-card:hover {
    border-color: #1C39BB;
}

/* Contact Info Card */
.contact-card {
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: scale(1.05);
}

/* Parallax Effect */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Hero Section Enhancements */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.75) 0%, rgba(0, 166, 147, 0.65) 50%, rgba(28, 57, 187, 0.75) 100%);
}

.hero-overlay-2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(0, 181, 216, 0.15) 0%, transparent 50%);
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: float-shape 20s ease-in-out infinite;
    pointer-events: none;
}

.hero-shape-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 181, 216, 0.4), transparent 70%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.hero-shape-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 166, 147, 0.4), transparent 70%);
    bottom: -100px;
    right: -100px;
    animation-delay: 5s;
}

.hero-shape-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(28, 57, 187, 0.5), transparent 70%);
    top: 50%;
    right: 10%;
    animation-delay: 10s;
}

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

.hero-title {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hero-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    margin: 1.5rem auto;
    animation: expand-line 1.5s ease-out;
}

@keyframes expand-line {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 80px;
        opacity: 1;
    }
}

.hero-subtitle {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.hero-glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.hero-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 3s ease-in-out infinite;
}

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

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

/* Animated gradient text */
.hero-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* Hero Slider Styles */
.hero-slider-section {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 500px;
}

.hero-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    visibility: hidden;
}

.hero-slide > div:last-child {
    padding-top: 100px;
}

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

.hero-slider-prev,
.hero-slider-next {
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-slider-prev:hover,
.hero-slider-next:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.hero-slider-prev:active,
.hero-slider-next:active {
    transform: translateY(-50%) scale(0.9);
}

.hero-slider-dots {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.hero-slider-dot {
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.5);
}

.hero-slider-dot:hover {
    transform: scale(1.2);
}

.hero-slider-dot.active {
    background: white !important;
    width: 2.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    opacity: 1;
}

/* Section Dividers - Creative Separators */
.section-divider {
    position: relative;
    height: 100px;
    overflow: hidden;
}

.section-divider-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.05), rgba(0, 166, 147, 0.1));
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.section-divider-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1C39BB, #00A693, #00b5d8, #00A693, #1C39BB, transparent);
    animation: shimmer-border 3s ease-in-out infinite;
}

@keyframes shimmer-border {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.section-divider-curved {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.08), rgba(0, 166, 147, 0.12));
    clip-path: ellipse(150% 100% at 50% 0%);
}

/* Creative Title Styles */
.creative-title {
    position: relative;
    display: inline-block;
}

.creative-title::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00b5d8, #00A693, #00b5d8, transparent);
    border-radius: 2px;
    animation: expand-title-line 1s ease-out;
}

.creative-title-gradient {
    background: linear-gradient(135deg, #1C39BB 0%, #00A693 50%, #00b5d8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

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

@keyframes expand-title-line {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 80px;
        opacity: 1;
    }
}

/* Background Image with Blur Effect */
.section-bg-blur {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.section-bg-blur::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.85);
    z-index: 0;
}

.section-bg-blur > * {
    position: relative;
    z-index: 1;
}

.section-bg-dark-blur::before {
    background: rgba(28, 57, 187, 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Fixed Catalog CTA Card Styles */
#fixed-catalog-cta.catalog-cta-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

#fixed-catalog-cta.catalog-cta-dismissed {
    opacity: 0 !important;
    transform: translateX(-100%) !important;
    pointer-events: none;
}

.catalog-cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#050816 0%,#0a1128 40%,#0d1a3a 70%,#081020 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

.catalog-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(28,57,187,0.15) 0%, rgba(0,166,147,0.1) 100%);
    pointer-events: none;
}

.catalog-cta-card:hover {
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-4px);
}


/* Suppliers Section Styles */
.supplier-card {
    position: relative;
    cursor: pointer;
}

.supplier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(135deg, rgba(28, 57, 187, 0), rgba(0, 166, 147, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: all 0.5s ease;
    opacity: 0;
}

.supplier-card:hover::before {
    background: linear-gradient(135deg, rgba(28, 57, 187, 0.3), rgba(0, 166, 147, 0.3));
    opacity: 1;
}

/* Search Modal Styles */
#search-modal.show {
    display: block !important;
    opacity: 1;
}

#search-modal.show #search-container {
    transform: scale(1);
}

#search-results {
    scrollbar-width: thin;
    scrollbar-color: #1C39BB #f1f1f1;
}

#search-results::-webkit-scrollbar {
    width: 6px;
}

#search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#search-results::-webkit-scrollbar-thumb {
    background: #1C39BB;
    border-radius: 10px;
}

.search-result-item {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: #f9fafb;
    padding-left: 1.5rem;
}

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

.search-result-title {
    font-weight: 600;
    color: #1C39BB;
    margin-bottom: 0.25rem;
}

.search-result-snippet {
    color: #6b7280;
    font-size: 0.875rem;
}

.search-result-highlight {
    background: #fef3c7;
    font-weight: 600;
    padding: 0 2px;
}

/* Language Switcher Styles */
#lang-dropdown.show {
    display: block !important;
    animation: fadeInDown 0.2s ease-out;
}

.lang-option.active {
    background: #1C39BB;
    color: white;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Catalog Download Popup Styles */
#catalog-popup.show {
    display: block !important;
    opacity: 1;
}

#catalog-popup.show #catalog-container {
    transform: scale(1);
}

#catalog-form input:focus {
    box-shadow: 0 0 0 3px rgba(28, 57, 187, 0.1);
}

/* Request Quote Popup Styles */
#quote-popup.show {
    display: block !important;
    opacity: 1;
}

#quote-popup.show #quote-container {
    transform: scale(1);
}

#quote-form input:focus,
#quote-form textarea:focus,
#quote-form select:focus {
    box-shadow: 0 0 0 3px rgba(28, 57, 187, 0.1);
}

/* Business Division Cards */
.business-division-card {
    height: 100%;
}

.business-division-card:hover {
    z-index: 10;
}

/* Print Styles */
@media print {
    nav, footer, button, .no-print {
        display: none;
    }
}

/* Product Listing Section Styles */
.product-category {
    position: relative;
}

.product-category.active {
    background: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

.product-category.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: white;
    border-radius: 0 2px 2px 0;
}

.category-group {
    position: relative;
}

.subcategory-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.subcategory-list.show {
    max-height: 500px;
    opacity: 1;
}

.subcategory-item {
    display: block;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.subcategory-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-left-color: white;
    padding-left: 1rem;
}

.subcategory-item.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-left-color: white;
    font-weight: 600;
    padding-left: 1rem;
}

.alphabet-filter.active {
    background: #1C39BB !important;
    color: white !important;
}

#product-table-body tr {
    transition: all 0.2s ease;
}

#product-table-body tr:hover {
    background: #f3f4f6;
    transform: scale(1.01);
}

#product-table-body td {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .alphabet-filter {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }
    
    #product-table-body td,
    #product-table-body th {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    #product-table-body td:nth-child(3),
    #product-table-body th:nth-child(3) {
        display: none;
    }
}

@media (max-width: 1024px) {
    #product-table-body td:nth-child(3),
    #product-table-body th:nth-child(3) {
        font-size: 0.8rem;
    }
}

/* Creative Modern Hero Styles - David Langarica Inspired */
.creative-hero-section {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1429 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.creative-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(28, 57, 187, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at bottom, rgba(0, 166, 147, 0.15) 0%, transparent 50%);
    z-index: 0;
}

.creative-neon-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, #1C39BB, #00A693, transparent);
    opacity: 0.6;
    filter: blur(1px);
    z-index: 1;
}

.creative-neon-line-1 {
    width: 150%;
    height: 2px;
    top: 20%;
    left: -25%;
    transform: rotate(-25deg);
    animation: neonMove1 8s ease-in-out infinite;
}

.creative-neon-line-2 {
    width: 150%;
    height: 2px;
    bottom: 20%;
    right: -25%;
    transform: rotate(25deg);
    animation: neonMove2 8s ease-in-out infinite;
}

.creative-neon-orb {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 166, 147, 0.4), transparent 70%);
    filter: blur(40px);
    animation: floatOrb 6s ease-in-out infinite;
    z-index: 1;
}

.creative-neon-orb-1 {
    top: 15%;
    right: 10%;
    animation-delay: 0s;
}

.creative-neon-orb-2 {
    bottom: 20%;
    left: 15%;
    background: radial-gradient(circle, rgba(28, 57, 187, 0.4), transparent 70%);
    animation-delay: 3s;
}

@keyframes neonMove1 {
    0%, 100% {
        transform: rotate(-25deg) translateX(0);
        opacity: 0.6;
    }
    50% {
        transform: rotate(-25deg) translateX(50px);
        opacity: 0.8;
    }
}

@keyframes neonMove2 {
    0%, 100% {
        transform: rotate(25deg) translateX(0);
        opacity: 0.6;
    }
    50% {
        transform: rotate(25deg) translateX(-50px);
        opacity: 0.8;
    }
}

@keyframes floatOrb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(30px, -30px) scale(1.2);
        opacity: 0.6;
    }
}

.creative-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
}

.creative-hero-text-wrapper {
    position: relative;
    display: inline-block;
}

.creative-hero-title {
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0;
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
}

.creative-hero-title-outline {
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.creative-hero-title-fill {
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
    animation: shimmerText 3s linear infinite;
    text-shadow: 0 0 60px rgba(28, 57, 187, 0.5), 0 0 100px rgba(0, 166, 147, 0.3);
}

.creative-hero-subtitle {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1.5rem;
    letter-spacing: 0.05em;
}

.creative-hero-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease-out;
}

.creative-nav-sidebar {
    position: fixed;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0.7;
}

.creative-nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: block;
    text-decoration: none;
}

.creative-nav-dot:hover,
.creative-nav-dot.active {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(28, 57, 187, 0.6), 0 0 40px rgba(0, 166, 147, 0.4);
}

.creative-nav-label {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.creative-nav-dot:hover .creative-nav-label {
    opacity: 1;
}

.creative-hero-cta {
    margin-top: 3rem;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.creative-btn {
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
}

.creative-btn-primary {
    background: linear-gradient(135deg, #1C39BB, #00A693);
    color: white;
    box-shadow: 0 10px 40px rgba(28, 57, 187, 0.4), 0 0 60px rgba(0, 166, 147, 0.2);
}

.creative-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px rgba(28, 57, 187, 0.5), 0 0 80px rgba(0, 166, 147, 0.3);
}

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

.creative-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.creative-scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: bounce 2s ease-in-out infinite;
}

.creative-scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
}

@keyframes shimmerText {
    to {
        background-position: 200% center;
    }
}

/* Modern Navigation Styles */
.modern-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 14, 39, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
}

.modern-nav-links {
    gap: 3rem;
    justify-content: center;
    align-items: center;
}

.modern-nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.modern-nav-link:hover,
.modern-nav-link.active {
    color: white;
}

.modern-nav-link::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #1C39BB, #00A693);
    transition: width 0.3s ease;
}

.modern-nav-link:hover::after,
.modern-nav-link.active::after {
    width: 100%;
}

.modern-nav a[href="index.html"] img,
.modern-nav a[href*="index.html"] img {
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.modern-nav a[href="index.html"]:hover img,
.modern-nav a[href*="index.html"]:hover img {
    transform: scale(1.05);
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

/* RTL Support */
[dir="rtl"] .modern-nav-links {
    flex-direction: row-reverse;
}

[dir="rtl"] .modern-nav .flex.items-center {
    order: 3;
}

[dir="rtl"] .creative-nav-sidebar {
    left: auto;
    right: 2rem;
}

[dir="rtl"] .creative-scroll-indicator {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .modern-nav {
    direction: rtl;
}

[dir="rtl"] #lang-dropdown {
    right: auto;
    left: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .creative-hero-title {
        font-size: clamp(2.5rem, 15vw, 5rem);
    }
    
    .creative-nav-sidebar {
        left: 1rem;
    }
    
    [dir="rtl"] .creative-nav-sidebar {
        left: auto;
        right: 1rem;
    }
    
    .modern-nav-links {
        gap: 1.5rem;
        font-size: 0.75rem;
    }
    
}

/* ========== Sinaverse Hero — Full Map Background ========== */
.sv-hero{position:relative;width:100%;height:100vh;min-height:680px;overflow:hidden}
@media(max-width:768px){.sv-hero{height:auto;min-height:auto;display:flex;flex-direction:column}}
.sv-hero__img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.sv-hero__bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,8,22,0.7) 0%,rgba(10,17,40,0.75) 35%,rgba(13,26,58,0.8) 65%,rgba(8,16,32,0.85) 100%);z-index:1}
.sv-hero__grid{position:absolute;inset:0;z-index:2;opacity:0.03;background-image:linear-gradient(rgba(255,255,255,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.1) 1px,transparent 1px);background-size:60px 60px}

/* ========== Global Map Section — Split Layout ========== */
/* ========== About Section ========== */
.about-section{padding:4rem 1.5rem 5rem;background:#fff}
.about-section__inner{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:0.95fr 1.05fr;gap:4rem;align-items:center}
.about-section__media{position:relative}
.about-section__img{width:100%;height:auto;display:block;border-radius:0.5rem;object-fit:cover;aspect-ratio:4/3}
.about-section__body{}
.about-section__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#0f172a;margin:0 0 1.25rem;line-height:1.25}
.about-section__p{font-size:0.9375rem;color:#475569;line-height:1.7;margin:0 0 1rem}
.about-section__p--last{margin-bottom:1.5rem}
.about-section__link{font-size:0.9rem;font-weight:600;color:#1C39BB;text-decoration:none;transition:color .2s}
.about-section__link:hover{color:#153A7A}
@media(max-width:900px){.about-section__inner{grid-template-columns:1fr;gap:2.5rem}
.about-section__media{order:1}
.about-section__body{order:2}
}
@media(max-width:768px){.about-section{padding:3rem 1rem 4rem}
.about-section__inner{gap:2rem}
}

.map-section{position:relative;padding:4rem 0 5rem;background:linear-gradient(135deg,#050816 0%,#0a1128 40%,#0d1a3a 70%,#081020 100%);overflow:visible}
.map-section__container{display:grid;grid-template-columns:minmax(0,36rem) 1fr;gap:0;align-items:stretch;padding-left:max(1.5rem,calc((100vw - 72rem)/2 + 1.5rem))}
.map-section__content{display:flex;flex-direction:column;gap:1rem;align-self:center;padding-right:3rem}
.map-section__badge{display:inline-block;width:fit-content;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7b9bff;background:rgba(28,57,187,0.2);border-radius:50px;border:1px solid rgba(91,127,255,0.3)}
.map-section__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#fff;margin:0;line-height:1.2}
.map-section__desc{font-size:0.95rem;color:rgba(255,255,255,0.75);line-height:1.6;margin:0}
.map-section__locations{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem}
.map-section__loc{display:flex;align-items:center;gap:8px;font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.85)}
.map-section__loc-dot{width:6px;height:6px;border-radius:50%;background:#00A693;flex-shrink:0}
.map-section__loc-dot--hub{background:#1C39BB;box-shadow:0 0 0 3px rgba(28,57,187,0.2)}
.map-section__map{position:relative;border-radius:0;overflow:hidden;background:transparent;margin-top:-4rem;margin-bottom:-5rem;min-height:520px;display:flex}
.map-section__svg{width:100%;height:100%;min-height:520px;display:block;object-fit:cover;filter:drop-shadow(0 0 25px rgba(28,57,187,0.12))}
.sv-map-conn-line{stroke-dashoffset:0;animation:svMapLineFlow 3s linear infinite}
@keyframes svMapLineFlow{to{stroke-dashoffset:-12}}
@media(max-width:900px){.map-section{padding:4rem 1.5rem 5rem}
.map-section__container{grid-template-columns:1fr;padding-left:1.5rem;gap:2rem}
.map-section__content{order:2;padding-right:0}
.map-section__map{order:1;margin-top:0;margin-bottom:0;min-height:500px;border-radius:0}
.map-section__svg{min-height:500px}
}
@media(max-width:768px){.map-section{padding:2.5rem 1rem 3.5rem}
.map-section__container{padding-left:1rem}
.map-section__map{min-height:420px}
.map-section__svg{min-height:420px}
}

.sv-hero__inner{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:3rem;max-width:80rem;margin:0 auto;padding:120px 3rem 80px;height:100%}
@media(max-width:1023px){.sv-hero__inner{padding:100px 1.5rem 70px;justify-content:center;flex-direction:column;gap:2rem}}
@media(max-width:768px){.sv-hero__inner{height:auto;padding:4rem 1.5rem 3rem}}

.sv-hero__content{max-width:560px;animation:svHeroFadeUp .9s ease .3s both}
@keyframes svHeroFadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.sv-hero__badge{display:inline-block;padding:6px 18px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.3);border-radius:50px;backdrop-filter:blur(8px);background:rgba(255,255,255,.06);margin-bottom:24px}
@media(max-width:768px){.sv-hero__badge{display:none}}
.sv-hero__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.06;letter-spacing:-0.02em;color:#fff;margin:0 0 22px;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.sv-hero__subtitle{font-size:clamp(.92rem,1.5vw,1.12rem);font-weight:400;line-height:1.7;color:rgba(255,255,255,.78);max-width:480px;margin:0 0 32px}
.sv-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.sv-hero__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;font-size:13px;font-weight:600;letter-spacing:.04em;border-radius:50px;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}
.sv-hero__btn--primary{background:linear-gradient(135deg,#fff,#e8ecf8);color:#1C39BB;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.sv-hero__btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.sv-hero__btn--ghost{color:#fff;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.sv-hero__btn--ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.sv-hero__stats{display:flex;gap:2.5rem}
.sv-hero__stat{display:flex;flex-direction:column}
.sv-hero__stat-num{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;color:#fff;line-height:1.2}
.sv-hero__stat-label{font-size:0.72rem;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:0.06em;text-transform:uppercase;margin-top:3px}

@media(max-width:1023px){.sv-hero__content{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:600px}
.sv-hero__stats{justify-content:center}}

.sv-hero__form-wrap{flex-shrink:0;width:100%;max-width:380px;animation:svHeroFadeUp .9s ease .5s both}
.sv-hero__form{background:rgba(255,255,255,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2.25rem;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sv-hero__form-title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.25rem;font-weight:700;color:#fff;margin:0 0 8px}
.sv-hero__form-desc{font-size:0.8rem;color:rgba(255,255,255,.65);margin:0 0 1.5rem;line-height:1.5}
.sv-hero__form-row{display:flex;gap:10px;margin-bottom:16px}
.sv-hero__form-row:last-of-type{margin-bottom:20px}
.sv-hero__form-input,.sv-hero__form-select{flex:1;min-width:0;padding:14px 16px;font-size:0.9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;transition:border-color .25s,background .25s}
.sv-hero__form-input::placeholder{color:rgba(255,255,255,.4)}
.sv-hero__form-input:focus,.sv-hero__form-select:focus{outline:none;border-color:rgba(91,127,255,.5);background:rgba(255,255,255,.08)}
.sv-hero__form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,.6)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.sv-hero__form-select option{background:#1a1f3a;color:#fff}
.sv-hero__form-btn{width:100%;padding:16px 20px;font-size:0.95rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#1C39BB,#00A693);border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.sv-hero__form-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,57,187,.4)}
@media(max-width:1023px){.sv-hero__form-wrap{max-width:420px;width:100%}
.sv-hero__form-row{flex-wrap:wrap}
.sv-hero__form-input,.sv-hero__form-select{min-width:100%}}
@media(max-width:768px){.sv-hero__form-wrap{order:2}}

.sv-hero__locations{position:absolute;bottom:24px;left:0;right:0;z-index:15;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:0 1.5rem}
.sv-hero__loc{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:9999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);font-size:0.7rem;font-weight:500;backdrop-filter:blur(6px);transition:all 0.3s ease}
.sv-hero__loc:hover{background:rgba(28,57,187,0.2);border-color:rgba(91,127,255,0.35);color:#fff}
.sv-hero__loc--hq{background:rgba(28,57,187,0.15);border-color:rgba(91,127,255,0.25);color:rgba(255,255,255,0.9)}
.sv-hero__loc-tag{font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:rgba(28,57,187,0.4);color:#7b9bff;padding:1px 5px;border-radius:3px}
@media(max-width:768px){.sv-hero__locations{position:relative;bottom:auto;order:3;padding:1rem 1.5rem 2rem;gap:5px}.sv-hero__loc{font-size:0.62rem;padding:3px 8px}}
.hero-slider-section{display:none}

/* ─── Hamburger Button ─── */
#mobile-menu-button .hamburger-icon line{transition:all 0.35s cubic-bezier(0.4,0,0.2,1);transform-origin:center}
#mobile-menu-button.open .hamburger-top{transform:translateY(6px) rotate(45deg)}
#mobile-menu-button.open .hamburger-mid{opacity:0;transform:scaleX(0)}
#mobile-menu-button.open .hamburger-bot{transform:translateY(-6px) rotate(-45deg);x2:20}

/* ─── Mobile Menu Panel ─── */
.mobile-menu-panel{position:absolute;top:100%;left:0;right:0;background:rgba(10,15,36,0.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 60px rgba(0,0,0,0.5);max-height:0;overflow:hidden;opacity:0;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease;z-index:100}
.mobile-menu-panel.open{max-height:400px;opacity:1}
.mobile-menu-panel .mobile-nav-link{display:block;padding:0.85rem 1rem;border-radius:0.75rem;font-weight:600;font-size:0.95rem;color:rgba(255,255,255,0.65);transition:all 0.25s ease;letter-spacing:0.02em}
.mobile-menu-panel .mobile-nav-link:hover,.mobile-menu-panel .mobile-nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(28,57,187,0.18),rgba(0,166,147,0.12))}
.mobile-menu-panel .mobile-nav-link.active{border-left:3px solid #00A693;padding-left:calc(1rem - 3px)}
[dir="rtl"] .mobile-menu-panel .mobile-nav-link.active{border-left:none;border-right:3px solid #00A693;padding-left:1rem;padding-right:calc(1rem - 3px)}

/* ═══════════════════════════════════════════════════════
   Core Business — Premium Section
   ═══════════════════════════════════════════════════════ */
.cb-section{position:relative;padding:6rem 0 5rem;overflow:hidden}
@media(min-width:768px){.cb-section{padding:8rem 0 6rem}}
.cb-section-bg{position:absolute;inset:0;z-index:0}
.cb-section-bg__img{width:100%;height:100%;object-fit:cover;filter:saturate(0.25) brightness(0.18)}
.cb-section-bg__overlay{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 90%,rgba(28,57,187,0.25) 0%,transparent 60%),radial-gradient(ellipse 70% 50% at 80% 10%,rgba(0,166,147,0.15) 0%,transparent 55%),linear-gradient(180deg,rgba(8,10,28,0.92) 0%,rgba(12,16,42,0.88) 50%,rgba(8,10,28,0.95) 100%)}
.cb-section-bg__noise{position:absolute;inset:0;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cb-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1.2rem;border-radius:9999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:1.5rem}
.cb-badge__dot{width:6px;height:6px;border-radius:50%;background:#00A693;box-shadow:0 0 8px #00A693;animation:cbPulse 2s ease-in-out infinite}
@keyframes cbPulse{0%,100%{opacity:1}50%{opacity:0.4}}
.cb-heading{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-0.03em;line-height:1.15}
@media(min-width:768px){.cb-heading{font-size:3.2rem}}
.cb-heading-line{width:60px;height:3px;margin:1.25rem auto 0;border-radius:2px;background:linear-gradient(90deg,#1C39BB,#00A693)}
.cb-subheading{color:rgba(255,255,255,0.45);margin-top:1.25rem;max-width:28rem;margin-left:auto;margin-right:auto;font-size:0.95rem;line-height:1.6}
.cb-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;border-radius:1.5rem;overflow:hidden;transition:transform 0.55s cubic-bezier(0.25,1,0.5,1),box-shadow 0.55s ease;cursor:pointer;text-decoration:none}
@media(min-width:768px){.cb-card{min-height:500px}}
.cb-card:hover{transform:translateY(-8px)}
.cb-card__img-wrap{position:absolute;inset:0}
.cb-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.25,1,0.5,1),filter 0.6s ease;filter:saturate(0.85) brightness(0.95)}
.cb-card:hover .cb-card__img{transform:scale(1.08);filter:saturate(1) brightness(1)}
.cb-card__shadow{position:absolute;bottom:-20px;left:10%;right:10%;height:60px;border-radius:50%;filter:blur(30px);opacity:0;transition:opacity 0.5s ease;z-index:-1;pointer-events:none}
.cb-card__shadow--blue{background:rgba(28,57,187,0.5)}
.cb-card__shadow--teal{background:rgba(0,166,147,0.5)}
.cb-card:hover .cb-card__shadow{opacity:1}
.cb-card__overlay{position:absolute;inset:0;transition:opacity 0.5s ease}
.cb-card__overlay--blue{background:linear-gradient(180deg,transparent 0%,transparent 25%,rgba(10,14,54,0.4) 45%,rgba(10,14,54,0.85) 70%,rgba(8,10,40,0.97) 100%),linear-gradient(135deg,rgba(28,57,187,0.15) 0%,transparent 50%)}
.cb-card__overlay--teal{background:linear-gradient(180deg,transparent 0%,transparent 25%,rgba(4,40,34,0.4) 45%,rgba(4,40,34,0.85) 70%,rgba(4,32,28,0.97) 100%),linear-gradient(135deg,rgba(0,166,147,0.12) 0%,transparent 50%)}
.cb-card__glow{position:absolute;inset:0;border-radius:1.5rem;opacity:0;transition:opacity 0.5s ease;pointer-events:none;z-index:5}
.cb-card__glow--blue{box-shadow:inset 0 0 0 1.5px rgba(28,57,187,0.4),0 0 40px rgba(28,57,187,0.12)}
.cb-card__glow--teal{box-shadow:inset 0 0 0 1.5px rgba(0,166,147,0.4),0 0 40px rgba(0,166,147,0.12)}
.cb-card:hover .cb-card__glow{opacity:1}
.cb-card__number{position:absolute;top:1.25rem;right:1.5rem;font-size:5.5rem;font-weight:900;line-height:1;color:rgba(255,255,255,0.04);user-select:none;z-index:2;transition:color 0.5s ease}
@media(min-width:768px){.cb-card__number{font-size:7rem}}
.cb-card:hover .cb-card__number{color:rgba(255,255,255,0.07)}
.cb-card__body{position:relative;z-index:10;padding:2rem 2rem 2.2rem}
@media(min-width:768px){.cb-card__body{padding:2.5rem}}
.cb-card__icon{width:3rem;height:3rem;border-radius:0.85rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:rgba(28,57,187,0.25);border:1px solid rgba(28,57,187,0.3);color:#7b9bff;backdrop-filter:blur(10px);transition:all 0.4s ease}
.cb-card__icon--teal{background:rgba(0,166,147,0.2);border-color:rgba(0,166,147,0.3);color:#5de8d8}
.cb-card:hover .cb-card__icon{background:rgba(28,57,187,0.4);box-shadow:0 0 20px rgba(28,57,187,0.2)}
.cb-card:hover .cb-card__icon--teal{background:rgba(0,166,147,0.35);box-shadow:0 0 20px rgba(0,166,147,0.2)}
.cb-card__tag{display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:0.6rem}
.cb-card__title{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.02em;line-height:1.2}
@media(min-width:768px){.cb-card__title{font-size:1.85rem}}
.cb-card__desc{color:rgba(255,255,255,0.6);font-size:0.875rem;line-height:1.7;margin-bottom:1.5rem;max-width:26rem}
.cb-card__cta{display:inline-flex;align-items:center;gap:0.6rem;padding:0.6rem 1.4rem;border-radius:9999px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:#fff;font-size:0.8rem;font-weight:600;transition:all 0.35s ease;backdrop-filter:blur(8px)}
.cb-card__cta svg{transition:transform 0.35s ease}
.cb-card:hover .cb-card__cta{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.25);gap:0.8rem}
.cb-card:hover .cb-card__cta svg{transform:translateX(3px)}
.cb-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:3.5rem;border-radius:1rem;overflow:hidden;background:rgba(255,255,255,0.06)}
@media(min-width:768px){.cb-stats{grid-template-columns:repeat(4,1fr)}}
.cb-stat{padding:2rem 1.5rem;text-align:center;background:rgba(255,255,255,0.03);backdrop-filter:blur(6px);transition:background 0.3s ease}
.cb-stat:hover{background:rgba(255,255,255,0.06)}
.cb-stat__number{display:block;font-size:2rem;font-weight:800;color:#7b9bff;letter-spacing:-0.02em}
@media(min-width:768px){.cb-stat__number{font-size:2.5rem}}
.cb-stat__number--teal{color:#5de8d8}
.cb-stat__label{display:block;margin-top:0.35rem;font-size:0.78rem;color:rgba(255,255,255,0.4);font-weight:500}

/* ═══════════════════════════════════════════════════════
   Global Presence — Premium Dark Map
   ═══════════════════════════════════════════════════════ */
.gp-section{position:relative;padding:5rem 0 4rem;overflow:hidden}
@media(min-width:768px){.gp-section{padding:7rem 0 5.5rem}}
.gp-section-bg{position:absolute;inset:0}
.gp-section-bg__gradient{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 55% 40%,rgba(28,57,187,0.08) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 35% 70%,rgba(0,166,147,0.06) 0%,transparent 55%),linear-gradient(180deg,#060818 0%,#0a0d24 50%,#060818 100%)}
.gp-grid-pattern{position:absolute;inset:0;opacity:0.04;background-image:linear-gradient(rgba(255,255,255,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.1) 1px,transparent 1px);background-size:60px 60px}
.gp-badge{display:inline-flex;align-items:center;gap:0.45rem;padding:0.4rem 1.1rem;border-radius:9999px;background:rgba(0,166,147,0.08);border:1px solid rgba(0,166,147,0.15);color:#5de8d8;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1.5rem}
.gp-heading{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-0.03em;line-height:1.15}
@media(min-width:768px){.gp-heading{font-size:3rem}}
.gp-heading-line{width:50px;height:3px;margin:1.2rem auto 0;border-radius:2px;background:linear-gradient(90deg,#00A693,#1C39BB)}
.gp-subheading{color:rgba(255,255,255,0.4);margin-top:1.2rem;max-width:32rem;margin-left:auto;margin-right:auto;font-size:0.92rem;line-height:1.65}
.gp-map-card{position:relative;border-radius:1.25rem;overflow:hidden;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);box-shadow:0 4px 30px rgba(0,0,0,0.3),0 0 80px rgba(28,57,187,0.05),inset 0 1px 0 rgba(255,255,255,0.04)}
.gp-map-card__inner{padding:1rem}
@media(min-width:768px){.gp-map-card__inner{padding:1.5rem 2rem}}
.gp-conn-line{stroke-dashoffset:0;animation:gpDash 2.5s linear infinite}
@keyframes gpDash{to{stroke-dashoffset:-16}}
.gp-locations{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem;margin-top:2rem}
@media(min-width:768px){.gp-locations{gap:0.75rem;margin-top:2.5rem}}
.gp-loc{display:inline-flex;align-items:center;gap:0.45rem;padding:0.5rem 1rem;border-radius:9999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);font-size:0.78rem;color:rgba(255,255,255,0.55);font-weight:500;transition:all 0.3s ease;cursor:default}
.gp-loc:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.85);transform:translateY(-2px)}
.gp-loc--hq{background:rgba(28,57,187,0.12);border-color:rgba(28,57,187,0.25);color:rgba(123,155,255,0.9)}
.gp-loc--hq:hover{background:rgba(28,57,187,0.2);border-color:rgba(28,57,187,0.4);color:#7b9bff}
.gp-loc__dot{width:6px;height:6px;border-radius:50%;background:#5de8d8;box-shadow:0 0 6px rgba(93,232,216,0.5);flex-shrink:0}
.gp-loc__dot--blue{background:#7b9bff;box-shadow:0 0 6px rgba(123,155,255,0.5)}
.gp-loc__dot--hq{width:8px;height:8px;background:#1C39BB;box-shadow:0 0 10px rgba(28,57,187,0.6);animation:cbPulse 2s ease-in-out infinite}
.gp-loc__flag{font-size:1rem;line-height:1}
.gp-loc__name{font-weight:600;letter-spacing:0.01em}
.gp-loc__tag{padding:0.1rem 0.45rem;border-radius:4px;background:rgba(28,57,187,0.25);color:#7b9bff;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════
   Blog Section — 3-Card Carousel
   ═══════════════════════════════════════════════════════ */
.bl-section{padding:5rem 0 4.5rem;background:linear-gradient(180deg,#f8f9fc 0%,#fff 100%);position:relative;overflow:hidden}
@media(min-width:768px){.bl-section{padding:6.5rem 0 5.5rem}}
.bl-header{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2.5rem}
@media(min-width:768px){.bl-header{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:3rem}}
.bl-badge{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.9rem;border-radius:9999px;background:#1C39BB0f;border:1px solid #1C39BB18;color:#1C39BB;font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1rem}
.bl-heading{font-size:1.8rem;font-weight:800;color:#0f172a;letter-spacing:-0.03em;line-height:1.15}
@media(min-width:768px){.bl-heading{font-size:2.5rem}}
.bl-subheading{color:#64748b;margin-top:0.6rem;font-size:0.9rem;max-width:26rem}
.bl-nav{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.bl-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid #d1d5e0;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#0f172a;transition:all 0.3s ease}
.bl-arrow:hover{background:#1C39BB;color:#fff;border-color:#1C39BB;transform:scale(1.08);box-shadow:0 6px 20px rgba(28,57,187,0.25)}
.bl-view-all{display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1.5rem;border-radius:9999px;background:#0f172a;color:#fff;font-size:0.8rem;font-weight:600;transition:all 0.35s ease;white-space:nowrap;flex-shrink:0;text-decoration:none;margin-left:0.5rem}
.bl-view-all:hover{background:#1C39BB;transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,57,187,0.25)}
.bl-view-all svg{transition:transform 0.3s ease}
.bl-view-all:hover svg{transform:translateX(3px)}

.bl-carousel{position:relative;max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.bl-carousel{padding:0 2rem}}
.bl-carousel__track{display:flex;gap:1.5rem;transition:transform 0.6s cubic-bezier(0.25,1,0.5,1)}
@media(max-width:767px){.bl-carousel__track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding:0 1rem;padding-bottom:0.5rem;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.bl-carousel__track::-webkit-scrollbar{display:none}
.bl-carousel__track::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}}

.bl-slide{flex:0 0 calc(33.333% - 1rem);min-width:280px;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;border-radius:1.25rem;overflow:hidden;background:#fff;text-decoration:none;border:1px solid #e8ecf4;transition:all 0.5s cubic-bezier(0.25,1,0.5,1);position:relative}
@media(max-width:1023px){.bl-slide{flex:0 0 calc(50% - 0.75rem);min-width:280px}}
@media(max-width:767px){.bl-slide{flex:0 0 85%;min-width:260px;flex-shrink:0}}
.bl-slide:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(15,23,42,0.12),0 0 0 1px rgba(28,57,187,0.1);border-color:rgba(28,57,187,0.18)}

.bl-slide__img-wrap{position:relative;overflow:hidden;height:220px;flex-shrink:0}
@media(min-width:768px){.bl-slide__img-wrap{height:240px}}
.bl-slide__img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s cubic-bezier(0.25,1,0.5,1),filter 0.5s ease}
.bl-slide:hover .bl-slide__img{transform:scale(1.08);filter:brightness(1.05)}
.bl-slide__overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,0.6) 100%);opacity:0;transition:opacity 0.5s ease}
.bl-slide:hover .bl-slide__overlay{opacity:1}

.bl-slide__body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.bl-slide__cat{display:inline-block;width:fit-content;padding:0.3rem 0.85rem;border-radius:9999px;font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:#1C39BB;color:#fff;margin-bottom:1rem}
.bl-slide__cat--teal{background:#00A693}
.bl-slide__cat--navy{background:#0f172a}
.bl-slide__title{font-size:1.1rem;font-weight:700;color:#0f172a;line-height:1.4;margin-bottom:0.6rem;transition:color 0.3s ease}
@media(min-width:768px){.bl-slide__title{font-size:1.2rem}}
.bl-slide:hover .bl-slide__title{color:#1C39BB}
.bl-slide__excerpt{font-size:0.85rem;color:#64748b;line-height:1.65;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-slide__read{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:600;color:#1C39BB;margin-top:auto;transition:gap 0.3s ease}
.bl-slide:hover .bl-slide__read{gap:0.65rem}
.bl-slide__read svg{transition:transform 0.3s ease}
.bl-slide:hover .bl-slide__read svg{transform:translateX(4px)}

/* Blog page cards */
.blog-card{background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid #e8ecf4;transition:all 0.3s ease}
.blog-card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.1);transform:translateY(-4px)}
.blog-card__img-wrap{height:200px;overflow:hidden}
.blog-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.blog-card:hover .blog-card__img{transform:scale(1.05)}
.blog-card__body{padding:1.5rem}

/* ═══════════════════════════════════════════════════════
   Suppliers — Dark Marquee
   ═══════════════════════════════════════════════════════ */
.sp-section{padding:5rem 0 4.5rem;overflow:hidden;position:relative}
@media(min-width:768px){.sp-section{padding:6.5rem 0 5.5rem}}
.sp-section-bg{position:absolute;inset:0;background:linear-gradient(135deg,#050816 0%,#0a1128 40%,#0d1a3a 70%,#081020 100%);z-index:0}
.sp-section-grid{position:absolute;inset:0;z-index:1;opacity:0.03;background-image:linear-gradient(rgba(255,255,255,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.1) 1px,transparent 1px);background-size:60px 60px}

.sp-header{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem;position:relative;z-index:5}
@media(min-width:768px){.sp-header{flex-direction:row;align-items:flex-end;justify-content:space-between}}

.sp-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 0.9rem;border-radius:9999px;background:rgba(28,57,187,0.1);border:1px solid rgba(91,127,255,0.15);color:#7b9bff;font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1rem}
.sp-badge__dot{width:6px;height:6px;border-radius:50%;background:#00A693;box-shadow:0 0 8px rgba(0,166,147,0.5);animation:cbPulse 2s ease-in-out infinite}

.sp-heading{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:-0.03em;line-height:1.15}
@media(min-width:768px){.sp-heading{font-size:2.5rem}}

.sp-subheading{color:rgba(255,255,255,0.45);margin-top:0.6rem;font-size:0.9rem;max-width:28rem}

.sp-view-all{display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1.5rem;border-radius:9999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.8);font-size:0.8rem;font-weight:600;transition:all 0.35s ease;white-space:nowrap;flex-shrink:0;text-decoration:none}
.sp-view-all:hover{background:#1C39BB;border-color:#1C39BB;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,57,187,0.3)}
.sp-view-all svg{transition:transform 0.3s ease}
.sp-view-all:hover svg{transform:translateX(3px)}

.sp-marquee{position:relative;width:100%;z-index:5;margin-bottom:1rem;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.sp-marquee__track{display:flex;gap:1rem;width:max-content;animation:spScroll 35s linear infinite}
.sp-marquee--reverse .sp-marquee__track{animation:spScrollReverse 30s linear infinite}
.sp-marquee:hover .sp-marquee__track{animation-play-state:paused}

@keyframes spScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes spScrollReverse{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.sp-card{flex-shrink:0;display:flex;align-items:center;gap:0.85rem;padding:1rem 1.5rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:1rem;min-width:200px;transition:all 0.4s ease;cursor:default;backdrop-filter:blur(4px)}
.sp-card:hover{border-color:rgba(91,127,255,0.25);box-shadow:0 8px 30px rgba(28,57,187,0.12),inset 0 1px 0 rgba(255,255,255,0.05);transform:translateY(-3px);background:rgba(255,255,255,0.06)}

.sp-card__icon{width:2.5rem;height:2.5rem;border-radius:0.7rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(28,57,187,0.12);color:#7b9bff;transition:all 0.3s ease}
.sp-card__icon--teal{background:rgba(0,166,147,0.12);color:#5de8d8}
.sp-card:hover .sp-card__icon{background:rgba(28,57,187,0.22);box-shadow:0 0 12px rgba(28,57,187,0.2)}
.sp-card:hover .sp-card__icon--teal{background:rgba(0,166,147,0.22);box-shadow:0 0 12px rgba(0,166,147,0.2)}

.sp-card__name{font-size:0.85rem;font-weight:700;color:rgba(255,255,255,0.7);white-space:nowrap;transition:color 0.3s ease}
.sp-card:hover .sp-card__name{color:#fff}

/* ========== About Page Sections ========== */
.ap-intro{padding:4rem 1.5rem 5rem;background:#fff}
.ap-intro__inner{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.ap-intro__img-wrap{position:relative;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.15)}
.ap-intro__img-wrap::before{content:'';position:absolute;inset:0;border:1px solid rgba(28,57,187,0.1);border-radius:1rem;pointer-events:none}
.ap-intro__img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.ap-intro__badge{display:inline-block;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1C39BB;background:rgba(28,57,187,0.08);border-radius:50px;margin-bottom:1rem}
.ap-intro__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.9rem;font-weight:700;color:#0f172a;margin:0 0 1.25rem;line-height:1.2}
.ap-intro__p{font-size:0.95rem;color:#475569;line-height:1.75;margin:0 0 1rem}
@media(max-width:900px){.ap-intro__inner{grid-template-columns:1fr}
.ap-intro__media{order:1}
.ap-intro__body{order:2}
}

.ap-purpose{position:relative;padding:5rem 1.5rem;background:linear-gradient(135deg,#0a1128 0%,#0d1a3a 50%,#081020 100%);overflow:hidden}
.ap-purpose__bg{position:absolute;inset:0;z-index:0}
.ap-purpose__bg-img{width:100%;height:100%;object-fit:cover;opacity:0.12}
.ap-purpose__inner{position:relative;z-index:1;max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center}
.ap-purpose__accent{position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#1C39BB,#00A693)}
.ap-purpose__media{position:relative}
.ap-purpose__img{width:100%;height:auto;display:block;border-radius:0.75rem;object-fit:cover;aspect-ratio:4/3;box-shadow:0 20px 50px rgba(0,0,0,0.3)}
.ap-purpose__content{max-width:100%;padding-left:0}
.ap-purpose__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 1.5rem}
.ap-purpose__p{font-size:0.95rem;color:rgba(255,255,255,0.75);line-height:1.8;margin:0 0 1rem}
.ap-purpose__p:last-child{margin-bottom:0}
@media(max-width:900px){.ap-purpose__inner{grid-template-columns:1fr;gap:2rem}
.ap-purpose__media{order:1}
.ap-purpose__content{order:2}
}

.ap-divisions{padding:5rem 1.5rem 5.5rem;background:#f8fafc}
.ap-divisions__inner{max-width:72rem;margin:0 auto}
.ap-divisions__header{text-align:center;margin-bottom:3rem}
.ap-divisions__badge{display:inline-block;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1C39BB;background:rgba(28,57,187,0.08);border-radius:50px;margin-bottom:0.75rem}
.ap-divisions__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#0f172a;margin:0}
.ap-divisions__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.ap-div-card{padding:0;border-radius:1rem;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.04);transition:border-color .2s,box-shadow .2s;overflow:hidden}
.ap-div-card:hover{border-color:rgba(28,57,187,0.15);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.ap-div-card--blue{border-left:4px solid #1C39BB}
.ap-div-card--teal{border-left:4px solid #00A693}
.ap-div-card__img{width:100%;height:320px;overflow:hidden}
.ap-div-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ap-div-card:hover .ap-div-card__img img{transform:scale(1.05)}
.ap-div-card__icon{width:3rem;height:3rem;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;background:rgba(28,57,187,0.08);color:#1C39BB;margin:1.25rem 2rem 1rem}
.ap-div-card__icon--teal{background:rgba(0,166,147,0.08);color:#00A693}
.ap-div-card__title{font-size:1.15rem;font-weight:700;color:#0f172a;margin:0 0 1rem;padding:0 2rem}
.ap-div-card__p{font-size:0.9rem;color:#64748b;line-height:1.7;margin:0 0 0.75rem;padding:0 2rem}
.ap-div-card__p:last-child{margin-bottom:2rem;padding-bottom:0}
@media(max-width:768px){.ap-divisions__grid{grid-template-columns:1fr}
.ap-div-card__img{height:260px}
.ap-div-card__icon,.ap-div-card__title,.ap-div-card__p{margin-left:1.5rem;margin-right:1.5rem;padding:0 0}
.ap-div-card__p:last-child{margin-bottom:1.5rem}
}

.ap-partners{position:relative;padding:5rem 1.5rem;overflow:hidden;background:linear-gradient(135deg,#0a1128 0%,#0d1a3a 50%,#081020 100%)}
.ap-partners__bg{position:absolute;inset:0;z-index:0}
.ap-partners__bg-img{width:100%;height:100%;object-fit:cover;opacity:0.15}
.ap-partners__inner{position:relative;z-index:1;max-width:56rem;margin:0 auto;text-align:center}
.ap-partners__badge{display:inline-block;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.08);border-radius:50px;border:1px solid rgba(255,255,255,0.12);margin-bottom:1rem}
.ap-partners__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 0.75rem}
.ap-partners__sub{font-size:0.95rem;color:rgba(255,255,255,0.75);line-height:1.75;margin:0 auto 2rem;max-width:40rem}
.ap-partners__grid{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}
.ap-partners__tag{display:inline-block;padding:0.6rem 1.25rem;font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:0.5rem;transition:all .2s}
.ap-partners__tag:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);transform:translateY(-2px)}

.ap-values{padding:5rem 1.5rem 5.5rem;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%)}
.ap-values__inner{max-width:72rem;margin:0 auto}
.ap-values__header{text-align:center;margin-bottom:3rem}
.ap-values__badge{display:inline-block;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1C39BB;background:rgba(28,57,187,0.08);border-radius:50px;margin-bottom:0.75rem}
.ap-values__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#0f172a;margin:0}
.ap-values__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem}
.ap-value-card{padding:0;background:#fff;border-radius:1rem;box-shadow:0 2px 12px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);transition:transform .2s,box-shadow .2s;overflow:hidden}
.ap-value-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.08)}
.ap-value-card__img{width:100%;height:300px;overflow:hidden}
.ap-value-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ap-value-card:hover .ap-value-card__img img{transform:scale(1.08)}
.ap-value-card__num{font-size:0.75rem;font-weight:800;color:#1C39BB;opacity:0.5;letter-spacing:0.1em;margin:1rem 1.5rem 0.5rem}
.ap-value-card__title{font-size:1.05rem;font-weight:700;color:#0f172a;margin:0 0 0.5rem;padding:0 1.5rem}
.ap-value-card__p{font-size:0.9rem;color:#64748b;line-height:1.65;margin:0 0 1.5rem;padding:0 1.5rem}
.ap-values__footer{font-size:0.95rem;color:#64748b;line-height:1.7;text-align:center;max-width:36rem;margin:0 auto}
@media(max-width:768px){.ap-values__grid{grid-template-columns:1fr}
.ap-value-card__img{height:240px}
}
@media(max-width:768px){.ap-partners{padding:3rem 1rem 4rem}
.ap-partners__sub{margin-bottom:1.5rem}
}

.ap-suppliers{position:relative;padding:4rem 1.5rem 5rem;overflow:hidden;background:linear-gradient(135deg,#050816 0%,#0a1128 40%,#0d1a3a 70%,#081020 100%)}
.ap-suppliers__bg{position:absolute;inset:0;z-index:0}
.ap-suppliers__bg-img{width:100%;height:100%;object-fit:cover;opacity:0.2}
.ap-suppliers__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,8,22,0.85) 0%,rgba(10,17,40,0.9) 50%,rgba(8,16,32,0.95) 100%);pointer-events:none}
.ap-suppliers__inner{position:relative;z-index:2;max-width:72rem;margin:0 auto}
.ap-suppliers__header{text-align:center;margin-bottom:2.5rem}
.ap-suppliers__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 0.5rem}
.ap-suppliers__sub{font-size:0.95rem;color:rgba(255,255,255,0.7);margin:0}
.ap-suppliers__grid{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}
.ap-supplier-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.25rem;font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.9);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:0.5rem;transition:all .2s}
.ap-supplier-tag:hover{background:#1C39BB;color:#fff;border-color:#1C39BB;transform:translateY(-2px);box-shadow:0 4px 12px rgba(28,57,187,0.3)}

.ap-cta{padding:4rem 1.5rem 5rem;background:linear-gradient(135deg,#1C39BB 0%,#153A7A 100%);text-align:center}
.ap-cta__inner{max-width:40rem;margin:0 auto}
.ap-cta__title{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 0.75rem}
.ap-cta__sub{font-size:1rem;color:rgba(255,255,255,0.85);margin:0 0 2rem;line-height:1.6}
.ap-cta__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.ap-cta__btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.85rem 1.75rem;font-size:0.9rem;font-weight:600;border-radius:0.5rem;transition:all .2s;text-decoration:none;cursor:pointer;border:none}
.ap-cta__btn--outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.6)}
.ap-cta__btn--outline:hover{background:#fff;color:#1C39BB;border-color:#fff}
.ap-cta__btn--solid{background:#fff;color:#1C39BB}
.ap-cta__btn--solid:hover{background:rgba(255,255,255,0.95);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}