/* ==========================================================================


   STYLE BLOCK 1 (Originally lines 49-4497 of index.html)


   ========================================================================== */


        :root {





            --bg-colors: #ffffff;





            --card-gradient: radial-gradient(circle at center, #1c2954 0%, #0c0b1a 100%);





            --text-white: #ffffff;





            --text-dim: rgba(255, 255, 255, 0.6);





            --accent-purple: #1c2954;











            --bg-color: #1c2954;





            --text-color: #ffffff;





            --accent-blue: #1c2954;





            --primary-navy: #1c2954;





            --secondary-navy: #1c2954;





            --accent-red: #ff3b30;





            --accent-glow: rgba(28, 41, 84, 0.1);





            --glass-bg: rgba(255, 255, 255, 0.05);





            --glass-border: rgba(255, 255, 255, 0.1);





            --primary: #152042;





            --gold: #D4AF37;





            --cream: #FAF6F0;





            --white: #FFFFFF;





            --dark: #1F2220;





            --gold-gradient: linear-gradient(135deg, #D4AF37, #F3E5AB, #D4AF37);





        }











        * {





            margin: 0;





            padding: 0;





            box-sizing: border-box;





            font-family: 'Inter', sans-serif;





        }











        body {





            color: var(--text-color);





            overflow-x: hidden;





            min-height: 100vh;





            padding-top: 70px !important;





        }











        /* Lenis Smooth Scroll Recommended CSS */





        html.lenis,





        html.lenis body {





            height: auto;





        }











        .lenis.lenis-smooth {





            scroll-behavior: auto !important;





        }











        .lenis.lenis-smooth [data-lenis-prevent] {





            overscroll-behavior: contain;





        }











        .lenis.lenis-stopped {





            overflow: hidden;





        }











        .lenis.lenis-smooth iframe {





            pointer-events: none;





        }











        /*   WE YOU BADGE   */


        .we-you-badge {


            display: inline-flex;


            align-items: center;


            background: #2478b5;


            color: #0a1128;


            /* Dark Navy/Black text from the crop */


            padding: 0px 6px;


            border-radius: 8px;


            font-weight: 900;


            font-size: 2.2rem;


            margin-bottom: 2rem;


            position: relative;


            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);


            z-index: 15;


            text-transform: uppercase;


            letter-spacing: 1px;


            border: 1px solid rgba(255, 255, 255, 0.1);


        }





        .we-you-badge::after {


            content: '';


            position: absolute;


            bottom: -8px;


            left: 15px;


            width: 14px;


            height: 14px;


            background: #2478b5;


            clip-path: polygon(0 0, 100% 0, 0 100%);


        }





        .we-you-badge .badge-logo {


            margin: 0 -2px;


            display: flex;


            align-items: center;


            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));


        }





        .highlight-blue {


            background: linear-gradient(90deg, #4db3ff, #b3e0ff, #4db3ff);


            background-size: 200% auto;


            -webkit-background-clip: text;


            -webkit-text-fill-color: transparent;


            animation: shimmer 3s linear infinite;


        }





        @keyframes shimmer {


            to {


                background-position: 200% center;


            }


        }





        /*   HERO CTA BUTTON   */


        .hero-cta-btn {


            display: inline-flex;


            align-items: center;


            gap: 10px;


            background: linear-gradient(135deg, #4db3ff, #2478b5);


            color: #fff;


            padding: 14px 35px;


            border-radius: 50px;


            font-size: 1.1rem;


            font-weight: 700;


            text-decoration: none;


            text-transform: uppercase;


            letter-spacing: 1px;


            box-shadow: 0 10px 25px rgba(77, 179, 255, 0.4);


            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);


            border: 1px solid rgba(255, 255, 255, 0.1);


            margin-bottom: 3rem;


        }





        .hero-cta-btn:hover {


            transform: translateY(-3px) scale(1.02);


            box-shadow: 0 15px 35px rgba(77, 179, 255, 0.6);


            background: linear-gradient(135deg, #5fc0ff, #328acc);


            color: #fff;


        }





        /*   HERO WIDGETS   */


        .hero-widget {


            position: absolute;


            background: rgba(255, 255, 255, 0.07);


            backdrop-filter: blur(12px);


            border: 1px solid rgba(255, 255, 255, 0.1);


            border-radius: 14px;


            padding: 12px;


            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);


            z-index: 10;


            pointer-events: auto;


        }





        .widget-1 {


            top: 22%;


            left: 9%;


            width: 90px;


            height: 110px;


        }





        .widget-2 {


            bottom: 18%;


            left: 9%;


            width: 150px;


            height: 80px;


        }





        .widget-pie {


            width: 40px;


            height: 40px;


            border-radius: 50%;


            background: conic-gradient(#4db3ff 0% 75%, rgba(255, 255, 255, 0.1) 75% 100%);


            margin-bottom: 10px;


        }





        .widget-dots {


            display: flex;


            align-items: flex-end;


            gap: 15px;


            height: 40px;


            padding-bottom: 5px;


        }





        .dot-node {


            width: 8px;


            height: 8px;


            border-radius: 50%;


            background: #4db3ff;


            position: relative;


        }





        .dot-node::before {


            content: '';


            position: absolute;


            bottom: 4px;


            left: 4px;


            width: 20px;


            height: 2px;


            background: #4db3ff;


            transform-origin: left center;


        }





        .dot-node:nth-child(1)::before {


            transform: rotate(-30deg);


            width: 25px;


        }





        .dot-node:nth-child(2)::before {


            transform: rotate(40deg);


            width: 25px;


        }





        .dot-node:nth-child(3)::before {


            transform: rotate(-20deg);


            width: 25px;


        }





        .dot-node:nth-child(4)::before {


            display: none;


        }





        .bg-icon {


            position: absolute;


            color: rgba(255, 255, 255, 0.12);


            font-size: 1.5rem;


            z-index: 0;


            pointer-events: none;


            animation: iconBlink 4s infinite ease-in-out;


            filter: blur(1.2px);


        }





        @keyframes iconBlink {





            0%,


            100% {


                opacity: 0.3;


                transform: scale(0.9);


            }





            50% {


                opacity: 0.8;


                transform: scale(1.1);


            }


        }





        .icon-envelope {


            top: 15%;


            left: 40%;


            animation-delay: 0s;


        }





        .icon-wifi {


            top: 10%;


            left: 55%;


            animation-delay: 1.5s;


        }





        .icon-mail {


            bottom: 10%;


            left: 45%;


            animation-delay: 2.5s;


        }





        .icon-search {


            bottom: 25%;


            left: 35%;


            animation-delay: 0.8s;


        }





        .icon-insta {


            top: 35%;


            left: 15%;


            animation-delay: 1.2s;


        }





        .icon-fb {


            top: 65%;


            left: 25%;


            animation-delay: 0.5s;


        }





        .icon-twitter {


            top: 20%;


            left: 75%;


            animation-delay: 2.1s;


        }





        .icon-linkedin {


            bottom: 35%;


            left: 45%;


            animation-delay: 1.7s;


        }





        .icon-yt {


            top: 50%;


            left: 85%;


            animation-delay: 0.3s;


        }





        .icon-wa {


            bottom: 15%;


            left: 65%;


            animation-delay: 3s;


        }





        .icon-meta {


            top: 15%;


            left: 25%;


            animation-delay: 1.9s;


        }





        .icon-behance {


            bottom: 20%;


            left: 10%;


            animation-delay: 2.7s;


        }





        .icon-tiktok {


            top: 10%;


            left: 15%;


            animation-delay: 3.2s;


            font-size: 1.2rem;


        }





        .icon-pinterest {


            bottom: 45%;


            left: 5%;


            animation-delay: 0.7s;


            font-size: 1.3rem;


        }





        .icon-snapchat {


            top: 5%;


            left: 85%;


            animation-delay: 1.1s;


            font-size: 1.1rem;


        }





        .icon-reddit {


            bottom: 5%;


            left: 15%;


            animation-delay: 2.3s;


            font-size: 1.4rem;


        }





        .icon-discord {


            top: 75%;


            left: 55%;


            animation-delay: 0.9s;


            font-size: 1.2rem;


        }





        .icon-google {


            top: 25%;


            left: 90%;


            animation-delay: 1.4s;


            font-size: 1.1rem;


        }





        .icon-slack {


            bottom: 15%;


            left: 90%;


            animation-delay: 3.5s;


            font-size: 1.3rem;


        }





        .icon-github {


            top: 45%;


            left: 35%;


            animation-delay: 0.2s;


            font-size: 1.2rem;


        }





        .icon-cloud {


            top: 85%;


            left: 35%;


            animation-delay: 1.8s;


            font-size: 1.5rem;


        }





        .icon-code {


            bottom: 25%;


            left: 75%;


            animation-delay: 2.6s;


            font-size: 1.2rem;


        }





        .icon-gear {


            top: 55%;


            left: 5%;


            animation-delay: 1.3s;


            font-size: 1.1rem;


        }





        .icon-phone {


            bottom: 45%;


            left: 95%;


            animation-delay: 0.4s;


            font-size: 1.2rem;


        }





        .icon-globe {


            top: 5%;


            left: 45%;


            animation-delay: 2.9s;


            font-size: 1.3rem;


        }





        .icon-star {


            bottom: 35%;


            left: 25%;


            animation-delay: 1.6s;


            font-size: 1rem;


        }





        .icon-apple {


            top: 40%;


            left: 8%;


            animation-delay: 0.1s;


            font-size: 1.3rem;


        }





        .icon-android {


            bottom: 60%;


            left: 12%;


            animation-delay: 1.8s;


            font-size: 1.4rem;


        }





        .icon-windows {


            top: 15%;


            left: 5%;


            animation-delay: 2.2s;


            font-size: 1.2rem;


        }





        .icon-spotify {


            bottom: 10%;


            left: 8%;


            animation-delay: 0.6s;


            font-size: 1.3rem;


        }





        .icon-twitch {


            top: 85%;


            left: 4%;


            animation-delay: 1.4s;


            font-size: 1.2rem;


        }





        .icon-vimeo {


            top: 55%;


            left: 18%;


            animation-delay: 3.1s;


            font-size: 1.1rem;


        }





        .icon-dribbble {


            bottom: 30%;


            left: 3%;


            animation-delay: 0.9s;


            font-size: 1.4rem;


        }





        .icon-quora {


            top: 30%;


            left: 22%;


            animation-delay: 2.5s;


            font-size: 1.2rem;


        }





        .icon-medium {


            bottom: 50%;


            left: 28%;


            animation-delay: 1.1s;


            font-size: 1.3rem;


        }





        .icon-stack {


            top: 70%;


            left: 10%;


            animation-delay: 0.4s;


            font-size: 1.2rem;


        }





        .icon-cpu {


            top: 45%;


            left: 2%;


            animation-delay: 2.8s;


            font-size: 1.5rem;


        }





        .icon-database {


            bottom: 20%;


            left: 22%;


            animation-delay: 1.3s;


            font-size: 1.4rem;


        }














        /* HERO SECTION — Video Background */





        .hero {


            background: #060d1f;


            position: relative;


            height: 100vh;


            width: 100%;


            display: flex;


            flex-direction: column;


            justify-content: center;


            align-items: center;


            padding: 0;


            z-index: 1;


            overflow: hidden;


        }





        .hero-video {


            position: absolute;


            inset: 0;


            width: 100%;


            height: 100%;


            object-fit: cover;


            z-index: 1;


        }





        .hero-video-mobile {


            display: none;


        }





        @media (max-width: 768px) {


            .hero-video-desktop {


                display: none;


            }





            .hero-video-mobile {


                display: block;


            }


        }





        .hero-overlay {


            position: absolute;


            inset: 0;


            background: linear-gradient(180deg, rgba(6, 13, 31, 0.45) 0%, rgba(6, 13, 31, 0.25) 40%, rgba(6, 13, 31, 0.55) 100%);


            z-index: 2;


            pointer-events: none;


        }





        .hero-glow {


            position: absolute;


            top: 20%;


            left: 50%;


            transform: translateX(-50%);


            width: 80vw;


            height: 60vh;


            background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);


            z-index: 2;


            pointer-events: none;


        }





        .hero-content {


            position: relative;


            z-index: 3;


            display: flex;


            flex-direction: column;


            align-items: center;


            text-align: center;


            padding: 2rem;


            max-width: 900px;


        }





        .hero-pill {


            display: inline-block;


            font-size: 0.7rem;


            font-weight: 900;


            letter-spacing: 0.5em;


            text-transform: uppercase;


            color: rgba(255, 255, 255, 0.5);


            margin-bottom: 1.5rem;


            border: 1px solid rgba(255, 255, 255, 0.1);


            padding: 0.5rem 1.5rem;


            border-radius: 100px;


            backdrop-filter: blur(8px);


            background: rgba(255, 255, 255, 0.04);


            opacity: 0;


            animation: heroFadeUp 0.8s 0.3s forwards;


        }





        .hero-headline {


            font-size: clamp(2.5rem, 6vw, 5.5rem);


            font-weight: 900;


            color: #fff;


            line-height: 1.05;


            letter-spacing: -2px;


            margin-bottom: 1.5rem;


            text-align: center;


            opacity: 0;


            animation: heroFadeUp 0.8s 0.5s forwards;


        }





        .hero-subtitle {


            font-size: clamp(1rem, 1.8vw, 1.15rem);


            color: rgba(255, 255, 255, 0.55);


            line-height: 1.7;


            max-width: 560px;


            margin-bottom: 2.5rem;


            opacity: 0;


            animation: heroFadeUp 0.8s 0.7s forwards;


        }





        .hero-buttons {


            display: flex;


            gap: 1rem;


            flex-wrap: wrap;


            justify-content: center;


            opacity: 0;


            animation: heroFadeUp 0.8s 0.9s forwards;


        }





        .hero-outline-btn {


            display: inline-flex;


            align-items: center;


            gap: 0.6rem;


            background: rgba(255, 255, 255, 0.08);


            backdrop-filter: blur(12px);


            color: #fff;


            font-weight: 700;


            font-size: 1rem;


            letter-spacing: 1px;


            text-transform: uppercase;


            padding: 14px 35px;


            border-radius: 50px;


            text-decoration: none;


            border: 1px solid rgba(255, 255, 255, 0.15);


            transition: all 0.3s ease;


        }





        .hero-outline-btn:hover {


            background: rgba(255, 255, 255, 0.15);


            color: #fff;


            transform: translateY(-3px);


        }





        .hero-scroll-indicator {


            position: absolute;


            bottom: 2rem;


            left: 50%;


            transform: translateX(-50%);


            z-index: 3;


            display: flex;


            flex-direction: column;


            align-items: center;


            gap: 0.5rem;


            opacity: 0;


            animation: heroFadeIn 1s 1.5s forwards;


        }





        .hero-scroll-indicator span {


            font-size: 0.6rem;


            font-weight: 700;


            letter-spacing: 0.3em;


            text-transform: uppercase;


            color: rgba(255, 255, 255, 0.3);


        }





        .hero-scroll-line {


            width: 1.5px;


            height: 30px;


            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);


            animation: scrollBounce 1.8s ease-in-out infinite;


        }





        .hero-bottom-fade {


            position: absolute;


            bottom: 0;


            left: 0;


            right: 0;


            height: 25%;


            background: linear-gradient(to top, #0d1b3e, transparent);


            pointer-events: none;


            z-index: 4;


        }





        @keyframes heroFadeUp {


            from {


                opacity: 0;


                transform: translateY(25px);


            }





            to {


                opacity: 1;


                transform: translateY(0);


            }


        }





        @keyframes heroFadeIn {


            from {


                opacity: 0;


            }





            to {


                opacity: 1;


            }


        }





        @keyframes scrollBounce {





            0%,


            100% {


                transform: translateY(0);


                opacity: 1;


            }





            50% {


                transform: translateY(8px);


                opacity: 0.4;


            }


        }











        .bg-text {





            position: absolute;





            font-size: 15vw;





            font-weight: 900;





            color: rgba(255, 255, 255, 0.03);





            white-space: nowrap;





            z-index: -1;





            pointer-events: none;





            text-transform: uppercase;





            letter-spacing: -2px;





            top: 50%;





            left: 50%;





            transform: translate(-50%, -50%);





        }











        .hero-glow-left {





            position: absolute;





            left: -10%;





            top: 20%;





            width: 40%;





            height: 60%;





            background: radial-gradient(circle, rgba(28, 41, 84, 0.1) 0%, transparent 70%);





            transform: rotate(-30deg);





            z-index: -1;





        }











        .hero-tag {





            color: var(--accent-red);





            font-weight: 700;





            font-size: 1.1rem;





            text-transform: uppercase;





            letter-spacing: 2px;





            margin-bottom: 1rem;





        }











        .hero-headline {


            font-size: clamp(3rem, 7vw, 5.8rem);


            font-weight: 900;


            text-align: left;


            max-width: 900px;


            line-height: 1.05;


            margin-bottom: 2rem;


            z-index: 10;


            position: relative;


            color: #fff;


            letter-spacing: -2px;


        }











        .highlight-yellow {





            color: #ffcc00;





        }











        .hero-headline em {





            font-family: 'Inter', sans-serif;





            font-style: italic;





            font-weight: 500;





        }











        .hero-bottom {





            position: absolute;





            bottom: 4rem;





            left: 4rem;





            right: 4rem;





            display: flex;





            justify-content: space-between;





            align-items: flex-end;





            z-index: 10;





        }











        .hero-desc-box {





            max-width: 600px;





        }











        .hero-desc-box p {





            color: rgba(255, 255, 255, 0.7);





            font-size: 1rem;





            line-height: 1.6;





            margin-bottom: 2rem;





        }











        .glass-btn {





            background: #fff;





            color: var(--primary-navy);





            padding: 1rem 2.5rem;





            border-radius: 50px;





            text-decoration: none;





            font-weight: 500;





            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);





            transition: 0.3s;





        }











        .glass-btn:hover {





            background: #f0f0f0;





            transform: scale(1.05);





        }











        .btn-outline-white {





            background: transparent;





            color: #fff;





            padding: 1rem 2.5rem;





            border-radius: 50px;





            text-decoration: none;





            font-weight: 500;





            border: 2px solid #fff;





            transition: 0.3s;





        }











        .btn-outline-white:hover {





            background: #fff;





            color: #000;





            transform: scale(1.05);





        }











        .stats-grid {





            display: flex;





            gap: 3rem;





        }











        .stat-item {





            display: flex;





            align-items: center;





            gap: 1rem;





        }











        .stat-value {





            font-size: 2.5rem;





            font-weight: 700;





            color: #fff;





        }











        .stat-label {





            font-size: 0.8rem;





            color: rgba(255, 255, 255, 0.6);





            max-width: 80px;





            line-height: 1.2;





        }











        /* INDUSTRIES BAR (Image 1 style with Image 2 content) */





        .industries-bar {





            background: #000;





            max-width: 1200px;





            margin: 0 auto;





            display: grid;





            grid-template-columns: repeat(4, 1fr);





            padding: 2.5rem 0;





            border-radius: 40px;





            position: relative;





            z-index: 20;





            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);





        }











        .industry-item {





            display: flex;





            flex-direction: column;





            align-items: center;





            text-align: center;





            position: relative;





        }











        .industry-item:not(:last-child)::after {





            content: '';





            position: absolute;





            right: 0;





            top: 15%;





            height: 70%;





            width: 1px;





            background: rgba(255, 255, 255, 0.1);





        }











        .industry-icon {





            font-size: 1.5rem;





            margin-bottom: 0.75rem;





        }











        .industry-label {





            font-size: 0.7rem;





            font-weight: 700;





            color: rgba(255, 255, 255, 0.4);





            text-transform: uppercase;





            letter-spacing: 1px;





            margin-bottom: 0.25rem;





        }











        .industry-value {





            font-size: 1.4rem;





            font-weight: 700;





            color: #fff;





        }











        /* GLOBE TRANSITION CONTAINER */





        .globe-sticky-wrapper {


            position: fixed;


            top: 0;


            left: 0;


            width: 100%;


            height: 100vh;


            pointer-events: none;


            z-index: 5;


            display: flex;


            justify-content: flex-end;


            align-items: center;


            padding-right: 5%;


            transition: opacity 0.6s ease;


        }





        @media (max-width: 768px) {


            .globe-sticky-wrapper {


                display: flex !important;


                opacity: 0.8 !important;


                /* Increased opacity to make it clearly visible */


                justify-content: center !important;


                align-items: center !important;


                /* Center vertically */


                padding-right: 0 !important;


                transform: none !important;


                z-index: 2 !important;


                /* Above hero background, behind text */


                position: absolute !important;


                /* Contain it to the hero area */


                top: 0 !important;


                left: 0 !important;


                width: 100% !important;


                height: 100vh !important;


                overflow: hidden !important;


                /* Don't spill into services */


            }





            .globe-container {


                margin-right: 0 !important;


                width: 108vw !important;


                /* Make it a little bit bigger */


                height: 108vw !important;


                flex-shrink: 0 !important;


                /* Prevents it from squishing into an oval */


                margin-top: -5vh !important;


                /* Adjust shift since it's smaller */


            }


        }











        .globe-container {


            width: 850px;


            height: 850px;


            pointer-events: auto;


            position: relative;


            margin-right: -150px;


            opacity: 0.9;


        }











        canvas {





            width: 100% !important;





            height: 100% !important;





        }











        /* ABOUT US ZOOM SECTION */





        /* * {





            margin: 0;





            padding: 0;





            box-sizing: border-box;





        } */











        .au-wrap {





            position: relative;





            background: linear-gradient(180deg, #f8fafc 0%, #edf1f8 20%, #edf1f8 80%, #ffffff 100%);





            min-height: auto;


            /* Changed to auto to eliminate extra space */





            display: flex;





            flex-direction: column;





            align-items: center;





            padding: 8vh 0 40px;


            /* Reduced from 15vh and 100px */





            /* Added bottom padding for space */





            font-family: 'Inter', sans-serif;





            overflow: hidden;





            z-index: 10;





        }











        .au-watermark {





            position: absolute;





            top: 54%;





            left: 50%;





            transform: translate(-50%, -50%);





            font-size: clamp(5rem, 15vw, 14rem);





            font-weight: 900;





            color: rgba(0, 0, 0, 0.12);





            letter-spacing: 0.2em;





            white-space: nowrap;





            pointer-events: none;





            user-select: none;





            z-index: 0;





        }











        .au-text {





            position: relative;





            z-index: 10;





            text-align: center;





            max-width: 1000px;





            padding: 0 20px;





            margin-bottom: 28px;





        }











        .au-text h1 {





            font-size: clamp(2.6rem, 6vw, 4.6rem);





            font-weight: 800;





            color: #111;





            line-height: 1.08;





            letter-spacing: -0.03em;





        }











        .au-text p {





            font-size: clamp(0.95rem, 1.5vw, 1.05rem);





            color: #666;





            margin-top: 18px;





            line-height: 1.75;





        }











        .au-btn {





            display: inline-block;





            margin-top: 20px;





            background: #111;





            color: #fff;





            padding: 15px 36px;





            border-radius: 999px;





            font-size: 0.97rem;





            font-weight: 600;





            text-decoration: none;





            transition: transform 0.2s;





            position: relative;





            z-index: 10;





        }











        .au-btn:hover {





            transform: scale(1.04);





        }











        /*   ARC CAROUSEL WRAPPER   */





        .au-cards-outer {





            position: relative;





            z-index: 10;





            width: 100%;





            margin-top: 190px;





            padding-bottom: 100px;





            overflow: hidden;





            height: 400px;





        }











        /* Fade edges */





        .au-cards-outer::before,





        .au-cards-outer::after {





            content: '';





            position: absolute;





            top: 0;





            width: 22%;





            height: 100%;





            z-index: 5;





            pointer-events: none;





        }











        .au-cards-outer::before {





            left: 0;





            background: linear-gradient(to right, #edf1f8 20%, rgba(237, 241, 248, 0.5) 60%, transparent 100%);





        }











        .au-cards-outer::after {





            right: 0;





            background: linear-gradient(to left, #edf1f8 20%, rgba(237, 241, 248, 0.5) 60%, transparent 100%);





        }











        /* Arc track - JS will move this */





        .au-marquee-track {





            display: flex;





            align-items: flex-start;





            gap: 36px;





            width: max-content;





            position: absolute;





            top: 0;





            left: 0;





            will-change: transform;





        }











        .au-card {





            border-radius: 22px;





            overflow: hidden;





            flex-shrink: 0;





            width: 230px;





            height: 300px;





            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);





            transition: box-shadow 0.3s ease;





            /* arc transform applied by JS */





            transform-origin: bottom center;





            will-change: transform, opacity;





        }











        .au-card img {





            display: block;





            width: 100%;





            height: 100%;





            object-fit: cover;





            object-position: top;





        }























        /* body {





            font-family: 'Inter', sans-serif;





            background: var(--bg-blue);





            color: var(--white);





            overflow-x: hidden;





        } */











        h1,





        h2,





        h3,





        h4 {





            font-family: 'Inter', sans-serif;





        }

















        /* SECTION */











        .slider-section {





            background: #ffffff;





            font-family: 'Inter', sans-serif;





            color: #111;





            padding: 0 0 60px 0;





            /* removed top padding to fix gap */





            overflow: hidden;





            margin-top: -30px;





            /* slight pull up */





        }











        /* WRAPPER */





        .slider-wrapper {





            overflow: hidden;





        }











        /* TRACK */





        .slider-track {





            display: flex;





            gap: 25px;





            transition: transform 0.8s ease-in-out;





        }











        /* CARD */





        .card-box {





            min-width: 300px;





            max-width: 300px;





            padding: 15px;





            border-radius: 20px;





            background: #ffffff;





            border: 1px solid #eee;





            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);





            position: relative;





            transition: 0.3s;





        }











        .card-box:hover {





            transform: translateY(-8px);





        }











        /* IMAGE */





        .card-box img {





            width: 100%;





            height: 220px;





            object-fit: cover;





            border-radius: 15px;





        }











        /* CENTER BUTTON */





        .arrow-btn {





            position: absolute;





            top: 50%;





            left: 50%;





            transform: translate(-50%, -50%);





            background: transparent;


            /* Removed yellow/gold background */





            color: #fff;





            width: 50px;





            height: 50px;





            display: flex;





            align-items: center;





            justify-content: center;





            font-size: 30px;


            /* Larger icon since the circle is gone */





            opacity: 0;





            transition: all 0.4s ease;





            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);





            z-index: 2;





        }











        .card-box:hover .arrow-btn {





            opacity: 1;





            transform: translate(-50%, -70%);


            /* Slight upward motion on hover */





        }











        /* TEXT */





        .card-box h5 {





            margin-top: 15px;





            font-size: 16px;





            font-weight: 500;





        }











        /* TAG */





        .tag {





            font-size: 12px;





            padding: 5px 12px;





            border-radius: 50px;





            border: 1px solid #1c2954;





            color: #ffffff;





            display: inline-block;





            margin-top: 8px;





            background-color: #1c2954;





        }











        /* RESPONSIVE */





        @media(max-width:768px) {





            .card-box {





                min-width: 250px;





            }





        }











        @media(max-width:480px) {





            .card-box {





                min-width: 220px;





            }





        }











        /*   Premium CTA Section Redesign   */





        .cta-premium-wrap {





            padding: 80px 0;





            background: #fff;





        }











        .cta-premium-card {





            background: radial-gradient(circle at center, #1c2954 0%, #111d42 100%);





            border-radius: 60px;





            padding: 80px 40px;





            text-align: center;





            border: 1px solid rgba(255, 255, 255, 0.1);





            position: relative;





            overflow: hidden;





        }











        /* Subtle mesh background effect */





        .cta-premium-card::before {





            content: "";





            position: absolute;





            top: 0;





            left: 0;





            right: 0;





            bottom: 0;





            /* background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); */





            opacity: 0.1;





            pointer-events: none;





        }











        .cta-pill {





            display: inline-block;





            padding: 8px 18px;





            border-radius: 100px;





            background: rgba(255, 255, 255, 0.05);





            border: 1px solid rgba(255, 255, 255, 0.15);





            color: rgba(255, 255, 255, 0.8);





            font-size: 0.85rem;





            letter-spacing: 1px;





            text-transform: uppercase;





            margin-bottom: 30px;





        }











        .cta-main-title {





            color: #fff;





            font-size: clamp(2.5rem, 5vw, 4rem);





            font-weight: 500;





            margin-bottom: 25px;





            line-height: 1.1;





            font-family: 'Inter', sans-serif;





        }











        .cta-main-title em {





            font-family: 'Inter', sans-serif;





            font-style: italic;





            font-weight: 400;





            color: rgba(255, 255, 255, 0.95);





        }











        .cta-subtext {





            color: rgba(255, 255, 255, 0.6);





            max-width: 600px;





            margin: 0 auto 45px;





            font-size: 1.1rem;





            line-height: 1.6;





        }











        .cta-btns-group {





            display: flex;





            align-items: center;





            justify-content: center;





            gap: 25px;





            flex-wrap: wrap;





        }











        .cta-btn-main {





            display: flex;





            align-items: center;





            gap: 15px;





            background: #ffffff;





            color: #000000;





            padding: 18px 40px;





            border-radius: 100px;





            font-weight: 600;





            text-decoration: none;





            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);





            box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);





            border: 1px solid rgba(0, 0, 0, 0.1);





        }











        .cta-btn-main:hover {





            transform: translateY(-5px) scale(1.02);





            box-shadow: 0 20px 45px rgba(255, 255, 255, 0.4);





            color: #000000;





        }











        .cta-btn-arrow {





            width: 32px;





            height: 32px;





            background: rgba(0, 0, 0, 0.08);





            border-radius: 50%;





            display: flex;





            align-items: center;





            justify-content: center;





            font-size: 0.9rem;





            transition: transform 0.3s ease;





        }











        .cta-btn-main:hover .cta-btn-arrow {





            transform: rotate(45deg);





        }











        .cta-link-book {





            display: flex;





            align-items: center;





            gap: 10px;





            color: rgba(255, 255, 255, 0.9);





            text-decoration: none;





            font-weight: 500;





            transition: 0.3s;





        }











        .cta-link-book i {





            font-size: 1.2rem;





            color: rgba(255, 255, 255, 0.5);





        }











        .cta-link-book:hover {





            color: #fff;





        }











        @media (max-width: 768px) {





            .cta-premium-card {





                padding: 60px 30px;





                border-radius: 40px;





            }











            .cta-main-title {





                font-size: 2.2rem;





            }











            .cta-btns-group {





                flex-direction: column;





            }





        }

















        /* testimonial */





        .body-test {





            font-family: 'Inter', sans-serif;





            background: var(--white);





            color: var(--dark);





            /* overflow-x: hidden; */


            /* Removed to ensure sticky works correctly */





        }











        .spacer {





            height: 100vh;





            display: flex;





            margin-top: 36px;





            position: relative;





            z-index: 5;





        }











        .cube-dot {





            width: 10px;





            height: 10px;





            border-radius: 50%;





            background: rgba(212, 175, 55, 0.25);





            border: 1.5px solid rgba(212, 175, 55, 0.4);





            transition: all 0.4s ease;





            cursor: pointer;





        }











        .cube-dot.active {





            background: var(--gold);





            transform: scale(1.35);





            box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);





        }











        /*   scroll progress thin bar   */





        .scroll-progress-bar {





            position: fixed;





            top: 0;





            left: 0;





            height: 3px;





            background: var(--gold-gradient);





            z-index: 999;





            width: 0%;





            transition: width 0.1s linear;





        }











        /*   face counter label   */





        .face-counter {





            position: relative;





            z-index: 5;





            margin-top: 18px;





            font-size: 0.78rem;





            letter-spacing: 3px;





            text-transform: uppercase;





            color: rgba(212, 175, 55, 0.5);





        }











        /*   responsive   */





        @media (max-width: 600px) {











            .cube,





            .cube-face {





                width: 328px;





                height: 396px;





            }











            .face-front {





                transform: rotateX(0deg) translateZ(160px);





            }











            .face-bottom {





                transform: rotateX(-90deg) translateZ(160px);





            }











            .face-back {





                transform: rotateX(-180deg) translateZ(160px);





            }











            .face-top {





                transform: rotateX(-270deg) translateZ(160px);





            }











            .review-text {





                font-size: 0.95rem;





            }





        }











        @media (max-width: 400px) {











            .cube,





            .cube-face {





                width: 282px;





                height: 394px;





            }





        }











        /*   Desktop Centering for Review Cube   */





        @media (min-width: 992px) {





            .cube-wrapper {





                margin: 0 auto;





                display: flex;





                flex-direction: column;





                align-items: center;





                justify-content: center;





            }





        }











        /*   Slanted Ribbon Marquee   */





        .ribbon-marquee-container {





            width: 133vw;





            position: relative;





            left: 26%;





            right: 50%;





            margin-left: -50vw;





            margin-right: -50vw;





            overflow: hidden;





            padding-top: 40px;


            padding-bottom: 40px;





            /* Reduced to minimize large gaps */





            background: #fff;





            z-index: 10;





        }











        .ribbon-wrapper {





            position: relative;





            width: 160%;





            height: 160px;





            left: -30%;





            display: flex;





            align-items: center;





            justify-content: center;





        }











        .ribbon {





            display: flex;





            width: 100%;





            white-space: nowrap;





            padding: 25px 0;





            position: absolute;





            top: 50%;





            left: 0;





            transform-origin: center;





        }











        .ribbon-1 {





            background: #1c2954;





            transform: translateY(-50%) rotate(-5deg);





            z-index: 2;





            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);





        }











        .ribbon-2 {





            background: #2a3a6a;





            transform: translateY(-50%) rotate(5deg);





            z-index: 1;





        }











        .marquee-content {





            display: flex;





            animation: marqueeRotate 40s linear infinite;





        }











        .ribbon-item {





            display: flex;





            align-items: center;





            font-size: 2.2rem;





            font-weight: 800;





            color: #fff;





            padding: 0;





            text-transform: uppercase;





            letter-spacing: 2px;





        }











        .ribbon-item i {





            margin: 0 60px;





            font-size: 1.8rem;





            color: rgba(255, 255, 255, 0.4);





        }











        @keyframes marqueeRotate {





            0% {





                transform: translateX(0);





            }











            100% {





                transform: translateX(-50%);





            }





        }











        @media (max-width: 768px) {





            .ribbon-marquee-container {


                padding: 80px 0 !important;


            }











            .ribbon-wrapper {





                height: 100px;





            }











            .ribbon-item {





                font-size: 1.3rem;





                padding: 0 25px;





            }











            .ribbon {





                padding: 15px 0;





            }





        }











        /*   CARD STACK SECTION   */











        /*   CARD STACK SECTION   */





        .body-serv {





            background-color: var(--bg-colors);





            color: var(--text-white);





            font-family: 'Inter', sans-serif;





            overflow-x: hidden;





            padding-top: 0;


            /* Completely removed top padding */





        }





        .body-serv h2 {


            margin-top: 0;


            margin-bottom: 20px;


            /* Decreased gap below */


        }











        .serv-stack-section {





            position: relative;





            width: 100%;





            /* Total height for pinning - controlled by GSAP, but good to have a base */





            min-height: 100vh;





            overflow: hidden;





        }











        .serv-stack-container {





            position: relative;





            width: 100%;





            height: 100vh;





            display: flex;





            align-items: center;





            justify-content: center;





        }











        /* Each card container */





        .serv-card-wrapper {





            position: absolute;





            width: 96%;





            max-width: 1400px;





            height: 75vh;





            perspective: 1000px;





            transform-style: preserve-3d;





        }











        .serv-card-item {





            width: 100%;





            height: 100%;





            background: var(--card-gradient);





            border-radius: 40px;





            border: 1px solid rgba(255, 255, 255, 0.1);





            /* padding: 60px; */





            display: grid;





            grid-template-columns: 1fr 2fr;





            gap: 40px;





            align-items: center;





            overflow: hidden;





            backdrop-filter: blur(10px);





            position: relative;





            /* Precise initial state as requested */





            opacity: 1;





            transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);





            transform-style: preserve-3d;





        }











        /* Mesh overlay */





        .serv-card-item::after {





            content: "";





            position: absolute;





            inset: 0;





            background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');





            opacity: 0.05;





            pointer-events: none;





        }











        /*   CARD CONTENT STYLES   */





        .serv-card-left {





            z-index: 2;





            padding-left: 60px;





        }











        .serv-card-badge {





            display: inline-flex;





            align-items: center;





            gap: 10px;





            color: var(--text-dim);





            font-weight: 600;





            font-size: 0.9rem;





            margin-bottom: 20px;





        }











        .serv-badge-dot {





            width: 8px;





            height: 8px;





            background: #8b5cf6;





            border-radius: 50%;





            box-shadow: 0 0 10px #8b5cf6;





        }











        .serv-card-title {





            font-size: clamp(2rem, 4vw, 3.5rem);





            font-weight: 700;





            margin-bottom: 30px;





            line-height: 1.1;





        }











        .serv-card-desc {





            color: var(--text-dim);





            font-size: 1.1rem;





            line-height: 1.6;





            max-width: 450px;





        }











        /* Center Mockup */





        .serv-card-center {





            display: flex;





            justify-content: center;





            z-index: 1;





        }











        .serv-mockup-container {





            width: 100%;





            max-width: 600px;





            height: 550px;





            border-radius: 24px;





            background: rgba(255, 255, 255, 0.03);





            border: 1px solid rgba(255, 255, 255, 0.1);





            overflow: hidden;





            display: flex;





            align-items: center;





            justify-content: center;





            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);





        }














        .serv-mockup-container video {


            width: 100%;


            height: 100%;


            object-fit: cover;


        }





        .serv-mockup-container img,


        .serv-mockup-container video {





            width: 100%;





            height: 100%;





            object-fit: cover;





            transition: transform 0.8s ease;





        }











        .serv-card-item:hover .serv-mockup-container video {


            width: 100%;


            height: 100%;


            object-fit: cover;


        }





        .serv-mockup-container img {





            transform: scale(1.05);





        }











        /* Right Content */





        .serv-card-right {





            text-align: right;





            display: flex;





            flex-direction: column;





            gap: 40px;





            z-index: 2;





        }











        .serv-services-list {





            display: flex;





            flex-direction: column;





            align-items: flex-end;





            gap: 15px;





        }











        .serv-service-label {





            font-size: 1.2rem;





            font-weight: 600;





            margin-bottom: 5px;





        }











        .serv-pill-group {





            display: flex;





            gap: 10px;





            flex-wrap: wrap;





            justify-content: flex-end;





        }











        .serv-pill {





            padding: 8px 18px;





            border-radius: 100px;





            background: rgba(255, 255, 255, 0.05);





            border: 1px solid rgba(255, 255, 255, 0.1);





            font-size: 0.85rem;





            color: var(--text-white);





            font-weight: 500;





        }











        .serv-stats-group {





            display: flex;





            justify-content: flex-end;





            gap: 40px;





        }











        .serv-stat-box {





            display: flex;





            flex-direction: column;





            gap: 10px;





        }











        .serv-stat-label {





            font-size: 0.9rem;





            color: var(--text-dim);





            font-weight: 500;





        }











        .serv-stat-value {





            font-size: 2.2rem;





            font-weight: 800;





            letter-spacing: -1px;





        }











        /*   MOBILE & TABLET RESPONSIVE   */





        @media (max-width: 1024px) {


            .body-serv {


                background-color: #0d1b3e !important;


                color: #ffffff !important;


                padding: 60px 0 !important;


            }





            .body-serv h2.text-dark {


                color: #ffffff !important;


            }





            .serv-stack-section {


                background-color: #0d1b3e !important;


            }





            .serv-stack-container {


                height: auto;


                display: block;


                /* Turns off flex centering to unstack */


                padding: 40px 0 10px 0;


            }





            .serv-card-wrapper {


                position: relative;


                /* Critical: Unstacks the cards entirely */


                height: auto;


                min-height: unset;


                width: 92%;


                margin: 0 auto 20px auto;


                transform: none !important;


                /* Block any residual GSAP styles */


                opacity: 1 !important;


            }











            .serv-card-item {


                grid-template-columns: 1fr;


                grid-template-rows: auto auto auto;


                padding: 20px 15px;


                gap: 15px;


                text-align: center;


                height: 100%;


                min-height: unset;


                border-radius: 25px;


                transform: none !important;


                /* Block any residual GSAP styles */


                opacity: 1 !important;


                background: #1c2954 !important;


                border: 1px solid rgba(255, 255, 255, 0.1) !important;


                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;


            }





            .serv-card-left {


                padding-left: 0 !important;


                text-align: center !important;


                display: flex;


                flex-direction: column;


                align-items: center;


            }





            .serv-card-title {


                font-size: 1.8rem;


                margin-bottom: 10px;


                color: #ffffff !important;


            }





            .serv-card-desc {


                font-size: 0.9rem;


                margin: 0 auto;


                line-height: 1.4;


                color: rgba(255, 255, 255, 0.8) !important;


            }





            .serv-card-badge {


                color: rgba(255, 255, 255, 0.6) !important;


            }











            .serv-card-right,





            .serv-services-list,





            .serv-pill-group,





            .serv-stats-group {





                text-align: center;





                align-items: center;





                justify-content: center;





            }











            .serv-card-right {





                gap: 20px;





                /* Tighter gap between lists and stats */





            }











            .serv-mockup-container {





                height: 180px;





                /* Much smaller so it doesn't push content off-screen */





                max-width: 220px;





                margin: 0 auto;





            }











            .serv-pill {





                padding: 6px 14px;





                font-size: 0.75rem;





            }











            .serv-stat-value {





                font-size: 1.5rem;





            }











            .serv-stats-group {





                gap: 20px;





            }











            .serv-service-label {





                font-size: 1rem;





            }





        }









/* ==========================================================================


   STYLE BLOCK 2 (Originally lines 4525-4772 of index.html)


   ========================================================================== */


        .hero-royal {


            background-color: #0d1a3d;


            min-height: 88vh;


            display: flex;


            align-items: center;


            position: relative;


            padding: 90px 0 120px;


            overflow: hidden;


            color: #ffffff;


        }





        /* Cinematic bottom-fade: DISABLED */


        .hero-royal::after {


            display: none;


        }





        .hero-royal .container {


            position: relative;


            z-index: 5;


        }





        .hero-royal-content {


            max-width: 650px;


        }





        .hero-royal-h1 {


            font-size: clamp(32px, 5vw, 64px);


            font-weight: 800;


            line-height: 1.1;


            margin-bottom: 25px;


            font-family: 'Bodoni Moda', serif;


        }





        .hero-royal-h1 span {


            color: #4dbfff;


            /* Light blue accent */


        }





        .hero-royal-p {


            font-size: clamp(16px, 1.2vw, 19px);


            line-height: 1.6;


            color: rgba(255, 255, 255, 0.85);


            margin-bottom: 35px;


            max-width: 580px;


            font-family: 'Bodoni Moda', serif;


        }





        .hero-royal-btns {


            display: flex;


            gap: 20px;


            flex-wrap: wrap;


            margin-bottom: 50px;


        }





        .btn-royal-primary {


            background-color: #0d1a3d;


            /* Dark base color */


            color: #fff;


            padding: 15px 35px;


            border-radius: 50px;


            font-family: 'Bodoni Moda', serif;


            font-weight: 700;


            text-decoration: none;


            transition: all 0.5s ease;


            display: inline-flex;


            align-items: center;


            justify-content: center;


            border: 2px solid #0088ff;


            position: relative;


            overflow: hidden;


            z-index: 1;


        }





        .btn-royal-primary::before {


            content: '';


            position: absolute;


            top: 100%;


            left: 50%;


            width: 250px;


            height: 250px;


            background: #0088ff;


            border-radius: 40%;


            transform: translate(-50%, 0);


            transition: all 0.8s ease;


            z-index: -1;


            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);


        }





        .btn-royal-primary:hover {


            color: #fff;


            transform: translateY(-3px);


            box-shadow: 0 10px 25px rgba(0, 136, 255, 0.4);


        }





        .btn-royal-primary:hover::before {


            top: -80px;


            transform: translate(-50%, -50%) rotate(360deg);


        }





        .btn-royal-whatsapp {


            background-color: transparent;


            color: #fff;


            padding: 15px 30px;


            border-radius: 50px;


            font-family: 'Bodoni Moda', serif;


            font-weight: 600;


            text-decoration: none;


            transition: all 0.3s ease;


            display: inline-flex;


            align-items: center;


            gap: 10px;


            border: 2px solid rgba(255, 255, 255, 0.3);


        }





        .btn-royal-whatsapp:hover {


            background-color: rgba(255, 255, 255, 0.1);


            border-color: #fff;


            color: #fff;


            animation: wobble 0.6s ease;


        }





        .btn-royal-whatsapp i {


            color: #25D366;


            /* WhatsApp Green */


            font-size: 20px;


        }





        .hero-royal-footer {


            display: flex;


            align-items: center;


            gap: 15px;


            font-size: 15px;


            color: rgba(255, 255, 255, 0.7);


            flex-wrap: wrap;


        }





        .hero-royal-footer i {


            color: #0088ff;


            font-size: 18px;


        }





        .hero-royal-footer .separator {


            opacity: 0.3;


            margin: 0 5px;


        }





        .hero-royal-image {


            position: relative;


            display: flex;


            justify-content: center;


            align-items: center;


        }





        .hero-royal-image img {


            width: 125%;


            max-width: 125%;


            /* Fill the column and expand */


            height: auto;


            animation: float 6s ease-in-out infinite;


        }





        /* Navbar Fixes for Dark Hero */


        .gnav:not(.scrolled) .talk-btn {


            border-color: rgba(255, 255, 255, 0.4) !important;


            color: #ffffff !important;


        }





        .gnav:not(.scrolled) .talk-arrow {


            background: #ffffff !important;


            color: #0d1a3d !important;


        }





        .gnav:not(.scrolled) .logo-pill {


            background: rgba(255, 255, 255, 0.1) !important;


            backdrop-filter: blur(10px);


            border: 1px solid rgba(255, 255, 255, 0.2);


        }





        @keyframes wobble {


            0% {


                transform: translateX(0%);


            }





            15% {


                transform: translateX(-5px) rotate(-5deg);


            }





            30% {


                transform: translateX(4px) rotate(3deg);


            }





            45% {


                transform: translateX(-3px) rotate(-3deg);


            }





            60% {


                transform: translateX(2px) rotate(2deg);


            }





            75% {


                transform: translateX(-1px) rotate(-1deg);


            }





            100% {


                transform: translateX(0%);


            }


        }





        @keyframes float {





            0%,


            100% {


                transform: translateY(0);


            }





            50% {


                transform: translateY(-20px);


            }


        }





        /* Responsive Fixes */


        @media (max-width: 991px) {


            .hero-royal {


                padding: 140px 0 80px;


                text-align: center;


            }





            .hero-royal-content {


                margin: 0 auto;


            }





            .hero-royal-btns {


                justify-content: center;


            }





            .hero-royal-footer {


                justify-content: center;


            }





            .hero-royal-image {


                margin-top: 60px;


            }





            .hero-royal-image img {


                width: 120%;


                max-width: 120%;


            }


        }
























































/* ==========================================================================


   contact.html - Style Block 1


   ========================================================================== */





    /*  





       CONTACT PAGE - REDESIGNED





      */





    html, body { overflow-x: clip; max-width: 100%; }





    .hero-section {





        height: 45vh;





        min-height: 350px;





    }











    /*   Contact Section Layout   */





    .contact-section {





        max-width: 1280px;





        margin: 20px auto 0;





        padding: 0 clamp(20px, 4vw, 60px);





        display: grid;





        grid-template-columns: 1fr 1.1fr;





        gap: 50px;





        align-items: start;





    }











    /*   LEFT: Info Side   */





    .contact-info {





        padding: 10px 0;





    }





    .contact-info h2 {





        font-family: 'Inter', sans-serif;





        font-weight: 900;





        font-size: clamp(2.2rem, 4vw, 3rem);





        color: #111111;





        letter-spacing: -0.03em;





        margin-bottom: 14px;





    }





    .contact-info .info-desc {





        font-family: 'Inter', sans-serif;





        font-size: 0.95rem;





        color: rgba(17,17,17,0.6);





        line-height: 1.7;





        margin-bottom: 40px;





        max-width: 420px;





    }











    /* Contact Detail Cards Grid */





    .contact-details-grid {





        display: grid;





        grid-template-columns: 1fr 1fr;





        gap: 28px;





        margin-bottom: 44px;


        margin-top: 90px;





    }





    .contact-detail-item {





        display: flex;





        align-items: flex-start;





        gap: 14px;





    }





    .contact-detail-icon {





        width: 48px;





        height: 48px;





        border-radius: 14px;





        background: #FFB800;





        display: flex;





        align-items: center;





        justify-content: center;





        flex-shrink: 0;





        box-shadow: 0 4px 15px rgba(255, 184, 0, 0.2);





    }





    .contact-detail-icon svg {





        width: 22px;





        height: 22px;





        stroke: #111111;





        fill: none;





        stroke-width: 2;





        stroke-linecap: round;





        stroke-linejoin: round;





    }





    .contact-detail-icon i {





        color: #111111;





        font-size: 1.4rem;





    }





    .contact-detail-text h4 {





        font-family: 'Inter', sans-serif;





        font-weight: 700;





        font-size: 1rem;





        color: #111111;





        margin-bottom: 3px;





    }





    .contact-detail-text p {





        font-family: 'Inter', sans-serif;





        font-size: 0.85rem;





        color: rgba(17,17,17,0.55);





        margin: 0;





        line-height: 1.5;





    }





    .contact-detail-text a {





        text-decoration: none;





        color: rgba(17,17,17,0.55);





        transition: color 0.3s;





    }





    .contact-detail-text a:hover {





        color: #FFB800;





    }











    /* Social Media */





    .social-section {





        display: flex;





        align-items: center;





        gap: 18px;





    }





    .social-label {





        font-family: 'Inter', sans-serif;





        font-weight: 700;





        font-size: 1rem;





        color: #111111;





    }





    .social-icons {





        display: flex;





        gap: 12px;





    }





    .social-icons a {





        width: 40px;





        height: 40px;





        border-radius: 50%;





        background: #111111;





        display: flex;





        align-items: center;





        justify-content: center;





        transition: background 0.3s, transform 0.3s;





    }





    .social-icons a:hover {





        background: #FFB800;





        transform: translateY(-3px);





    }





    .social-icons a svg {





        width: 18px;





        height: 18px;





        fill: #ffffff;





    }











    /*   RIGHT: Form Side   */





    .contact-form-card {





        background: #f4f8fc;





        border-radius: 20px;





        padding: clamp(30px, 4vw, 44px);





        border: 1px solid rgba(0,86,179,0.08);





    }





    .contact-form-card .form-row {





        display: grid;





        grid-template-columns: 1fr 1fr;





        gap: 20px;





        margin-bottom: 20px;





    }





    .contact-form-card .form-row.full {





        grid-template-columns: 1fr;





    }





    .contact-form-card .form-group {





        display: flex;





        flex-direction: column;





    }





    .contact-form-card .form-group label {





        font-family: 'Inter', sans-serif;





        font-size: 0.78rem;





        font-weight: 600;





        color: rgba(17,17,17,0.7);





        margin-bottom: 7px;





        letter-spacing: 0.3px;





    }





    .contact-form-card .form-group input,





    .contact-form-card .form-group textarea {





        background: #ffffff;





        border: 1.5px solid rgba(0,86,179,0.15);





        border-radius: 10px;





        padding: 13px 16px;





        font-family: 'Inter', sans-serif;





        font-size: 0.9rem;





        color: #111111;





        outline: none;





        transition: border-color 0.25s, box-shadow 0.25s;





        width: 100%;





    }





    .contact-form-card .form-group input::placeholder,





    .contact-form-card .form-group textarea::placeholder {





        color: rgba(17,17,17,0.35);





    }





    .contact-form-card .form-group input:focus,





    .contact-form-card .form-group textarea:focus {





        border-color: #0056b3;





        box-shadow: 0 0 0 3px rgba(0,86,179,0.1);





    }





    .contact-form-card .form-group textarea {





        resize: none;





        height: 120px;





    }





    .contact-submit-btn {





        margin-top: 10px;





        display: inline-flex;





        align-items: center;





        gap: 10px;





        background-color: #e0e0e0;





        border-radius: 50px;





        box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;





        color: #4d4d4d;





        cursor: pointer;





        font-family: 'Inter', sans-serif;





        font-weight: 700;





        font-size: 18px;





        letter-spacing: 1px;





        text-transform: uppercase;





        padding: 15px 40px;





        transition: all 0.2s ease-in-out;





        border: 2px solid rgb(206, 206, 206);





    }





    .contact-submit-btn:hover {





        box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;





        color: #4d4d4d;





    }





    .contact-submit-btn:focus {





        outline: none;





        box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;





    }





    .contact-submit-btn .btn-arrow {





        width: 28px;





        height: 28px;





        background: #4d4d4d;





        border-radius: 50%;





        display: flex;





        align-items: center;





        justify-content: center;





        transition: background 0.2s;





    }





    .contact-submit-btn:hover .btn-arrow {





        background: #333333;





    }





    .contact-submit-btn .btn-arrow svg {





        width: 14px;





        height: 14px;





        stroke: #ffffff;





        fill: none;





        stroke-width: 2.5;





        stroke-linecap: round;





        stroke-linejoin: round;





    }











    /* Success state */





    .contact-success {





        display: none;





        flex-direction: column;





        align-items: center;





        justify-content: center;





        text-align: center;





        padding: 60px 20px;





    }





    .contact-success.show {





        display: flex;





    }





    .contact-success .success-icon {





        width: 64px;





        height: 64px;





        border-radius: 50%;





        background: #FFB800;





        display: flex;





        align-items: center;





        justify-content: center;





        margin-bottom: 18px;





        box-shadow: 0 8px 24px rgba(255, 184, 0, 0.3);





    }





    .contact-success .success-icon svg {





        width: 28px;





        height: 28px;





        stroke: #111111;





        fill: none;





        stroke-width: 2.5;





    }





    .contact-success h3 {





        font-family: 'Inter', sans-serif;





        font-weight: 800;





        font-size: 1.5rem;





        color: #111111;





        margin-bottom: 8px;





    }





    .contact-success p {





        font-family: 'Inter', sans-serif;





        color: rgba(17,17,17,0.6);





        font-size: 0.9rem;





    }











    /*   MAP SECTION   */





    .contact-map-section {





        max-width: 1280px;





        margin: 60px auto 80px;





        padding: 0 clamp(20px, 4vw, 60px);





    }





    .contact-map-wrap {





        width: 100%;





        height: 380px;





        border-radius: 20px;





        overflow: hidden;





        box-shadow: 0 10px 40px rgba(0,0,0,0.08);





        border: 1px solid rgba(0,86,179,0.08);





    }





    .contact-map-wrap iframe {





        width: 100%;





        height: 100%;





        border: 0;





        display: block;





    }











    /*   Responsive   */





    @media (max-width: 900px) {





        .contact-section {





            grid-template-columns: 1fr;





            gap: 40px;





            margin: 40px auto 0;





        }





        .contact-map-wrap {





            height: 300px;





        }





    }





    @media (max-width: 600px) {





        .contact-details-grid {





            grid-template-columns: 1fr;





            gap: 22px;





        }





        .contact-form-card .form-row {





            grid-template-columns: 1fr;





        }





        .contact-section {





            padding: 0 16px;





            width: 100%;





            box-sizing: border-box;





        }





        .contact-form-card {





            width: 100%;





            box-sizing: border-box;





            overflow: hidden;


                    width: 350px;





        }





        .contact-form-card .form-group input,





        .contact-form-card .form-group textarea {





            width: 100%;





            box-sizing: border-box;





        }


        .social-icons{


            width: 260px;


            height:50px;





        }





        .contact-map-section {





            padding: 0 16px;





        }





        .contact-header-simple {





            padding-top: 10px !important;





            padding-bottom: 0 !important;





        }





        .contact-section {





            margin-top:-155px !important;





        }





    }


    .lead{


        margin-bottom: 54px;


    }














/* ==========================================================================


   demo.html - Style Block 1


   ========================================================================== */


    body {


      font-family: 'Inter', sans-serif;


      background: linear-gradient(135deg, #f8fafc, #e2e8f0);


      color: #1e293b;


      overflow-x: hidden;


      margin: 0;


      padding: 0;


    }





    /* HERO */


    .hero {


      height: 100vh;


      background: linear-gradient(135deg, #f8fafc, #e2e8f0);


      display: flex;


      align-items: center;


      justify-content: center;


      position: relative;


      overflow: hidden;


    }





    .hero::before {


      content: '';


      position: absolute;


      top: 0;


      left: 0;


      right: 0;


      bottom: 0;


      background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.1), transparent 50%),


                  radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.1), transparent 50%);


      pointer-events: none;


    }





    /* Floating 3D objects */


    .floating-shape {


      position: absolute;


      border-radius: 50%;


      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));


      backdrop-filter: blur(10px);


      animation: float3d 6s ease-in-out infinite;


    }





    .shape1 { width: 80px; height: 80px; top: 10%; left: 10%; animation-delay: 0s; }


    .shape2 { width: 60px; height: 60px; top: 20%; right: 15%; animation-delay: 2s; }


    .shape3 { width: 100px; height: 100px; bottom: 15%; left: 20%; animation-delay: 4s; }





    @keyframes float3d {


      0%, 100% {


        transform: translateY(0) rotate(0deg) scale(1);


      }


      25% {


        transform: translateY(-20px) rotate(5deg) scale(1.05);


      }


      50% {


        transform: translateY(-10px) rotate(-3deg) scale(0.95);


      }


      75% {


        transform: translateY(-25px) rotate(2deg) scale(1.02);


      }


    }





    /* BUTTON */


    .btn-primary {


      background: linear-gradient(135deg, #3b82f6, #6366f1);


      border: none;


      padding: 12px 30px;


      border-radius: 12px;


      font-weight: 600;


      box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);


      transition: transform 0.3s ease, box-shadow 0.3s ease;


    }





    .btn-primary:hover {


      transform: translateY(-2px);


      box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);


    }





    /* CARD */


    .custom-card {


      padding: 30px;


      border-radius: 20px;


      background: rgba(255,255,255,0.8);


      backdrop-filter: blur(20px);


      border: 1px solid rgba(255,255,255,0.2);


      box-shadow: 0 20px 40px rgba(0,0,0,0.1);


      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;


      text-align: center;


      position: relative;


      overflow: hidden;


    }





    .custom-card::before {


      content: '';


      position: absolute;


      top: -50%;


      left: -50%;


      width: 200%;


      height: 200%;


      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);


      transform: rotate(45deg);


      transition: transform 0.6s ease;


    }





    /* HOVER EFFECT */


    .custom-card:hover {


      transform: scale(1.05) translateY(-10px) rotate(1deg);


      box-shadow: 0 30px 60px rgba(0,0,0,0.15);


    }





    .custom-card:hover::before {


      transform: rotate(45deg) translateX(100%);


    }





    /* ANIMATION BASE */


    .animate {


      opacity: 0;


      transform: translateY(40px) scale(0.95);


      filter: blur(10px);


      transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);


    }





    /* SHOW */


    .animate.show {


      opacity: 1;


      transform: translateY(0) scale(1);


      filter: blur(0);


    }





    /* STAGGER DELAYS */


    .delay-1 { transition-delay: 0.15s; }


    .delay-2 { transition-delay: 0.3s; }


    .delay-3 { transition-delay: 0.45s; }


    .delay-4 { transition-delay: 0.6s; }


    .delay-5 { transition-delay: 0.75s; }





    /* FLOATING ANIMATION */


    .float {


      animation: float 4s ease-in-out infinite;


    }





    @keyframes float {


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


      50% { transform: translateY(-12px) rotate(1deg); }


    }





    /* BREATHING SCALE */


    .breathe {


      animation: breathe 3s ease-in-out infinite;


    }





    @keyframes breathe {


      0%,100% { transform: scale(1); }


      50% { transform: scale(1.02); }


    }





    /* RESPONSIVE */


    @media(max-width:768px){


      h1 {


        font-size: 28px;


      }


      .hero {


        height: 90vh;


      }


    }











/* ==========================================================================


   our-works.html - Style Block 1


   ========================================================================== */


        :root {


            --red-brand: #ad1818;


        }





        * {


            margin: 0;


            padding: 0;


            box-sizing: border-box;


        }





        html {


            scroll-behavior: smooth;


        }





        body {


            font-family: 'Inter', sans-serif;


            background-color: #ffffff;


            color: #000000;


            overflow-x: hidden;


        }





        /* CAROUSEL/HERO SECTION */


        .hero-scroll-container {


            height: 150vh; /* Reduced from 250vh to remove dead space */


            position: relative;


        }





        .hero-section {


            background: transparent;


            min-height: 50vh; /* Reduced from 80vh for a more compact look */


            display: flex;


            align-items: center;


            justify-content: flex-start;


            text-align: left;


            color: #000000;


            position: relative;


            overflow: hidden;


            padding-left: 8%;


            border-bottom: 1px solid rgba(0, 86, 179, 0.1);


        }





        .scrolling-text {


            position: absolute;


            top: 0;


            left: 0;


            width: 200%;


            height: 100%;


            white-space: nowrap;


            overflow: hidden;


            opacity: 0.04;


            z-index: 1;


            display: flex;


            align-items: center;


            color: #000000;


        }





        .scrolling-content {


            display: inline-block;


            font-size: 280px; /* Scaled down slightly */


            font-weight: 700;


            letter-spacing: 0;


            will-change: transform;


            transition: transform 0.1s linear;


            line-height: 1;


        }





        .hero-content {


            position: relative;


            z-index: 2;


            padding: 40px 20px;


        }





        .hero-subtitle {


            font-size: 14px;


            font-weight: 400;


            letter-spacing: 2px;


            text-transform: capitalize;


            opacity: 0.5;


            margin-bottom: 10px;


        }





        .hero-title {


            font-size: 80px;


            font-weight: 700;


            letter-spacing: 0;


            margin: 0;


            will-change: transform;


        }





        .hero-subtitle {


            will-change: transform;


        }


        /* RESPONSIVE */


        @media (max-width: 991px) {


            .hero-title {


                font-size: 60px;


            }


            .scrolling-content {


                font-size: 180px;


            }


        }





        @media (max-width: 768px) {


            .hero-scroll-container {


               height: 120vh; /* Even more compact on mobile */


            }





            .hero-section {


                padding-left: 5%;


                min-height: 30vh;


            }





            .scrolling-content {


                font-size: 100px; /* Much smaller on mobile to save space */


                letter-spacing: 5px;


            }





            .hero-title {


                font-size: 40px;


            }





            .hero-subtitle {


                font-size: 12px;


                margin-bottom: 5px;


            }





            .filter-section {


                justify-content: center;


                padding: 15px;


            }





            .portfolio-card {


                height: auto;


                aspect-ratio: 4 / 3;


            }


        }








        /* video start */


        .img-wrapper {


            width: 100%;


            aspect-ratio: 3 / 4;


            overflow: hidden;


            background-color: #c5c4c4;


            margin-bottom: 25px;


            position: relative;


            cursor: pointer;


        }





        .img-wrapper img,


        .img-wrapper video {


            width: 100%;


            height: 100%;


            object-fit: cover;


            transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);


        }





        .portfolio-item:hover img,


        .portfolio-item:hover video {


            transform: scale(1.1);


        }


        @media (min-width: 992px) {


            .offset-center { margin-top: 60px; } /* Reduced from 120px */


        }





        @media (max-width: 991px) {


            .offset-center { margin-top: 0; } /* Remove offset on mobile */


        }


        .item-text h5 { font-weight: 600; margin-bottom: 5px;font-family: 'Inter', sans-serif; }


        .item-text p { color: #888; font-size: 0.9rem; text-transform: capitalize; }


        .spacer { height: 40px; } /* Reduced from 100px */





        /* Dropdown Styling */


        .custom-menus {


          background-color: #ffffff;


          border: 1px solid rgba(0,0,0,0.1);


          border-radius: 12px;


          min-width: 260px;


          padding: 8px 0;


          box-shadow: 0 6px 18px rgba(0,0,0,0.1);


        }





        .custom-menus .dropdown-item {


          color: #000000;


          padding: 12px 18px;


          font-size: 15px;


          font-weight: 500;


          display: flex;


          align-items: center;


          gap: 10px;


          transition: all 0.2s ease-in-out;


          border-radius: 8px;


          margin: 2px 6px;


        }





        .custom-menus .dropdown-item:hover {


          background: linear-gradient(90deg, #2a5bd7, #4c7efc);


          color: #fff;


          transform: translateX(4px);


        }





        .btn-blue {


          background-color: #0056b3;


          color: #ffffff;  


          padding: 12px 20px;


          border-radius: 3px;


          font-weight: bold;


          text-transform: uppercase;


          transition: background 0.3s ease;


          font-size: 15px;


          display: inline-block;


        }





        .btn-blue:hover {


          background-color: #0056b3;


          color: white;


          text-decoration: none;


        }





        .seo-audit-btn {


          background-color: #e62323;


          color: white !important;


          padding: 12px 20px;


          border-radius: 3px;


          display: inline-flex;


          align-items: center;


          font-weight: bold;


          font-size: 15px;


          text-transform: uppercase;


          transition: background 0.3s ease;


          position:relative;


          left: 20px;


          text-decoration: none !important;


        }





        .seo-audit-btn .seo-icon {


          margin-right: 10px;


        }





        .seo-audit-btn:hover {


          background-color: #b71c1c;


          text-decoration: none;


          color: white !important;


        }














        /* FILTER MENU */


        .filter-container { padding: 40px 0 30px 6%; display: flex; gap: 20px; flex-wrap: wrap; }


        @media (max-width: 768px) {


            .filter-container { padding: 30px 0 20px 5%; gap: 12px; }


        }


        .filter-btn {


            background: none; border: none; font-weight: 700; font-size: 0.85rem;


            text-transform: uppercase; color: #000000; cursor: pointer; position: relative;


            letter-spacing: 0.5px; opacity: 0.5; transition: 0.3s;


        }


        .filter-btn.active { opacity: 1; }


        .filter-btn.active::after {


            content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--red-brand);


        }





        /* CARD DESIGN */


        .portfolio-col { transition: all 0.5s ease; }


        


        .portfolio-card {


            position: relative; width: 100%; aspect-ratio: 1 / 1.1;


            display: flex; align-items: center; justify-content: center;


            overflow: hidden; cursor: pointer;


        }





        .card-base { position: absolute; width: 100%; height: 100%; z-index: 1; }


        .card-splash {


            position: absolute; width: 130%; height: 25%; background: rgba(255, 255, 255, 0.25);


            top: 45%; left: -15%; transform: rotate(-6deg); z-index: 2;


        }





        .card-main-img {


            position: relative; width: 75%; height: 72%; z-index: 3;


            transform: rotate(-3deg); box-shadow: 0 12px 30px rgba(0,0,0,0.15);


            transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); object-fit: cover;


        }





        .brand-logo {


            position: absolute; top: 12%; left: 8%; background: rgb(0, 0, 0);


            padding: 6px 10px; z-index: 4; transform: rotate(-5deg);


            box-shadow: 0 4px 8px rgba(0,0,0,0.1); font-size: 10px; font-weight: bold;


            color: #ffffff;


        }





        .card-info {


            position: absolute; bottom: 6%; left: 10%; right: 10%;


            z-index: 5; color: #000; font-size: 1.2rem; font-weight: 700; line-height: 1.1;


        }





        /* HOVER INTERACTIONS */


        .portfolio-card:hover .card-main-img { transform: rotate(0deg) scale(1.08); }





        .view-circle {


            position: absolute; top: 50%; left: 50%;


            transform: translate(-50%, -50%) scale(0);


            width: 90px; height: 90px; background: var(--red-brand);


            color: #fff; border-radius: 50%; display: flex;


            align-items: center; justify-content: center; font-size: 0.7rem;


            z-index: 10; opacity: 0; transition: all 0.4s ease; text-align: center;


            text-decoration: none; cursor: pointer;


        }


        .portfolio-card:hover .view-circle { opacity: 1; transform: translate(-50%, -50%) scale(1); }





        .hide-item { display: none !important; }





/* ==========================================================================


   our-works.html - Style Block 2


   ========================================================================== */


      .img-wrapper { position: relative; }


      .unmute-btn {


        position: absolute;


        bottom: 12px;


        right: 12px;


        z-index: 6;


        background: rgba(0,0,0,0.6);


        color: #fff;


        border: 0;


        padding: 6px 10px;


        border-radius: 4px;


        cursor: pointer;


        font-size: 14px;


      }


      .unmute-btn.hidden { display: none; }


      .play-btn {


        position: absolute;


        bottom: 12px;


        left: 12px;


        z-index: 6;


        background: rgba(0,0,0,0.6);


        color: #fff;


        border: 0;


        width: 36px;


        height: 36px;


        border-radius: 50%;


        display: flex;


        align-items: center;


        justify-content: center;


        cursor: pointer;


        font-size: 16px;


      }











/* ==========================================================================


   pabbly.html - Style Block 1


   ========================================================================== */


    @media (max-width: 575px) {


      .plan-card__features {


        padding: 22px 22px 30px;


      }


    }





/* ==========================================================================


   pabbly.html - Style Block 2


   ========================================================================== */


    .stat-card {


      padding: 25px 15px;


      color: #fff;


      border-radius: 24px;


      text-align: center;


      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);


      transition: transform 0.3s ease;


    }





    .stat-card:hover {


      transform: translateY(-5px);


    }





    .blue-card {


      background-color: #4c5be5;


    }





    .orange-card {


      background-color: #fc6b6b;


    }





    .highlight-number {


      font-size: 1.8rem;


      font-weight: 700;


      margin-bottom: 3px;


    }





    .stat-card i {


      font-size: 1.5rem;


      margin-bottom: 8px;


      display: block;


    }





    img.illustration {


      height: 220px;


    }





    h1.fw-bold {


      font-size: 2rem;


    }





    p.text-muted {


      font-size: 0.95rem;


    }





    .section-achievements {


      padding: 60px 0;


      background-color: #ffffff;


    }





    /* Megaphone Floating Position */


    .section-achievements {


      position: relative;


      overflow: hidden;


    }





    .floating-mike {


      position: absolute;


      top: 30px;


      left: -50px;


      z-index: 10;


    }





    .floating-mike svg {


      width: 120px;


      height: auto;


    }





    /* Megaphone SVG sound wave animation */


    .sound-wave {


      stroke: #0077ff;


      stroke-width: 4;


      fill: none;


      animation: pulse 1.5s infinite ease-in-out;


      transform-origin: 140px 100px;


    }





    .wave1 {


      animation-delay: 0s;


    }





    .wave2 {


      animation-delay: 0.2s;


    }





    .wave3 {


      animation-delay: 0.4s;


    }





    @keyframes pulse {


      0% {


        opacity: 1;


        transform: scale(0.8);


      }





      100% {


        opacity: 0;


        transform: scale(1.5);


      }


    }





    /* Optional: Responsive tweak for smaller screens */


    @media (max-width: 768px) {


      .floating-mike {


        display: none;


      }


    }




















    /* na than da leo  */





    /* breadcrumbs */


    :root {


      --chalk: #f5f2ee;


      --gold: #c8a84b;


      --dark: #111


    }





    .baker-banner {


      position: relative;


      width: 100%;


      min-height: 480px;


      overflow: hidden;


      background: #0b1114 url('assets/images/crumbs.png') center center / cover no-repeat;


    }





    .baker-banner::after {


      content: '';


      position: absolute;


      inset: 0;


      /* Smooth radial gradient overlay following CSS vars */


      background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(45, 192, 113, 0.5) 0%, rgba(20, 100, 60, 0.1) 40%, transparent 70%);


      pointer-events: none;


      z-index: 0;


      transition: opacity 0.4s ease;


      opacity: var(--spotlight-opacity, 0);


    }





    .baker-banner::before {


      content: '';


      position: absolute;


      inset: 0;


      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");


      background-size: 200px 200px;


      opacity: .6;


      pointer-events: none;


      z-index: 1


    }





    .flour {


      position: absolute;


      inset: 0;


      pointer-events: none;


      z-index: 2;


      overflow: hidden


    }





    .flour span {


      position: absolute;


      border-radius: 50%;


      background: rgba(255, 255, 255, .65)


    }





    .asset {


      position: absolute;


      pointer-events: none


    }





    .bread-main {


      right: -8px;


      top: -14px;


      width: clamp(150px, 21vw, 270px);


      z-index: 3;


      filter: drop-shadow(-5px 8px 16px rgba(0, 0, 0, .75))


    }





    .bread-roll {


      right: clamp(125px, 18vw, 238px);


      top: -26px;


      width: clamp(62px, 8.5vw, 108px);


      z-index: 3;


      transform: rotate(-9deg);


      filter: drop-shadow(-3px 5px 10px rgba(0, 0, 0, .65))


    }





    .wheat-stalks {


      left: -6px;


      bottom: -6px;


      width: clamp(105px, 16vw, 205px);


      z-index: 3


    }





    /* Nav */


    .baker-nav {


      position: relative;


      z-index: 10;


      display: flex;


      align-items: center;


      justify-content: space-between;


      padding: clamp(10px, 2.5vw, 22px) clamp(14px, 3.5vw, 36px)


    }





    .nav-logo {


      font-family: 'Inter', sans-serif;


      font-size: clamp(1.2rem, 2.8vw, 1.9rem);


      color: var(--chalk);


      text-shadow: 1px 1px 3px rgba(0, 0, 0, .6);


      text-decoration: none


    }





    /* Hero centre */


    .hero-center {


      position: relative;


      z-index: 10;


      display: flex;


      flex-direction: column;


      align-items: center;


      justify-content: center;


      padding-bottom: clamp(16px, 4vw, 36px);


      gap: clamp(8px, 1.5vw, 16px);


    }





    .badge-wrap {


      position: absolute;


      right: clamp(-48px, -5.8vw, -16px);


      top: clamp(6px, 1.5vw, 18px);


      width: clamp(58px, 7.5vw, 86px);


      height: clamp(58px, 7.5vw, 86px);


      z-index: 20


    }








    /* -- Breadcrumb -- */


    .breadcrumb-row {


      display: flex;


      align-items: center;


      justify-content: center;


      gap: 0;


      flex-wrap: wrap


    }





    .breadcrumb-row a,


    .breadcrumb-row span {


      font-family: 'Inter', sans-serif;


      font-size: clamp(.85rem, 1.4vw, 1rem);


      font-weight: 800;


      letter-spacing: 2px;


      text-transform: uppercase;


      text-decoration: none;


      line-height: 1


    }





    .breadcrumb-row a {


      color: #000;


      transition: color .22s


    }





    .breadcrumb-row a:hover {


      color: #333


    }





    .breadcrumb-row .sep {


      color: #000;


      margin: 0 clamp(6px, 1vw, 12px);


      font-size: .9em;


      font-weight: 800;


      user-select: none


    }





    .breadcrumb-row .current {


      color: #000;


      font-weight: 800


    }





    @media(max-width:480px) {


      .bread-roll {


        display: none


      }





      .badge-wrap {


        right: -30px


      }





      #hero-center1 {


        padding-top: 150px !important;


      }


    }





    /* breadcrumbs */


    #hero-center1 {


      padding-top: 243px;


    }





    /* Pabbly Logistics Section Styles */


    .pabbly-logistics-section {


      padding: 100px 0;


      background: #ffffff;


      overflow: hidden;


    }





    .logistics-img-wrapper {


      position: relative;


      width: 100%;


      height: 100%;


      min-height: 480px;


    }





    .logistics-bg-box {


      position: absolute;


      top: 111px;


      left: -56px;


      width: 60%;


      height: 85%;


      background-color: #0056b3;


      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(0,0,0,0.08)' fill-opacity='1' d='M0,192L48,186.7C96,181,192,171,288,181.3C384,192,480,224,576,234.7C672,245,768,235,864,213.3C960,192,1056,160,1152,170.7C1248,181,1344,235,1392,261.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='rgba(0,0,0,0.15)' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,154.7C672,128,768,96,864,112C960,128,1056,192,1152,218.7C1248,245,1344,235,1392,229.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");


      background-size: cover;


      background-position: bottom right;


      border-radius: 12px;


      box-shadow: 0 16px 40px rgba(108, 255, 108, 0.35);


      z-index: 1;


    }





    .logistics-main-img {


      position: absolute;


      top: 0;


      left: 0%;


      width: 60%;


      z-index: 2;


      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);


      border-radius: 4px;





      /* Optional subtle curve depending on image */


    }





    .logistics-sub-img {


      position: absolute;


      bottom: 20px;


      right: 0;


      top: 260px;


      width: 65%;


      z-index: 3;


      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);


      border: 6px solid #fff;





    }





    .logistics-content {


      position: relative;


      padding-left: 30px;


      z-index: 5;


    }





    .log-subtitle-wrap {


      display: flex;


      align-items: center;


      gap: 12px;


      margin-bottom: 20px;


    }





    .log-red-square {


      width: 14px;


      height: 14px;


      background-color: #ef3e36;


    }





    .log-subtitle {


      font-family: 'Inter', sans-serif;


      font-size: 0.9rem;


      font-weight: 800;


      color: #666;


      text-transform: uppercase;


      letter-spacing: 1px;


    }





    .log-title-wrapper {


      position: relative;


      margin-bottom: 30px;


    }





    .log-title {


      font-family: 'Inter', sans-serif;


      font-size: clamp(2.5rem, 4vw, 3.5rem);


      font-weight: 900;


      color: #111;


      line-height: 1.1;


      position: relative;


      z-index: 2;


    }





    .log-watermark {


      position: absolute;


      top: -20px;


      right: -40px;


      font-family: 'Inter', sans-serif;


      font-size: clamp(5rem, 8vw, 8rem);


      font-weight: 800;


      color: #f1f2f6;


      line-height: 1;


      text-transform: uppercase;


      z-index: -1;


      pointer-events: none;


      user-select: none;


    }





    .log-desc {


      font-family: 'Inter', sans-serif;


      font-size: 0.95rem;


      color: #777;


      line-height: 1.8;


      position: relative;


      z-index: 2;


    }





    @media (max-width: 991px) {


      .logistics-content {


        padding-left: 0;


        margin-top: 60px;


      }





      .log-watermark {


        right: 0;


      }





      .logistics-bg-box {


        width: 80%;


      }





      .logistics-main-img {


        width: 100%;


        left: 0;


        position: relative;


      }





      .logistics-sub-img {


        width: 60%;


        bottom: -30px;


      }





      .logistics-img-wrapper {


        min-height: auto;


        padding-bottom: 40px;


      }


    }














    /* end */











/* ==========================================================================


   pay.html - Style Block 1


   ========================================================================== */


        :root {


            --primary-navy: #0d1a3d;


            --secondary-navy: #1c2954;


            --accent-blue: #0088ff;


            --gold: #D4AF37;


            --gold-gradient: linear-gradient(135deg, #D4AF37, #F3E5AB, #D4AF37);


            --dark: #070d1f;


            --glass-bg: rgba(255, 255, 255, 0.03);


            --glass-border: rgba(255, 255, 255, 0.08);


        }





        body {


            background-color: var(--dark);


            color: #ffffff;


            font-family: 'Inter', sans-serif;


            min-height: 100vh;


            display: flex;


            flex-direction: column;


        }





        /* ── Pay Container ── */


        .pay-section {


            padding: 80px 0 100px;


            position: relative;


            z-index: 1;


            flex-grow: 1;


            display: flex;


            align-items: center;


        }





        .pay-bg-glow {


            position: absolute;


            top: 20%;


            left: 50%;


            transform: translate(-50%, -20%);


            width: 80vw;


            height: 60vh;


            background: radial-gradient(circle at center, rgba(0, 136, 255, 0.1) 0%, transparent 70%);


            z-index: -1;


            pointer-events: none;


        }





        .pay-card {


            background: linear-gradient(145deg, #1c2954 0%, #0a1128 100%);


            border: 1px solid var(--glass-border);


            border-radius: 40px;


            padding: 50px 40px;


            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);


            position: relative;


            overflow: hidden;


        }





        .pay-card::before {


            content: '';


            position: absolute;


            top: 0;


            left: 0;


            width: 100%;


            height: 4px;


            background: var(--gold-gradient);


        }





        .pay-header {


            text-align: center;


            margin-bottom: 40px;


        }





        .pay-header h1 {


            font-family: 'Bodoni Moda', serif;


            font-size: 2.8rem;


            font-weight: 800;


            letter-spacing: -1px;


            margin-bottom: 12px;


        }





        .pay-header h1 span {


            background: var(--gold-gradient);


            -webkit-background-clip: text;


            -webkit-text-fill-color: transparent;


        }





        .pay-header p {


            color: rgba(255, 255, 255, 0.7);


            font-size: 1.05rem;


            max-width: 500px;


            margin: 0 auto;


            line-height: 1.6;


        }





        /* ── Tabs ── */


        .pay-tabs {


            display: flex;


            justify-content: center;


            gap: 15px;


            margin-bottom: 35px;


            border: none;


        }





        .pay-tab-btn {


            background: rgba(255, 255, 255, 0.05);


            border: 1px solid var(--glass-border);


            color: rgba(255, 255, 255, 0.7);


            padding: 12px 30px;


            border-radius: 100px;


            font-weight: 600;


            font-size: 0.95rem;


            transition: all 0.3s ease;


            cursor: pointer;


        }





        .pay-tab-btn:hover {


            background: rgba(255, 255, 255, 0.1);


            color: #fff;


        }





        .pay-tab-btn.active {


            background: var(--gold-gradient);


            color: #000000;


            border-color: transparent;


            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);


        }





        /* ── Tab Content ── */


        .pay-tab-content {


            display: none;


            animation: fadeIn 0.5s ease forwards;


        }





        .pay-tab-content.active {


            display: block;


        }





        @keyframes fadeIn {


            from { opacity: 0; transform: translateY(10px); }


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


        }





        /* ── QR Section ── */


        .qr-wrapper {


            display: flex;


            flex-direction: column;


            align-items: center;


            text-align: center;


            gap: 20px;


            padding: 10px 0;


        }





        .qr-box {


            background: #ffffff;


            padding: 20px;


            border-radius: 24px;


            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);


            display: inline-flex;


            justify-content: center;


            align-items: center;


            position: relative;


        }





        .qr-placeholder {


            width: 200px;


            height: 200px;


            display: flex;


            flex-direction: column;


            justify-content: center;


            align-items: center;


            color: #000000;


            border: 2px dashed rgba(0, 0, 0, 0.15);


            border-radius: 14px;


            position: relative;


        }





        .qr-placeholder i {


            font-size: 3.5rem;


            color: var(--secondary-navy);


            margin-bottom: 8px;


        }





        .qr-placeholder span {


            font-size: 0.8rem;


            font-weight: 700;


            text-transform: uppercase;


            letter-spacing: 0.5px;


            color: rgba(0, 0, 0, 0.5);


        }





        .upi-details-box {


            background: rgba(255, 255, 255, 0.04);


            border: 1px solid var(--glass-border);


            border-radius: 16px;


            padding: 15px 25px;


            width: 100%;


            max-width: 440px;


            display: flex;


            justify-content: space-between;


            align-items: center;


            margin-top: 10px;


        }





        .upi-text {


            text-align: left;


        }





        .upi-label {


            font-size: 0.75rem;


            text-transform: uppercase;


            letter-spacing: 1px;


            color: rgba(255, 255, 255, 0.5);


            margin-bottom: 2px;


        }





        .upi-id {


            font-size: 1.1rem;


            font-weight: 700;


            color: #ffffff;


        }





        .copy-btn {


            background: transparent;


            border: 1px solid rgba(255, 255, 255, 0.2);


            color: #ffffff;


            width: 40px;


            height: 40px;


            border-radius: 50%;


            display: flex;


            align-items: center;


            justify-content: center;


            cursor: pointer;


            transition: all 0.3s ease;


        }





        .copy-btn:hover {


            background: var(--gold-gradient);


            color: #000000;


            border-color: transparent;


            transform: scale(1.08);


        }





        /* ── Bank Details ── */


        .bank-details-wrapper {


            display: flex;


            flex-direction: column;


            gap: 15px;


            width: 100%;


            max-width: 500px;


            margin: 0 auto;


        }





        .bank-row {


            background: rgba(255, 255, 255, 0.04);


            border: 1px solid var(--glass-border);


            border-radius: 16px;


            padding: 16px 24px;


            display: flex;


            justify-content: space-between;


            align-items: center;


        }





        .bank-info {


            text-align: left;


        }





        .bank-label {


            font-size: 0.75rem;


            text-transform: uppercase;


            letter-spacing: 1px;


            color: rgba(255, 255, 255, 0.5);


            margin-bottom: 4px;


        }





        .bank-value {


            font-size: 1.05rem;


            font-weight: 700;


            color: #ffffff;


        }





        /* ── Security Badge ── */


        .pay-footer {


            margin-top: 40px;


            text-align: center;


            display: flex;


            flex-direction: column;


            align-items: center;


            gap: 12px;


        }





        .security-badge {


            display: inline-flex;


            align-items: center;


            gap: 8px;


            background: rgba(37, 211, 102, 0.1);


            border: 1px solid rgba(37, 211, 102, 0.2);


            color: #25d366;


            padding: 8px 20px;


            border-radius: 100px;


            font-size: 0.85rem;


            font-weight: 600;


        }





        .pay-support {


            font-size: 0.9rem;


            color: rgba(255, 255, 255, 0.5);


        }





        .pay-support a {


            color: var(--accent-blue);


            text-decoration: none;


            font-weight: 600;


        }





        .pay-support a:hover {


            text-decoration: underline;


        }





        /* ── Toast Notification ── */


        .toast-notif {


            position: fixed;


            bottom: 30px;


            left: 50%;


            transform: translateX(-50%) translateY(100px);


            background: var(--gold-gradient);


            color: #000000;


            padding: 12px 30px;


            border-radius: 50px;


            font-weight: 700;


            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);


            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);


            z-index: 100000;


            pointer-events: none;


        }





        .toast-notif.show {


            transform: translateX(-50%) translateY(0);


        }





        @media (max-width: 768px) {


            .pay-card {


                padding: 35px 20px;


                border-radius: 30px;


            }


            .pay-header h1 {


                font-size: 2.2rem;


            }


            .pay-tab-btn {


                padding: 10px 20px;


                font-size: 0.85rem;


            }


            .bank-row {


                padding: 12px 16px;


            }


            .bank-value {


                font-size: 0.95rem;


            }


        }











/* ==========================================================================


   services.html - Style Block 1


   ========================================================================== */





    body { background-color: #ffffff !important; color: #1a1a1a; }





    .hero-section { background-color: #f8f9fa; position: relative; }





    .hero-title { color: #1a1a1a !important; }





    .hero-breadcrumb { color: rgba(0,0,0,0.6) !important; }





    .hero-breadcrumb span a { color: rgba(0,0,0,0.6) !important; }





    .hero-breadcrumb span:last-child { color: #0056b3 !important; }





    





    .trusted-section .marquee-track {





      animation: marqueeScroll 30s linear infinite;





      transition: none;





      will-change: transform;





      transform: translate3d(0, 0, 0);





      backface-visibility: hidden;





    }





    .trusted-section .marquee-track:hover {





      animation-play-state: paused;





    }











    @keyframes marqueeScroll {





      0% { transform: translate3d(0, 0, 0); }





      100% { transform: translate3d(-50%, 0, 0); }





    }


























/* ==========================================================================


   testimonial.html - Style Block 1


   ========================================================================== */





        /* start delete */























        /* end delete */





        :root {





            --primary: #152042;





            --gold: #D4AF37;





            --cream: #FAF6F0;





            --white: #FFFFFF;





            --dark: #1F2220;





            --gold-gradient: linear-gradient(135deg, #D4AF37, #F3E5AB, #D4AF37);





        }











        * {





            margin: 0;





            padding: 0;





            box-sizing: border-box;





        }











        body-test {





            font-family: 'Inter', sans-serif;





            background: var(--white);





            color: var(--dark);





            overflow-x: hidden;





        }











        h1,





        h2,





        h3,





        h4 {





            font-family: 'Inter', sans-serif;





        }











        /*   Spacer sections   */





        .spacer {





            height: 100vh;





            display: flex;





            align-items: center;





            justify-content: center;





            font-size: 1.2rem;





            color: rgba(0, 0, 0, 0.25);





            letter-spacing: 2px;





            text-transform: uppercase;





        }























        /*   sticky scene wrapper   */





        #reviews-section {





            position: relative;





            /* height = sticky duration: 4 faces   scroll travel */





            height: 400vh;





            /* Default for index.html */





        }





        .body-test #reviews-section {





            height: 500vh;





            /* Testimonial page custom height */





        }











        .sticky-stage {





            position: sticky;





            top: 0;





            height: 100vh;





            display: flex;





            flex-direction: column;





            align-items: center;





            justify-content: center;





            overflow: hidden;





        }











        /* background gradient that shifts per face */





        .sticky-stage::before {





            content: '';





            position: absolute;





            inset: 0;





            background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(212, 175, 55, 0.15) 0%, transparent 70%);





            pointer-events: none;





        }











        /*   Heading   */





        .reviews-heading {





            text-align: center;





            margin-bottom: 48px;





            position: relative;





            z-index: 5;





        }











        .reviews-heading .tag {





            font-size: 0.78rem;





            letter-spacing: 4px;





            text-transform: uppercase;





            color: var(--gold);





            margin-bottom: 10px;





            display: block;





        }











        .reviews-heading h2 {





            font-size: clamp(2.2rem, 5vw, 4rem);





            line-height: 1.1;





            color: var(--dark);





        }











        .reviews-heading h2 em {





            font-style: normal;





            background: var(--gold-gradient);





            -webkit-background-clip: text;





            -webkit-text-fill-color: transparent;





            background-clip: text;





        }











        .gold-bar {





            width: 60px;





            height: 3px;





            background: var(--gold-gradient);





            margin: 18px auto 0;





            border-radius: 2px;





        }











        /*   3-D Cube   */





        .cube-wrapper {





            perspective: 1000px;





            position: relative;





            z-index: 5;





        }











        .cube {





            width: 420px;





            height: 420px;





            position: relative;





            transform-style: preserve-3d;





            /* default - face 0 front */





            transform: rotateX(0deg);





            transition: none;


            /* Under GSAP control exclusively */





        }





        .body-test .cube {





            transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);


            /* Testimonial page custom transition */





        }











        /* each face */





        .cube-face {





            position: absolute;





            width: 420px;





            height: 420px;





            display: flex;





            flex-direction: column;





            justify-content: space-between;





            padding: 44px 40px 36px;





            background: var(--primary);





            border: 1.5px solid rgba(212, 175, 55, 0.35);





            backface-visibility: hidden;





            -webkit-backface-visibility: hidden;





            overflow: hidden;





        }











        /* corner accent lines */





        .cube-face::before,





        .cube-face::after {





            content: '';





            position: absolute;





            width: 28px;





            height: 28px;





            border-color: var(--gold);





            border-style: solid;





            opacity: 0.6;





        }











        .cube-face::before {





            top: 16px;





            left: 16px;





            border-width: 2px 0 0 2px;





        }











        .cube-face::after {





            bottom: 16px;





            right: 16px;





            border-width: 0 2px 2px 0;





        }











        /* place the 4 faces around Y-axis? No - user wants square sides, rotate on X */





        .face-front {





            transform: rotateX(0deg) translateZ(210px);





        }











        .face-bottom {





            transform: rotateX(-90deg) translateZ(210px);





        }











        .face-back {





            transform: rotateX(-180deg) translateZ(210px);





        }











        .face-top {





            transform: rotateX(-270deg) translateZ(210px);





        }











        /* slight tilt always visible */





        .cube-wrapper {





            transform: rotateX(2deg) rotateY(-4deg);





        }











        /* quote style */





        .review-quote-icon {





            font-size: 3.5rem;





            line-height: 1;





            background: var(--gold-gradient);





            -webkit-background-clip: text;





            -webkit-text-fill-color: transparent;





            background-clip: text;





            font-family: 'Inter', sans-serif;





        }











        .review-text {





            font-size: 1.05rem;





            line-height: 1.7;





            color: rgba(255, 255, 255, 0.92);





            flex: 1;





            margin: 16px 0 20px;





        }











        .review-stars {





            color: var(--gold);





            font-size: 0.9rem;





            margin-bottom: 14px;





        }











        .review-author {





            display: flex;





            align-items: center;





            gap: 14px;





        }











        .author-avatar {





            width: 46px;





            height: 46px;





            border-radius: 50%;





            border: 2px solid var(--gold);





            object-fit: cover;





            flex-shrink: 0;





            background: rgba(212, 175, 55, 0.15);





            display: flex;





            align-items: center;





            justify-content: center;





            font-size: 1.2rem;





            color: var(--gold);





        }











        .author-name {





            font-weight: 600;





            font-size: 0.97rem;





            color: var(--white);





        }











        .author-role {





            font-size: 0.78rem;





            color: rgba(212, 175, 55, 0.75);





            letter-spacing: 1px;





        }











        /* face accent color strip on left */





        .cube-face .accent-strip {





            position: absolute;





            left: 0;





            top: 0;





            width: 4px;





            height: 100%;





            background: var(--gold-gradient);





        }











        /*   Dot indicators   */





        .cube-dots {





            display: flex;





            gap: 10px;





            margin-top: 36px;





            position: relative;





            z-index: 5;





        }











        .cube-dot {





            width: 10px;





            height: 10px;





            border-radius: 50%;





            background: rgba(212, 175, 55, 0.25);





            border: 1.5px solid rgba(212, 175, 55, 0.4);





            transition: all 0.4s ease;





            cursor: pointer;





        }











        .cube-dot.active {





            background: var(--gold);





            transform: scale(1.35);





            box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);





        }











        /*   scroll progress thin bar   */





        .scroll-progress-bar {





            position: fixed;





            top: 0;





            left: 0;





            height: 3px;





            background: var(--gold-gradient);





            z-index: 999;





            width: 0%;





            transition: width 0.1s linear;





        }











        /*   face counter label   */





        .face-counter {





            position: relative;





            z-index: 5;





            margin-top: 18px;





            font-size: 0.78rem;





            letter-spacing: 3px;





            text-transform: uppercase;





            color: rgba(212, 175, 55, 0.5);





        }











        /*   responsive   */





        @media (max-width: 600px) {











            .cube,





            .cube-face {





                width: 320px;





                height: 360px;





            }











            .face-front {





                transform: rotateX(0deg) translateZ(160px);





            }











            .face-bottom {





                transform: rotateX(-90deg) translateZ(160px);





            }











            .face-back {





                transform: rotateX(-180deg) translateZ(160px);





            }











            .face-top {





                transform: rotateX(-270deg) translateZ(160px);





            }











            .review-text {





                font-size: 0.95rem;





            }





        }











        @media (max-width: 400px) {











            .cube,





            .cube-face {





                width: 280px;





                height: 340px;





            }





        }














/* ==========================================================================


   blog-test.html - Style Block 1


   ========================================================================== */


        /* Additional debugging styles */


        .debug-info {


            position: fixed;


            top: 100px;


            right: 20px;


            background: rgba(255, 255, 255, 0.1);


            padding: 10px;


            border-radius: 8px;


            font-size: 12px;


            z-index: 9999;


        }


        


        /* Ensure content is visible */


        .container {


            position: relative;


            z-index: 1;


        }


        


        /* Make sure gallery container is visible */


        #gallery-container {


            min-height: 200px;


            border: 1px solid rgba(108, 255, 108, 0.2);


            border-radius: 8px;


            padding: 20px;


        }


        


        .filter-container {


            min-height: 50px;


            border: 1px solid rgba(108, 255, 108, 0.2);


            border-radius: 8px;


            padding: 10px;


        }









/* ==========================================================================

   FIX AND ENHANCEMENT FOR CLIENT LOGOS MARQUEE (services.html)

   ========================================================================== */

.trusted-section {

  background: #ffffff !important;

  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;

  padding: 60px 0 !important; /* Premium vertical padding/gap */

  overflow: visible !important;

  position: relative !important;

  width: 100% !important;

}



.marquee-outer {

  width: 100% !important;

  overflow: visible !important; /* Prevent any vertical clipping */

  position: relative !important;

  background: #ffffff !important;

  padding: 10px 0 !important;

}



.marquee-track {

  display: flex !important;

  align-items: center !important;

  gap: 60px !important;

  width: max-content !important;

  animation: logoScroll 30s linear infinite !important;

}



.logo-item {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 20px !important;

  height: 80px !important; /* Spacious container height */

  opacity: 0.95 !important;

  transition: transform 0.3s ease, opacity 0.3s ease !important;

}



.logo-item:hover {

  opacity: 1 !important;

  transform: scale(1.1) !important;

}



.logo-item img {

  height: 60px !important; /* Vivid and highly visible logo height */

  width: auto !important;

  max-width: 180px !important;

  object-fit: contain !important;

  filter: none !important; /* Full vivid colors by default */

  opacity: 1 !important;

  visibility: visible !important;

}



/* Mobile responsive scaling */

@media (max-width: 767px) {

  .trusted-section {

    padding: 40px 0 !important;

  }

  .logo-item {

    height: 60px !important;

    padding: 0 15px !important;

  }

  .logo-item img {

    height: 45px !important; /* Scaled down for mobile */

  }

}



/* ==========================================================================

   NEW ISOLATED SERVICES SECTION (hserv-)

   ========================================================================== */

/* Reset and Base Styles for Standalone Page */


        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }


        body { background: #0d1a3d; color: #fff; overflow-x: clip; min-height: 100vh; }





        /* --- Extracted Services CSS Chunk 1 --- */


        .hserv-section {


            padding: 0;


            min-height: auto;


            display: grid;


            grid-template-columns: 0.9fr 1.1fr;


            gap: 0;


            margin-top: -100px;


            /* overlap hero fade zone */


            margin-bottom: 10rem;


            position: relative;


            z-index: 2;


            background: linear-gradient(180deg,


                    #0d1a3d 0%,


                    #0d1b3e 7%,


                    #1a2f5e 16%,


                    #2a4a8a 26%,


                    #4a7ab5 36%,


                    #7aaed4 48%,


                    #b8d4e8 60%,


                    #ddeaf4 72%,


                    #eef5fa 84%,


                    #f8fafc 100%);


            color: #1c2954;


        }





        /* Soft ambient glow at the very top of services — DISABLED */


        .hserv-section::before {


            display: none;


        }











        .hserv-left {





            pointer-events: none;





            position: relative;





        }











        .hserv-left-decor {





            position: sticky;





            top: 0;





            height: 100vh;





            width: 100%;





        }











        .hserv-dynamic-label {





            position: absolute;





            top: 75%;





            left: 50%;





            transform: translateX(-50%);





            font-size: 5rem;





            font-weight: 900;





            color: #888;





            /* Solid grey color */





            -webkit-text-stroke: 0;





            /* No stroke */





            text-shadow: none;





            /* No shadow */





            text-transform: uppercase;





            letter-spacing: 8px;





            white-space: nowrap;





            transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);





            opacity: 0;





            pointer-events: none;





            text-align: center;





            z-index: 10;





        }











        .hserv-dynamic-label.show {





            opacity: 1;





            transform: translateX(-50%) translateY(-10px);





        }











        .hserv-right {





            display: flex;





            flex-direction: column;





            /* gap: 2rem; */





            position: relative;





            z-index: 10;





            /* padding-bottom: 15vh; */


            /* Added padding to give sticky cards room to breathe before next section arrives */





            align-items: center;


            /* Ensure horizontal centering */





        }











        .hserv-header {


            grid-column: 1 / -1;


            text-align: center;


            max-width: 900px;


            margin: 0 auto 0.5rem auto;


            padding-top: 1.5rem;


            padding-bottom: 0;


            position: relative;


            z-index: 5;


        }





        .hserv-header p {


            color: rgba(220, 232, 248, 0.82);


            font-size: 1.05rem;


            line-height: 1.65;


            margin-top: 0.6rem;


            letter-spacing: 0.01em;


        }





        /* Our Services image heading */


        .hserv-heading-img {


            display: block;


            max-width: 680px;


            width: 88%;


            height: 220px;


            margin: 0 auto;


            opacity: 0;


            transform: translateY(32px);


            transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);


            filter: drop-shadow(0 8px 32px rgba(100, 160, 220, 0.18));


        }





        .hserv-heading-img.hserv-is-visible {


            opacity: 1;


            transform: translateY(0);


        }








        /* --- Extracted Services CSS Chunk 2 --- */


        .hserv-card {





            background: #1c2954;





            border: 1px solid rgba(255, 255, 255, 0.1);





            padding: 2.2rem;





            border-radius: 24px;





            display: flex;





            flex-direction: column;





            gap: 2rem;





            transition: transform 0.3s, box-shadow 0.3s;





            position: sticky;





            top: 120px;





            margin-bottom: 4rem;





            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);





            color: #fff;





        }











        .hserv-card:hover {





            transform: translateY(-5px);





            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);





        }











        .hserv-card h3 {





            font-size: 2rem;





            font-weight: 600;





            color: #fff;





        }











        .hserv-card p {





            color: rgba(255, 255, 255, 0.8);





            line-height: 1.6;





            flex-grow: 1;





        }











        .hserv-card-icon {





            align-self: flex-end;





            width: 40px;





            height: 40px;





            border: 1px solid rgba(255, 255, 255, 0.2);





            border-radius: 50%;





            display: flex;





            align-items: center;





            justify-content: center;





            color: #fff;





        }











        .hserv-card-icon svg {





            width: 20px;





            height: 20px;





            transform: rotate(45deg);





        }











        .hserv-footer {





            margin-top: auto;





            display: flex;





            justify-content: space-between;





            align-items: flex-end;





        }











        .hserv-price {





            display: flex;





            flex-direction: column;





            gap: 5px;





        }











        .hserv-price-label {





            font-size: 0.85rem;





            color: rgba(255, 255, 255, 0.6);





            font-weight: 400;





        }











        .hserv-price-value {





            font-size: 1.5rem;





            font-weight: 700;





            color: #fff;





        }











        .hserv-list {





            list-style: none;





            font-size: 0.9rem;





            color: rgba(255, 255, 255, 0.6);





        }











        .hserv-list li {





            margin-bottom: 0.5rem;





        }





        /* --- Extracted Services CSS Chunk 3 --- */


        .hserv-left {


            pointer-events: auto;


            display: flex;


            flex-direction: column;


            gap: 1rem;


        }





        .hserv-left-decor {


            position: sticky;


            top: 0;


            height: 80vh;


            display: flex;


            flex-direction: column;


            justify-content: flex-start;


            align-items: center;


            overflow: hidden;


            padding: 24vh 1rem 2rem;


            /* Increased to move video lower */


        }





        /* Shine sweep keyframe */


        @keyframes imageShineSweep {


            0%   { left: -120%; opacity: 0; }


            10%  { opacity: 1; }


            60%  { left: 130%; opacity: 1; }


            100% { left: 130%; opacity: 0; }


        }





        .hserv-image-wrapper {


            width: 100%;


            aspect-ratio: 4 / 3;


            height: auto;


            max-height: 95vh;


            max-width: 650px;


            border-radius: 30px;


            overflow: hidden;


            background: transparent;


            border: none;


            box-shadow: none;


            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);


            will-change: transform;


            position: relative;


        }





        /* Shine sweep layer */


        .hserv-image-wrapper::before {


            content: '';


            position: absolute;


            top: 0;


            left: -120%;


            width: 60%;


            height: 100%;


            background: linear-gradient(


                105deg,


                transparent 20%,


                rgba(255, 255, 255, 0.28) 50%,


                transparent 80%


            );


            transform: skewX(-18deg);


            pointer-events: none;


            z-index: 10;


            animation: imageShineSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s 1 forwards;


            opacity: 0;


        }





        /* Re-trigger shine on hover/touch */


        .hserv-image-wrapper:hover::before,


        .hserv-image-wrapper:active::before {


            animation: imageShineSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 forwards;


        }





        .hserv-image-wrapper:hover {


            transform: translateY(-4px);


        }





        .hserv-image-container {


            position: relative;


            width: 100%;


            height: 100%;


        }





        /* Each image: GPU-composited fade + zoom-in entry */


        .hserv-image-container img {


            position: absolute;


            inset: 0;


            width: 100%;


            height: 100%;


            object-fit: cover;


            opacity: 0;


            transform: scale(1.06);


            transition:


                opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),


                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);


            will-change: opacity, transform;


            border-radius: 30px;


        }





        .hserv-image-container img.active {


            opacity: 1;


            transform: scale(1);


        }





        /* Outgoing image: fade out + slight zoom-out */


        .hserv-image-container img.leaving {


            opacity: 0;


            transform: scale(0.97);


            transition:


                opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),


                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);


        }





        /* Ambient glow overlay: DISABLED */


        .hserv-image-wrapper::after {


            display: none;


        }





        .hserv-card-section {


            position: sticky;


            display: flex;


            justify-content: center;


            /* Center horizontally */


            align-items: flex-start;


            padding: 0;


            margin-bottom: 1rem;


            min-height: 25vh;


            /* Increased slightly to give cards room */


            width: 100%;


            /* Take full width to allow centering */


            background: transparent;


            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);


        }





        /* Incremental Sticky Top for Stacking Effect */


        .hserv-card-section:nth-child(1) {


            top: 1vh;


            z-index: 10;


        }





        .hserv-card-section:nth-child(2) {


            top: 5vh;


            z-index: 20;


        }





        .hserv-card-section:nth-child(3) {


            top: 9vh;


            z-index: 30;


        }





        .hserv-card-section:nth-child(4) {


            top: 13vh;


            z-index: 40;


        }





        .hserv-card-section:nth-child(5) {


            top: 17vh;


            z-index: 50;


        }





        .hserv-card-section:nth-child(6) {


            top: 21vh;


            z-index: 60;


        }





        .hserv-card-section:nth-child(7) {


            top: 25vh;


            font-size: 1.5rem;



            font-weight: 700;



            color: #fff;



        }







        .hserv-list {



            list-style: none;



            font-size: 0.9rem;



            color: rgba(255, 255, 255, 0.6);



        }







        .hserv-list li {



            margin-bottom: 0.5rem;



        }



        /* --- Extracted Services CSS Chunk 3 --- */

        .hserv-left {

            pointer-events: auto;

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }



        .hserv-left-decor {

            position: sticky;

            top: 0;

            height: 80vh;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

            align-items: center;

            overflow: hidden;

            padding: 24vh 1rem 2rem;

            /* Increased to move video lower */

        }



        /* Shine sweep keyframe */

        @keyframes imageShineSweep {

            0%   { left: -120%; opacity: 0; }

            10%  { opacity: 1; }

            60%  { left: 130%; opacity: 1; }

            100% { left: 130%; opacity: 0; }

        }



        .hserv-image-wrapper {

            width: 100%;

            aspect-ratio: 4 / 3;

            height: auto;

            max-height: 95vh;

            max-width: 650px;

            border-radius: 30px;

            overflow: hidden;

            background: transparent;

            border: none;

            box-shadow: none;

            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

            will-change: transform;

            position: relative;

        }



        /* Shine sweep layer */

        .hserv-image-wrapper::before {

            content: '';

            position: absolute;

            top: 0;

            left: -120%;

            width: 60%;

            height: 100%;

            background: linear-gradient(

                105deg,

                transparent 20%,

                rgba(255, 255, 255, 0.28) 50%,

                transparent 80%

            );

            transform: skewX(-18deg);

            pointer-events: none;

            z-index: 10;

            animation: imageShineSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s 1 forwards;

            opacity: 0;

        }



        /* Re-trigger shine on hover/touch */

        .hserv-image-wrapper:hover::before,

        .hserv-image-wrapper:active::before {

            animation: imageShineSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 forwards;

        }



        .hserv-image-wrapper:hover {

            transform: translateY(-4px);

        }



        .hserv-image-container {

            position: relative;

            width: 100%;

            height: 100%;

        }



        /* Each image: GPU-composited fade + zoom-in entry */

        .hserv-image-container img {

            position: absolute;

            inset: 0;

            width: 100%;

            height: 100%;

            object-fit: cover;

            opacity: 0;

            transform: scale(1.06);

            transition:

                opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);

            will-change: opacity, transform;

            border-radius: 30px;

        }



        .hserv-image-container img.active {

            opacity: 1;

            transform: scale(1);

        }



        /* Outgoing image: fade out + slight zoom-out */

        .hserv-image-container img.leaving {

            opacity: 0;

            transform: scale(0.97);

            transition:

                opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),

                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);

        }



        /* Ambient glow overlay: DISABLED */

        .hserv-image-wrapper::after {

            display: none;

        }



        .hserv-card-section {

            position: sticky;

            display: flex;

            justify-content: center;

            /* Center horizontally */

            align-items: flex-start;

            padding: 0;

            margin-bottom: 1rem;

            min-height: 25vh;

            /* Increased slightly to give cards room */

            width: 100%;

            /* Take full width to allow centering */

            background: transparent;

            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

        }



        /* Incremental Sticky Top for Stacking Effect (offset by sticky navbar height) */

        .hserv-card-section:nth-child(1) {

            top: 110px;

            z-index: 10;

        }



        .hserv-card-section:nth-child(2) {

            top: 140px;

            z-index: 20;

        }



        .hserv-card-section:nth-child(3) {

            top: 170px;

            z-index: 30;

        }



        .hserv-card-section:nth-child(4) {

            top: 200px;

            z-index: 40;

        }



        .hserv-card-section:nth-child(5) {

            top: 230px;

            z-index: 50;

        }



        .hserv-card-section:nth-child(6) {

            top: 260px;

            z-index: 60;

        }



        .hserv-card-section:nth-child(7) {

            top: 290px;

            z-index: 70;

        }



        .hserv-card {

            position: relative;

            background: linear-gradient(145deg, #1c2954 0%, #0a1128 100%);

            backdrop-filter: blur(10px);

            border: 1px solid rgba(255, 255, 255, 0.10);

            transform: scale(0.96);

            transform-origin: center center;

            opacity: 1;

            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);

            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);

            width: 100%;

            max-width: 800px;

            min-height: 420px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            padding: 2.2rem;

            border-radius: 40px;

            overflow: hidden;

        }



        .hserv-card-section.active .hserv-card {

            transform: scale(1);

            opacity: 1;

            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);

            border-color: rgba(255, 255, 255, 0.14);

        }



        .hserv-card:hover {

            transform: scale(1.01) translateY(-4px);

            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.26);

            border-color: rgba(77, 179, 255, 0.22);

        }



        .hserv-card h3 {

            font-size: 2.2rem;

            font-weight: 800;

            letter-spacing: -1px;

            margin-bottom: 1.5rem;

            position: relative;

            z-index: 1;

        }



        .hserv-card p {

            color: rgba(255, 255, 255, 0.85);

            font-size: 1.1rem;

            line-height: 1.7;

            position: relative;

            z-index: 1;

        }



        /* Tablet & Mobile responsive styles for services section */

        @media (max-width: 992px) {

            .hserv-section {

                grid-template-columns: 1fr !important;

                margin-top: -60px !important;

                margin-bottom: -100px !important;

            }



            .hserv-left-decor {

                position: relative !important;

                height: auto !important;

                top: auto !important;

                padding: 1.5rem 1rem 2rem !important;

            }



            .hserv-image-wrapper {

                height: 50vh !important;

                margin: 0 auto !important;

            }



            .hserv-card-section {

                min-height: auto !important;

                padding: 1.5rem 0 !important;

            }

        }







/* ==========================================================================

   NAVBAR CSS — Merged from navbar-fix.css (Single source of truth)

   ========================================================================== */

:root {

    --nav-accent: #1c2954;

    --nav-height: 100px;

    --nav-height-mobile: 64px;

}



.site-header,

.gnav {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    z-index: 10000 !important;

    background: rgba(255, 255, 255, 0.92) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border-bottom: 1px solid rgba(28, 41, 84, 0.1) !important;

    height: var(--nav-height) !important;

    display: flex !important;

    align-items: center !important;

    transition: box-shadow 0.3s ease, height 0.3s ease !important;

}



.site-header.scrolled,

.gnav.scrolled,

.gnav.s {

    height: 84px !important;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;

}



body {

    padding-top: var(--nav-height) !important;

}



.header-inner {

    position: relative !important;

    max-width: 1300px !important;

    width: 100% !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 0 clamp(20px, 4vw, 56px) !important;

    height: 100% !important;

    box-sizing: border-box !important;

}



.header-logo {

    display: flex !important;

    align-items: center !important;

    text-decoration: none !important;

    flex-shrink: 0 !important;

    gap: 4px !important;

}



.header-logo .logo-img,

.logo-img {

    height: 45px !important;

    width: auto !important;

    max-width: 180px !important;

    object-fit: contain !important;

    transition: height 0.3s ease !important;

}



.site-header.scrolled .logo-img,

.gnav.scrolled .logo-img,

.gnav.s .logo-img {

    height: 38px !important;

}



.header-logo .logo-text,

.logo-text {

    font-family: 'Inter', sans-serif !important;

    font-size: 1.2rem !important;

    font-weight: 900 !important;

    color: var(--nav-accent) !important;

    letter-spacing: -0.03em !important;

    font-style: italic !important;

    text-decoration: none !important;

}



.header-nav {

    display: flex !important;

    align-items: center !important;

    gap: clamp(8px, 1.5vw, 16px) !important;

    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 10 !important;

    margin: 0 !important;

    padding: 0 !important;

    flex: unset !important;

}



.nav-link,

.dropdown-toggle {

    color: #000000 !important;

    text-decoration: none !important;

    position: relative !important;

    padding: 4px 12px !important;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

    font-family: 'Inter', sans-serif !important;

    display: inline-flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

}



.nav-icon {

    display: none !important;

    font-size: 1.3rem !important;

    line-height: 1 !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    border-radius: 50% !important;

    background: transparent !important;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

}



.nav-text {

    display: block !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    transition: color 0.3s !important;

}



.nav-link:hover .nav-text,

.nav-link.active .nav-text {

    display: none !important;

}



.nav-link:hover .nav-icon,

.nav-link.active .nav-icon {

    display: flex !important;

    color: #ffffff !important;

    background: var(--nav-accent) !important;

    transform: translateY(-8px) !important;

}



.dropdown-toggle::after {

    display: none !important;

}



.nav-dropdown {

    position: relative !important;

}



.nav-dropdown-inner {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    cursor: pointer !important;

}



.dropdown-arrow-wrapper {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    color: #000000 !important;

    padding: 4px !important;

    transition: color 0.2s !important;

}



.dropdown-arrow-wrapper:hover {

    color: var(--nav-accent) !important;

}



.dropdown-arrow {

    transition: transform 0.3s ease !important;

    stroke: currentColor !important;

}



.nav-dropdown:hover .dropdown-arrow {

    transform: rotate(180deg) !important;

}



.dropdown-menu {

    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    min-width: 280px !important;

    background: rgba(255, 255, 255, 0.95) !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;

    border: 1px solid rgba(28, 41, 84, 0.2) !important;

    border-radius: 12px !important;

    padding: 8px 0 !important;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(-10px) !important;

    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;

    z-index: 10001 !important;

    margin: 0 !important;

    display: block !important;

    pointer-events: none !important;

}



.nav-dropdown:hover .dropdown-menu {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;

}



.dropdown-item {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 12px 20px !important;

    color: #000000 !important;

    text-decoration: none !important;

    font-size: 0.82rem !important;

    font-family: 'Inter', sans-serif !important;

    transition: background 0.2s, color 0.2s !important;

    border: none !important;

    background: none !important;

}



.dropdown-item:hover {

    background: rgba(28, 41, 84, 0.1) !important;

    color: var(--nav-accent) !important;

}



.service-icon {

    flex-shrink: 0 !important;

    stroke: currentColor !important;

}



.header-actions {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    flex-shrink: 0 !important;

}



.header-cta {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    background: var(--nav-accent) !important;

    color: #fff !important;

    font-size: 0.82rem !important;

    font-weight: 600 !important;

    padding: 9px 18px !important;

    border-radius: 100px !important;

    text-decoration: none !important;

    transition: background 0.22s, transform 0.18s !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    border: none !important;

}



.header-cta:hover {

    background: #000 !important;

    color: #fff !important;

    transform: translateY(-2px) !important;

}



.cta-arrow {

    width: 26px !important;

    height: 26px !important;

    border-radius: 50% !important;

    background: #fff !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: background 0.22s !important;

}



.cta-arrow svg {

    stroke: var(--nav-accent) !important;

    width: 13px !important;

    height: 13px !important;

}



.header-cta:hover .cta-arrow {

    background: #000 !important;

}



.header-cta:hover .cta-arrow svg {

    stroke: #fff !important;

}



.header-pay {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    background: var(--nav-accent) !important;

    color: #fff !important;

    font-size: 0.82rem !important;

    font-weight: 600 !important;

    padding: 9px 18px !important;

    border-radius: 100px !important;

    text-decoration: none !important;

    transition: background 0.22s, transform 0.18s !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    border: none !important;

}



.header-pay:hover {

    background: #000 !important;

    color: #fff !important;

    transform: translateY(-2px) !important;

}



.pay-card-icon {

    width: 26px !important;

    height: 26px !important;

    border-radius: 50% !important;

    background: #fff !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 0.82rem !important;

    color: var(--nav-accent) !important;

    transition: background 0.22s !important;

}



.header-pay:hover .pay-card-icon {

    background: #000 !important;

    color: #fff !important;

}



.mobile-nav-pay {

    display: none !important;

}



.mobile-toggle {

    display: none !important;

    background: none !important;

    border: none !important;

    cursor: pointer !important;

    width: 32px !important;

    height: 24px !important;

    position: relative !important;

    z-index: 10002 !important;

    flex-shrink: 0 !important;

}



.mobile-toggle span {

    display: block !important;

    width: 100% !important;

    height: 2.5px !important;

    background: #000000 !important;

    border-radius: 2px !important;

    position: absolute !important;

    left: 0 !important;

    transition: transform 0.3s, opacity 0.3s !important;

}



.mobile-toggle span:nth-child(1) { top: 0 !important; }

.mobile-toggle span:nth-child(2) { top: 10px !important; }

.mobile-toggle span:nth-child(3) { top: 20px !important; }



.mobile-toggle.open span:nth-child(1) {

    transform: translateY(10px) rotate(45deg) !important;

    background: var(--nav-accent) !important;

}

.mobile-toggle.open span:nth-child(2) { opacity: 0 !important; }

.mobile-toggle.open span:nth-child(3) {

    transform: translateY(-10px) rotate(-45deg) !important;

    background: var(--nav-accent) !important;

}



.mobile-nav-header {

    display: none !important;

}



.mobile-menu-label {

    font-size: 24px !important;

    font-weight: 700 !important;

    color: #000 !important;

    font-family: 'Inter', sans-serif !important;

}



.m-accent {

    color: var(--nav-accent) !important;

}



.mobile-close {

    font-size: 32px !important;

    background: none !important;

    border: none !important;

    color: #000 !important;

    cursor: pointer !important;

    padding: 0 !important;

    line-height: 1 !important;

}



@media (max-width: 768px) {

    .site-header,

    .gnav {

        height: var(--nav-height-mobile) !important;

        padding: 12px 20px !important;

    }



    body {

        padding-top: var(--nav-height-mobile) !important;

    }



    .logo-img,

    .header-logo .logo-img {

        height: 35px !important;

        max-width: 140px !important;

    }



    .mobile-toggle {

        display: block !important;

    }



    .header-actions {

        display: none !important;

    }



    .header-nav {

        position: fixed !important;

        top: 0 !important;

        right: -100% !important;

        left: unset !important;

        transform: none !important;

        bottom: 0 !important;

        width: 100% !important;

        height: 100vh !important;

        background: #ffffff !important;

        flex-direction: column !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-y: auto !important;

        overflow-x: hidden !important;

        transition: right 0.35s cubic-bezier(0.77, 0, 0.175, 1) !important;

        z-index: 10001 !important;

        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        display: flex !important;

    }



    .header-nav.open {

        right: 0 !important;

    }



    .mobile-nav-header {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        width: 100% !important;

        padding: 20px 24px !important;

        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;

        background: #fff !important;

    }



    .nav-link {

        padding: 16px 24px !important;

        border-bottom: 1px solid rgba(28, 41, 84, 0.08) !important;

        width: 100% !important;

        font-size: 1.1rem !important;

        color: var(--nav-accent) !important;

        display: block !important;

        flex-direction: row !important;

    }



    .nav-link:hover .nav-text,

    .nav-link.active .nav-text {

        display: block !important;

    }



    .nav-link:hover .nav-icon,

    .nav-link.active .nav-icon {

        display: none !important;

    }



    .nav-link:hover {

        background: rgba(28, 41, 84, 0.05) !important;

        color: var(--nav-accent) !important;

    }



    .nav-dropdown {

        width: 100% !important;

        color: black !important;

    }



    .nav-dropdown-inner {

        width: 100% !important;

        justify-content: flex-start !important;

        gap: 0 !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;

        padding: 0 !important;

    }



    .nav-dropdown-inner .nav-link {

        border-bottom: none !important;

        width: auto !important;

        padding-right: 0 !important;

        flex: 1 !important;

    }



    .dropdown-arrow-wrapper {

        border-bottom: none !important;

        width: auto !important;

        padding: 16px 12px !important;

    }



    .dropdown-menu {

        position: static !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        background: var(--nav-accent) !important;

        border: none !important;

        border-radius: 0 !important;

        margin: 0 !important;

        box-shadow: none !important;

        max-height: 0 !important;

        overflow: hidden !important;

        width: 100% !important;

        transition: max-height 0.3s ease-out !important;

        pointer-events: auto !important;

        display: block !important;

        padding: 0 !important;

    }



    .nav-dropdown.mobile-open .dropdown-menu {

        max-height: 1000px !important;

    }



    .nav-dropdown.mobile-open .dropdown-menu a {

        color: #fff !important;

    }



    .nav-dropdown.mobile-open .dropdown-arrow {

        transform: rotate(180deg) !important;

        color: #000 !important;

    }



    .dropdown-item {

        padding: 14px 40px !important;

        font-size: 1rem !important;

        color: #fff !important;

        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

        display: block !important;

    }



    .dropdown-item *,

    .dropdown-item svg {

        color: #fff !important;

        stroke: #fff !important;

    }



    .dropdown-item:last-child {

        border-bottom: none !important;

    }



    .dropdown-item:hover {

        background: rgba(255, 255, 255, 0.1) !important;

        color: #fff !important;

        padding-left: 40px !important;

    }



    body.menu-open {

        overflow: hidden !important;

    }



    .mobile-nav-pay {

        display: flex !important;

        width: 100% !important;

        padding: 24px !important;

        margin-top: auto !important;

    }



    .mobile-pay-btn {

        width: 100% !important;

        justify-content: center !important;

        font-size: 1rem !important;

        padding: 14px 20px !important;

        border-radius: 12px !important;

    }

}



@media (max-width: 575px) {

    .site-header,

    .gnav {

        padding: 12px 16px !important;

    }



    .logo-img,

    .header-logo .logo-img {

        height: 32px !important;

        max-width: 120px !important;

    }

}
/* -- Mobile Nav Buttons -- */
.mobile-nav-btns {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-nav-btns {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        margin-top: 0 !important;
        width: 100% !important;
        border-top: 1px solid rgba(28, 41, 84, 0.08) !important;
    }

    .mobile-nav-btns .header-cta,
    .mobile-nav-btns .header-pay {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}


/* ==========================================================================
   OUR SERVICES SECTION — MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {

    /* Reset grid to single column */
    .hserv-section {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
        margin-bottom: 2rem !important;
        padding: 0 16px !important;
        background: linear-gradient(180deg, #0d1a3d 0%, #1a2f5e 40%, #f8fafc 100%) !important;
    }

    /* Heading image */
    .hserv-header {
        padding-top: 2rem !important;
        margin-bottom: 1rem !important;
    }

    .hserv-heading-img {
        height: 120px !important;
        width: 90% !important;
    }

    /* Hide left side image on mobile */
    .hserv-left {
        display: none !important;
    }

    /* Right side cards — full width */
    .hserv-right {
        width: 100% !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Each card section — not sticky on mobile */
    .hserv-card-section {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }

    /* Card styling */
    .hserv-card {
        position: relative !important;
        top: auto !important;
        border-radius: 20px !important;
        padding: 1.5rem !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }

    .hserv-card h3 {
        font-size: 1.4rem !important;
        margin-bottom: 0.8rem !important;
    }

    .hserv-card p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .hserv-price-value {
        font-size: 1.2rem !important;
    }

    .hserv-footer {
        margin-top: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hserv-section {
        padding: 0 12px !important;
    }

    .hserv-card {
        padding: 1.2rem !important;
        border-radius: 16px !important;
    }

    .hserv-card h3 {
        font-size: 1.2rem !important;
    }
}


/* ==========================================================================
   HSERV CARD — IMAGE + MOBILE STACK EFFECT
   ========================================================================== */

/* Card image — hidden on desktop (left panel shows it) */
.hserv-card-img {
    display: none;
}

@media (max-width: 768px) {

    /* Show image inside card on mobile */
    .hserv-card-img {
        display: block !important;
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 14px !important;
        margin-bottom: 1.2rem !important;
    }

    /* Stack effect — cards overlap with sticky positioning */
    .hserv-right {
        position: relative !important;
        padding-bottom: 40px !important;
    }

    .hserv-card-section:nth-child(1) { position: sticky !important; top: 80px !important; z-index: 1 !important; }
    .hserv-card-section:nth-child(2) { position: sticky !important; top: 96px !important; z-index: 2 !important; }
    .hserv-card-section:nth-child(3) { position: sticky !important; top: 112px !important; z-index: 3 !important; }
    .hserv-card-section:nth-child(4) { position: sticky !important; top: 128px !important; z-index: 4 !important; }
    .hserv-card-section:nth-child(5) { position: sticky !important; top: 144px !important; z-index: 5 !important; }
    .hserv-card-section:nth-child(6) { position: sticky !important; top: 160px !important; z-index: 6 !important; }
    .hserv-card-section:nth-child(7) { position: sticky !important; top: 176px !important; z-index: 7 !important; }

    .hserv-card {
        margin-bottom: 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
    }
}