/* GlobalWebWorld - Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
/* Theme: Electric Blue & White - Premium SaaS Style */

:root {
    --primary-color: #202cff;
    /* Vivid Electric Blue - Main brand color */
    --primary-dark: #111d59;
    /* Midnight Blue - Deep navy shade */
    --primary-gradient: linear-gradient(135deg, #202cff 0%, #0b1ae9 100%);
    --secondary-color: #FFFFFF;
    --accent-color: #d5f6ff;
    /* Pale Cyan - Soft, icy light blue */
    --bg-color: #f8f9fa;
    /* Off-White - Very light gray/white background */
    --text-dark: #111d59;
    /* Midnight Blue for dark text on light backgrounds */
    --text-light: #FFFFFF;
    --text-gray: #475569;
    /* Slate 600 - Secondary text color */

    --font-primary: 'Inter', sans-serif;
    --brand-font: 'Figtree', sans-serif;
    --brand-font-logo: 'Montserrat', sans-serif;

    --border-radius: 24px;
    /* Slightly more rounded */
    --card-shadow: 0 4px 6px -1px rgba(17, 29, 89, 0.05), 0 10px 15px -3px rgba(17, 29, 89, 0.05);
    /* Soft, modern multi-layer */
    --card-hover-shadow: 0 20px 25px -5px rgba(32, 44, 255, 0.15), 0 8px 10px -6px rgba(32, 44, 255, 0.1);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-gray);
    /* Softer default text */
    line-height: 1.7;
    /* Improved readability */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 1.05rem;
    /* Slightly larger base size */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--brand-font);
    font-weight: 700;
    color: var(--text-dark);
    /* Headings back to dark for contrast, unless specific class overrides */
    letter-spacing: -0.02em;
    /* Tighter, more modern tracking */
    line-height: 1.2;
}

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

ul {
    list-style: none;
}

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

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Premium Components */
/* Premium Components */
.premium-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 48px;
    /* Increased padding */
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.8);
    /* Glassy border */
    position: relative;
    overflow: hidden;
}

.premium-card:hover {
    transform: translateY(-8px) scale(1.01);
    /* Subtle scale up */
    box-shadow: var(--card-hover-shadow);
}

.premium-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    transition: var(--transition);
}

.premium-card:hover .premium-icon-circle {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 20px rgba(32, 44, 255, 0.3);
    /* Glow effect */
}

.section-title {
    text-align: center;
    margin-bottom: 80px;
    /* More breathing room */
    position: relative;
}

.section-title h2 {
    font-size: 3rem;
    /* Larger */
    margin-bottom: 20px;
    background: #111d59;
    /* Use the new gradient */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}

.section-title p {
    font-size: 1.2rem;
    color: var(--text-gray);
    max-width: 650px;
    margin: 0 auto;
    font-weight: 500;
}

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

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

/* Ensure dropdown items start visible even with animation */
@keyframes fadeInUpVisible {
    from {
        opacity: 1;
        transform: translateY(0);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-on-scroll {
    opacity: 0;
    /* JS will toggle this */
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    /* Smoother ease */
}

/* Button Upgrades */
.btn {
    display: inline-block;
    padding: 16px 36px;
    /* Chunky premium buttons */
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: #0b1ae9;
    color: white;
    box-shadow: 0 10px 20px rgba(32, 44, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    background: #1a2be6;
    /* Reverse gradient */
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(32, 44, 255, 0.4);
}

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

.btn-outline:hover {
    background: #0b1ae9;
    color: white;
    box-shadow: 0 10px 20px rgba(32, 44, 255, 0.2);
    transform: translateY(-3px);
}

/* =========================================
   Beautiful Modern Navbar
   ========================================= */

.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 20px;
    display: flex !important;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
    pointer-events: none;
    visibility: visible !important;
    opacity: 1 !important;
}

.navbar-wrapper > * {
    pointer-events: all;
}

.navbar-wrapper.scrolled {
    padding: 10px 20px;
    background: rgba(17, 29, 89, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.navbar-floating {
    background: rgba(17, 29, 89, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    max-width: 1400px;
    height: 75px;
    border-radius: 50px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: visible !important;
    opacity: 1 !important;
}

.navbar-wrapper.scrolled .navbar-floating {
    height: 65px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Logo */
.logo {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif !important;
    transition: transform 0.3s ease;
    z-index: 1001;
}

.logo:hover {
    transform: scale(1.05);
}

.logo-text {
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif !important;
}

.logo-circle {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #202cff 0%, #667eea 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 15px rgba(32, 44, 255, 0.4);
    transition: all 0.3s ease;
}

.logo:hover .logo-circle {
    transform: rotate(360deg);
    box-shadow: 0 6px 20px rgba(32, 44, 255, 0.6);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002;
    position: relative;
    align-items: center;
    pointer-events: auto;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Navigation */
.nav-spacer {
    flex: 1;
}
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
/* Desktop: position main-nav in center of bar (main-nav is sibling of navbar-floating) */
@media (min-width: 993px) {
    .navbar-wrapper > .main-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        min-width: 0;
        min-height: 0;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        overflow: visible;
        z-index: 10;
        visibility: visible !important;
        pointer-events: auto;
    }
    .navbar-wrapper > .main-nav .nav-links {
        display: flex !important;
    }
}

.nav-links {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-links li {
    list-style: none;
    position: relative;
}

.nav-link {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    white-space: nowrap;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

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

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.dropdown-icon {
    font-size: 0.65rem;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.has-dropdown:hover .dropdown-icon,
.has-megamenu:hover .dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 16px;
    padding: 12px 0;
    min-width: 200px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

.nav-links li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 12px 24px;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 0;
}

.dropdown-menu a:hover {
    background: rgba(32, 44, 255, 0.08);
    color: var(--primary-color);
    padding-left: 28px;
}

.dropdown-menu a::before {
    display: none;
}

/* Megamenu */
.megamenu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 20px;
    padding: 35px 40px;
    min-width: 700px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.megamenu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

.nav-links li:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.megamenu-content {
    display: flex;
    gap: 50px;
    justify-content: flex-start;
}

.megamenu-column {
    flex: 1;
    min-width: 250px;
}

.megamenu-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(32, 44, 255, 0.1);
}

.megamenu-heading a {
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: all 0.2s;
}

.megamenu-heading a:hover {
    color: var(--primary-color) !important;
    padding-left: 5px;
}

.megamenu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu-column ul li {
    margin-bottom: 12px;
}

.megamenu-column ul li a {
    color: var(--text-gray);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    display: block;
}

.megamenu-column ul li a:hover {
    color: var(--primary-color);
    padding-left: 8px;
    background: transparent;
}

.megamenu-column ul li a::before {
    display: none;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1001;
}

.btn-pill-white {
    background: white;
    color: var(--primary-color);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.btn-pill-white:hover {
    background: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 255, 255, 0.3);
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .navbar-wrapper {
        padding: 15px;
    }

    .navbar-floating {
        height: 65px;
        padding: 0 20px;
        border-radius: 35px;
    }

    .logo {
        font-size: 1.1rem;
    }

    .logo-circle {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .mobile-menu-toggle {
        display: flex !important;
        order: 3;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        background: rgba(17, 29, 89, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9998;
        overflow-y: auto;
        padding: 90px 25px 30px;
        visibility: hidden;
        pointer-events: none;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav.active {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9997;
        opacity: 0;
        transition: opacity 0.3s ease;
        visibility: hidden;
    }

    body.menu-open .mobile-menu-overlay {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-link {
        padding: 18px 20px;
        border-radius: 0;
        width: 100%;
        justify-content: space-between;
        font-size: 1.05rem;
        transition: all 0.2s ease;
        position: relative;
    }

    .nav-link::before {
        display: none;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(6px);
    }

    .nav-link:active {
        background: rgba(255, 255, 255, 0.12);
        transform: translateX(3px);
    }

    /* Enhanced active state for dropdown parents */
    .has-dropdown.active > .nav-link,
    .has-megamenu.active > .nav-link {
        background: rgba(255, 255, 255, 0.12) !important;
        color: white !important;
        font-weight: 500;
    }

    .dropdown-menu,
    .megamenu {
        position: static;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        background: rgba(0, 0, 0, 0.25);
        margin: 0;
        padding: 8px 0;
        min-width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: top;
    }

    .dropdown-menu::before,
    .megamenu::before {
        display: none;
    }

    .nav-links li:hover .dropdown-menu,
    .nav-links li:hover .megamenu {
        transform: none;
    }

    .has-dropdown.active .dropdown-menu,
    .has-megamenu.active .megamenu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 2000px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(0) !important;
        padding: 12px 0 !important;
        height: auto !important;
    }

    /* Force visibility of all dropdown content */
    .has-dropdown.active .dropdown-menu *,
    .has-megamenu.active .megamenu * {
        visibility: visible !important;
    }

    .has-dropdown.active .dropdown-icon,
    .has-megamenu.active .dropdown-icon {
        transform: rotate(180deg);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dropdown-icon {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ensure dropdown menu items are visible - no animation to avoid opacity conflicts */
    .has-dropdown.active .dropdown-menu li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        min-height: auto !important;
    }

    .has-dropdown.active .dropdown-menu li a,
    .has-dropdown.active .dropdown-menu a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Ensure megamenu content is visible when active */
    .has-megamenu.active .megamenu-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        gap: 0 !important;
        animation: fadeIn 0.3s ease-out;
    }

    .has-megamenu.active .megamenu-column {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        animation: fadeInUp 0.3s ease-out forwards;
    }

    .has-megamenu.active .megamenu-column:nth-child(1) { animation-delay: 0.05s; }
    .has-megamenu.active .megamenu-column:nth-child(2) { animation-delay: 0.1s; }

    .has-megamenu.active .megamenu-column ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin: 0 !important;
    }

    .has-megamenu.active .megamenu-column ul li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none !important;
    }

    .has-megamenu.active .megamenu-column ul li a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Higher specificity to override global .dropdown-menu a { color: var(--text-dark) } */
    .main-nav .dropdown-menu a,
    .main-nav .megamenu-column ul li a,
    .main-nav .dropdown-menu li a {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 14px 20px 14px 48px;
        font-size: 0.95rem;
        font-weight: 400;
        display: block !important;
        width: 100%;
        transition: all 0.2s ease;
        position: relative;
        border-left: 3px solid transparent;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .dropdown-menu a::before,
    .megamenu-column ul li a::before {
        content: '→';
        position: absolute;
        left: 24px;
        opacity: 0.5;
        transition: all 0.2s ease;
        font-size: 0.85rem;
    }

    .dropdown-menu a:hover,
    .megamenu-column ul li a:hover {
        background: rgba(255, 255, 255, 0.12);
        padding-left: 52px;
        color: white !important;
        border-left-color: rgba(255, 255, 255, 0.5);
        transform: translateX(4px);
    }

    .dropdown-menu a:hover::before,
    .megamenu-column ul li a:hover::before {
        opacity: 1;
        transform: translateX(2px);
    }

    /* Megamenu heading styles */
    .megamenu-heading {
        color: rgba(255, 255, 255, 0.95) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 16px 20px 12px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        margin-bottom: 8px !important;
    }

    .megamenu-heading a {
        color: rgba(255, 255, 255, 0.95) !important;
        padding: 0 !important;
        border-left: none !important;
        font-weight: 600 !important;
    }

    .megamenu-heading a:hover {
        background: transparent !important;
        transform: none !important;
        padding-left: 0 !important;
    }

    .megamenu-heading a::before {
        display: none !important;
    }

    .megamenu-column {
        min-width: 100%;
    }

    .megamenu-heading {
        color: rgba(255, 255, 255, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.2);
        padding: 18px 20px;
        margin-bottom: 0;
    }

    .megamenu-heading a {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .header-actions {
        margin-left: auto;
    }

    .btn-pill-white {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .navbar-floating {
        height: 60px;
        padding: 0 15px;
    }

    .logo {
        font-size: 1rem;
    }

    .logo-circle {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    .btn-pill-white {
        display: none;
    }
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 80px 0 20px;
    font-family: 'Inter', sans-serif !important;
}

footer h4 {
    margin-bottom: 24px;
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif !important;
}

footer * {
    font-family: 'Inter', sans-serif !important;
}

/* Social icons must use Font Awesome font - exclude from footer * override */
footer .social-links a,
footer .social-links a i,
footer .social-links i {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "Font Awesome 6 Free", sans-serif !important;
}

footer ul li {
    margin-bottom: 12px;
}

footer a {
    opacity: 0.8;
}

footer a:hover {
    opacity: 1;
}

footer .logo {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        display: flex !important;
    }

    .main-nav .nav-links {
        position: static;
        padding: 0;
        text-align: left;
        width: 100%;
    }


    .section-title h2 {
        font-size: 2rem;
    }
}

/* Timeline Styles */
/* Graphical Timeline Styles */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Central Line */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: var(--primary-accent, #004ce5);
    background: linear-gradient(to bottom, transparent, var(--primary-color), var(--primary-dark), transparent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    box-shadow: 0 0 15px rgba(32, 44, 255, 0.4);
    border-radius: 4px;
}

.timeline-container {
    padding: 10px 40px;
    position: relative;
    background-color: transparent;
    width: 50%;
    opacity: 0;
    animation: fadeInUp 0.8s forwards;
    /* Default animation */
}

/* Node (Dot) on the line */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: -12px;
    background-color: white;
    border: 4px solid var(--primary-color);
    top: 25px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(32, 44, 255, 0.2);
    transition: transform 0.3s ease;
}

.timeline-container:hover::after {
    transform: scale(1.2);
    background-color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

/* Connector Arrows */
.left::before,
.right::before {
    display: none;
    /* Removing clunky CSS triangles for a cleaner float look */
}

/* Timeline Card Content */
.timeline-content {
    padding: 30px;
    background: white;
    position: relative;
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: var(--transition);
}

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

.timeline-content h3 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-content h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.timeline-content p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Adjustments for Right Side */
.right .timeline-container::after {
    left: -12px;
    /* Fix dot position */
}

.timeline-container.right::after {
    left: -12px;
    right: auto;
}

/* Responsive Timeline */
@media screen and (max-width: 768px) {
    .timeline::after {
        left: 30px;
    }

    .timeline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-container.right {
        left: 0;
    }

    .timeline-container::after,
    .timeline-container.right::after {
        left: 18px;
        /* Align dot to line */
        right: auto;
    }
}

/* Hero Section Refinement */
:root {
    --hero-bg: #111d59;
    --hero-text: #ffffff;
    --brand-font: 'Figtree', sans-serif;
}

.hero-section {
    background-color: #0b1ae9;
    color: var(--hero-text);
    padding-top: 180px;
    padding-bottom: 250px;
    position: relative;
    text-align: center;
    overflow: hidden;
    perspective: 1000px;
    /* Keep for 3D effect */
    margin-top: 0;
}

/* Background Pattern/Overlay */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* Hero Content z-index fix */
.container {
    position: relative;
    z-index: 2;
}

/* 3D Graphic Container */
.hero-graphic-container {
    position: relative;
    width: 100%;
    height: 500px;
    /* Adjust height as needed */
    margin-top: 60px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.composition-wrapper {
    position: relative;
    width: 600px;
    height: 400px;
    transform-style: preserve-3d;
    animation: floatMain 6s ease-in-out infinite;
}

@keyframes floatMain {

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

    50% {
        transform: translateY(-20px) rotateX(10deg);
    }
}

/* Top Ratings */
.hero-ratings {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 40px auto 10px;
    padding: 0 20px;
}

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

.rating-group .stars {
    color: #ffd700;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.rating-group p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
    font-style: italic;
}

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

    .hero-ratings {
        justify-content: center;
    }
}

/* Main Content */
.hero-content-main h1 {
    font-family: var(--brand-font);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #ffffff;
}

/* Core Orb */
.core-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--hero-accent));
    box-shadow: 0 0 60px var(--hero-accent), inset 0 0 20px rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.core-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 5;
}

.ring-1 {
    width: 180px;
    height: 180px;
    border-color: rgba(32, 44, 255, 0.6);
    animation: spinRing 10s linear infinite;
    border-width: 2px;
    border-left-color: transparent;
}

.ring-2 {
    width: 260px;
    height: 260px;
    border-color: rgba(130, 0, 255, 0.4);
    animation: spinRingReverse 15s linear infinite;
    border-width: 1px;
    border-bottom-color: transparent;
}

.ring-3 {
    width: 340px;
    height: 340px;
    border-color: rgba(0, 255, 255, 0.3);
    animation: spinRing 20s linear infinite;
    border-style: dashed;
}

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

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

/* Floating Glass Cards */
.glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    /* Very glassy */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(32, 44, 255, 0.2);
    color: #4ea8de;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-info {
    text-align: left;
    color: white;
}

.stat-value {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Card Positioning */
.card-1 {
    top: 10%;
    right: 10%;
    animation: floatCard1 5s ease-in-out infinite;
}

.card-2 {
    bottom: 20%;
    left: 0%;
    animation: floatCard2 6s ease-in-out infinite 1s;
}

.card-3 {
    top: 20%;
    left: 15%;
    animation: floatCard3 7s ease-in-out infinite 2s;
}

@keyframes floatCard1 {

    0%,
    100% {
        transform: translateY(0) rotateY(-10deg);
    }

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

@keyframes floatCard2 {

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

    50% {
        transform: translateY(15px) rotateY(5deg);
    }
}

@keyframes floatCard3 {

    0%,
    100% {
        transform: translateY(0) rotateZ(-2deg);
    }

    50% {
        transform: translateY(-10px) rotateZ(2deg);
    }
}

/* Orbiting Ions */
.orbit-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.icon-instagram {
    top: 0;
    left: 50%;
    margin-left: -25px;
    animation: orbitPath 8s linear infinite;
    transform-origin: 50% 200px;
}

.icon-google {
    bottom: 20%;
    right: 20%;
    animation: orbitPathReverse 10s linear infinite;
    transform-origin: -100px -100px;
}

.icon-tiktok {
    bottom: 0;
    left: 30%;
    animation: orbitPath 12s linear infinite;
    transform-origin: 100px -150px;
}

@keyframes orbitPath {
    0% {
        transform: rotate(0deg) translateX(15px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(15px) rotate(-360deg);
    }
}

@keyframes orbitPathReverse {
    0% {
        transform: rotate(0deg) translateX(20px) rotate(0deg);
    }

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

/* Particles */
.particle {
    position: absolute;
    border-radius: 50%;
    background: white;
    opacity: 0.6;
    animation: pulseParticle 2s infinite alternate;
}

.p-1 {
    width: 6px;
    height: 6px;
    top: 10%;
    left: 20%;
}

.p-2 {
    width: 4px;
    height: 4px;
    bottom: 30%;
    right: 10%;
    animation-delay: 1s;
}

.p-3 {
    width: 8px;
    height: 8px;
    top: 40%;
    right: 30%;
    background: #00ffff;
    box-shadow: 0 0 10px #00ffff;
}

@keyframes pulseParticle {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.5);
        opacity: 0.8;
    }
}

/* Neon Button Glow */
.btn-primary-white {
    background-color: white;
    color: var(--primary-color);
    padding: 15px 35px;
    border-radius: 30px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.btn-primary-white:hover {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(32, 44, 255, 0.4);
    transform: translateY(-3px);
}

.hero-content-main p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.badge-pill {
    background: linear-gradient(90deg, #4372fd 0%, #6499ff 100%);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 30px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-btns .btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary-white {
    background: white;
    color: var(--hero-bg);
}

.btn-primary-white:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.btn-outline-white {
    border: 1px solid white;
    color: white;
    margin-left: 15px;
    background: transparent;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Social Icons Grid */
.social-icons-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 60px;
    flex-wrap: wrap;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.icon-item {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    transition: transform 0.2s;
}

.icon-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
}

/* Dashboard Preview with Blur/Overlap */
.dashboard-preview {
    margin-top: -150px;
    position: relative;
    z-index: 20;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.dashboard-wrapper {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

.dashboard-wrapper:hover {
    transform: translateY(-5px);
}

.dashboard-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* Pull the next section up or push this down? */
/* Actually we will just let it be negative margin on the container or similar. 
       Let's use negative bottom margin on the SECTION spacing padding instead.
       The hero has padding-bottom: 250px. The image is inside hero.
       It naturally sits at the bottom.
       We want it to overlap the NEXT section.
       So the next section needs to be pulled up or this pushed down relative to flow.
       Actually, `margin-bottom: -100px` on this wrapper works if the next section has z-index lower or higher?
       Usually next section has white bg.
       So we want this to be ON TOP of next section.
       Z-index 10 is good.
    */
/* 
transform: translateY(100px);
Push it DOWN out of the hero 
*/

.dashboard-img-wrapper img {
    width: 100%;
    border-radius: 15px;
    display: block;
}

/* Trusted Brands */
.trusted-brands {
    background: white;
    padding-top: 80px;
    /* Space for the overlapping dashboard */
    padding-bottom: 80px;
    text-align: center;
}

.brands-title {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 40px;
    font-weight: 700;
    font-family: var(--brand-font);
}

.brands-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0.6;
}

.brand-item {
    font-size: 1.5rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .hero-content-main h1 {
        font-size: 2.5rem;
    }

    .hero-section {
        padding-bottom: 150px;
    }

    .dashboard-img-wrapper {
        transform: translateY(50px);
    }

    .trusted-brands {
        padding-top: 100px;
    }
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 50px;
}

.btn-primary-white {
    background: white;
    color: var(--primary-color);
    padding: 14px 32px;
    font-size: 1.1rem;
    border-radius: 50px;
    font-weight: 700;
}

.btn-primary-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-outline-white {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 14px 32px;
    font-size: 1.1rem;
    border-radius: 50px;
    font-weight: 600;
}

.btn-outline-white:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Floating Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.float-item {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    background: white;
}

.float-1 {
    top: 15%;
    left: 5%;
    width: 280px;
    animation: float 6s ease-in-out infinite;
}

.float-2 {
    top: 25%;
    right: 5%;
    width: 260px;
    animation: float 7s ease-in-out infinite 1s;
}

.float-3 {
    bottom: 10%;
    left: 10%;
    width: 200px;
    animation: float 5s ease-in-out infinite 0.5s;
    opacity: 0.8;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

/* Social Proof */
.social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.avatars {
    display: flex;
}

.avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #0056FF;
    margin-left: -15px;
    position: relative;
    z-index: 1;
}

.avatars img:first-child {
    margin-left: 0;
}

.ratings {
    text-align: left;
    color: white;
}

.ratings .stars {
    color: #FFD700;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.ratings span {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
}

@media (max-width: 992px) {
    .floating-elements {
        opacity: 0.3;
        /* Fade out floaters on smaller screens to keep text readable */
    }

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

/* --- Brand Refinement & UI Polish --- */

/* Logo - GLOBAL WEB WORLD */
.logo {
    font-family: var(--brand-font-logo, 'Montserrat', sans-serif) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Space between circle and text */
}

.logo-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    /* Electric Blue */
    color: white;
    border-radius: 50%;
    font-family: var(--brand-font-logo, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

/* Home Page Achievements section */
.achievements {
    color: #ffffff !important;
}

.achievements h2,
.achievements h3 {
    color: #ffffff !important;
}

.achievements p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer Section */
footer {
    background-color: #111d59 !important;
    color: #f8f9fa !important;
    padding-top: 60px;
    padding-bottom: 20px;
}

footer h4 {
    color: #f8f9fa !important;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Footer Grid Correction */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo-col {
    padding-right: 20px;
}

.footer-col h4 {
    color: #f8f9fa;
    margin-bottom: 25px;
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-col ul {
    opacity: 0.8;
}

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

.footer-col ul li a {
    color: #f8f9fa;
    opacity: 0.8;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.footer-col ul li a:hover {
    color: #ffffff;
    padding-left: 5px;
    opacity: 1;
    color: var(--primary-color-light, #60a5fa);
}

/* Footer Social Links */
.footer-logo-col .social-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.footer-logo-col .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    font-size: 1.15rem;
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "Font Awesome 6 Free", sans-serif;
    font-weight: 400;
    transition: all 0.3s ease;
    text-decoration: none;
    opacity: 0.9;
}

.footer-logo-col .social-links a i {
    font-family: inherit;
}

.footer-logo-col .social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Footer Logo Column - Contact info */
.footer-logo-col a[href^="tel"],
.footer-logo-col a[href^="mailto"] {
    transition: opacity 0.2s ease;
}

.footer-logo-col a[href^="tel"]:hover,
.footer-logo-col a[href^="mailto"]:hover {
    opacity: 1 !important;
}

/* Copyright bar */
.footer-copyright,
footer .container > div:last-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 24px;
    margin-top: 40px;
    text-align: center;
    opacity: 0.75;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

/* Footer logo & contact typography */
.footer-logo-col .footer-logo,
.footer-logo-col .logo {
    display: inline-block;
    margin-bottom: 20px;
    color: #fff !important;
    font-weight: 700;
}

.footer-tagline {
    opacity: 0.8;
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

.footer-contact {
    margin-bottom: 6px;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .footer-logo-col {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-logo-col .social-links {
        justify-content: center;
    }
}

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

    .footer-logo-col .social-links {
        justify-content: center;
        gap: 10px;
    }

    .footer-logo-col .social-links a {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* =========================================
   Blog & Article Styles
   ========================================= */

.page-header {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    text-align: center;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}

.blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.blog-img-wrapper {
    height: 240px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.blog-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-tag {
    background: #EFF6FF;
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    align-self: flex-start;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.blog-title {
    font-family: var(--brand-font);
    /* Outfit */
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.blog-title a {
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: var(--primary-color);
}

.blog-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Blog Detail Page */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 20px 80px;
}

.article-breadcrumb {
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 30px;
    font-weight: 500;
}

.article-breadcrumb a {
    color: var(--primary-color);
}

.article-title {
    font-family: var(--brand-font);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.article-meta-row {
    display: flex;
    gap: 30px;
    color: var(--text-gray);
    font-size: 1rem;
    margin-bottom: 40px;
    align-items: center;
}

.article-hero-image {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.article-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-dark);
    /* Ensure high contrast */
}

/* Matching the reference image style explicitly */
.key-takeaways {
    background: transparent;
    padding: 30px 0;
    margin-bottom: 40px;
}

.key-takeaways h3 {
    font-family: var(--brand-font);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.key-takeaways .takeaways-list p {
    margin-bottom: 12px;
    font-weight: 500;
}

/* Numbered Sections like reference */
.article-section-title {
    font-family: var(--brand-font);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 60px;
    margin-bottom: 25px;
}

/* Pro Tip Box */
.pro-tip-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 5px solid var(--primary-color);
    padding: 30px;
    border-radius: 12px;
    margin: 40px 0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pro-tip-icon {
    font-size: 2rem;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .article-title {
        font-size: 2rem;
    }
}

/* =========================================
   Mobile Responsiveness & Media Queries
   ========================================= */

/* Tablet & Smaller Desktop (max-width: 991px) */
@media screen and (max-width: 991px) {
    :root {
        --section-padding: 60px 0;
    }

    html {
        font-size: 95%;
        /* Slightly smaller base text */
    }

    .container {
        max-width: 100%;
        padding: 0 30px;
    }

    .navbar-floating {
        padding: 0 20px;
    }

    .header-actions .btn {
        display: none;
        /* Hide 'Get Started' on tablet to save space */
    }

    /* Hero Section */
    .hero-section {
        padding-top: 140px;
        padding-bottom: 100px;
        height: auto;
        text-align: center;
    }

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

    .hero-ratings {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .rating-group.hidden-mobile {
        display: none;
    }

    /* Layouts */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-logo-col {
        grid-column: span 2;
        text-align: center;
    }
}

/* Mobile Devices (max-width: 768px) */
@media screen and (max-width: 768px) {
    html {
        font-size: 90%;
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    /* Solutions Grid - Mobile */
    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .solution-card {
        padding: 25px 20px;
    }

    .solution-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }


    /* Hero */
    .hero-content-main h1 {
        font-size: 2.5rem;
    }

    .hero-graphic-container {
        height: 350px;
        margin-top: 40px;
        transform: scale(0.8);
    }

    .composition-wrapper {
        width: 100%;
        animation: none;
        /* Disable complex float on mobile for performance */
    }

    /* 3D Cards adjustments */
    .glass-card {
        padding: 10px 15px;
    }

    .card-1 {
        top: 0;
        right: 0;
    }

    .card-2 {
        bottom: 10%;
        left: -10px;
    }

    .card-3 {
        top: 10%;
        left: 0;
    }

    /* Services & Features */
    .services-preview div[style*="grid-template-columns"],
    .features div[style*="grid-template-columns"],
    .testimonials div[style*="grid-template-columns"],
    .achievements div[style*="grid-template-columns"],
    .container>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Contact Form */
    #contact form {
        padding: 25px;
    }

    #contact form>div:first-child {
        grid-template-columns: 1fr !important;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo-col {
        grid-column: span 1;
    }

    /* General */
    .btn {
        padding: 14px 28px;
        width: 100%;
        /* Full width buttons on mobile */
        max-width: 300px;
        margin-bottom: 10px;
    }

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

    .hero-btns .btn {
        margin: 0;
        margin-bottom: 15px;
        width: 100%;
        max-width: 100%;
    }

    /* Container adjustments */
    .container {
        padding: 0 20px;
    }

    /* Ensure mobile menu is always on top */
    .mobile-menu-toggle {
        z-index: 9999 !important;
    }

    .main-nav.active {
        z-index: 9998 !important;
    }

    /* Typography */
    h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Cards and sections */
    .premium-card {
        padding: 30px 20px;
    }

    /* Process Grid */
    .process-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Hero Section Mobile */
    .hero-section {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }

    .hero-content-main p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Section Padding */
    section {
        padding: 60px 0 !important;
    }

    /* Tables Mobile */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Images Mobile */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Blog */
    .article-title {
        font-size: 1.8rem;
    }

    .article-container {
        padding: 100px 20px 60px;
    }

    /* Tables */
    table {
        font-size: 0.85rem;
        display: block;
        overflow-x: auto;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Timeline */
    .timeline::after {
        left: 30px;
    }

    .timeline-container {
        width: 100%;
        padding-left: 70px;
        padding-right: 20px;
    }

    .timeline-container.right {
        left: 0;
    }

    .timeline-container::after,
    .timeline-container.right::after {
        left: 21px;
        /* Align dot to line */
        right: auto;
    }
}

/* Small Mobile (max-width: 480px) */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero-content-main h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .hero-content-main p {
        font-size: 0.95rem;
    }

    .badge-pill {
        font-size: 0.8rem;
        padding: 6px 16px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 1.5rem !important;
    }

    .premium-card {
        padding: 25px 15px;
    }

    .solution-card {
        padding: 25px 20px;
    }

    .solution-card h3 {
        font-size: 1.2rem;
    }

    .solution-card p {
        font-size: 0.95rem;
    }

    .solution-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .solution-card p {
        font-size: 0.95rem;
    }

    .glass-card {
        display: none;
        /* Too cluttered for very small screens */
    }

    /* Hide some floating elements for performance and clarity */
    .particle,
    .orbit-icon,
    .float-item {
        display: none;
    }

    /* Smaller buttons on very small screens */
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    /* Footer mobile */
    .footer-grid {
        gap: 30px;
    }

    footer {
        padding: 60px 0 20px;
    }
}

/* Solution Cards - Global Styles */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.solution-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #0b1ae9;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--primary-color);
}

.solution-card:hover::before {
    transform: scaleX(1);
}

.solution-icon {
    width: 70px;
    height: 70px;
    background: #0b1ae9;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

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

.solution-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 700;
}

.solution-card p {
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 20px;
}

.solution-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.solution-link:hover {
    gap: 12px;
    color: var(--primary-dark);
}

/* Process Grid - Global Styles */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.process-step {
    position: relative;
    padding: 30px 20px;
}

/* Dropdown Menu Styles */
.nav-links li {
    position: relative;
}

.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.nav-links li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

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

.dropdown-menu a {
    color: var(--text-dark) !important;
    /* Force dark text on white bg */
    padding: 10px 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    border-radius: 0;
    white-space: nowrap;
    transition: all 0.2s;
    opacity: 1 !important;
}

.dropdown-menu a:hover {
    background: var(--accent-color);
    color: var(--primary-color) !important;
    padding-left: 25px;
    /* Slight movement on hover */
}

/* Megamenu Styles */
.megamenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    min-width: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 30px 40px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.megamenu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.nav-links li:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.megamenu-content {
    display: flex;
    gap: 50px;
    justify-content: flex-start;
}

.megamenu-column {
    flex: 1;
    min-width: 250px;
}

.megamenu-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
}

.megamenu-heading a {
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}

.megamenu-heading a:hover {
    color: var(--primary-color) !important;
    transform: translateX(5px);
}

.megamenu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu-column ul li {
    margin-bottom: 10px;
}

.megamenu-column ul li a {
    color: var(--text-dark) !important;
    font-size: 0.9rem;
    padding: 8px 0;
    display: block;
    text-decoration: none;
    transition: all 0.2s;
    opacity: 1 !important;
    border-radius: 4px;
}

.megamenu-column ul li a:hover {
    color: var(--primary-color) !important;
    padding-left: 10px;
    background: var(--accent-color);
}

/* Responsive Megamenu */
@media (max-width: 768px) {
    .megamenu {
        min-width: 100%;
        left: 0;
        transform: translateX(0) translateY(10px);
        padding: 20px;
    }

    .megamenu::before {
        left: 20px;
    }

    .megamenu-content {
        flex-direction: column;
        gap: 30px;
    }

    .nav-links li:hover .megamenu {
        transform: translateX(0) translateY(0);
    }
}

/* Extra Small Devices (max-width: 480px) */
@media screen and (max-width: 480px) {
    html {
        font-size: 85%;
    }

    .container {
        padding: 0 12px;
    }

    .nav-links {
        width: 280px;
        max-width: 95vw;
        padding: 60px 15px 15px;
    }

    .nav-links a {
        font-size: 0.95rem;
        padding: 10px 0;
    }

    .hero-content-main h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .hero-content-main p {
        font-size: 0.95rem;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    .premium-card {
        padding: 20px 15px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .navbar-floating {
        padding: 0 15px;
        height: 60px;
    }

    .logo {
        font-size: 1.1rem;
    }

}











/* =========================================================
   GLOBAL MOBILE RESPONSIVE PATCH (ALL PAGES)
   Safe override layer – does not break desktop
========================================================= */

/* ---------- TABLET (≤ 991px) ---------- */
@media (max-width: 991px) {

  html { font-size: 95%; }

  .container {
    max-width: 100%;
    padding: 0 24px;
  }

  /* Navbar spacing */
  .navbar-floating {
    height: 65px;
    padding: 0 18px;
  }

  /* Logo text visible on mobile for brand recognition */
  .logo-text { display: inline !important; font-size: 0.85rem; }

  .header-actions { display: none; }

  /* Hero */
  .hero-section {
    padding-top: 130px !important;
    padding-bottom: 120px !important;
  }

  .hero-content-main h1 {
    font-size: 3rem !important;
    line-height: 1.2 !important;
  }

  .hero-content-main p {
    font-size: 1.05rem;
  }

  /* Grids */
  .solutions-grid,
  .process-grid,
  .blog-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-logo-col {
    grid-column: 1 / -1;
    text-align: center;
  }
}

/* ---------- MOBILE (≤ 768px) ---------- */
@media (max-width: 768px) {

  html { font-size: 90%; }

  .container { padding: 0 20px; }

  /* Navbar */
  .mobile-menu-toggle { display: flex !important; }

  .main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: rgba(17,29,89,0.98);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 9998;
    padding: 90px 20px 30px;
    overflow-y: auto;
  }

  .main-nav.active { transform: translateX(0); }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .nav-link {
    width: 100%;
    padding: 18px 20px;
    justify-content: space-between;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    position: relative;
  }

  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(6px);
  }

  .nav-link:active {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(3px);
  }

  /* Enhanced active state for dropdown parents */
  .has-dropdown.active > .nav-link,
  .has-megamenu.active > .nav-link {
    background: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    font-weight: 500;
  }

  .dropdown-menu,
  .megamenu {
    position: static;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.25);
    margin: 0;
    padding: 8px 0;
    min-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
  }

  .has-dropdown.active .dropdown-menu,
  .has-megamenu.active .megamenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 2000px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    transform: translateY(0) !important;
    padding: 12px 0 !important;
    height: auto !important;
  }

  /* Force visibility of all dropdown content */
  .has-dropdown.active .dropdown-menu *,
  .has-megamenu.active .megamenu * {
    visibility: visible !important;
  }

  .has-dropdown.active .dropdown-icon,
  .has-megamenu.active .dropdown-icon {
    transform: rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dropdown-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Ensure dropdown menu items are visible - no animation to avoid opacity conflicts */
  .has-dropdown.active .dropdown-menu li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  .has-dropdown.active .dropdown-menu li:nth-child(1) { animation-delay: 0.05s; }
  .has-dropdown.active .dropdown-menu li:nth-child(2) { animation-delay: 0.1s; }
  .has-dropdown.active .dropdown-menu li:nth-child(3) { animation-delay: 0.15s; }
  .has-dropdown.active .dropdown-menu li:nth-child(4) { animation-delay: 0.2s; }

  .has-dropdown.active .dropdown-menu li a,
  .has-dropdown.active .dropdown-menu a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Ensure megamenu content is visible when active */
  .has-megamenu.active .megamenu-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    gap: 0 !important;
    animation: fadeIn 0.3s ease-out;
  }

  .has-megamenu.active .megamenu-column {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    animation: fadeInUp 0.3s ease-out forwards;
  }

  .has-megamenu.active .megamenu-column:nth-child(1) { animation-delay: 0.05s; }
  .has-megamenu.active .megamenu-column:nth-child(2) { animation-delay: 0.1s; }

  .has-megamenu.active .megamenu-column ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  .has-megamenu.active .megamenu-column ul li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
  }

  .has-megamenu.active .megamenu-column ul li a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Higher specificity to override global .dropdown-menu a { color: var(--text-dark) } */
  .main-nav .dropdown-menu a,
  .main-nav .megamenu-column ul li a,
  .main-nav .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 14px 20px 14px 48px;
    font-size: 0.95rem;
    font-weight: 400;
    display: block !important;
    width: 100%;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dropdown-menu a::before,
  .megamenu-column ul li a::before {
    content: '→';
    position: absolute;
    left: 24px;
    opacity: 0.5;
    transition: all 0.2s ease;
    font-size: 0.85rem;
  }

  .dropdown-menu a:hover,
  .megamenu-column ul li a:hover {
    background: rgba(255, 255, 255, 0.12);
    padding-left: 52px;
    color: white !important;
    border-left-color: rgba(255, 255, 255, 0.5);
    transform: translateX(4px);
  }

  .dropdown-menu a:hover::before,
  .megamenu-column ul li a:hover::before {
    opacity: 1;
    transform: translateX(2px);
  }

  /* Megamenu heading styles */
  .megamenu-heading {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 16px 20px 12px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 8px !important;
  }

  .megamenu-heading a {
    color: rgba(255, 255, 255, 0.95) !important;
    padding: 0 !important;
    border-left: none !important;
    font-weight: 600 !important;
  }

  .megamenu-heading a:hover {
    background: transparent !important;
    transform: none !important;
    padding-left: 0 !important;
  }

  .megamenu-heading a::before {
    display: none !important;
  }

  /* Active state for dropdown parent */
  .has-dropdown.active > .nav-link,
  .has-megamenu.active > .nav-link {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }

  /* Hero */
  .hero-section {
    padding-top: 120px !important;
    padding-bottom: 90px !important;
  }

  .hero-content-main h1 {
    font-size: 2.4rem !important;
    line-height: 1.25 !important;
  }

  .hero-content-main p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-btns {
    flex-direction: column;
    gap: 14px;
  }

  .hero-btns .btn {
    width: 100%;
    max-width: 100%;
  }

  /* Cards + grids */
  .solutions-grid,
  .process-grid,
  .blog-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .solution-card,
  .premium-card,
  .blog-card {
    padding: 26px 22px;
  }

  /* Sections */
  section { padding: 70px 0 !important; }

  .section-title h2 {
    font-size: 2rem !important;
    line-height: 1.3;
  }

  .section-title p {
    font-size: 1rem;
  }

  /* Tables */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Forms */
  input, textarea, select {
    font-size: 16px;
    width: 100%;
  }

  /* Timeline */
  .timeline::after { left: 24px; }

  .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 20px;
  }

  .timeline-container::after {
    left: 12px;
  }

  /* Footer */
  footer {
    padding: 60px 0 20px;
  }

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

}

/* ---------- SMALL MOBILE (≤ 480px) ---------- */
@media (max-width: 480px) {

  html { font-size: 85%; }

  .container { padding: 0 14px; }

  /* Navbar */
  .navbar-floating {
    height: 58px;
    padding: 0 14px;
  }

  .logo-circle {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }

  /* Hero */
  .hero-content-main h1 {
    font-size: 1.9rem !important;
  }

  .hero-content-main p {
    font-size: .95rem;
  }

  .badge-pill {
    font-size: .8rem;
    padding: 6px 14px;
  }

  /* Cards */
  .solution-card,
  .premium-card {
    padding: 22px 18px;
  }

  .solution-icon {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }

  /* Buttons */
  .btn {
    width: 100%;
    max-width: 100%;
    padding: 12px 22px;
    font-size: .95rem;
  }

  /* Hide heavy visuals */
  .glass-card,
  .particle,
  .orbit-icon,
  .float-item {
    display: none !important;
  }

  /* Blog */
  .article-title {
    font-size: 1.7rem;
  }

  .article-container {
    padding: 90px 16px 60px;
  }

}

/* Final override: ensure mobile dropdown content is visible and correctly positioned */
@media (max-width: 992px) {
  /* Override global position: absolute - dropdown must be static to appear under parent */
  .main-nav .dropdown-menu,
  .main-nav .megamenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    min-width: 100% !important;
  }

  .main-nav .has-dropdown.active .dropdown-menu,
  .main-nav .has-megamenu.active .megamenu {
    position: relative !important;
    transform: none !important;
  }

  .main-nav .has-dropdown.active .dropdown-menu a,
  .main-nav .has-dropdown.active .dropdown-menu li a,
  .main-nav .has-megamenu.active .megamenu-column ul li a {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  
  
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 9997;
}

body.menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}
}