/* Root Variables - The Essence of Your Design */
    :root {
        /* Adjusted background and card colors for clearer distinction */
        --color-bg-deep: #060B1C; /* Deeper, more saturated base blue for strong contrast */
        --color-bg-mid: #141A33;  /* Mid-tone for background gradient */
        --color-bg-light: #222B4D; /* Lighter tone for background gradient */

        /* Translucent card base remains excellent for glassmorphism */
        --color-card-base: rgba(255, 255, 255, 0.08); /* Slightly increased opacity for better visibility */
        --color-card-border: rgba(255, 255, 255, 0.2); /* Slightly more prominent border */

        --color-text-primary: #e0eaff; /* Soft white/blue for main text */
        --color-text-secondary: #a7b7d0; /* Muted blue for paragraph text */
        --color-accent-blue: #4a90e2; /* Vibrant blue accent */
        --color-accent-green: #34e0a1; /* Complementary green accent */
        --color-glow-primary: #8a2be2; /* Primary glow color (violet) */
        --color-glow-secondary: #00bcd4; /* Secondary glow color (cyan) */
        --shadow-strong: rgba(0, 0, 0, 0.7); /* Deeper shadow for 3D effect */
        --transition-speed-fast: 0.3s;
        --transition-speed-medium: 0.6s; /* For card 3D transforms */
        --transition-speed-slow: 1.2s; /* For background animations */
        --border-radius-lg: 25px; /* More rounded corners */
    }

    /* Global Typography & Base */
    body {
        font-family: 'Poppins', sans-serif;
        line-height: 1.7;
        color: var(--color-text-primary);
        background-color: var(--color-bg-deep); /* Ensure body matches section's deep background */
        overflow-x: hidden; /* Prevent horizontal scroll from 3D */
    }

    /* Main Section Container - The Astral Canvas */
    .feature-section-magic {
        /* Updated SVG gradient to match new background colors for seamless blending */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='940' height='500' preserveAspectRatio='none' viewBox='0 0 940 500'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1233%26quot%3b)' fill='none'%3e%3crect width='940' height='500' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1234%26quot%3b)'%3e%3c/rect%3e%3cpath d='M-104.31 37.64 a141.95 141.95 0 1 0 283.9 0 a141.95 141.95 0 1 0 -283.9 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M19.497883017963503 163.83545031536988L149.4016935856293 88.83545031536983 74.40169358562922-41.068360252295946-55.502116982036554 33.93163974770411z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M47.773%2c113.533C71.763%2c112.837%2c94.966%2c102.732%2c107.104%2c82.028C119.375%2c61.098%2c118.47%2c34.968%2c106.054%2c14.124C93.924%2c-6.239%2c71.457%2c-16.655%2c47.773%2c-17.574C22.111%2c-18.57%2c-5.133%2c-12.399%2c-18.908%2c9.275C-33.546%2c32.306%2c-32.536%2c62.662%2c-17.833%2c85.651C-4.111%2c107.106%2c22.316%2c114.271%2c47.773%2c113.533' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M793.4620057767385-17.596631278773053L819.5092324267781 130.12453167305813 941.1831687285696-43.64385792881275z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M979.2280181644403 40.308956196473304L932.2808618858512-47.98580308941936 823.3123010963068 66.58231097141064z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M982.8679579205392 122.55640068634784L964.5875564097671-26.325522059850442 833.9860351743409 140.83680219711997z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M19.497883017963503 563.8354503153699L149.4016935856293 488.8354503153699 74.40169358562922 358.93163974770414-55.502116982036554 433.93163974770414z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M87.372%2c600.478C127.47%2c599.696%2c163.733%2c577.77%2c183.84%2c543.068C204.004%2c508.269%2c208.44%2c463.792%2c185.855%2c430.513C165.225%2c400.113%2c124.038%2c398.606%2c87.372%2c400.919C55.643%2c402.92%2c26.635%2c415.749%2c8.286%2c441.712C-13.978%2c473.216%2c-33.04%2c512.431%2c-15.84%2c546.961C2.68%2c584.14%2c45.844%2c601.288%2c87.372%2c600.478' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M131.81%2c694.291C188.323%2c694.641%2c241.017%2c659.852%2c264.748%2c608.562C285.65%2c563.387%2c261.644%2c514.238%2c234.391%2c472.585C210.403%2c435.922%2c175.43%2c409.485%2c131.81%2c405.38C78.737%2c400.386%2c18.192%2c404.735%2c-10.72%2c449.52C-41.316%2c496.914%2c-26.691%2c558.182%2c1.696%2c606.931C29.871%2c655.317%2c75.82%2c693.944%2c131.81%2c694.291' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M869.478%2c476.019C886.873%2c475.677%2c904.576%2c469.832%2c913.3%2c454.779C922.045%2c439.69%2c918.646%2c421.229%2c910.014%2c406.075C901.279%2c390.74%2c887.082%2c379.083%2c869.478%2c377.843C849.458%2c376.432%2c827.947%2c382.327%2c817.673%2c399.568C807.211%2c417.124%2c811.101%2c439.644%2c822.566%2c456.563C832.744%2c471.583%2c851.338%2c476.376%2c869.478%2c476.019' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M728.19 445.14 a156.95 156.95 0 1 0 313.9 0 a156.95 156.95 0 1 0 -313.9 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M902.3187975339279 567.2055293755674L996.7168561914035 450.6336351570218 785.7469033153823 472.80747071809174z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1233'%3e%3crect width='940' height='500' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='11.7%25' y1='122%25' x2='88.3%25' y2='-22%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1234'%3e<stop stop-color='%23060B1C' offset='0'></stop><stop stop-color='rgba(20, 26, 51, 1)' offset='1'></stop></linearGradient><style> %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
        background-size: cover; /* Ensures the SVG covers the entire section */
        background-repeat: no-repeat; /* Prevents the SVG from repeating */
        background-position: center center; /* Centers the SVG */
        padding: 100px 0; /* More expansive padding */
        position: relative;
        overflow: hidden; /* Crucial for clipping floating blobs */
        z-index: 1; /* Ensures content layers correctly */
        border-radius: var(--border-radius-lg); /* Applied to all corners now */
        box-shadow: 0 25px 70px var(--shadow-strong); /* Stronger shadow for depth */
        perspective: 1500px; /* Establishes 3D viewing context for children */
    }

    /* Animated Floating Astral Blobs - The Magic */
    .floating-blob {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle, var(--color-glow-primary) 0%, transparent 60%);
        opacity: 0.3;
        filter: blur(80px); /* Slightly less blur for better definition */
        animation: blobFloat var(--transition-speed-slow) infinite ease-in-out alternate,
                   blobGlow var(--transition-speed-slow) infinite ease-in-out alternate;
        z-index: 0; /* Behind all content */
        will-change: transform, opacity, filter; /* Optimize animations */
    }

    .floating-blob:nth-child(1) { top: 10%; left: 5%; width: 250px; height: 250px; animation-duration: 18s; animation-delay: 0s; }
    .floating-blob:nth-child(2) { bottom: 15%; right: 10%; width: 300px; height: 300px; animation-duration: 20s; animation-delay: 4s; background: radial-gradient(circle, var(--color-glow-secondary) 0%, transparent 60%); }
    .floating-blob:nth-child(3) { top: 30%; right: 20%; width: 200px; height: 200px; animation-duration: 16s; animation-delay: 8s; filter: blur(90px) hue-rotate(30deg); }
    .floating-blob:nth-child(4) { bottom: 5%; left: 25%; width: 180px; height: 180px; animation-duration: 22s; animation-delay: 2s; background: radial-gradient(circle, var(--color-accent-blue) 0%, transparent 60%); filter: blur(70px); }
    .floating-blob:nth-child(5) { top: 50%; left: 40%; width: 350px; height: 350px; animation-duration: 25s; animation-delay: 10s; filter: blur(100px) hue-rotate(60deg); }

    @keyframes blobFloat {
        0% { transform: translate(0, 0) translateZ(-150px); opacity: 0.3; }
        50% { transform: translate(30px, 50px) translateZ(-100px); opacity: 0.5; }
        100% { transform: translate(0, 0) translateZ(-150px); opacity: 0.3; }
    }

    @keyframes blobGlow {
        0% { filter: blur(80px); }
        50% { filter: blur(100px) brightness(1.2); }
        100% { filter: blur(80px); }
    }

    /* Section Heading */
    .feature-section-magic h2 {
        font-size: 3rem; /* Slightly reduced for better balance */
        font-weight: 700;
        text-align: center;
        margin-bottom: 60px; /* Adjusted spacing */
        color: var(--color-text-primary);
        text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); /* Deeper text shadow */
        letter-spacing: 1.5px;
        will-change: transform, opacity;
    }

    /* Feature Card Styling - The Crystal Panels */
    .features-crystal-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Define base dimensions and spacing here */
        height: 100%; /* Important for consistent sizing within a row */
        padding: 20px 30px; /* Reduced vertical padding */
        margin-bottom: 25px; 

        border-radius: var(--border-radius-lg);
        background-color: var(--color-card-base); /* Translucent base */
        backdrop-filter: blur(15px) saturate(180%); /* Stronger glassmorphism */
        border: 1px solid var(--color-card-border); /* Subtle, defined border */
        cursor: pointer;
        text-align: center;
        box-shadow: 0 15px 50px var(--shadow-strong); /* Prominent initial shadow */
        transform-style: preserve-3d; /* For child 3D transforms */
        transform: translateZ(0); /* Ensure hardware acceleration */
        transition: transform var(--transition-speed-medium) ease, /* Changed to ease for smooth scale */
                    box-shadow var(--transition-speed-medium) ease,
                    background-color var(--transition-speed-medium) ease,
                    /* Include size/position properties in transitions for smoothness */
                    height var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    padding var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    margin-bottom var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.265, 1.55),
                    opacity var(--transition-speed-medium) cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
        overflow: hidden; /* Crucial for inner glow/shine */
        z-index: 2; /* Above blobs */
        will-change: transform, box-shadow, background-color, height, padding, margin-bottom, opacity;
    }

    /* Inner Aura Glow on Hover (Subtler and integrated with new effect) */
    .features-crystal-card::before {
        content: '';
        position: absolute;
        inset: 0; /* Covers the whole card */
        background: radial-gradient(circle at center, var(--color-accent-blue) 0%, transparent 60%);
        opacity: 0;
        transform: scale(0.1);
        transition: opacity var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
        z-index: -1;
    }

    .features-crystal-card:hover::before {
        opacity: 0.1; /* Reduced opacity for subtlety */
        transform: scale(1.2); /* Slightly larger scale for the glow */
    }

    /* MODERN Hover Effect: Scale, Shadow, and Background Shift */
    .features-crystal-card:hover {
        transform: scale(1.03); /* Subtle scale up */
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9); /* More prominent, diffuse shadow */
        background-color: rgba(255, 255, 255, 0.1); /* Slightly brighter background on hover for more feedback */
    }

    .features-crystal-card-icon {
        color: var(--color-accent-green);
        font-size: 3.4rem; /* Increased icon size */
        margin-bottom: 20px; /* Adjusted spacing */
        transform: translateZ(30px); /* Push icon forward in 3D */
        animation: iconPulse 2s infinite ease-in-out alternate; /* Subtle continuous pulse */
        transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
        will-change: transform, color;
    }

    @keyframes iconPulse {
        0% { transform: scale(1) translateZ(30px); }
        50% { transform: scale(1.03) translateZ(35px); }
        100% { transform: scale(1) translateZ(30px); }
    }

    .features-crystal-card:hover .features-crystal-card-icon {
        color: var(--color-accent-blue); /* Color change on hover */
        transform: scale(1.05) translateZ(40px); /* Pop out slightly more, not as aggressive */
    }

    .features-crystal-card-content {
        flex-grow: 1;
        transform: translateZ(20px); /* Push content forward */
        will-change: transform;
    }

    .features-crystal-card-content h5 {
        font-size: 1.4rem; /* Increased heading size */
        margin-bottom: 10px; /* Adjusted spacing */
        color: var(--color-text-primary);
        font-weight: 600;
        transition: color var(--transition-speed-fast) ease;
    }

    .features-crystal-card:hover .features-crystal-card-content h5 {
        color: var(--color-accent-green);
    }

    .features-crystal-card-content p {
        font-size: 1rem; /* Increased paragraph size */
        color: var(--color-text-secondary);
        transition: color var(--transition-speed-fast) ease;
    }

    .features-crystal-card:hover .features-crystal-card-content p {
        color: var(--color-text-primary);
    }

    /* Hidden Card Animation - Staggered Graceful Reveal */
    .hidden-card-col {
        display: none; /* Initially hidden, managed by JS */
    }

    /* State for cards when they are logically hidden */
    .features-crystal-card.is-hidden-start {
        opacity: 0;
        transform: translateY(60px);
        height: 0 !important; /* Force collapse, important for transition */
        padding-top: 0 !important; 
        padding-bottom: 0 !important;
        margin-top: 0 !important; 
        margin-bottom: 0 !important;
        pointer-events: none; /* Disable interaction when hidden */
    }

    /* State for cards during the reveal animation */
    .features-crystal-card.is-visible-animate {
        opacity: 1;
        transform: translateY(0);
        height: 100% !important; /* Animate back to full height */
        padding-top: 20px !important; /* Animate back to original padding */
        padding-bottom: 20px !important;
        margin-bottom: 25px !important; /* Animate back to original margin */
        pointer-events: auto; /* Enable interaction */
    }

    /* State for cards during the hide animation */
    .features-crystal-card.is-hide-animate {
        opacity: 0;
        transform: translateY(60px);
        height: 0 !important; /* Animate height to 0 */
        padding-top: 0 !important; 
        padding-bottom: 0 !important;
        margin-top: 0 !important; 
        margin-bottom: 0 !important;
        pointer-events: none; /* Disable interaction during hide */
    }

    /* Luminary Action Button */
    .luminary-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 60px; /* Adjusted spacing */
        font-size: 1.2rem; /* Slightly reduced font size */
        font-weight: 600;
        color: var(--color-text-primary);
        cursor: pointer;
        padding: 15px 40px; /* Adjusted padding */
        border-radius: 60px; /* More rounded, pill-like */
        background: linear-gradient(90deg, var(--color-accent-blue) 0%, var(--color-accent-green) 100%);
        box-shadow: 0 10px 30px var(--shadow-strong); /* Adjusted shadow */
        position: relative;
        overflow: hidden;
        z-index: 1;
        border: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all var(--transition-speed-medium) ease;
        animation: buttonPulse 3s infinite ease-in-out alternate; /* Continuous subtle pulse */
        will-change: transform, box-shadow, background;
    }

    @keyframes buttonPulse {
        0% { transform: scale(1); box-shadow: 0 10px 30px var(--shadow-strong); }
        50% { transform: scale(1.01); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8); }
        100% { transform: scale(1); box-shadow: 0 10px 30px var(--shadow-strong); }
    }

    /* Chromatic Flare on Hover */
    .luminary-button::after {
        content: '';
        position: absolute;
        width: 180%; height: 180%; /* Larger flare area */
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        opacity: 0;
        transform: scale(0) translate(-50%, -50%); /* Start hidden and small */
        transition: transform 0.7s ease-out, opacity 0.7s ease-out;
        z-index: 2; /* On top of the button content */
        will-change: transform, opacity;
    }

    .luminary-button:hover::after {
        transform: scale(1) translate(-50%, -50%); /* Expand flare */
        opacity: 1;
    }

    .luminary-button:hover {
        transform: translateY(-3px) scale(1.01); /* Lift and slight scale */
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9);
        background: linear-gradient(90deg, var(--color-accent-green) 0%, var(--color-accent-blue) 100%); /* Liquid color shift */
        animation: none; /* Stop continuous pulse on hover */
    }

    .luminary-button .fas {
        margin-right: 12px; /* Adjusted spacing */
        font-size: 1.1em; /* Adjusted icon size */
        transition: transform 0.3s ease;
    }

    .luminary-button:hover .fas {
        transform: translateX(5px); /* Icon shifts more dramatically */
    }

    /* Responsive Adjustments */
    @media (max-width: 767px) {
        .feature-section-magic {
            padding: 80px 0;
            border-radius: 0; /* Remove border-radius on small screens for full width */
        }

        .feature-section-magic h2 {
            font-size: 2.8rem;
            margin-bottom: 40px;
        }

        .features-crystal-card {
            padding: 15px 20px; /* Further reduced for mobile */
            margin-bottom: 20px;
        }

        .features-crystal-card-icon {
            font-size: 2.9rem; /* Adjusted for mobile readability */
            margin-bottom: 15px;
        }

        .features-crystal-card-content h5 {
            font-size: 1.3rem; /* Adjusted for mobile readability */
        }

        .features-crystal-card-content p {
            font-size: 0.95rem; /* Adjusted for mobile readability */
        }

        .luminary-button {
            margin-top: 40px;
            font-size: 1.1rem;
            padding: 12px 30px;
        }

        .luminary-button .fas {
            margin-right: 10px;
            font-size: 1em;
        }
    }

    @media (min-width: 768px) {
        .features-crystal-card {
            flex-direction: row;
            align-items: flex-start;
            text-align: left;
        }

        .features-crystal-card-icon {
            margin-right: 20px; /* Adjusted spacing for desktop icon */
            margin-bottom: 0;
        }
    }




      
          :root {
        --primary: #0055a5;
        --primary-dark: #003d76;
        --secondary: #00a0e3;
        --accent: #ff6b00;
        --light: #f8f9fa;
        --dark: #212529;
        --gray: #6c757d;
        --light-gray: #e9ecef;
        --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.2);
        --glass: rgba(255, 255, 255, 0.08);
        --border-radius: 16px;
    }

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

    body {
        font-family: 'Poppins', sans-serif;
        color: var(--dark);
        line-height: 1.7;
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
        overflow-x: hidden;
        position: relative;
    }

    body:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(circle at 10% 20%, rgba(0, 170, 255, 0.05) 0%, transparent 20%),
            radial-gradient(circle at 90% 80%, rgba(255, 107, 0, 0.05) 0%, transparent 20%);
        z-index: -1;
    }

    .container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
    }

   

    .section-title {
        text-align: center;
        margin-bottom: 80px;
        position: relative;
        z-index: 2;
    }

    .section-title h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 3.2rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 25px;
        position: relative;
        display: inline-block;
    }

    .section-title h2:after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: var(--accent);
        border-radius: 2px;
    }

    .section-title p {
        font-size: 1.3rem;
        color: var(--gray);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.8;
    }

  
   .btn22 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 18px 40px;
            border-radius: 15px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn22:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            z-index: -1;
            transition: var(--transition);
            opacity: 1;
        }

        .btn22-primary {
            background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%);
            color: white;
        }

        .btn22-primary:before {
            background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
        }

        .btn22-primary:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            color: white;
        }

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

        .btn22-secondary:before {
            background: var(--primary);
            opacity: 0;
        }

        .btn22-secondary:hover {
            color: white;
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .btn22-secondary:hover:before {
            opacity: 1;
        }

    .testimonials {
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
        padding: 120px 0;
    }

    .testimonials-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
    }

    .testimonial-card {
        background: white;
        border-radius: var(--border-radius);
        padding: 40px;
        box-shadow: var(--shadow);
        position: relative;
        transition: var(--transition);
    }

    .testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-hover);
    }

    .testimonial-card:before {
        content: '"';
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 5rem;
        color: rgba(0, 85, 165, 0.1);
        font-family: Georgia, serif;
        line-height: 1;
    }

    .testimonial-content {
        margin-top: 20px;
        font-size: 1.1rem;
        color: var(--gray);
        line-height: 1.8;
    }

    .testimonial-author {
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    .author-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        font-weight: 700;
        margin-right: 20px;
    }

    .author-info h4 {
        font-size: 1.2rem;
        color: var(--dark);
        margin-bottom: 5px;
    }

    .author-info p {
        color: var(--gray);
        font-size: 0.9rem;
    }

    .rating {
        color: #ffc107;
        margin-top: 5px;
    }

    .faq {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
    }

    .faq-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    .faq-item {
        background: white;
        border-radius: var(--border-radius);
        margin-bottom: 20px;
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: var(--transition);
    }

    .faq-item:hover {
        box-shadow: var(--shadow-hover);
    }

    .faq-question {
        padding: 25px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background: rgba(0, 85, 165, 0.03);
        transition: var(--transition);
    }

    .faq-question:hover {
        background: rgba(0, 85, 165, 0.07);
    }

    .faq-question h3 {
        font-size: 1.2rem;
        color: var(--dark);
        margin: 0;
    }

    .faq-icon {
        font-size: 1.2rem;
        transition: var(--transition);
    }

    .faq-answer {
        padding: 0 30px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, padding 0.5s ease;
    }

    .faq-answer p {
        color: var(--gray);
        line-height: 1.8;
        padding: 0 0 25px;
    }

    .faq-item.active .faq-answer {
        max-height: 500px;
        padding: 0 30px 25px;
    }

    .faq-item.active .faq-icon {
        transform: rotate(180deg);
    }

     /* Enhanced CTA Section */
        .cta {
            background: linear-gradient(135deg, #0055a5 0%, #003d76 100%);
            color: white;
            text-align: center;
            padding: 140px 0;
            position: relative;
            overflow: hidden;
            border-radius: 0 0 0px 0px;
            margin-top: 100px;
        }

        .cta:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
                url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iODAiIGhlaWdodD0iODAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
            opacity: 0.3;
        }

        .cta-content {
            position: relative;
            z-index: 10;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .cta h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 3.5rem;
            margin-bottom: 30px;
            line-height: 1.3;
        }

        .cta p {
            font-size: 1.4rem;
            max-width: 700px;
            margin: 0 auto 50px;
            opacity: 0.9;
            line-height: 1.8;
        }

        .cta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            max-width: 1000px;
            margin: 60px auto 0;
        }

        .cta-feature {
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: var(--transition);
        }

        .cta-feature:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
        }

        .cta-feature i {
            font-size: 2.5rem;
            color: white;
            margin-bottom: 20px;
            display: block;
        }

        .cta-feature h3 {
            font-size: 1.4rem;
            margin-bottom: 15px;
        }

        .cta-feature p {
            font-size: 1rem;
            margin: 0;
            opacity: 0.8;
        }

        .btn22-light {
            background: white;
            color: #fff;
            font-weight: 700;
            padding: 20px 50px;
            font-size: 1.2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            display: inline-block;
            margin-top: 50px;
            border-radius: 15px;
            transition: var(--transition);
        }

        .btn22-light:hover {
            background: #f0f0f0;
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
        }


    .animate-on-scroll {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .animate-on-scroll.active {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 1200px) {
        .section-title h2 {
            font-size: 2.8rem;
        }
    }

    @media (max-width: 992px) {
        .container {
            padding: 0 30px;
        }
        
        section {
            padding: 100px 0;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
        }
    }

    @media (max-width: 768px) {
        section {
            padding: 80px 0;
        }
        
        .section-title h2 {
            font-size: 2.2rem;
        }
        
        .cta h2 {
            font-size: 2.5rem;
        }
        
        .cta p {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 576px) {
        .container {
            padding: 0 20px;
        }
        
        .section-title h2 {
            font-size: 2rem;
        }
        
        .cta h2 {
            font-size: 2rem;
        }
    }

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

      
      
        /* Google Fonts Import */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Google+Sans:wght@400;500;700&display=swap');

        :root {
            /* Premium & Modern Colors */
            --brand-primary: #0066cc;
            --brand-secondary: #004d99;
            --subtle-gradient-start: #f5f7fa;
            --subtle-gradient-end: #ebf0f5;
            --section-bg-contrast: linear-gradient(135deg, #f9f9f9 0%, #f0f3f7 100%);
            --text-heading: #2a3442;
            --text-body: #5e6b7c;
            --card-bg: #ffffff;
            --border-subtle: #e0e5ea;
            --shadow-light: rgba(0, 0, 0, 0.03);
            --shadow-medium: rgba(0, 0, 0, 0.08);
            --transition-speed: 0.35s;
            --border-radius-large: 20px;
            --border-radius-medium: 12px;
        }

        /* Universal Box Sizing */
        * {
            box-sizing: border-box;
        }

        /* Keyframes for general slide-up entrance animation */
        @keyframes nabtech0080-fadeInSlideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Keyframes for Tab Navigation entrance animation */
        @keyframes nabtech0080-slideInUpRotate {
            from { opacity: 0; transform: translateY(80px) rotateX(10deg); }
            to { opacity: 1; transform: translateY(0) rotateX(0deg); }
        }

        /* Keyframes for Hero Content Slide-in */
        @keyframes nabtech0080-heroContentSlideIn {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* Keyframes for Hero Image Slide-in (Desktop 3D) */
        @keyframes nabtech0080-heroImageSlideIn {
            from { opacity: 0; transform: translateX(50px) rotateY(15deg) scale(1.05) translateZ(20px); }
            to { opacity: 1; transform: translateX(0) rotateY(15deg) scale(1.05) translateZ(20px); }
        }
        
        /* Keyframes for the image on mobile (no 3D effect) */
        @keyframes nabtech0080-heroImageSlideInMobile {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .nabtech0080-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 30px;
            box-sizing: border-box;
        }

        /* nabtech0080 Main Section (Hero) */
        .nabtech0080-main-section {
            background: linear-gradient(145deg, #e0e5ed 0%, #f9fbff 100%);
            padding: 80px 0;
            text-align: left;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 70vh;
            perspective: 1500px;
        }

        .nabtech0080-main-section .nabtech0080-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 0;
        }

        .nabtech0080-hero-content-left {
            flex: 1;
            max-width: 55%;
            padding-right: 40px;
            z-index: 2;
            opacity: 0;
            animation: nabtech0080-heroContentSlideIn 1s ease-out forwards;
            animation-delay: 0.2s;
        }

        .nabtech0080-hero-image-right {
            flex: 1;
            max-width: 45%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: var(--border-radius-large);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .nabtech0080-hero-image-right img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: var(--border-radius-large);
            object-fit: cover;
            opacity: 0;
            animation: nabtech0080-heroImageSlideIn 1.2s ease-out forwards;
            animation-delay: 0.4s;
            transform: rotateY(15deg) scale(1.05) translateZ(20px);
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .nabtech0080-hero-image-right img:hover {
            transform: rotateY(5deg) rotateX(5deg) scale(1.1) translateZ(40px);
        }

        .nabtech0080-hero-image-right::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(42, 52, 66, 0.05) 100%);
            border-radius: var(--border-radius-large);
            z-index: 1;
        }

        .nabtech0080-main-section h2 {
            font-family: 'Google Sans', sans-serif;
            font-size: 4.5em;
            margin-bottom: 25px;
            font-weight: 700;
            color: var(--text-heading);
            letter-spacing: -0.03em;
            line-height: 1.1;
        }

        .nabtech0080-main-section p {
            font-size: 1.4em;
            max-width: 900px;
            margin: 0 0 50px;
            font-weight: 300;
            color: var(--text-body);
            line-height: 1.5;
        }

        .nabtech0080-main-section .nabtech0080-cta {
            display: inline-block;
            background-color: var(--brand-primary);
            color: var(--card-bg);
            padding: 18px 45px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 1.15em;
            font-weight: 600;
            transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 8px 20px rgba(0, 102, 204, 0.25);
        }

        .nabtech0080-main-section .nabtech0080-cta:hover {
            background-color: var(--brand-secondary);
            transform: translateY(-6px);
            box-shadow: 0 14px 28px rgba(0, 102, 204, 0.4);
        }

        /* nabtech0080 Tab Navigation */
        .nabtech0080-tab-navigation-wrapper {
            margin-top: -55px;
            position: relative;
            z-index: 10;
            perspective: 1200px;
        }

        .nabtech0080-tab-navigation {
            display: flex;
            justify-content: center;
            background-color: var(--card-bg);
            border-radius: var(--border-radius-large);
            padding: 12px;
            box-shadow: 0 12px 30px var(--shadow-medium);
            max-width: 700px;
            margin: 0 auto;
            animation: nabtech0080-slideInUpRotate 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            opacity: 0;
            animation-delay: 0.5s;
        }

        .nabtech0080-tab-navigation button {
            flex: 1;
            background-color: transparent;
            border: none;
            padding: 16px 30px;
            font-size: 1.15em;
            font-weight: 600;
            color: var(--text-body);
            cursor: pointer;
            border-radius: var(--border-radius-medium);
            transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }

        .nabtech0080-tab-navigation button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-speed) ease-out;
            z-index: 0;
        }

        .nabtech0080-tab-navigation button.active {
            color: var(--card-bg);
            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
            transform: translateY(-3px);
        }
        
        .nabtech0080-tab-navigation button.active::before {
            transform: scaleX(1);
        }

        .nabtech0080-tab-navigation button span {
            position: relative;
            z-index: 1;
        }

        .nabtech0080-tab-navigation button:not(.active):hover {
            color: var(--brand-primary);
            background-color: var(--subtle-gradient-start);
            transform: translateY(-2px);
        }

        /* nabtech0080 Benefits Section */
        .nabtech0080-benefits-section {
            padding: 100px 0;
            background: var(--section-bg-contrast);
            position: relative;
            min-height: 550px;
        }

        .nabtech0080-benefits-section .nabtech0080-container {
            position: relative;
            min-height: 450px;
            padding-top: 50px;
            z-index: 2;
        }

        .nabtech0080-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(30px);
            width: 100%;
            max-width: 1100px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.8s;
            pointer-events: none;
            align-items: stretch;
        }

        .nabtech0080-features-grid.active {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            visibility: visible;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: auto;
        }

        .nabtech0080-feature-card {
            background: var(--card-bg);
            border-radius: var(--border-radius-large);
            box-shadow: 0 8px 25px var(--shadow-light);
            padding: 30px;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            text-align: left;
            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            overflow: hidden;
            position: relative;
            border: 1px solid var(--border-subtle);
            cursor: pointer;
            height: 100%;
        }

        .nabtech0080-feature-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
            transition: height 0.3s ease-out;
            z-index: 0;
        }
        
        .nabtech0080-feature-card:hover::before {
            height: 6px;
        }

        .nabtech0080-feature-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 35px var(--shadow-medium);
        }

        .nabtech0080-feature-card .nabtech0080-icon-wrapper {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            background-color: var(--subtle-gradient-end);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 25px;
            margin-bottom: 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .nabtech0080-feature-card:hover .nabtech0080-icon-wrapper {
            background: linear-gradient(45deg, var(--brand-primary), var(--brand-secondary));
            box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
            transform: translateY(-2px);
        }

        .nabtech0080-feature-card img {
            width: 55px;
            height: 55px;
            object-fit: contain;
            filter: drop-shadow(0 4px 5px rgba(0,0,0,0.1));
            transition: filter 0.3s ease;
        }
        
        .nabtech0080-feature-card:hover img {
            filter: invert(1) brightness(200%) drop-shadow(0 0 0 transparent);
        }

        .nabtech0080-feature-card .nabtech0080-feature-content {
            flex-grow: 1;
            text-align: left;
        }

        .nabtech0080-feature-card h5 {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.6em;
            margin: 0 0 10px;
            color: var(--text-heading);
            font-weight: 600;
            transition: color 0.3s ease;
            letter-spacing: -0.01em;
        }

        .nabtech0080-feature-card:hover h5 {
            color: var(--brand-primary);
        }

        .nabtech0080-feature-card p {
            font-size: 1.05em;
            color: var(--text-body);
            margin: 0;
            line-height: 1.7;
        }

        /* Responsive Adjustments */
        @media (max-width: 1200px) {
            .nabtech0080-container {
                padding: 0 25px;
            }
            .nabtech0080-features-grid {
                max-width: 950px;
            }
        }

        @media (max-width: 1024px) {
            .nabtech0080-main-section {
                padding: 100px 0;
                min-height: 60vh;
            }
            .nabtech0080-main-section .nabtech0080-container {
                flex-direction: column;
                text-align: center;
            }
            .nabtech0080-hero-content-left {
                max-width: 100%;
                padding-right: 0;
                margin-bottom: 40px;
                animation: nabtech0080-fadeInSlideUp 1s ease-out forwards;
                animation-delay: 0.2s;
            }
            .nabtech0080-hero-image-right {
                max-width: 80%;
                min-height: auto;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                transform: none;
            }
            .nabtech0080-hero-image-right img {
                animation: nabtech0080-heroImageSlideInMobile 1.2s ease-out forwards;
                animation-delay: 0.4s;
                transform: none;
            }
            .nabtech0080-hero-image-right::before {
                background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(42, 52, 66, 0.05) 100%);
            }
            .nabtech0080-hero-image-right img:hover {
                transform: none;
                box-shadow: none;
            }
            .nabtech0080-hero-image-right:hover {
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            }

            .nabtech0080-main-section h2 {
                font-size: 3.5em;
            }
            .nabtech0080-main-section p {
                font-size: 1.35em;
            }
            .nabtech0080-tab-navigation-wrapper {
                margin-top: -50px;
            }
            .nabtech0080-tab-navigation {
                max-width: 600px;
                padding: 10px;
            }
            .nabtech0080-tab-navigation button {
                padding: 14px 25px;
                font-size: 1.05em;
            }
            .nabtech0080-benefits-section {
                padding: 80px 0;
                min-height: 500px;
            }
            .nabtech0080-benefits-section .nabtech0080-container {
                padding-top: 40px;
                min-height: 400px;
            }
            .nabtech0080-features-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 30px;
                max-width: 880px;
            }
            .nabtech0080-feature-card {
                padding: 25px;
            }
            .nabtech0080-feature-card .nabtech0080-icon-wrapper {
                width: 70px;
                height: 70px;
                margin-right: 20px;
            }
            .nabtech0080-feature-card img {
                width: 45px;
                height: 45px;
            }
            .nabtech0080-feature-card h5 {
                font-size: 1.4em;
            }
            .nabtech0080-feature-card p {
                font-size: 0.95em;
            }
        }

        @media (max-width: 768px) {
            /* Fix for mobile card visibility */
            .nabtech0080-benefits-section {
                overflow: visible;
                min-height: auto;
            }

            .nabtech0080-benefits-section .nabtech0080-container {
                min-height: auto;
                padding-top: 0;
                position: static;
                overflow: visible;
            }

            .nabtech0080-features-grid {
                position: static !important;
                transform: none !important;
                width: 100%;
                max-width: 100%;
                opacity: 1 !important;
                visibility: visible !important;
                transition: none !important;
                display: none;
                animation: none !important;
                left: 0;
                top: auto;
            }

            .nabtech0080-features-grid.active {
                display: grid;
                position: relative !important;
                transform: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                margin: 0 auto;
            }

            /* End of fix */
            
            .nabtech0080-main-section {
                padding: 80px 0;
                min-height: 55vh;
            }
            .nabtech0080-main-section h2 {
                font-size: 2.8em;
                margin-bottom: 20px;
            }
            .nabtech0080-main-section p {
                font-size: 1.2em;
                margin-bottom: 30px;
            }
            .nabtech0080-main-section .nabtech0080-cta {
                padding: 14px 35px;
                font-size: 1em;
            }
            .nabtech0080-tab-navigation-wrapper {
                margin-top: -40px;
            }
            .nabtech0080-tab-navigation {
                flex-direction: column;
                max-width: 88%;
                padding: 8px;
            }
            .nabtech0080-tab-navigation button {
                padding: 12px;
                font-size: 1em;
                margin-bottom: 6px;
            }
            .nabtech0080-benefits-section {
                padding: 60px 0;
                min-height: auto;
            }
            .nabtech0080-benefits-section .nabtech0080-container {
                min-height: auto;
                padding-top: 30px;
            }
            .nabtech0080-features-grid {
                grid-template-columns: 1fr;
                gap: 25px;
                max-width: 480px;
            }

            .nabtech0080-feature-card {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 30px;
            }
            .nabtech0080-feature-card .nabtech0080-icon-wrapper {
                margin-right: 0;
                margin-bottom: 20px;
            }
            .nabtech0080-feature-card .nabtech0080-feature-content {
                text-align: center;
            }
            .nabtech0080-feature-card h5 {
                font-size: 1.3em;
            }
            .nabtech0080-feature-card p {
                font-size: 0.9em;
            }
        }

        @media (max-width: 480px) {
            .nabtech0080-container {
                padding: 0 20px;
            }
            .nabtech0080-main-section {
                padding: 60px 0;
                min-height: 50vh;
            }
            .nabtech0080-main-section h2 {
                font-size: 2.2em;
            }
            .nabtech0080-main-section p {
                font-size: 1em;
            }
            .nabtech0080-main-section .nabtech0080-cta {
                padding: 12px 30px;
                font-size: 0.95em;
            }
            .nabtech0080-tab-navigation {
                padding: 6px;
            }
            .nabtech0080-tab-navigation button {
                font-size: 0.9em;
            }
            .nabtech0080-benefits-section .nabtech0080-container {
                min-height: auto;
                padding-top: 25px;
            }
            .nabtech0080-features-grid {
                gap: 20px;
            }
            .nabtech0080-feature-card {
                padding: 25px;
            }
            .nabtech0080-feature-card h5 {
                font-size: 1.2em;
            }
            .nabtech0080-feature-card p {
                font-size: 0.85em;
            }
            .nabtech0080-hero-image-right {
                max-width: 100%;
            }
        }



    /* Google Fonts Import */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Google+Sans:wght@400;500;700&display=swap');

    :root {
        /* Premium & Modern Colors (Reverted to previous known good values) */
        --brand-primary: #007bff; /* Vibrant Blue */
        --brand-secondary: #0056b3; /* Darker Blue */
        --accent-light: #e6f5ff; /* Very Light Blue */
        --accent-dark: #003d7a; /* Deep Blue */
        --text-heading: #212529; /* Deep Charcoal */
        --text-body: #495057; /* Soft Gray */
        --text-light: #ffffff; /* White */

        /* Background Gradients (Reverted to previous known good values) */
        --bg-hero-gradient: linear-gradient(145deg, #eef5ff 0%, #ffffff 100%); /* Not used in current scope, but retained */
        --bg-section-1-gradient: linear-gradient(135deg, #f8faff 0%, #edf3f7 100%); /* Light Blue-Gray */
        --bg-section-2-gradient: linear-gradient(180deg, #f0f5fa 0%, #ffffff 100%); /* Soft Gray to White */
        --bg-section-3-gradient: linear-gradient(45deg, #e0f2f7 0%, #ffffff 100%); /* Cooler Light Blue */
        --bg-section-4-gradient: linear-gradient(160deg, #f5f8ff 0%, #e8eff7 100%); /* Subtle Blue-Purple - not used in new scheme */
        --bg-section-dark-gradient: linear-gradient(135deg, #1a202c 0%, #2a3442 100%); /* Deep Dark, refined */
        --bg-cta-gradient: radial-gradient(circle at 15% 85%, var(--brand-primary) 0%, var(--brand-secondary) 100%); /* Not used in current scope, but retained */

        /* Specific new gradient for VPS as per request, ensuring it's not purple/yellow */
        --bg-section-6-gradient: linear-gradient(160deg, #e0f5ff 0%, #f0f8ff 100%); /* A light, clean blue */

        /* Card & Border */
        --card-bg: #ffffff; /* Explicitly white */
        --border-subtle: #e9ecef;

        /* Shadows */
        --shadow-light: rgba(0, 0, 0, 0.04);
        --shadow-medium: rgba(0, 0, 0, 0.1);
        --shadow-strong: rgba(0, 0, 0, 0.2);
        --shadow-deep: rgba(0, 0, 0, 0.35);

        /* Transitions & Radii */
        --transition-speed: 0.4s;
        --border-radius-large: 25px;
        --border-radius-medium: 15px;
        --border-radius-small: 8px;
        --border-radius-block-asymmetric: 50px 20px 50px 20px;
        --border-radius-circle: 50%;

        /* Define bg-light for direct use as requested */
        --bg-light: var(--card-bg); /* This means --bg-light is simply white */
    }

    /* Universal Box Sizing & Smooth Scrolling */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: 'Roboto', sans-serif;
        line-height: 1.6;
        color: var(--text-body);
        overflow-x: hidden; /* Prevent horizontal scroll from animations */
        background-color: var(--card-bg); /* Default body background to white */
    }

    /* Global Utility Classes */
    .nabtech-container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .nabtech-section-heading {
        font-family: 'Google Sans', sans-serif;
        font-size: 3.5em;
        color: var(--text-heading);
        text-align: center;
        margin-bottom: 25px;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.1;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out;
    }
    .nabtech-section-heading.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .nabtech-section-subheading {
        font-size: 1.2em;
        color: var(--text-body);
        text-align: center;
        max-width: 850px;
        margin: 0 auto 70px;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out;
        transition-delay: 0.1s;
    }
    .nabtech-section-subheading.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .nabtech-cta-button {
        display: inline-block;
        background-color: var(--brand-primary);
        color: var(--text-light);
        padding: 20px 55px;
        border-radius: 60px;
        text-decoration: none;
        font-size: 1.25em;
        font-weight: 600;
        transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
        position: relative;
        z-index: 1;
    }

    .nabtech-cta-button:hover {
        background-color: var(--brand-secondary);
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 18px 35px rgba(0, 123, 255, 0.5);
    }

    /* Animation Classes (Intersection Observer will add 'is-visible') */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    /* Staggered animation for grid items and sequential elements */
    .animate-on-scroll.is-visible:nth-child(2) { transition-delay: 0.1s; }
    .animate-on-scroll.is-visible:nth-child(3) { transition-delay: 0.2s; }
    .animate-on-scroll.is-visible:nth-child(4) { transition-delay: 0.3s; }
    .animate-on-scroll.is-visible:nth-child(5) { transition-delay: 0.4s; }
    .animate-on-scroll.is-visible:nth-child(6) { transition-delay: 0.5s; }
    .animate-on-scroll.is-visible:nth-child(7) { transition-delay: 0.6s; }
    .animate-on-scroll.is-visible:nth-child(8) { transition-delay: 0.7s; }

    /* Floating Shapes & SVG Backgrounds */
    @keyframes nabtech-float-shape {
        0% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 0.05; }
        25% { transform: translate(20px, -25px) rotate(8deg) scale(1.03); opacity: 0.08; }
        50% { transform: translate(-20px, 25px) rotate(-8deg) scale(0.97); opacity: 0.07; }
        75% { transform: translate(25px, -15px) rotate(5deg) scale(1.02); opacity: 0.09; }
        100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 0.06; }
    }

    .nabtech-floating-shape {
        position: absolute;
        background: var(--brand-primary);
        opacity: 0.07;
        filter: blur(30px);
        pointer-events: none;
        z-index: 0;
        animation: nabtech-float-shape 28s infinite ease-in-out alternate;
    }
    .nabtech-floating-shape:nth-child(1) {
        width: 200px; height: 200px; top: 8%; left: 3%; border-radius: 40% 60% 70% 30% / 50% 50% 50% 50%; background: var(--brand-secondary); animation-delay: 0s;
    }
    .nabtech-floating-shape:nth-child(2) {
        width: 150px; height: 150px; top: 65%; right: 8%; border-radius: 50%; animation-delay: 6s;
    }
    .nabtech-floating-shape:nth-child(3) {
        width: 280px; height: 280px; bottom: 3%; left: 10%; border-radius: 60% 40% 30% 70% / 70% 30% 70% 30%; background: var(--brand-secondary); animation-delay: 12s;
    }
    .nabtech-floating-shape:nth-child(4) {
        width: 120px; height: 120px; top: 20%; right: 20%; border-radius: 50% 50% 20% 80% / 50% 80% 20% 50%; animation-delay: 18s;
    }

    /*--------------------------------------------------
    Specific Hosting Sections (Web, WP, Cloud, Reseller, VPS, Dedicated, Email, Domains)
    --------------------------------------------------*/
    .nabtech-specific-hosting-section {
        padding: 120px 0;
        position: relative;
        overflow: hidden;
    }
    /* Unique Backgrounds for each specific hosting section - EXACTLY AS REQUESTED */
    #web-hosting-details {
        background: var(--bg-section-3-gradient);
    }
    #wordpress-hosting-details {
        background: var(--bg-light);
    }
    #cloud-hosting-details {
        background: var(--bg-section-1-gradient);
    }
    #reseller-hosting-details {
        background: var(--bg-light);
    }
    #vps-hosting-details {
        background: var(--bg-section-6-gradient);
    }
    #dedicated-servers-details {
        background: var(--bg-light);
    }
    #email-section {
        background: var(--bg-section-3-gradient);
    }
    #domains-section {
        background: var(--bg-light);
    }


    .nabtech-hosting-content-block {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 60px;
        margin-bottom: 100px;
    }
    .nabtech-hosting-content-block:last-child {
        margin-bottom: 0;
    }

    .nabtech-hosting-content-block.reverse-layout .nabtech-hosting-text {
        order: 2;
        padding-left: 50px;
        padding-right: 0;
    }
    .nabtech-hosting-content-block.reverse-layout .nabtech-hosting-image {
        order: 1;
    }

    .nabtech-hosting-text {
        flex: 1;
        min-width: 480px;
        padding-right: 50px;
    }

    .nabtech-hosting-text h2 {
        font-family: 'Google Sans', sans-serif;
        font-size: 2.5em;
        color: var(--text-heading);
        margin-bottom: 25px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .nabtech-hosting-text p {
        font-size: 1.1em;
        color: var(--text-body);
        margin-bottom: 30px;
        line-height: 1.7;
    }
    .nabtech-hosting-text ul {
        list-style: none;
        padding: 0;
        margin-bottom: 35px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .nabtech-hosting-text ul li {
        font-size: 1em;
        color: var(--text-body);
        position: relative;
        padding-left: 30px;
    }
    .nabtech-hosting-text ul li::before {
        content: '✔';
        color: var(--brand-primary);
        position: absolute;
        left: 0;
        font-weight: bold;
        font-size: 1.2em;
    }

    .nabtech-hosting-image {
        flex: 1;
        min-width: 450px;
        height: 450px; /* Set a default height for desktop */
        border-radius: var(--border-radius-block-asymmetric);
        box-shadow: 0 20px 50px var(--shadow-deep);
        overflow: hidden;
        position: relative;
        display: flex; /* Ensure flex for image centering if needed */
        justify-content: center;
        align-items: center;
    }
    .nabtech-hosting-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image covers the area without distortion */
        border-radius: inherit; /* Inherit border-radius from parent */
        display: block; /* Remove extra space below image */
    }
    .nabtech-hosting-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 123, 255, 0.15) 0%, rgba(33, 37, 41, 0.1) 100%);
        border-radius: inherit; /* Inherit border-radius from parent */
        z-index: 1; /* Place overlay above image */
    }


    /* Domain TLDs */
    .nabtech-tld-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 12px;
        margin-top: 25px;
        text-align: center;
    }
    .nabtech-tld-item {
        background-color: var(--accent-light);
        padding: 12px 18px;
        border-radius: var(--border-radius-medium);
        font-size: 1em;
        font-weight: 500;
        color: var(--brand-secondary);
        border: 1px solid var(--border-subtle);
        transition: all 0.3s ease;
    }
    .nabtech-tld-item:hover {
        background-color: var(--brand-primary);
        color: var(--text-light);
        transform: translateY(-4px);
        box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    }


    /*--------------------------------------------------
    Our Data Centers Section
    --------------------------------------------------*/
    .nabtech-datacenter-section {
        background: var(--bg-section-dark-gradient); /* Retain dark background */
        padding: 120px 0;
        text-align: center;
        color: var(--text-light);
        position: relative;
        overflow: hidden;
    }
    .nabtech-datacenter-section .nabtech-section-heading,
    .nabtech-datacenter-section .nabtech-section-subheading {
        color: var(--text-light);
    }

    .nabtech-datacenter-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 60px;
        margin-top: 70px;
        text-align: left;
    }

    .nabtech-datacenter-text {
        flex: 1;
        min-width: 480px;
    }

    .nabtech-datacenter-text h2 {
        font-family: 'Google Sans', sans-serif;
        font-size: 2.5em;
        color: var(--text-light);
        margin-bottom: 25px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .nabtech-datacenter-text p {
        font-size: 1.1em;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 30px;
        line-height: 1.7;
    }
    .nabtech-datacenter-locations {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 25px;
        justify-content: center;
    }
    .nabtech-datacenter-locations span {
        background-color: #004a8f;
        color: var(--text-light);
        padding: 10px 20px;
        border-radius: 25px;
        font-size: 1em;
        font-weight: 500;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }


    .nabtech-datacenter-image {
        flex: 1;
        min-width: 450px;
        height: 450px;
        background-image: url('https://static.nabtech.co/modules/addons/adminpanel/assets/media/map-nabtech.webp'); /* This one remains background-image */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; /* Ensure no repeat */
        border-radius: var(--border-radius-block-asymmetric);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        overflow: hidden;
        position: relative;
    }

    .nabtech-datacenter-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, rgba(0, 123, 255, 0.25) 0%, rgba(33, 37, 41, 0.25) 100%);
        border-radius: var(--border-radius-block-asymmetric);
    }

    .nabtech-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 40px;
        margin-top: 40px;
    }

    .nabtech-stat-item {
        text-align: center;
        padding: 25px;
        background-color: #3a475a;
        border-radius: var(--border-radius-medium);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .nabtech-stat-item .number {
        font-family: 'Google Sans', sans-serif;
        font-size: 2.8em;
        font-weight: 700;
        color: #66b3ff;
        margin-bottom: 8px;
    }

    .nabtech-stat-item .label {
        font-size: 1.2em;
        color: var(--text-light);
        font-weight: 500;
    }

    /*--------------------------------------------------
    Responsive Adjustments
    --------------------------------------------------*/
    @media (max-width: 1200px) {
        .nabtech-container {
            padding: 0 25px;
        }
        .nabtech-section-heading {
            font-size: 3em;
        }
        .nabtech-section-subheading {
            font-size: 1.1em;
        }
        .nabtech-datacenter-text, .nabtech-hosting-text {
            min-width: 400px;
        }
        /* Adjusted for larger tablets */
        .nabtech-hosting-image {
            min-width: 380px;
            height: 380px; /* Slightly reduced for better fit */
        }
        .nabtech-datacenter-image {
            min-width: 380px;
            height: 380px; /* Slightly reduced for better fit */
        }
    }

    @media (max-width: 1024px) {
        .nabtech-section-heading {
            font-size: 2.5em;
            margin-bottom: 20px;
        }
        .nabtech-section-subheading {
            font-size: 1em;
            margin-bottom: 50px;
        }

        .nabtech-hosting-content-block {
            flex-direction: column;
            text-align: center; /* Default for the block, but text inside will be left-aligned */
            margin-bottom: 80px;
        }
        .nabtech-hosting-content-block.reverse-layout .nabtech-hosting-text {
            order: unset;
            padding-left: 0;
        }
        .nabtech-hosting-content-block.reverse-layout .nabtech-hosting-image {
            order: unset;
        }
        .nabtech-hosting-text {
            min-width: unset;
            max-width: 90%;
            width: 100%;
            margin: 0 auto;
            padding-right: 0; /* Remove right padding for stacking */
            text-align: left; /* Keep text left aligned even when stacked */
        }
        .nabtech-hosting-text h2,
        .nabtech-hosting-text p,
        .nabtech-hosting-text ul {
            text-align: left; /* Ensure text remains left-aligned */
        }
        .nabtech-hosting-image {
            min-width: unset;
            max-width: 90%;
            width: 100%;
            margin: 0 auto;
            height: auto !important; /* Let image aspect ratio dictate height */
            min-height: 250px !important; /* Ensure a minimum visible height */
        }
        .nabtech-hosting-text ul {
            grid-template-columns: 1fr; /* Stack list items */
        }
        .nabtech-tld-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .nabtech-datacenter-content {
            flex-direction: column;
            text-align: center;
        }
        .nabtech-datacenter-text {
            min-width: unset;
            max-width: 90%;
            width: 100%;
            margin: 0 auto;
            text-align: left; /* Keep text left aligned */
        }
        .nabtech-datacenter-text h2,
        .nabtech-datacenter-text p {
            text-align: left; /* Ensure text remains left-aligned */
        }
        .nabtech-datacenter-image {
            min-width: unset;
            max-width: 90%;
            width: 100%;
            margin: 0 auto;
            height: 350px !important; /* Enforce height for image visibility */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .nabtech-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            max-width: 550px;
            margin: 40px auto 0; /* Center the grid */
        }
        .nabtech-stat-item .number {
            font-size: 2.2em;
        }
        .nabtech-stat-item .label {
            font-size: 1.05em;
        }
        .nabtech-datacenter-locations {
            justify-content: center;
        }
    }

    @media (max-width: 768px) {
        .nabtech-container {
            padding: 0 20px;
        }
        .nabtech-cta-button {
            padding: 16px 40px;
            font-size: 1.1em;
        }
        .nabtech-section-heading {
            font-size: 2.2em;
            margin-bottom: 18px;
        }
        .nabtech-section-subheading {
            font-size: 1em;
            margin-bottom: 40px;
        }

        .nabtech-hosting-text h2 {
            font-size: 2.2em;
        }
        .nabtech-hosting-text p {
            font-size: 1em;
        }
        .nabtech-hosting-image {
            height: auto !important; /* Let image aspect ratio dictate height */
            min-height: 200px !important; /* Ensure a minimum visible height */
        }
        .nabtech-stats-grid {
            grid-template-columns: 1fr; /* Single column for stats on smaller screens */
            max-width: 350px;
        }
    }

    @media (max-width: 480px) {
        .nabtech-container {
            padding: 0 15px;
        }
        .nabtech-cta-button {
            padding: 14px 30px;
            font-size: 0.95em;
        }
        .nabtech-section-heading {
            font-size: 1.8em;
        }
        .nabtech-section-subheading {
            font-size: 0.9em;
            margin-bottom: 30px;
        }
        .nabtech-hosting-text h2 {
            font-size: 2em;
        }
        .nabtech-hosting-text p {
            font-size: 1em;
        }
        .nabtech-hosting-image {
            height: auto !important; /* Let image aspect ratio dictate height */
            min-height: 180px !important; /* Further reduced height for very small screens */
        }
        .nabtech-tld-item {
            font-size: 0.9em;
        }
    }