::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #0f172a;
        }
        ::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #4f46e5;
        }
        .text-gradient {
            background: linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #3b82f6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glassmorphism {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .glowing-button {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .glowing-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            background: rgba(99, 102, 241, 0.4);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease-out;
            z-index: 0;
        }
        .glowing-button:hover::after {
            transform: translate(-50%, -50%) scale(2);
        }

        /* Custom Cursor and Pointer Glow styles */
        .custom-cursor {
            width: 8px;
            height: 8px;
            background-color: #6366f1;
            border-radius: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }
        .custom-cursor-follower {
            width: 36px;
            height: 36px;
            border: 2px solid rgba(99, 102, 241, 0.4);
            border-radius: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.08s ease-out, width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s;
        }
        /* Mouse interactive spotlight background glow */
        .mouse-glow {
            position: fixed;
            width: 550px;
            height: 550px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, rgba(99, 102, 241, 0.03) 60%, transparent 100%);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 0;
            mix-blend-mode: screen;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        /* Interactive scaling on Hover */
        .cursor-active {
            width: 14px;
            height: 14px;
            background-color: #818cf8;
        }
        .follower-active {
            width: 55px;
            height: 55px;
            border-color: rgba(99, 102, 241, 0.8);
            background-color: rgba(99, 102, 241, 0.08);
        }
        @media (max-width: 768px) {
            .custom-cursor, .custom-cursor-follower, .mouse-glow {
                display: none !important;
            }
        }

        /* Profile image fade-out effect for About Section */
        .fade-bottom-mask {
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
        }

        /* Animated Neon border glow for Profile Section */
        @keyframes rotate-neon {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes pulse-glow {
            0%, 100% { filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.5)) drop-shadow(0 0 25px rgba(99, 102, 241, 0.25)); }
            50% { filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 40px rgba(99, 102, 241, 0.45)); }
        }
        .neon-border-wrapper {
            position: relative;
            padding: 4px;
            background: rgba(15, 23, 42, 0.6);
            border-radius: 28px;
            overflow: hidden;
            z-index: 1;
            animation: pulse-glow 4s infinite ease-in-out;
        }
        .neon-border-wrapper::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                from 0deg,
                transparent,
                #6366f1 25%,
                #3b82f6 50%,
                transparent 75%,
                #6366f1 100%
            );
            animation: rotate-neon 4s linear infinite;
            z-index: -2;
        }
        .neon-border-wrapper::after {
            content: '';
            position: absolute;
            inset: 3px;
            background: #0b0f19;
            border-radius: 25px;
            z-index: -1;
        }

        /* Smooth continuous horizontal marquee for testimonials */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 35s linear infinite;
        }
        .animate-marquee:hover {
            animation-play-state: paused;
        }


/* Hero profile neon ring and availability indicator */
.hero-neon-avatar { padding: 4px; isolation: isolate; }
.hero-neon-avatar::before {
    content: ""; position: absolute; inset: -4px; border-radius: 9999px; z-index: -1;
    background: conic-gradient(from 0deg, #22c55e, #06b6d4, #6366f1, #a855f7, #22c55e);
    animation: hero-neon-spin 3.5s linear infinite;
    box-shadow: 0 0 16px rgba(34,197,94,.65), 0 0 34px rgba(99,102,241,.55);
}
.hero-neon-avatar::after {
    content: ""; position: absolute; inset: 1px; border-radius: 9999px; z-index: -1; background: #0f172a;
}
.hero-avatar-inner { width: 100%; height: 100%; }
.hero-active-badge {
    position: absolute; right: -4%; bottom: 8%; display: flex; align-items: center; gap: .55rem;
    padding: .7rem .85rem; border-radius: 1rem; background: rgba(15,23,42,.94);
    border: 1px solid rgba(71,85,105,.95); box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 5;
}
.hero-active-dot {
    position: relative; width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%;
    background: #22c55e; border: 2px solid #0f172a; box-shadow: 0 0 0 4px rgba(34,197,94,.16), 0 0 18px #22c55e;
    animation: active-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-neon-spin { to { transform: rotate(360deg); } }
@keyframes active-dot-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(34,197,94,.08), 0 0 26px #22c55e; } }

.service-thumbnail-wrap, .portfolio-thumbnail-wrap { width: 100%; aspect-ratio: 2 / 1; overflow: hidden; background: #111827; }
.service-thumbnail, .portfolio-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.group:hover .service-thumbnail, .group:hover .portfolio-thumbnail { transform: scale(1.055); }
.certificate-frame { box-shadow: 0 22px 70px rgba(79,70,229,.2); }

.featured-review-card { box-shadow: 0 24px 80px rgba(245,158,11,.10), 0 0 0 1px rgba(255,255,255,.02) inset; }

/* Hero badge placement refinements */
.hero-active-badge {
    left: -4%;
    right: auto;
    top: 8%;
    bottom: auto;
}
@media (max-width: 480px) {
    .hero-active-badge { left: -2%; top: 5%; padding: .55rem .7rem; }
}


/* Full-width animated hero background */
.hero-wide-section { background: #020617; }
.hero-wide-media { position: absolute; inset: 0; overflow: hidden; }
.hero-wide-image { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hero-ken-burns 14s ease-in-out infinite alternate; will-change: transform; }
.hero-wide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,6,23,.93) 0%, rgba(2,6,23,.72) 46%, rgba(2,6,23,.30) 100%); }
.hero-wide-fade { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to bottom, transparent 0%, rgba(2,6,23,.62) 58%, #020617 100%); }
@keyframes hero-ken-burns { 0% { transform: scale(1.02); } 100% { transform: scale(1.12); } }
@media (max-width: 1023px) {
  .hero-wide-overlay { background: linear-gradient(180deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,.78) 55%, rgba(2,6,23,.92) 100%); }
  .hero-wide-image { object-position: center; }
}
@media (prefers-reduced-motion: reduce) { .hero-wide-image { animation: none; transform: scale(1.04); } }


/* Premium glass finish exclusively for the main navigation header */
.main-header-glass {
    background: linear-gradient(135deg, rgba(15,23,42,.62), rgba(15,23,42,.34));
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 38px rgba(2,6,23,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.main-header-glass::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,.08), transparent 32%, transparent 68%, rgba(99,102,241,.08));
}
.main-header-glass > * { position: relative; z-index: 1; }
@media (max-width: 640px) {
    .main-header-glass { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
}

/* Enlarged sub-header contact details and social icons */
.topbar-contact-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.topbar-contact-link i {
    transition: transform .25s ease, filter .25s ease;
}
.topbar-contact-link:hover i {
    transform: scale(1.12);
    filter: drop-shadow(0 0 8px currentColor);
}
.topbar-social-link {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: .6rem;
    transition: transform .25s ease, filter .25s ease, color .25s ease, background-color .25s ease;
}
.topbar-social-link:hover {
    transform: translateY(-1px) scale(1.12);
    filter: drop-shadow(0 0 9px currentColor);
    background: rgba(255,255,255,.04);
}
@media (min-width: 640px) {
    .topbar-social-link { width: 2.25rem; height: 2.25rem; font-size: 1.45rem; }
}
@media (max-width: 639px) {
    .topbar-contact { gap: .45rem 1rem; }
    .topbar-socials { gap: .55rem; }
}


/* Mobile viewport and hero layout corrections */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; }

/* Keep the glass header directly below a wrapping mobile contact bar. */
#main-header {
    top: var(--top-header-height, 3rem) !important;
}
#mobile-menu {
    top: calc(var(--top-header-height, 3rem) + 5rem) !important;
    height: calc(100dvh - var(--top-header-height, 3rem) - 5rem) !important;
}
body:not(:has(#top-header)) #main-header { top: 0 !important; }
body:not(:has(#top-header)) #mobile-menu {
    top: 5rem !important;
    height: calc(100dvh - 5rem) !important;
}

.hero-wide-section,
.hero-wide-media,
.hero-wide-overlay,
.hero-wide-fade {
    width: 100%;
    max-width: 100vw;
}

@media (max-width: 767px) {
    /* Hide the duplicated hero social block on phones. */
    .hero-connect { display: none !important; }

    .hero-wide-section {
        min-height: 100svh;
        min-height: 100dvh;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
    }

    .hero-wide-section > .relative.z-10 {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .hero-wide-section h1,
    .hero-wide-section h2,
    .hero-wide-section p {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .hero-wide-image {
        width: 100%;
        max-width: 100%;
        object-position: center center;
    }

    #whatsapp-widget {
        right: 1rem !important;
        bottom: 1.25rem !important;
        max-width: calc(100vw - 2rem);
    }

    #whatsapp-chat-panel {
        max-width: calc(100vw - 2rem) !important;
    }

    .topbar-contact,
    .topbar-socials,
    .main-header-glass > div {
        max-width: 100%;
    }

    #main-header .max-w-7xl {
        width: 100%;
        min-width: 0;
        gap: .5rem;
    }

    #main-header a[href="#home"] {
        min-width: 0;
        flex: 1 1 auto;
    }

    #main-header a[href="#home"] > div {
        min-width: 0;
    }

    #mobile-menu-btn {
        flex: 0 0 2.5rem;
    }

    /* Two compact cards per row on phones. */
    .services-grid .glassmorphism,
    .case-study-grid .portfolio-item {
        min-width: 0;
    }

    .services-grid .glassmorphism,
    .case-study-grid .portfolio-item {
        border-radius: 1rem;
    }

    .services-grid .glassmorphism > div:last-child {
        padding: .75rem;
        gap: .65rem;
    }

    .services-grid h4,
    .case-study-grid h4 {
        font-size: .95rem;
        line-height: 1.25rem;
        overflow-wrap: anywhere;
    }

    .services-grid p,
    .case-study-grid p {
        font-size: .75rem;
        line-height: 1.15rem;
    }

    .case-study-grid .portfolio-item > div:last-child {
        padding: .75rem;
        gap: .65rem;
    }

    .case-study-grid .portfolio-item > div:last-child > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .case-study-grid .portfolio-item > div:last-child > div:last-child {
        padding: .5rem;
        gap: .25rem;
    }

    .case-study-grid .portfolio-item > div:last-child > div:last-child span.block {
        font-size: 1rem;
        line-height: 1.35rem;
        overflow-wrap: anywhere;
    }

    .case-study-grid .portfolio-item > div:last-child > div:last-child span:not(.block) {
        font-size: .5rem;
        line-height: .7rem;
    }
}

@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}