@charset "UTF-8";



:root {

    --bg-900: #030312;

    --glass: rgba(255, 255, 255, 0.06);

    --glass-strong: rgba(255, 255, 255, 0.09);

    --accent: #6f7cff;

    --accent-2: #61efff;

    --muted: #b6c0cd;

    --primary-color: #e37900;

    --accent1: #00eaff;

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

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

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0
}



html,

body {

    height: 100%
}



body {

    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

    background: transparent;

    color: #e9eef8;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;

}



#container {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

}



canvas {

    width: 100%;

    height: 100%;

    display: block;

}



.vignette {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    background: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%);

}



.ui-instructions {

    position: fixed;

    left: 22px;

    bottom: 22px;

    z-index: 50;

    pointer-events: none;

    background: rgba(10, 7, 20, 0.28);

    border: 1px solid rgba(120, 90, 255, 0.16);

    padding: 10px 14px;

    border-radius: 12px;

    color: #d7c7ff;

    font-size: 12px;

    backdrop-filter: blur(8px) saturate(140%);

}



/* removed morph button styling (button removed in HTML) */



.site {

    position: relative;

    z-index: 10;

    min-height: 100vh;

}



.main-bg {

    position: relative;

    background: linear-gradient(180deg,

            rgba(11, 22, 36, 0.7) 40%,

            rgba(11, 22, 36, 1) 100%);

    overflow: hidden;

}



/* Glow / light effect layer */

.main-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 50% 20%,

            rgba(20, 200, 255, 0.06),

            rgba(0, 0, 0, 0.35) 50%);

    z-index: 0;

    pointer-events: none;

}



/* Your content stays above effects */

.main-bg>* {

    position: relative;

    z-index: 1;

}





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

   HEADER BASE

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



.site-header {

    position: relative;

    z-index: 100;

}



/* Glass fixed header */

.ht-header {

    position: fixed;

    top: 12px;

    left: 50%;

    transform: translateX(-50%);

    width: min(1200px, 94%);

    z-index: 1000;



    background: rgba(7, 15, 25, 0.45);

    backdrop-filter: blur(14px);

    border-radius: 14px;

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

    box-shadow: 0 10px 40px rgba(2, 6, 12, .6);



    overflow: visible;

}



/* Inner flex */

.nav-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 20px;

    overflow: visible;

}



/* Brand */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;

}

.custom-logo {
    width: 120px;
    height: 60px;
}

.logo {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

    display: grid;

    place-items: center;

    font-weight: 800;

    color: #041018;

}



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

   NAV LINKS

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



.navbar-nav .nav-link {

    color: #e8eef7 !important;

    font-weight: 500;

}



.navbar-nav .nav-link:hover {

    color: #ffffff !important;

}



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

   DROPDOWN (DESKTOP)

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



.navbar {

    overflow: visible;

}



/* Desktop dropdown */

@media (min-width: 992px) {

    .navbar .dropdown-menu {

        position: absolute;

        top: 100%;

        left: 0;



        min-width: 220px;

        padding: 12px;



        background: rgba(15, 23, 42, 0.96);

        backdrop-filter: blur(14px);

        border-radius: 12px;

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



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

        z-index: 3000;

    }



    .dropdown-item {

        color: #e8eef7;

        border-radius: 8px;

        padding: 8px 12px;

    }



    .dropdown-item:hover {

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

        color: #fff;

    }

}



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

   TOGGLER

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



.navbar-toggler {

    border: 1px solid rgba(255, 255, 255, .4);

}



.navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}



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

   MOBILE FULLSCREEN MENU

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



@media (max-width: 991px) {



    /* Fullscreen menu */

    #navMain {

        position: fixed;

        inset: 0;

        width: 100vw;

        height: 100vh;



        background: rgba(7, 15, 25, .98);

        backdrop-filter: blur(16px);



        padding: 90px 26px 26px;

        z-index: 2000;



        transform: translateX(-100%);

        transition: transform .35s ease;

    }



    #navMain.show {

        transform: translateX(0);

    }



    /* Vertical nav */

    #navMain .navbar-nav {

        align-items: flex-start;

        gap: 18px;

    }



    #navMain .nav-link {

        font-size: 20px;

        font-weight: 500;

    }



    /* Mobile dropdown */

    #navMain .dropdown-menu {

        position: static;

        width: 100%;

        margin-top: 10px;



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

        border-radius: 10px;

        padding: 10px;



        display: none;

    }



    #navMain .dropdown-menu.show {

        display: block;

    }



    .dropdown-item {

        color: #e8eef7;

    }

}



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

   MOBILE CLOSE BUTTON

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



.mobile-close-btn {

    display: none;

}



#navMain.show .mobile-close-btn {

    display: block;

}



@media (max-width: 991px) {

    .mobile-close-btn {

        position: absolute;

        top: 20px;

        right: 30px;



        background: none;

        border: none;

        color: #fff;

        font-size: 30px;

        cursor: pointer;

        z-index: 2100;

    }

}



/* Desktop hover dropdown */

@media (min-width: 992px) {

    .navbar .dropdown-menu {

        display: block;

        opacity: 0;

        visibility: hidden;

        transform: translateY(12px);

        transition: all 0.25s ease;

        pointer-events: none;

    }



    .navbar .dropdown:hover>.dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

    }

}



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

   DROPDOWN BASE

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

.dropdown-menu {

    border-radius: 12px;

    padding: 12px;

    z-index: 3000;

}



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

   DESKTOP – HOVER

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

@media (min-width: 992px) {



    .navbar {

        overflow: visible;

    }



    .navbar .dropdown-menu {

        position: absolute;

        top: 100%;

        left: 0;



        min-width: 220px;

        background: rgba(15, 23, 42, 0.96);

        backdrop-filter: blur(14px);

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



        opacity: 0;

        visibility: hidden;

        transform: translateY(12px);

        transition: all .25s ease;



        pointer-events: none;

        display: block;

    }



    .navbar .dropdown:hover>.dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

    }

}



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

   MOBILE – TAP (CSS ONLY)

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

@media (max-width: 991px) {

    #navMain.show {

        overflow-y: scroll;

    }





    #navMain .dropdown-menu {

        position: static;

        width: 100%;

        margin-top: 10px;



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

        border-radius: 10px;

        padding: 10px;



        display: none;

    }



    /* 🔥 THIS IS THE FIX */

    #navMain .dropdown:focus-within>.dropdown-menu {

        display: block;

    }



    .dropdown-item {

        color: #e8eef7;

    }



    /* Dropdown items */

    #navMain .dropdown-item {

        display: block;

        width: 100%;



        padding: 5px;

        margin: 0;



        white-space: normal;

        word-break: break-word;



        color: #e8eef7;

        font-size: 15px;

    }



}




.ht-btn {

    padding: 10px 14px;

    border-radius: 12px;

    background: linear-gradient(90deg, var(--accent-2), #6a8bff);

    color: #021024;

    font-weight: 700;

    border: none
}





/* ===== SLIDER ===== */

.slider-container {

    width: 100%;

    height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.now-showing {

    position: absolute;

    top: 20px;

    left: 30px;

    color: #00ffd1;

    font-size: 14px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

    z-index: 10;

}



.now-showing::before {

    content: "";

    width: 8px;

    height: 8px;

    background: #00ffd1;

    border-radius: 50%;

}



/* Accordion Slider Layout */

.accordion-slider {

    display: flex;

    width: 100%;

    height: 100%;

}



.slide {

    flex: 0.1;

    position: relative;

    cursor: pointer;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transition: all 0.8s ease;

    overflow: hidden;

    filter: grayscale(1);

}



.slide.active {

    flex: 3.5;

    filter: grayscale(0);

}



.slide::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 90%);

}



/* Slide Content */

.slide-content {

    position: absolute;

    bottom: 40px;

    left: 30px;

    z-index: 2;

}



.slide-number {

    font-size: 64px;

    font-weight: 800;

    color: transparent;
    /* remove fill */

    -webkit-text-stroke: 2px var(--primary-color);
    /* stroke width & color */

    opacity: 1;
    /* opacity now not needed */

}





.slide-title {

    font-size: 28px;

    font-weight: 700;

    color: var(--accent1);

    margin-bottom: 8px;

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.6s ease;

}



.slide-sub {

    font-size: 16px;

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.6s ease;

}



.main-title {

    font-size: 48px;

    font-weight: 800;

    color: var(--primary-color);

    margin-bottom: 12px;

}



.slide.active .slide-title,

.slide.active .slide-sub {

    opacity: 1;

    transform: translateY(0);

}



/* Buttons */

.btn-learn {

    padding: 12px 28px;

    font-size: 15px;

    font-weight: 600;

    border-radius: 30px;

    text-decoration: none;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



/* PRIMARY BUTTON */

.btn-primary {

    background: #0d6efd;

    color: #fff;

    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.35);

}



.btn-primary:hover {

    background: #0b5ed7;

    transform: translateY(-2px);

}



/* OUTLINE BUTTON */

.btn-outline {

    background: transparent;

    color: #0d6efd;

    border: 2px solid #0d6efd;

}



.btn-outline:hover {

    background: #0d6efd;

    color: #fff;

    transform: translateY(-2px);

}





.slide.active .btn-learn {

    opacity: 1;

    transform: translateY(0);

}



/* Navigation */

.navigation-arrows {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

    border: none;

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

    width: 50px;

    height: 50px;

    font-size: 20px;

    z-index: 10;

}



.nav-prev {

    left: 20px;

}



.nav-next {

    right: 20px;

}



.navigation-arrows:hover {

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

}



@media (max-width: 670px) {

    .slide {

        flex: 0.0;



    }



    .slide.active {

        flex: 5;

    }

    .slide-content {

        position: absolute;

        bottom: 40px;

        left: 15px;

        z-index: 2;

    }


}



/* ---------------- INTRO ---------------- */

/* -----------------------------------------

   INTRO SECTION

----------------------------------------- */

.intro-section {

    position: relative;

    height: 100vh;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

}



.intro-bg {

    position: absolute;

    inset: 0;

    background: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;

    transform: scale(1.3);

    /* starting zoom */

    z-index: 1;

}



.glass-layer {

    position: absolute;

    inset: 0;

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

    backdrop-filter: blur(10px);

    z-index: 2;

}



.intro-content {

    position: relative;

    z-index: 3;

    text-align: center;

    color: white;

    max-width: 800px;

}



.intro-content h1 {

    font-size: 4rem;

    font-weight: 800;

}



.intro-content span {

    color: #2af6ff;

}



.intro-content p {

    font-size: 1.3rem;

    opacity: 0.85;

    margin: 20px auto;

}



.intro-btns {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    gap: 20px;

}



.btn-primary {

    background: linear-gradient(90deg, #00eaff, #1bffd8);

    padding: 14px 36px;

    color: #03202f;

    font-weight: 700;

    border-radius: 30px;

    text-decoration: none;

}



.btn-outline {

    padding: 14px 36px;

    border: 2px solid #00eaff;

    color: #00eaff;

    border-radius: 30px;

    text-decoration: none;

}





/* -----------------------------------------

   ABOUT SECTION

----------------------------------------- */

.about-section {

    height: 100vh;

    background: url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat fixed;

    display: flex;

    justify-content: center;

    align-items: center;

    transform: scale(0.8);

    /* starting zoom */

    opacity: 0;

    /* fade-in start */

}



.about-container {

    max-width: 900px;

    text-align: center;

    color: white;

    padding: 40px;

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

    backdrop-filter: blur(20px);

    border-radius: 20px;

}



/* About section */

#about {

    min-height: 70vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 80px 0;

}



#about::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));

    z-index: 1
}



.intro-inner {

    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 900px;

    transform: scale(.92);

    opacity: .85
}

.intro-glass {
    padding: 42px 46px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.intro-glass p {
    color: rgba(255, 255, 255, .88);
    font-size: 1.05rem;
    line-height: 1.8;
}


.about-title {

    font-size: 34px;

    font-weight: 700;

    margin-bottom: 12px
}



.about-text {

    font-size: 17px;

    color: #e5e9f2;

    line-height: 1.8
}









* {

    box-sizing: border-box;

    margin: 0;

    padding: 0
}



html,

body {

    height: 100%;

    background: #020409;

    color: #fff;

    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto;

    overflow-x: hidden
}



a {

    color: inherit;

    text-decoration: none
}



/* ---------- HERO / MULTI-LAYER WRAPPER ---------- */

.hero {

    position: relative;

    height: 100vh;

    min-height: 680px;

    overflow: hidden;

    perspective: 1400px;

    /* gives depth to layers when we rotate */

}



/* common layer styles */

.layer {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    will-change: transform, filter, opacity;

    transform-origin: center center;

    pointer-events: none;

}



/* subtle vignette & color wash */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 100;

    background: radial-gradient(ellipse at 50% 20%, rgba(20, 200, 255, 0.06), rgba(0, 0, 0, 0.55) 60%);

    pointer-events: none;

}



/* ---------- GLASS CARD CONTENT ---------- */

.hero-content {

    position: relative;

    z-index: 400;

    max-width: 1100px;

    margin: 0 auto;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 48px 28px;

    pointer-events: auto;

}



.glass {

    width: min(960px, 92%);

    border-radius: 20px;

    padding: 48px 48px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));

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

    backdrop-filter: blur(16px) saturate(130%);

    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 6px 30px rgba(0, 0, 0, 0.4);

    transform-style: preserve-3d;

    transform: translateZ(60px);

    /* keep card slightly elevated in Z-space */

}



.kicker {

    display: inline-block;

    font-weight: 700;

    color: var(--accent1);

    letter-spacing: 0.6px;

    font-size: 13px;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(0, 234, 255, 0.06);

    margin-bottom: 14px;

}



h1 {

    font-size: clamp(28px, 4.4vw, 56px);

    line-height: 1.02;

    margin: 6px 0 12px;

    font-weight: 800;

    letter-spacing: -0.02em;

}



p.lead {

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

    font-size: clamp(14px, 1.3vw, 18px);

    line-height: 1.6;

    max-width: 900px;

    margin-bottom: 20px;

    opacity: 0.95;

}



.cta-row {

    display: flex;

    gap: 14px;

    flex-wrap: wrap
}



.btn {

    padding: 12px 26px;

    border-radius: 999px;

    font-weight: 700;

    cursor: pointer;

    border: 0;

    transition: all .25s cubic-bezier(.2, .9, .2, 1);

}



.btn.primary {

    background: linear-gradient(90deg, var(--accent1), #7af7d6);

    color: #02121c
}



.btn.ghost {

    background: transparent;

    color: #dff7ff;

    border: 1px solid rgba(255, 255, 255, 0.08)
}



/* small helper for mouse hint */

.pointer-hint {

    position: absolute;

    left: 18px;

    bottom: 18px;

    z-index: 600;

    font-size: 12px;

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



@media (max-width:980px) {

    .hero-content {

        padding: 48px 10px;

    }



    .glass {



        border-radius: 20px;

        padding: 48px 10px;

    }


    .btn-primary {

        background: linear-gradient(90deg, #00eaff, #1bffd8);

        padding: 14px 12px;

        border-radius: 20px;

        text-decoration: none;

    }

    .intro-glass {
        padding: 42px 10px;
        border-radius: 22px;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
    }


}



@media (max-width:576px) {

    .hero {

        height: auto;

        min-height: fit-content;

    }



    .hero-content {

        padding: 48px 0px;

    }



}





/* ---------- ABOUT + SERVICES sections ----- ----- */

section.content-section {

    position: relative;

    padding: 110px 6vw;

    color: #e9f6ff;

}



.about-inner {

    max-width: 1100px;

    margin: 0 auto;

    text-align: left;

    display: grid;

    grid-template-columns: 1fr 460px;

    gap: 40px;

    align-items: center;

}



.about-inner .copy h2 {

    font-size: clamp(28px, 3.6vw, 44px);

    margin-bottom: 14px
}



.about-inner .copy p {

    line-height: 1.6;

    color: rgba(230, 245, 255, 0.9)
}



.about-card {

    border-radius: 16px;

    padding: 26px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.06)
}





/* responsive */

@media (max-width: 768px) {

    section.content-section {

        padding: 60px 5vw;

        opacity: 1;

    }



    .about-inner {

        grid-template-columns: 1fr;

        gap: 24px;

        /* text-align: center; */

    }



    .about-card {

        max-width: 100%;

        background: rgba(15, 25, 40, 0.9);

    }



    .about-inner .copy p {

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

    }

}





.contact-page {

    padding: 70px 20px;

}



.header {



    margin: auto;

    margin-bottom: 60px;

}



.header h2 {

    font-size: 40px;

    font-weight: 700;

    position: relative;

    padding-bottom: 12px;

}



.header h2::after {

    content: "";

    width: 60px;

    height: 4px;

    background: #e37900;

    position: absolute;

    bottom: 0;

    left: 3%;

    transform: translateX(-50%);

    border-radius: 50px;

}



.header p {

    margin-top: 15px;

    color: #555;

    font-size: 16px;

    line-height: 1.6;

}



/* Layout */

.contact-wrapper {



    margin: auto;

    display: flex;

    gap: 40px;

}



/* Info Section */

.info-box {

    width: 35%;

    color: #fff;

    padding: 10px 0px;

    border-radius: 12px;

}



.info-item {

    display: flex;

    gap: 15px;

    align-items: center;

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

    padding: 10px 20px;

    border-radius: 10px;

    margin-bottom: 5px;

    transition: 0.3s;

}



.info-item:last-child {

    margin-bottom: 0;

}



.info-icon {

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

    width: 48px;

    height: 48px;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition: 0.3s;

}



.info-item i {

    /* background: rgba(255, 255, 255, 0.2); */

    background: #e37900;

    width: 48px;

    height: 48px;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    transition: 0.3s;

}



.info-item:hover i {

    background: #fff;

    color: #e37900;

}



/* Form Section */

.form-box {

    width: 65%;

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

    padding: 10px;

    border-radius: 12px;

    box-shadow: 0 2px 25px rgba(0, 0, 0, 0.07);

}



.input-row {

    display: flex;

    gap: 25px;

}



input,

textarea {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #bbb;

    border-radius: 6px;

    outline: none;

    margin-bottom: 25px;

    font-size: 14px;

    transition: border 0.3s ease;

}



input:focus,

textarea:focus {

    border-color: #009282;

}



textarea {

    resize: none;

}



.submit-btn {

    width: 100%;

    background: #e37900;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

    border: none;

    color: white;

    padding: 15px 0;

    font-size: 17px;

    border-radius: 50px;

    cursor: pointer;

    font-weight: 500;

    transition: 0.3s;

}



.submit-btn:hover {

    background: #004781;

}



/* Responsive */

@media (max-width: 991px) {

    .contact-page {

        padding: 40px 0px;

    }



    .contact-wrapper {

        flex-direction: column;

    }



    .info-box {

        padding: 0px;

    }



    .info-box,

    .form-box {

        width: 100%;

    }

}



@media (max-width: 768px) {

    .input-row {

        flex-direction: column;

    }



    .header h2::after {

        left: 10%;

    }

}



.text-prime {

    color: var(--primary-color);

}



/* -----------------------------------------

   SERVICES SECTION

----------------------------------------- */

.services-section {

    /* padding: 120px 50px; */

    /* background: #0b1624; */

    text-align: center;

}



.section-title2 {

    font-size: 36px;

    color: var(--primary-color);

    margin-bottom: 10px;

    position: relative;

}



.section-title {

    font-size: 3rem;

    color: #fff;

    margin-bottom: 50px;

    position: relative;

}



.section-title::after {

    content: "";

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, #e37900, #004781);

    display: block;

    margin: 12px auto 0;

    border-radius: 5px;

}





/* GRID */

.ser-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 30px;

    margin-top: 30px;

}



/* CARD */

.service-card {

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

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

    padding: 35px 25px;

    border-radius: 20px;

    backdrop-filter: blur(10px);

    color: #fff;

    text-align: center;

    transition: 0.4s ease;

    box-shadow: 0 0 0 rgba(0, 0, 0, 0);

}



/* ICON */

.service-icon {

    font-size: 40px;

    margin-bottom: 20px;

    /* background: linear-gradient(90deg, #e37900, #004781); */

    color: var(--primary-color);

    -webkit-background-clip: text;

    background-clip: text;

}



/* Text */

.service-card h3 {

    font-size: 22px;

    margin-bottom: 12px;

    font-weight: 600;

}



.service-card p {

    font-size: 15px;

    opacity: 0.8;

    line-height: 1.6;

}



/* HOVER EFFECT */

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);

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

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

}





/* -----------------------------------------

   CLIENT LOGO SLIDER

----------------------------------------- */

/* .clients-section {

  background: #09111c;

} */



.logo-slider {

    height: 110px;

    overflow: hidden;

    position: relative;

}



.slide-track {

    display: flex;

    width: calc(200px * 12);

    animation: scroll 25s linear infinite;

}



.slide-track img {

    width: 200px;

    opacity: 0.7;

    transition: 0.3s ease;

}



.slide-track img:hover {

    opacity: 1;

}



/* slider animation */

@keyframes scroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



.portfolio-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

}



.portfolio-item {

    height: 180px;

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    display: flex;

    align-items: flex-end;

    padding: 14px;

    color: white;

    text-decoration: none;

    background-size: cover;

    background-position: center;

    box-shadow: inset 0 -60px 80px rgba(0, 0, 0, 0.45);

    transition: transform .28s ease, box-shadow .28s ease;

}



.portfolio-item:hover {

    transform: translateY(-6px);

    box-shadow: inset 0 -20px 60px rgba(0, 0, 0, 0.25)
}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 22px;

    align-items: start;

}



footer {

    padding: 40px 0;

    color: #c9d0df;

    background: linear-gradient(180deg, #05060b, #071021)
}



.footer-services-grid {

    display: grid;

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

    column-gap: 30px;

}



.footer-services-grid li {

    margin-bottom: 8px;

}

.footer-links-grid {

    display: grid;

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

    column-gap: 30px;

}



.footer-links-grid li {

    margin-bottom: 8px;

}



@media (max-width: 980px) {

    .hero-inner {

        grid-template-columns: 1fr;

    }



    .contact-grid {

        grid-template-columns: 1fr;

    }

    .footer-services-grid {

        display: grid;

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

        column-gap: 20px;

    }
}



.dark {

    --accent: #9b7eff;

    --accent-2: #61efff;

    color: #e9eef8;

}







/* protfolio page styles................................. */



/* PROJECT CARDS */

.project-card {

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

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

    border-radius: 14px;

    overflow: hidden;

    transition: 0.4s;

    cursor: pointer;

}



.project-card:hover {

    transform: translateY(-8px);

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

}



.project-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}



.project-content {

    padding: 20px;

}



.tag {

    display: inline-block;

    padding: 6px 12px;

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

    border: 1px solid rgba(0, 200, 255, 0.3);

    border-radius: 20px;

    font-size: 0.8rem;

    margin-right: 6px;

    color: #00c8ff;

}



/* ANIMATION ON SCROLL */

.fade-card {

    opacity: 1;

    transform: translateY(20px);

    transition: 0.8s ease;

}



.show {

    opacity: 1;

    transform: translateY(0);

}





/* all hero section */

.page-hero {

    position: relative;

    padding: 120px 0 40px;

    background: rgba(5, 145, 164, 73%);

    color: #fff;

}



/* Hero content */

.page-hero>div {

    position: relative;

    z-index: 1;

    /* Text stays above the image */

}



/* .page-hero .container {

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

  backdrop-filter: blur(12px);

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

  border-radius: 20px;

  padding: 50px;

} */





.page-hero::after {

    content: "";

    position: absolute;

    bottom: -1px;

    left: 0;

    width: 100%;

    height: 10px;

    background: #03aee1;

    border-top-left-radius: 40px;

    border-top-right-radius: 40px;

}



.hero-title {

    font-size: clamp(24px, 5vw, 40px);

    font-weight: 700;

    margin-bottom: 12px;

    color: #e37900;

    letter-spacing: 1px;

}



/* .hero-subtitle {

  max-width: 620px;

  font-size: 1.1rem;

  color: #cbd5f5;

} */



/* Unique breadcrumb style */

.breadcrumb-wrap {

    display: inline-block;

    margin-bottom: 20px;

    padding: 8px 18px;

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

    backdrop-filter: blur(6px);

    border-radius: 50px;

}



.breadcrumb {

    margin: 0;

    background: transparent;

    padding: 0;

}



.breadcrumb-item+.breadcrumb-item::before {

    content: "›";

    color: #94a3b8;

    padding: 0 8px;

}



.breadcrumb a {

    text-decoration: none;

    color: #e37900;

    font-weight: 500;

}



.breadcrumb-item.active {

    color: #e5e7eb;

}



/* section {

  perspective: 1400px;

  padding: 20px;

} */



/* about us page styles.................................  */

.about-top {

    min-height: 78vh;

    display: grid;

    place-items: center;

    padding-top: 32px;

}



.about-top-inner {

    display: grid;

    grid-template-columns: 1fr 460px;

    gap: 52px;

    align-items: center;

}



/* LEFT */

.about-top-content {

    padding: 48px 12px;

}



.about-label {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 999px;

    background: linear-gradient(90deg, #07243455, #0e2b3a55);

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

    font-size: 13px;

    font-weight: 600;

    color: var(--muted);

}



.about-title {

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

    font-size: 46px;

    line-height: 1.06;

    margin: 18px 0 14px;

}



.about-title .accent {

    background: linear-gradient(90deg, var(--accent), var(--accent-2));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.about-description {

    font-size: 17px;

    color: var(--muted);

    max-width: 58ch;

    margin-bottom: 24px;

}



.about-actions {

    display: flex;

    gap: 14px;

}



/* RIGHT */

/* RIGHT COLUMN */

.about-top-visual {

    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* FRAME */

.visual-frame {

    width: 420px;

    height: 480px;

    position: relative;

    border-radius: 22px;

    padding: 28px;

    background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);

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

    backdrop-filter: blur(10px);

    box-shadow: 0 28px 60px rgba(2, 6, 18, .6);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



/* BACKGROUND GLOWS */

.bg-glow {

    position: absolute;

    width: 220px;

    height: 220px;

    filter: blur(40px);

    opacity: .45;

    border-radius: 50%;

    pointer-events: none;

}



.bg-glow.blue {

    background: rgba(124, 192, 255, .35);

    top: 15%;

    left: 10%;

}



.bg-glow.green {

    background: rgba(110, 231, 183, .28);

    bottom: 20%;

    right: 12%;

}



/* MAIN CARD */

.about-card {

    position: relative;

    z-index: 2;

    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 16px;

    padding: 20px;

}



.about-card h4 {

    font-size: 16px;

    margin-bottom: 8px;

}



.about-card p {

    font-size: 14px;

    color: var(--muted);

    margin-bottom: 14px;

}



/* POINTS */

.belief-points {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.belief-points span {

    font-size: 12px;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .06);

    border: 1px solid rgba(255, 255, 255, .08);

    color: #e5e7eb;

}



/* STATS */

.about-stats {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 12px;

}



.stat {

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .06);

    border-radius: 14px;

    padding: 12px 8px;

    text-align: center;

}



.stat strong {

    display: block;

    font-size: 18px;

    font-weight: 700;

}



.stat span {

    font-size: 11px;

    color: var(--muted);

}



/* -------------------- */

/* 📱 MOBILE RESPONSIVE */

/* -------------------- */

@media (max-width: 991px) {

    .about-top-inner {

        grid-template-columns: 1fr;

    }



    .hero-title {

        font-size: 2rem;

        font-weight: 600;

        margin-bottom: 12px;

        color: #e37900;

        letter-spacing: 1px;

    }



    .about-top-visual {

        height: auto;

        margin-top: 40px;

    }



    .visual-frame {

        width: 100%;

        height: auto;

    }



    .about-stats {

        grid-template-columns: 1fr 1fr;

    }

}



@media (max-width: 480px) {

    .about-card {

        padding: 16px;

    }



    .about-stats {

        grid-template-columns: 1fr;

    }



    .bg-glow {

        width: 160px;

        height: 160px;

    }

}



.about-identity {

    padding: 96px 0;

}



.about-identity-inner {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 64px;

    align-items: start;

}



/* LEFT */

.identity-tag {

    display: inline-block;

    font-size: 12px;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--accent);

    margin-bottom: 14px;

}



.identity-title {

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

    font-size: 44px;

    line-height: 1.08;

    margin-bottom: 18px;

}



.identity-title span {

    background: linear-gradient(90deg, var(--accent), var(--accent-2));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.identity-lead {

    font-size: 17px;

    max-width: 60ch;

    margin-bottom: 14px;

}



.identity-muted {

    font-size: 15px;

    color: var(--muted);

    max-width: 58ch;

}



/* RIGHT GRID */

.identity-features {

    display: grid;

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

    gap: 18px;

}



.feature-card {

    padding: 22px;

    border-radius: 16px;

    background: linear-gradient(180deg, rgba(124, 192, 255, .14), rgba(110, 231, 183, .08));

    border-color: rgba(124, 192, 255, .3);

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

    transition: transform .2s ease, box-shadow .2s ease;

}



.feature-card h3 {

    margin-bottom: 6px;

    font-size: 18px;

    color: var(--primary-color);

}



.feature-card p {

    font-size: 13px;

    color: var(--muted);

}



.feature-card.accent {

    background: linear-gradient(180deg, rgba(124, 192, 255, .14), rgba(110, 231, 183, .08));

    border-color: rgba(124, 192, 255, .3);

}



.feature-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 36px rgba(2, 6, 18, .45);

}



/* 📱 MOBILE */

@media (max-width: 991px) {

    .about-identity-inner {

        grid-template-columns: 1fr;

        gap: 40px;

    }



    .identity-title {

        font-size: 36px;

    }



    .identity-features {

        grid-template-columns: 1fr;

    }

}



.services-block {

    padding: 40px 0;

}



.services-inner {

    display: grid;

    gap: 20px;

}



/* HEADER */

.section-tag {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .08em;

    color: var(--accent);

    text-align: left;

}



.services-title {

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

    font-size: 42px;

    line-height: 1.1;

}



.services-title span {

    background: linear-gradient(90deg, var(--accent), var(--accent-2));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.services-intro {

    color: var(--muted);

    max-width: 60ch;

}



/* GRID */

.services-grid {

    display: grid;

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

    gap: 20px;

    margin: 20px auto;

}



.service-item {

    padding: 15px 20px;

    border-radius: 18px;

    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));

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

    transition: transform .2s ease, box-shadow .2s ease;

}



.service-item h3 {

    font-size: 24px;

    font-weight: bold;

    margin-bottom: 6px;

    background: linear-gradient(90deg, var(--accent), var(--accent-2));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}

.service-item h3 i {

    margin-right: 8px;

    font-size: 20px;

}

.service-item p {

    font-size: 14px;

    color: var(--muted);

}



.service-item.highlight {

    background: linear-gradient(180deg, rgba(124, 192, 255, .15), rgba(110, 231, 183, .08));

    border-color: rgba(124, 192, 255, .3);

}



.service-item:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(2, 6, 18, .45);

}



.services-cta {

    margin-top: 40px;

    display: flex;

    justify-content: center;

}



.btn-outline {

    padding: 12px 26px;

    border-radius: 999px;

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

    background: transparent;

    color: #fff;

    font-size: 14px;

    text-decoration: none;

    transition: all .25s ease;

}



.btn-outline:hover {

    background: linear-gradient(90deg, var(--accent), var(--accent-2));

    color: #012235;

    border-color: transparent;

    transform: translateY(-2px);

}



.service-item {

    position: relative;

}



/* Read more link */

.service-link {

    display: inline-block;

    margin-top: 12px;

    font-size: 13px;

    font-weight: 600;

    color: #e37900;

    text-decoration: none;

    opacity: 0;

    transform: translateY(4px);

    transition: all .25s ease;

}



/* Show on hover (desktop) */

.service-item:hover .service-link {

    opacity: 1;

    transform: translateY(0);

}



/* Always visible on mobile */

@media (max-width: 991px) {

    .service-link {

        opacity: 1;

        transform: none;

    }

}





/* MOBILE */

@media (max-width: 991px) {

    .services-grid {

        grid-template-columns: 1fr;

    }



    .services-title {

        font-size: 34px;

    }

}



.journey-block {

    padding: 40px 0;

}



.journey-inner {

    display: grid;

    gap: 48px;

}



/* GRID LAYOUT */

.journey-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 48px;

    margin-top: 42px;

    align-items: flex-start;

}



/* TIMELINE */

.journey-timeline {

    position: relative;

    padding-left: 28px;

}



.journey-timeline::before {

    content: '';

    position: absolute;

    left: 6px;

    top: 0;

    bottom: 0;

    width: 2px;

    background: linear-gradient(180deg, var(--accent), transparent);

    opacity: 0.3;

}



.journey-step {

    position: relative;

    padding: 18px 20px;

    margin-bottom: 22px;

    border-radius: 14px;

    background: linear-gradient(180deg,

            rgba(255, 255, 255, 0.05),

            rgba(255, 255, 255, 0.01));

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

}



.journey-step::before {

    content: '';

    position: absolute;

    left: -32px;

    top: 22px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--accent), var(--accent-2));

}



.journey-step .year {

    font-weight: 700;

    font-size: 14px;

    color: var(--accent);

}



.journey-step p {

    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;

}



/* MISSION / VISION */

.journey-beliefs {

    display: grid;

    gap: 22px;

}



.belief-card {

    padding: 26px;

    border-radius: 18px;

    background: linear-gradient(180deg,

            rgba(255, 255, 255, 0.06),

            rgba(255, 255, 255, 0.02));

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

}



.belief-tag {

    display: inline-block;

    font-size: 11px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--accent);

    margin-bottom: 6px;

}



.belief-card h4 {

    margin: 6px 0 10px;

}



.belief-card p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;

}



/* MOBILE STACK */

@media (max-width: 991px) {

    .journey-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }



    .journey-timeline {

        padding-left: 22px;

    }

}



/* CTA SECTION */

.cta-block {

    padding: 40px 0;

}



/* CARD */

.cta-card {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 32px;

    padding: 40px;

    border-radius: 22px;

    background: linear-gradient(135deg,

            rgba(255, 255, 255, 0.08),

            rgba(255, 255, 255, 0.02));

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

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

}



/* CONTENT */

.cta-title {

    margin: 8px 0 12px;

}



.cta-text {

    color: var(--muted);

    max-width: 480px;

    line-height: 1.6;

}



/* ACTIONS */

.cta-actions {

    display: flex;

    gap: 14px;

    align-items: center;

}



/* BUTTONS */

.btn.primary {

    padding: 12px 22px;

    border-radius: 999px;

    background: linear-gradient(135deg,

            var(--accent),

            var(--accent-2));

    color: #020617;

    font-weight: 600;

    text-decoration: none;

    border: none;

}



.btn.ghost {

    padding: 12px 22px;

    border-radius: 999px;

    background: transparent;

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

    color: #fff;

    cursor: pointer;

}



/* MOBILE */

@media (max-width: 991px) {

    .cta-card {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .cta-actions {

        justify-content: center;

        flex-wrap: wrap;

    }



    .cta-text {

        margin: 0 auto;

    }

}





/* sservices page styles................................. */



/* HERO BLOCK */

/* PAGE LEAD */

.page-lead {

    padding: 70px 0 px;

}



.page-lead-inner {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 48px;

    align-items: center;

}



/* CONTENT */

.page-lead-content {

    max-width: 720px;

}



.kicker {

    display: inline-block;

    padding: 8px 14px;

    border-radius: 999px;

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

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

    font-size: 13px;

    font-weight: 600;

    color: var(--muted);

}



.page-lead-title {

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

    font-size: 52px;

    line-height: 1.05;

    margin: 18px 0 14px;

}



.page-lead-title span {

    background: linear-gradient(90deg,

            var(--accent),

            var(--accent-2));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.page-lead-text {

    color: var(--muted);

    font-size: 18px;

    max-width: 60ch;

}



/* ACTIONS */

.page-lead-actions {

    display: flex;

    gap: 14px;

    margin-top: 22px;

}



/* VISUAL */

.page-lead-visual {

    position: relative;

    padding: 22px;

    border-radius: 22px;

    background: linear-gradient(180deg,

            rgba(255, 255, 255, 0.04),

            transparent);

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

    backdrop-filter: blur(10px);

    box-shadow: 0 40px 90px rgba(1, 6, 16, 0.65);

    overflow: hidden;

}



/* STACK */

.service-stack {

    position: relative;

    z-index: 2;

    display: grid;

    gap: 12px;

}



.stack-item {

    padding: 14px 16px;

    border-radius: 12px;

    font-size: 14px;

    background: linear-gradient(90deg,

            rgba(255, 255, 255, 0.12),

            rgba(255, 255, 255, 0.04));

    backdrop-filter: blur(6px);

}



/* GLOWS */

.ambient-glow {

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.85;

    mix-blend-mode: screen;

}



.glow-a {

    background: linear-gradient(135deg, var(--accent), #9ad2ff);

    left: -100px;

    top: -80px;

}



.glow-b {

    background: linear-gradient(135deg, #a88bff, var(--accent-2));

    right: -90px;

    bottom: -90px;

}



/* MOBILE */

@media (max-width: 991px) {

    .page-lead-inner {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .page-lead-actions {

        justify-content: center;

        flex-wrap: wrap;

    }



    .page-lead-visual {

        max-width: 420px;

        margin: 0 auto;

    }

}



.services-block {

    padding: 40px 0px;

}



.services-header {

    text-align: center;

    /* margin-bottom: 36px; */

}



.section-title {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 8px;

}



.section-subtitle {

    color: var(--muted);

    font-size: 16px;

}



/* GRID */



/* READ MORE BUTTON */

.btn.read-more {

    font-size: 13px;

    padding: 6px 14px;

    border-radius: 8px;

    background: var(--accent);

    color: #fff;

    text-decoration: none;

    transition: background 0.3s ease;

}



.btn.read-more:hover {

    background: var(--accent-2);

}



/* RESPONSIVE */

@media(max-width: 980px) {

    .services-grid {

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

    }

}



@media(max-width: 640px) {

    .services-grid {

        grid-template-columns: 1fr;

    }

}



.packages-block {

    padding: 30px 0;

}



.packages-header {

    text-align: center;

    margin-bottom: 36px;

}



.section-title {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 6px;

}



.section-subtitle {

    color: var(--muted);

    font-size: 16px;

}



/* GRID */

.packages-grid {

    display: grid;

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

    gap: 24px;

}



/* CARD */

.package-card {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);

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

    border-radius: 16px;

    padding: 28px 22px;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 12px;

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

}



.package-card:hover {

    transform: translateY(-10px);

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

}



/* FEATURED CARD */

.package-card.featured {

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

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);

}



/* NAME + PRICE */

.package-name {

    font-weight: 600;

    font-size: 16px;

}



.package-price {

    font-size: 24px;

    font-weight: 800;

    margin: 6px 0 12px;

}



/* FEATURES */

.package-features {

    list-style: none;

    padding: 0;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

}



.package-features li {

    margin: 6px 0;

}



/* BUTTON */

.package-card .btn.primary {

    margin-top: 12px;

    font-size: 14px;

    padding: 8px 18px;

    border-radius: 8px;

    background: var(--accent);

    color: #fff;

    border: none;

    cursor: pointer;

    transition: background 0.3s ease;

}



.package-card .btn.primary:hover {

    background: var(--accent-2);

}



/* RESPONSIVE */

@media(max-width:980px) {

    .packages-grid {

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

    }

}



@media(max-width:640px) {

    .packages-grid {

        grid-template-columns: 1fr;

    }

}



.cases-block {

    padding: 20px 0;

}



.cases-header {

    text-align: center;

    margin-bottom: 36px;

}



.section-title {

    font-size: 28px;

    font-weight: 700;

}



/* GRID */

.cases-grid {

    display: grid;

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

    gap: 18px;

}



/* CASE CARD */

.case-card {

    position: relative;

    display: block;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

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

}



.case-card img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;

}



.case-card:hover img {

    transform: scale(1.05);

}



.case-overlay {

    position: absolute;

    left: 16px;

    bottom: 16px;

    padding: 12px 14px;

    border-radius: 8px;

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent);

    color: #fff;

    transition: background 0.3s ease;

}



.case-overlay h4 {

    margin: 0 0 4px;

    font-size: 16px;

    font-weight: 600;

}



.case-overlay p {

    margin: 0;

    font-size: 14px;

    color: #f1f1f1;

}



/* HOVER EFFECT */

.case-card:hover .case-overlay {

    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent);

}



/* RESPONSIVE */

@media(max-width: 980px) {

    .cases-grid {

        grid-template-columns: 1fr;

    }

}





.section-text {

    font-size: 17px;

    line-height: 1.7;

    opacity: 0.9;

}



/* Card Styling */

.benefit-card {

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

    padding: 25px;

    border-radius: 14px;

    transition: 0.3s;

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

}

.benefit-card i {

    font-size: 16px;

    color: #0d6efd;

    flex-shrink: 0;

    margin-right: 5px;

}

.benefit-card:hover {

    transform: translateY(-6px);

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

}



.divider-line {

    height: 2px;

    width: 100%;

    background: linear-gradient(90deg, transparent, #627bff, transparent);

    margin: 40px 0;

}













/* contact us page styles................................. */





/* Section Styling */

#contact-page {

    padding: 40px 0;

    position: relative;

}



.form-control {

    margin-bottom: 0px !important;

}



.section-title {

    font-size: 48px;

    font-weight: 700;

    letter-spacing: -1px;

}



.contact-info-card {

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

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 15px;

}



.contact-info-card i {

    color: #00E0FF;

}



.contact-form-card {

    border-radius: 20px;

    padding: 15px;

    background: #ffffff;

    color: #000;

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

}



.contact-form-card input,

.contact-form-card textarea {

    border-radius: 12px;

    border: 1px solid #dcdcdc;

    padding: 12px 14px;

}



.contact-form-card button {

    background: #0A1625;

    border-radius: 12px;

    color: #fff;

    padding: 12px;

    width: 100%;

    border: none;

    font-size: 17px;

    font-weight: 600;

}



.contact-form-card button:hover {

    background: #0d2034;

}



/* Map Styling */

.map-frame {

    border-radius: 20px;

    overflow: hidden;

    margin-top: 50px;

}





.fab-wrap {

    position: fixed;

    bottom: 28px;

    right: 24px;

    z-index: 9999;

}



/* Hide checkbox */

#fabToggle {

    display: none;

}



/* Main FAB */

.fab-main {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: linear-gradient(135deg, #f6b707, #ffce3a);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);

    transition: transform .4s ease;

}



.fab-main i {

    font-size: 26px;

    color: #111;

    transition: transform .4s ease;

}



/* Rotate icon on open */

#fabToggle:checked+.fab-main i {

    transform: rotate(45deg);

}



/* Action buttons */

.fab-action {

    position: absolute;

    right: 6px;

    bottom: 6px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(10px);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #111;

    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);

    opacity: 0;

    pointer-events: none;

    transition: all .45s cubic-bezier(.4, 0, .2, 1);

}



/* Tooltip label */

.fab-action span {

    position: absolute;

    right: 64px;

    background: #111;

    color: #fff;

    padding: 6px 12px;

    border-radius: 8px;

    font-size: 13px;

    white-space: nowrap;

    opacity: 0;

    transform: translateX(10px);

    transition: .3s;

}

.fab-action i {

    font-size: 24px;

}



.fab-action:hover span {

    opacity: 1;

    transform: translateX(0);

}



/* Active positions */

#fabToggle:checked~.whatsapp {
    transform: translate(15px, -60px);
    opacity: 1;
    pointer-events: auto;
    background-color: #002916;
}

#fabToggle:checked~.call {
    transform: translate(-45px, -45px);
    opacity: 1;
    pointer-events: auto;
    background-color: #001c37;
}

#fabToggle:checked~.email {
    transform: translate(-64px, 10px);
    opacity: 1;
    pointer-events: auto;
    background-color: #000;
}

/* #fabToggle:checked~.enquire {
    transform: translate(-64px, 26px);
    opacity: 1;
    pointer-events: auto;
    background-color: #1f0125;
} */



/* Brand colors */

.whatsapp {

    color: #25d366;

}



.call {

    color: #00aeff;

    font-size: 24px;

}



.email {

    color: #f97316;

}



.enquire {

    color: #a855f7;

}



/* Hover lift */

.fab-action:hover {

    transform: scale(1.1) !important;

}


.fab-main i {
    position: absolute;
    transition: .25s ease;
}

.fab-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

#fabToggle:checked+.fab-main .fab-open {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

#fabToggle:checked+.fab-main .fab-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}








.blog-featured {

    padding: 80px 0;

}



.featured-card {

    position: relative;

    display: block;

    border-radius: 20px;

    overflow: hidden;

}



.featured-card img {

    width: 100%;

    height: 460px;

    object-fit: cover;

}



.featured-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}



.blog-grid {

    padding: 80px 0;

}



.blog-card {

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

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

    border-radius: 14px;

    overflow: hidden;

    height: 100%;

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

    transition: transform .3s ease, box-shadow .3s ease;

}



.blog-card:hover {

    transform: translateY(-6px);

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

}



.blog-thumb {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

}



.blog-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;

}



.blog-card:hover .blog-thumb img {

    transform: scale(1.08);

}



.blog-body {

    padding: 22px;

}



.blog-cat a {

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    color: #0d6efd;

    margin-right: 6px;

    text-decoration: none;

}



.blog-title {

    font-size: 18px;

    margin: 10px 0;

    line-height: 1.4;

    color: #111;

}



.blog-excerpt {

    font-size: 14px;

    color: #e1e1e1;

    line-height: 1.6;

}



.read-more {

    display: inline-block;

    margin-top: 12px;

    font-size: 14px;

    font-weight: 600;

    color: #0d6efd;

}



/* BLOG CONTENT */

.blog-article {

    font-size: 16px;

    line-height: 1.8;

    color: #333;

}



.blog-title {

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

    color: #e37900;

}

.blog-details-title {

    font-size: 36px;

    font-weight: 700;

    line-height: 1.3;

    color: #e37900;

}

.blog-meta {

    font-size: 14px;

    color: #777;

}



.blog-article p {

    margin-bottom: 20px;

    color: #fff;

}



.wp-block-heading {

    color: #e37900;

    font-size: 28px;

}



.wp-block-list {

    color: #fff;

}



/* SIDEBAR */

.blog-sidebar {

    position: sticky;

    top: 100px;

}



.widget-card {

    background: #fff;

    padding: 24px;

    border-radius: 14px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

}



.widget-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 20px;

    position: relative;

    color: #e37900;

}



.widget-title::after {

    content: '';

    width: 40px;

    height: 3px;

    background: #0d6efd;

    display: block;

    margin-top: 8px;

}



/* RECENT POSTS */

.recent-post-item {

    padding-bottom: 14px;

    margin-bottom: 14px;

    border-bottom: 1px solid #eee;

}



.recent-post-item:last-child {

    border-bottom: none;

    margin-bottom: 0;

}



.recent-post-item a {

    display: block;

    font-weight: 600;

    color: #111;

    text-decoration: none;

}



.recent-post-item a:hover {

    color: #0d6efd;

}



.post-date {

    font-size: 12px;

    color: #999;

}


.project-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .85);
    transition: .25s ease;
}

.project-preview:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .22);
}


.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slide-track {
    display: flex;
    align-items: center;
    gap: 34px;
    width: max-content;
    animation: logosScroll 22s linear infinite;
}

.logo-slider img {
    height: 70px;
    width: auto;
    object-fit: contain;
    /* filter: grayscale(100%); */
    opacity: .85;
    transition: .25s ease;
    background-color: #fff;
}

.logo-slider img:hover {
    /* filter: grayscale(0%); */
    opacity: 1;
    transform: translateY(-1px);
}

@keyframes logosScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


.enq-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.enq-overlay.active {
    display: flex;
}

.enq-modal {
    background: #fff;
    width: 520px;
    max-width: 92%;
    padding: 32px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    animation: pop .35s ease;
}

@keyframes pop {
    from {
        transform: scale(.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.enq-close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;
    border-radius: 50%;

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

    border: none;
    background: #e8f3ff;
    color: #0b6edc;

    cursor: pointer;
    transition: all .25s ease;
}

.enq-close i {
    font-size: 18px;
    line-height: 1;
}

.enq-close:hover {
    background: #0b6edc;
    color: #fff;
    transform: rotate(90deg);
}

.enq-modal h2 {
    margin: 0 0 8px;
    color: #0b3c8a;
}

.enq-sub {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

.enq-row {
    display: flex;
    gap: 12px;
}

.enq-modal input,
.enq-modal select,
.enq-modal textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cfd8ea;
    padding: 10px 4px;
    margin-bottom: 16px;
    font-size: 14px;
    outline: none;
}

.enq-modal input:focus,
.enq-modal select:focus,
.enq-modal textarea:focus {
    border-bottom-color: #1b7cff;
}

.enq-send {
    width: 160px;
    margin: 8px auto 0;
    display: block;
    padding: 10px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(90deg, #4b5cff, #00c6ff);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.enq-note {
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    color: #555;
}



.side-enquiry {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right top;
    background: linear-gradient(135deg, #cd2029, #f6b707);
    color: #fff;
    padding: 8px 15px;
    font-weight: 600;
    letter-spacing: .6px;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .3s ease;
}

.side-enquiry i {
    font-size: 14px;
}

.side-enquiry:hover {
    transform: translateY(-50%) rotate(-90deg) scale(1.05);
}


.sectionSpace {
    padding: 25px 0;
}

.serviceContent p {
    color: #fff;
}

.serviceHero {
    position: relative;
    padding: 90px 0 70px;
    background: rgba(5, 145, 164, 73%);
    overflow: hidden;
}

.serviceHeroInner {
    display: grid;
    /* grid-template-columns: 1.1fr .9fr; */
    gap: 40px;
    align-items: center;
}

.serviceTag,
.sectionMiniTag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.serviceTag {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.serviceHeroTitle {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
}

.serviceHeroSubtitle {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.82);
    max-width: 720px;
    margin-bottom: 24px;
}

.serviceBreadcrumb .breadcrumb {
    margin: 0;
}

.serviceBreadcrumb .breadcrumb-item,
.serviceBreadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    text-decoration: none;
}

.serviceHeroVisual {
    position: relative;
}

.serviceHeroImage {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    object-fit: cover;
}

.serviceHeroPlaceholder {
    min-height: 380px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 72px;
    border: 1px solid rgba(255, 255, 255, .15);
}

.contentCard,
.stickyInfoCard,
.infoCard,
.serviceCard,
.whyCard,
.ctaBox {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.contentCard {
    padding: 34px;
    height: 100%;
}

.stickyInfoCard {
    padding: 28px;
    position: sticky;
    top: 100px;
    border: 1px solid #e5e7eb;
}

.stickyInfoCard h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: #e37900;
}

.stickyInfoCard p {
    color: #fff;
    line-height: 1.8;
    margin-bottom: 22px;
}

.sectionHead {
    max-width: 100%;
    margin: 0 auto 44px;
}

.sectionTitle {
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.2;
    font-weight: 800;
    color: #e37900;
    margin: 0;
}

.editorContent {
    color: #475569;
    line-height: 1.9;
    font-size: 16px;
    margin-top: 15px;
}

.editorContent h2,
.editorContent h3,
.editorContent h4 {
    color: #e37900;
    margin-top: 28px;
    margin-bottom: 14px;
}

.infoCard,
.whyCard,
.serviceCard {
    padding: 20px 16px;
    height: 100%;
    border: 1px solid #eef2f7;
    transition: all .35s ease;
}

.whyCard {
    display: flex;
    gap: 10px;
}

.infoCard:hover,
.whyCard:hover,
.serviceCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.infoIcon,
.whyIcon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #f1c899;
}

.infoContent p,
.whyCard p {
    margin: 0;
    color: #fff;
    line-height: 1.8;
}

.serviceCardNumber {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 12px;
    letter-spacing: .08em;
}

.serviceCard h3,
.whyCard h3,
.infoCard h3 {
    font-size: 20px;
    color: #e37900;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
}

.processWrap {
    display: grid;
    gap: 18px;
}

.processItem {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #ffffff14;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.processStep {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

.processText {
    color: #e37900;
    line-height: 1.8;
    padding-top: 10px;
}

.serviceFaq .accordion-item {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.serviceFaq .accordion-button {
    font-weight: 700;
    color: #0f172a;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    box-shadow: none;
}

.serviceFaq .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    color: #1d4ed8;
}

.serviceFaq .accordion-body {
    color: #e37900;
    line-height: 1.8;
    padding: 0 24px 22px;
}

.ctaBox {
    padding: 38px;
    /* display: flex; */
    align-items: center;
    justify-content: space-between;
    /* gap: 24px; */
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
}

.ctaBox h2 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 34px;
}

.ctaBox p {
    color: rgba(255, 255, 255, .82);
    margin: 0;
    line-height: 1.8;
}

.ctaBoxAction {
    display: flex;
    margin-top: 10px;
    /* justify-content: end; */
}

.serviceBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.serviceBtnPrimary {
    background: #e37900;
    color: #fff;
}

.serviceBtnPrimary:hover {
    transform: translateY(-2px);
    color: #0f172a;
}

@media (max-width: 991px) {
    .serviceHeroInner {
        grid-template-columns: 1fr;
    }

    .stickyInfoCard {
        position: static;
    }

    .ctaBox {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
   

    .serviceHero {
        padding: 120px 0 55px;
    }

    .contentCard,
    .stickyInfoCard,
    .infoCard,
    .serviceCard,
    .whyCard,
    .ctaBox {
        border-radius: 18px;
    }

    .contentCard {
        padding: 24px;
    }

    .ctaBox {
        padding: 26px;
    }

    .ctaBox h2 {
        font-size: 26px;
    }
}

.infoCard h4,
.whyCard h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #0f172a;
}

.serviceCard p,
.infoCard p,
.whyCard p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: #fff;
}

.processText strong {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffffff;
}

.whyCard p {
    margin-top: 0px;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}

.sectionTransparent {
    background: transparent;
}

.serviceSection {
    position: relative;
}

.serviceSectionIntro {
    margin-bottom: 34px;
}

.centeredIntro {
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.premiumEditorCard {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 26px;
    padding: 34px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}

.premiumEditorGlow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0) 72%);
    pointer-events: none;
}

.serviceRichText {
    position: relative;
    z-index: 2;
    
}

.serviceRichText p:last-child {
    margin-bottom: 0;
}

.splitFeatureBox {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92));
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.splitFeatureContent {
    max-width: 620px;
}

.splitFeatureVisual {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 360px;
    background: linear-gradient(135deg, #eef4ff, #f8fafc);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.splitFeatureVisual img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

.splitFeaturePlaceholder {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    color: rgba(15, 23, 42, 0.25);
}

.caseStudyCard {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    border-radius: 24px;
    /* background: #fff; */
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.caseStudyCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(38, 57, 101, 0.12);
    border-color: rgba(59, 130, 246, 0.18);
}

.caseStudyTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.caseStudyNumber {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #e37900;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.08em;
}

.caseStudyBadge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.caseStudyCard h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: #e37900;
}

.caseStudyCard p {
    margin: 0;
    color: #fff;
    line-height: 1.75;
}



@media (max-width: 991.98px) {

    .premiumEditorCard,
    .splitFeatureBox,
    .caseStudyCard {
        border-radius: 20px;
    }

    .premiumEditorCard,
    .splitFeatureBox {
        padding: 24px;
    }

    .splitFeatureVisual,
    .splitFeatureVisual img,
    .splitFeaturePlaceholder {
        min-height: 280px;
    }
}

@media (max-width: 767.98px) {
    .serviceSectionIntro {
        margin-bottom: 24px;
    }

    .premiumEditorCard,
    .splitFeatureBox,
    .caseStudyCard {
        padding: 20px;
    }

    .caseStudyCard h3 {
        font-size: 1.1rem;
    }
}

.overviewFloatWrap {
    position: relative;
    line-height: 1.8;
}

/* FLOAT IMAGE */
.overviewFloatImage {
    float: left;
    width: 380px;
    max-width: 100%;
    margin: 0 28px 20px 0;
    border-radius: 18px;
    object-fit: cover;
}

/* CLEAR FIX (important) */
.overviewFloatWrap::after {
    content: "";
    display: block;
    clear: both;
}

/* MOBILE */
@media (max-width: 768px) {
    .overviewFloatImage {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }
}

.introFloatWrap {
    position: relative;
    line-height: 1.8;
}

/* IMAGE LEFT FLOAT */
.introFloatImage {
    float: right;
    width: 400px;
    max-width: 100%;
    margin: 0 0px 20px 25px;
    border-radius: 18px;
    object-fit: cover;
}

/* CLEAR FLOAT */
.introFloatWrap::after {
    content: "";
    display: block;
    clear: both;
}

/* MOBILE */
@media (max-width: 768px) {
    .introFloatImage {
        float: none;
        width: 100%;
        margin: 20px 0 20px 0;
    }
}

.whyBottomText {
    margin-top: 30px;
    font-size: 16px;

}
.txt-white{
    color: #fff;
}