:root {
    --bg: #0e100f;
    --bg2: #141715;
    --bg3: #1a1d1b;
    --green: #0ae448;
    --green2: #88ce02;
    --white: #fff;
    --fg: #e8ede9;
    --fg2: #8a9490;
    --fg3: #4a5450;
    --border: rgba(255, 255, 255, 0.08);
    --green-border: rgba(10, 228, 72, 0.25);
    --green-dim: rgba(10, 228, 72, 0.10);
    --f-disp: 'Cabinet Grotesk', sans-serif;
    --f-body: 'Satoshi', sans-serif;
    --f-mono: 'JetBrains Mono', monospace;
    --bone: #EAE4D8;
    --ink: #0F0F13;
    --blue: #2A1FE6;
    --hot: #FF4D00;
    --lav: #C9C4FF;
    --disp: 'Syne', 'Arial Black', sans-serif;
    --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'Space Mono', 'Courier New', monospace;
    --bg: #0a0a0c;
    --surface: #141418;
    --line: #26262e;
    --fg: #f2f2f4;
    --dim: #8a8a96;
    --accent: #5eead4;
    --accent-2: #7dd3fc;
    --ease: cubic-bezier(.19, 1, .22, 1);
    --bg1: #0a1628;
    --bg2: #1a3150;
    --bg3: #0d1f38;
    --card: #0c1d33;
    --card2: #0f2240;
    --b1: #1e3a5f;
    --b2: #2a5080;
    --accent: #4a9eff;
    --accent2: #6cb2ff;
    --gold: #c9a84c;
    --gold2: #deba68;
    --green: #2a9a58;
    --green-bg: #0d3320;
    --t1: #f0f4ff;
    --t2: #8ba8cc;
    --t3: #4a7aaa;
    --t4: #2a4a6a;
    --serif: 'DM Serif Display', Georgia, serif;
    /* --sans: 'DM Sans', system-ui, sans-serif; */
    --sans: 'clay display', system-ui, sans-serif;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --clash-font: 'Clash Display', system-ui, -apple-system, sans-serif;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../assets/fonts/ClashDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../assets/fonts/ClashDisplay-Medium.otf')format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
src: url('../assets/fonts/ClashDisplay-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../assets/fonts/ClashDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: "Syne", Sans-serif; */
    /* font-family: var(--clash-font); */
    /* font-family: var(--sans); */
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
}
body p {
    color: rgba(255, 255, 255, .84) !important;
   font-family: 'Inter', sans-serif;         /* Body */
}


/* ==========================
PRELOADER
========================== */


.preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    overflow: hidden;

    background:
        radial-gradient(circle at 20% 20%, rgba(35, 135, 229, .15), transparent 30%),
        radial-gradient(circle at 80% 80%, rgba(90, 60, 255, .15), transparent 35%),
        linear-gradient(160deg, #060d18 0%, #0c1a2d 45%, #04070d 100%);
}

.preloader::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, .02) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .02) 1px,
            transparent 1px);

    background-size: 60px 60px;

    opacity: .5;
}

/* Floating Glow Orbs */

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    animation: float 10s ease-in-out infinite;
}

.orb-1 {
    width: 450px;
    height: 450px;
    background: #2387E5;
    top: -150px;
    left: -120px;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: #7C3AED;
    bottom: -100px;
    right: -100px;
    animation-delay: -4s;
}

@keyframes float {

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

    50% {
        transform: translateY(-40px) scale(1.08);
    }
}

.preloader-content {
    position: relative;
    z-index: 2;
    width: min(650px, 85%);
}

/* Label */

.preloader-label {
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: .75rem;
    text-align: center;
    margin-bottom: 25px;
}

/* Logo */

.preloader-logo {
    font-size: clamp(1.5rem, 6vw, 4.5rem);
    font-weight: 900;
    text-align: center;
    line-height: 1;
    font-family: "Space Grotesk", sans-serif;

    letter-spacing: .15em;

    margin-bottom: 50px;

    background:
        linear-gradient(90deg,
            #ffffff,
            #89c6ff,
            #ffffff);

    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shine 4s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Progress Track */

.progress-track {
    position: relative;

    height: 8px;

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

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

    border-radius: 999px;

    overflow: hidden;

    backdrop-filter: blur(20px);
}

/* Progress Fill */

.progress-fill {
    width: 0%;
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #2387E5,
            #46B4FF,
            #8BD8FF);

    box-shadow:
        0 0 15px rgba(35, 135, 229, .8),
        0 0 30px rgba(35, 135, 229, .5),
        0 0 60px rgba(35, 135, 229, .3);
}

/* Footer */

.progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 16px;

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

    font-size: .85rem;

    letter-spacing: 2px;
}

.progress-percent {
    font-weight: 700;
    color: #fff;
}

/* Responsive */

@media(max-width:768px) {

    .preloader-logo {
        letter-spacing: .08em;
    }

    .progress-footer {
        font-size: .75rem;
    }

    .bg-orb {
        filter: blur(80px);
    }
}
/* ===================================
PRELOADER/-
=================================== */

/* Hide hero initially */

.hero-content {
    visibility: hidden;
}

/* Hide scroll during loading */
/* 
body.loading{
    overflow:hidden;
} */
/*Button Stylings*/
.custom-btn {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: 500 !important;
    border: 2px solid #00E0FF !important;
    color: #372929;
    background: #fff;
}
.custom-btn:hover {
    transition: 0.5s all linear;
    color: #00E0FF;
}

h1,
h2,
h3,
h4 {
    letter-spacing: -0.04em !Important;
    font-weight: 400;
    /* font-family: 'Satoshi', sans-serif; */
    font-family: 'Plus Jakarta Sans', sans-serif;

    /* font-family: var(--clash-font); */
}

body {

    /* background:
        radial-gradient(
            circle at top left,
            rgba(35,135,229,.07),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(99,102,241,.05),
            transparent 35%
        ),
        #09111F; */
    background: linear-gradient(160deg, #0a1628 0%, #1a3150 40%, #0d1f38 100%);
    /* background:
        radial-gradient(
            circle at 15% 20%,
            rgba(35,135,229,.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(99,102,241,.08),
            transparent 35%
        ),

        #09111F; */

    /* background: #0D1324; */
    /* background: #060816; */
    /* background-image: radial-gradient(at center center, #2F4F73 0%, #0F223A 80%); */
    /* background-image:
        radial-gradient(at center center, #2F4F73 0%, #0F223A 80%); */
    /* url("../assets/images/bg-overlay.png");  */
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center center, top left;
    /* background:
    radial-gradient(circle at 20% 20%, rgba(47, 79, 115, 0.45) 0%, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(47, 79, 115, 0.35) 0%, transparent 30%),
    radial-gradient(circle at 40% 80%, rgba(47, 79, 115, 0.25) 0%, transparent 35%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04) 0%, transparent 25%),
    radial-gradient(at center center, #2F4F73 0%, #0F223A 80%); */
}
.contact-btn {
    padding: 12px 24px !Important;
    background: linear-gradient(135deg, rgb(124, 58, 237), rgb(37, 99, 235));
    font-size: 13px;
    font-weight: 500;
    padding: 10px 22px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.01em;
}

/*Hero Banner*/
.hero-banner {
    position: relative;
    /* min-height: 100vh; */
    background: #060816;
    /* background:
radial-gradient(circle at 20% 20%, #7c3aed 0%, transparent 40%),
radial-gradient(circle at 80% 30%, #06b6d4 0%, transparent 40%),
radial-gradient(circle at 50% 80%, #2563eb 0%, transparent 40%)!important; */
    overflow: hidden;
    padding: 120px 0;

}

/* GLOW EFFECT */
/* .custom-nav::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background:
        radial-gradient(circle,
            rgba(79, 70, 229, 0.25),
            transparent 70%);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(60px);
} */
/* PREMIUM GRID */
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image: radial-gradient(circle at center,
            black 35%,
            transparent 85%);

    animation: gridMove 18s linear infinite;
    z-index: +1;

}

/* .hero-banner::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    background:
        radial-gradient(circle,
            rgba(79, 70, 229, 0.25),
            transparent 70%);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(60px);
} */

/* CONTENT */
.hero-banner .btn {
    transition: all .3s ease;
}
.hero-banner .btn:hover {
    transform: translateY(-4px);
}
.hero-banner h1 {
    perspective: 1000px;
}
.hero-banner h1 span {
    display: inline-block;
}
/* BUTTON */
.hero-banner .btn-work {
    background: transparent;
    border: 1px solid white;
    padding: 12px 26px;
    font-weight: 600;
    border-radius: 40px;
    transition: 0.4s ease;
   
}
.hero-banner .btn-primary,
.sounds .btn-primary,
.case-study .btn-primary,
.final-cta .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border: none;
    padding: 12px 26px;
    font-weight: 500;
    transition: 0.4s ease;
    box-shadow: 0 10px 40px rgba(124, 58, 237, 0.3);
    border-radius: 40px;
}

.hero-banner .btn-primary:hover,
.sounds .btn-primary:hover {
    /* transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(124, 58, 237, 0.45);
    z-index: +999; */
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    color: #fff;
}
/* ANIMATION */
@keyframes gridMove {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(70px);
    }
}
.beam {
    position: absolute;
    top: -200px;
    width: 1px;
    height: 220px;

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

    opacity: 0.5;

    animation: beamDrop 7s linear infinite;
}

/* Different positions */
.beam-1 {
    left: 23%;
    animation-delay: 0s;
}

.beam-2 {
    left: 50.6%;
    animation-delay: 2s;
}

.beam-3 {
    left: 78.2%;
    animation-delay: 4s;
}

@keyframes beamDrop {
    from {
        transform: translateY(-200px);
    }

    to {
        transform: translateY(120vh);
    }
}

/*bg-hero-stylings*/
.hero-banner {
    /* height: 65vh; */
    background-image: url("../assets/background-grids.svg");
    background-repeat: no-repeat;
    background-position: cover;
    background-position: center center;
}
.inside-hero p.hero-desc {
    width: 50%!important;
}
.hero-banner h1,
.hero-banner h1 i {    
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;

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

    line-height: 1.1;
    letter-spacing: -2px;

    background: linear-gradient(90deg,
            #ffffff 0%,
            #5cc8ff 50%,
            #00e0ff 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 1000px;
}

.hero-banner p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    color: #fff !important;
    font-size: 18px;
    line-height: 1.5;

}


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

    .hero-banner {
        padding: 80px 0;
    }

    .hero-banner h1,
    .hero-banner h1 i {
        font-size: 34px;
        line-height: 1;
        letter-spacing: -0.8px;
        padding-bottom: 5px;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
.inside-hero p.hero-desc {
    width: 100%!important;
}

}
.custom-images .project-card {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 20px;
    cursor: pointer;
}
.custom-images p {
    color: rgba(255, 255, 255, .84) !Important;
}
/* Bubble */

/* ========= PROJECT CARD ========= */

.project-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    display: block;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    transform-style: preserve-3d;
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

/* Premium Glow */
.project-card:hover {
    box-shadow:
        0 25px 60px rgba(0, 0, 0, .35),
        0 0 30px rgba(255, 255, 255, .06);
}

/* ========= IMAGE ========= */

.image-wrapper {
    overflow: hidden;
    border-radius: 28px;
}

/* ========= PROJECT IMAGE SCROLL ========= */

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    /* visible card height */
    height: 650px;
}
/* FULL PAGE IMAGE */

.project-card img {
    width: 100%;
    display: block;
    will-change: transform;
    transition:
        transform 8s cubic-bezier(.19, 1, .22, 1),
        filter .8s ease;
}


/* SCROLL EFFECT */
.project-card:hover img {
    transform:
        translateY(calc(-100% + 650px)) scale(1.02);
    filter: brightness(.92);
}

@media (max-width: 768px) {
    .image-wrapper {
        height: 260px;
    }
    .project-card img {
        /* show top portion nicely */
        transform: translateY(0) !important;
        transition: none !important;
    }
    .project-card:hover img {
        transform: none !important;
    }    /* Disable heavy tilt on mobile */
    .project-card {
        transform: none !important;
    }
}
/* ========= GLASS BUBBLE ========= */

.hover-bubble {
    position: absolute;
    top: 0;
    left: 0;

    width: 130px;
    height: 130px;

    border-radius: 50%;

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

    pointer-events: none;

    opacity: 0;

    z-index: 10;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .20),
            rgba(255, 255, 255, .05));

    backdrop-filter: blur(14px);

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

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .25),
        0 8px 32px rgba(0, 0, 0, .25);

    transform:
        translate(-50%, -50%) scale(.4);

    transition:
        opacity .35s ease;
}

/* Bubble Arrow */

.hover-bubble span {
    color: #fff;
    font-size: 46px;
    font-weight: 300;

    transform: rotate(-45deg);

    transition:
        transform .4s ease;
}

/* Rotate Arrow on Hover */

.project-card:hover .hover-bubble span {
    transform:
        rotate(0deg) scale(1.1);
}

/* ========= SHINE EFFECT ========= */

.project-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(120deg,
            transparent 20%,
            rgba(255, 255, 255, .12) 50%,
            transparent 80%);

    transform: translateX(-120%);

    transition:
        transform 1s cubic-bezier(.19, 1, .22, 1);

    z-index: 2;
}

.project-card:hover::before {
    transform: translateX(120%);
}

/*cards image grid on scroll stylings*/
.image-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0.2rem;
    grid-row-gap: 0.2rem;
    width: 70vw;
    margin: 0 auto;
    padding-top: 40vh;
    z-index: -1;

    .image_cont {
        position: relative;
        aspect-ratio: 1/1;
        overflow: hidden;
    }

    img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 150%;
        object-fit: cover;
    }

    .image_cont:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .image_cont:nth-child(2) {
        grid-column: 3;
        grid-row: 2;
    }

    .image_cont:nth-child(3) {
        grid-column: 2;
        grid-row: 3;
    }
}


/*Horizontal Scrolling*/
.Horizontal {
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
}

@media(max-width: 576px) {

    .Horizontal,
    .spacer-new {
        display: none;
    }
}

.Horizontal__text {
    display: flex;
    width: max-content;
    white-space: nowrap;
    gap: 4vw;
    padding-left: 100vw;
    color: rgb(202 202 202) !Important;
}

.heading-xl {
    font-size: clamp(2rem, 10vw, 12rem);
    font-weight: 600;
    line-height: 1.1;
}

/*Problem section*/

/*Cursor stylings*/
/* HIDE DEFAULT CURSOR */

/* ── CUSTOM CURSOR ── */

/* ── CUSTOM CURSOR ── */

body {
    cursor: none;
}

#cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: gold;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999 !important;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s;
}

#cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(184, 147, 58, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998 !Important;
    transform: translate(-50%, -50%);
    transition:
        width .35s cubic-bezier(.22, 1, .36, 1),
        height .35s cubic-bezier(.22, 1, .36, 1),
        border-color .3s;
}

body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring {
    width: 56px;
    height: 56px;
    border-color: gold;
}

.working-card {
    height: 100%;
    border-radius: 28px !important;
    padding: 40px !important;

    background: rgba(255, 255, 255, .03) !important;

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

    backdrop-filter: blur(10px);

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

    transition: all .35s ease;
}

@media(max-width: 767px) {
    .working-card:nth-child(1) {
        margin-top: 1em !important;
    }
}

.working-card:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 255, 255, .14);

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

.working-card h3 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 18px;
    color: #F8FAFC !important;
}

.working-card p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78) !important;
    margin-bottom: 32px;
}

.sound-head {
    font-size: clamp(52px, 7vw, 76px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 18px;
    color: #F8FAFC;
}

.prob-left p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78) !important;
}

.problem .problem-head {
    font-size: clamp(52px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.icon-red,
.icon-green {
    width: 42px;
    height: 42px;

    min-width: 42px;

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

    border-radius: 50%;

    margin-top: 3px;
}

.problem .icon-red svg {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d64545 !important;
    fill: white;
    margin-top: 2px;
    padding: 10px;
}

.problem .icon-green svg {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2C9E2C;
    fill: #fff;
    stroke: #fff;
    margin-top: 2px;
    padding: 10px;
}

.icon svg {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2C9E2C;
    color: #fff;
    font-size: 12px;
    margin-top: 2px;
    padding: 10px;
}

.working-card {
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* -webkit-backdrop-filter: blur(12px); */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);
}

.new-ul {
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-ul li {
    display: flex;
    align-items: center;

    gap: 18px;

    color: rgba(255, 255, 255, .84);

    font-size: 17px;

    line-height: 1.75;

    font-weight: 400;
}

@media (max-width: 991px) {

    .problem {
        padding: 90px 0;
    }

    .working-card {
        padding: 32px !important;
    }

    .sound-head {
        font-size: 48px;
    }

    .working-card h3 {
        font-size: 30px;
    }

    .new-ul li {
        font-size: 16px;
        line-height: 1.65;
    }
}

/*Steps grid*/
/* ── Grid ── */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Desktop: 4 cols */
    gap: 18px;
    max-width: 1140px;
    margin: 0 auto;
}

/* iPad / Tablet: 2 cols */
@media (max-width: 960px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 col */
@media (max-width: 540px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Card ── */

.course-card {

    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    min-height: 228px;
    transition: box-shadow 0.18s ease;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(12px);
    border-radius: 24px;
}

.course-card {
    will-change: transform;
    transform-style: preserve-3d;
}

.course-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    border: 1px solid #e6edea;
    transition: 0.5s all linear;
}

/* ── Top row: icon + number ── */
.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    /* background: #e8f8f0; */
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    /* stroke: linear-gradient(135deg, #7c3aed, #2563eb); */
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-num {
    font-size: 18px;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding-top: 3px;
    /* border: 1px solid #fff; */
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.card-desc {
    font-size: 14px;
    color: #ccd2d0;
    line-height: 1.55;
    flex: 1;
    letter-spacing: 0.5px;
}


/*Career Badge*/
.career-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border: 1.5px solid #7fe7c8;
    border-radius: 50px;
    background: #f7fffc;
}

.career-badge .dot {
    width: 8px;
    height: 8px;
    background: #00b67a;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
}

.career-badge span {
    color: #006d73;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    line-height: 1;
}

/* Pulsating Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 182, 122, 0.6);
    }

    70% {
        transform: scale(1.3);
        opacity: 0.7;
        box-shadow: 0 0 0 8px rgba(0, 182, 122, 0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(0, 182, 122, 0);
    }
}

/* Responsive */
@media (max-width:576px) {

    .career-badge {
        padding: 8px 18px;
        gap: 8px;
    }

    .career-badge span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .career-badge .dot {
        width: 7px;
        height: 7px;
    }
}

/*Course Grid*/
/* ── Grid ── */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Desktop: 4 cols */
    gap: 25px;
    max-width: 1140px;
    margin: 0 auto;

}

/* iPad / Tablet: 2 cols */
@media (max-width: 960px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 12px
    }
}

/* Mobile: 1 col */
@media (max-width: 540px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }

}
.icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: #FFF;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    font-weight: bold;
}

.card-num {
    font-size: 12px;
    color: #b8c4be;
    font-weight: 400;
    letter-spacing: 0.04em;
    padding-top: 3px;
}


.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.25;
}


.card-desc {
    font-size: 13.5px;
    color: #d7dfdc;
    line-height: 1.55;
    flex: 1;
}


.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eaf0ec;
    margin-top: 20px;
    padding-top: 14px;
}

 .badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1dbd72;
}

.explore-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: #1dbd72;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    background: none;
    border: none;
}

.explore-btn svg {
    width: 13px;
    height: 13px;
    stroke: #1dbd72;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.explore-btn:hover {
    opacity: 0.75;
}

.brands-section {
    width: 50%;
    padding: 80px 0;
}

.results {
    padding: 100px 0;
}

.results .custom-head {
    font-size: 62px;
}

.results p {
    color: #ccd2d0 !Important;
}

@media(max-width: 576px) {
    .brands-section {
        width: 100% !important;
        padding: 50px 20px;

    }

    .results {

        padding: 80px 0;
    }

}

.up-down-animation {
    animation: 3s ease-in-out 0s infinite normal none running upDownFloat;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    margin-top: 52px;
    padding-top: 40px;
    border-top: 1px solid rgba(108, 99, 255, .18)
}

.trust-faces {
    display: flex
}

.trust-face {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    ;
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700
}

.trust-text {
    font-size: 13px;
    color: #fff
}

.trust-text strong {
    color: #fff;
    display: block
}

/*Marquee stylings*/

/* Marquee logos */

.marquee-logos {
    width: 100%;
    align-items: center;
    margin-top: 1.875rem;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Move logos on hero */
@keyframes marquee--move__logos {
    from {
        transform: translateX(0%);
    }

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

.marquee-logos__container {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: marquee--move__logos 35s linear infinite reverse;
    /*Reverse makes it translate in reverse direction*/
    gap: 55px;
}

.marquee-logos__container img {
    width: 14.625rem;
    height: 4.375rem;
    min-height: 4.375rem;
    min-width: 14.6253rem;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(7487%) hue-rotate(322deg) brightness(111%) contrast(97%);
}

.marquee-logos__fade {
    z-index: 1;
    width: 2rem;
    /* background-image: linear-gradient(90deg, rgba(0, 0, 18, 0), #000012); */
    position: absolute;
}

.marquee-logos__fade-left {
    /* background-image: linear-gradient(270deg, rgba(0, 0, 18, 0), #000012); */
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.marquee-logos__fade-right {
    top: 0%;
    bottom: 0%;
    left: auto;
    right: 0%;
}

/* ════════════════════════════════════════
     TESTIMONIAL GRID
  ════════════════════════════════════════ */

.tm-section {
    /* background:transparent; */
    padding: 60px 0;
    overflow: hidden;
    /* font-family:'DM Sans',sans-serif; */
}
.tm-header {
    text-align: center;
    margin-bottom: 48px;
    padding: 0 24px;
}
.tm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7eb3e8;
    margin-bottom: 12px;
}
.tm-eyebrow-line {
    width: 28px;
    height: 1px;
    background: #7eb3e8;
}
.tm-title {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    color: #e8eef6;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.tm-title em {
    font-style: italic;
    color: #7eb3e8;
}
.tm-sub {
    margin-top: 12px;
    font-size: 16px;
    color: rgba(180, 200, 225, 0.6);
    font-weight: 300;
}
.tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 32px;
    max-width: 1100px;
    margin: 0 auto;
}
@media(max-width:900px) {
    .tm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .tm-header h2 {
        font-size: 30px;
    }
}
.tm-col {
    height: 520px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.tm-col::before,
.tm-col::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
    pointer-events: none;
}

.tm-col::before {
    top: 0;
    background: linear-gradient(to bottom, #1a3655 0%, transparent 100%);
}

.tm-col::after {
    bottom: 0;
    background: linear-gradient(to top, #152d4a 0%, transparent 100%);
}

.tm-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: scrollUp 28s linear infinite;
    will-change: transform;
}

.tm-col.reverse .tm-track {
    animation: scrollDown 32s linear infinite;
}

.tm-col.speed2 .tm-track {
    animation-duration: 36s;
}

.tm-track:hover {
    animation-play-state: paused;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 24px 22px 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    flex-shrink: 0;
    background:
        rgba(255, 255, 255, .02);

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

    backdrop-filter:
        blur(12px);

    border-radius:
        24px;
}

.card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.quote-mark {
    font-family: 'DM Serif Display', serif;
    font-size: 52px;
    line-height: 0.8;
    color: #7eb3e8;
    opacity: 0.35;
    font-style: italic;
    user-select: none;
}

.stars {
    display: flex;
    gap: 3px;
}

.star {
    width: 13px;
    height: 13px;
    background: #F5A623;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star.empty {
    background: rgba(255, 255, 255, 0.15);
}

.card p {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(200, 220, 240, 0.75);
    font-weight: 300;
    margin-bottom: 18px;
}

.client {
    display: flex;
    align-items: center;
    gap: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 15px;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(126, 179, 232, 0.3);
}

.client-text h6 {
    font-size: 14px;
    font-weight: 500;
    color: #e0ecf8;
    margin: 0 0 2px;
}

.client-text span {
    font-size: 12px;
    color: rgba(160, 190, 220, 0.55);
    font-weight: 400;
}

.tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(126, 179, 232, 0.12);
    color: #7eb3e8;
    border: 1px solid rgba(126, 179, 232, 0.2);
    margin-bottom: 12px;
}

.metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(126, 179, 232, 0.1);
    border: 1px solid rgba(126, 179, 232, 0.2);
    border-radius: 20px;
    padding: 4px 11px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #7eb3e8;
}

.metric-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7eb3e8;
}

@keyframes scrollUp {
    from {
        transform: translateY(0);
    }

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

@keyframes scrollDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

/* ==========================
   Stats Section
========================== */

.stats-section {
    padding: 80px 5%;
}

.stats-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.stat-box {
    flex: 1;
}

.stat-number {
    margin: 0;
    font-size: clamp(80px, 10vw, 180px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -5px;

    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .95);

    font-family: var(--clash-font);
}

.stat-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .15);
    margin: 45px 0 30px;
}

.stat-text {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

/* Hover Fill Effect */

.stat-number {
    transition: all .4s ease;
}

.stat-box:hover .stat-number {
    color: #ffffff;
}

/* Responsive */

@media(max-width:1024px) {

    .stats-container {
        gap: 40px;
    }

    .stat-text {
        font-size: 22px;
    }
}

@media(max-width:767px) {

    .stats-section {
        padding: 70px 25px;
    }

    .stats-container {
        flex-direction: column;
        gap: 50px;
    }

    .stat-number {
        font-size: 90px;
        letter-spacing: -3px;
    }

    .stat-line {
        margin: 25px 0 20px;
    }

    .stat-text {
        font-size: 20px;
    }
}

/* ===== Project Features ===== */

.project-features {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 800px;
    /* font-family: Arial, sans-serif; */
}

.project-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 17px;
    line-height: 1.7;

    color: rgba(255, 255, 255, .84);
    /* border-bottom: 0.5px solid #ececec; */
    transition: all 0.3s ease;
}

.project-features li:last-child {
    border-bottom: none;
}

.project-features li:hover {
    color: #fff;
    transform: translateX(4px);
}

.icon-green {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.icon-green svg {
    width: 100%;
    height: 100%;
    fill: #22c55e;
}

@media (max-width: 768px) {
    .project-features li {
        font-size: 12px;
        padding: 12px 0;
        gap: 10px;
    }

    .icon-green {
        width: 16px;
        height: 16px;
    }
}

.tan-pin {
    width: 50px;
    height: 50px;
    animation: tan-ani-spin 28s linear infinite;
}

@keyframes tan-ani-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* SECTION */

.faq-section {
    background: transparent;
}

.faq-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #2387E5;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.faq-title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-top: 20px;
}

/* ACCORDION */

.custom-faq .accordion-item {
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px !important;
    overflow: hidden;
    margin-bottom: 20px;
    backdrop-filter: blur(15px);
    transition: .4s ease;
}

.custom-faq .accordion-item:hover {
    border-color: rgba(35, 135, 229, .4);
    transform: translateY(-3px);
}

.custom-faq .accordion-button {
    background: transparent;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 28px;
    box-shadow: none !important;
}

.custom-faq .accordion-button:not(.collapsed) {
    background: transparent;
    color: #fff;
}

.custom-faq .accordion-body {
    color: #b8c1d1;
    font-size: 18px;
    line-height: 1.8;
    padding: 0 28px 28px;
}

.faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 600;
    color: #a8c5e8;
    line-height: 1;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Active / open state — green circle */
.accordion-button:not(.collapsed) .faq-num {
    background: #1a6b3a;
    border-color: #2a9a58;
    color: #7effc0;
}

/* Align button content with number */
.custom-faq .accordion-button {
    display: flex;
    align-items: center;
}

/* REMOVE BOOTSTRAP ICON */

.custom-faq .accordion-button::after {
    display: none;
}

/* CUSTOM PLUS ICON */

.custom-faq .accordion-button {
    position: relative;
    padding-right: 80px;
}

.custom-faq .accordion-button::before {
    content: "+";
    position: absolute;
    right: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2387E5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: .35s ease;
}

.custom-faq .accordion-button:not(.collapsed)::before {
    content: "−";
    background: #fff;
    color: #2387E5;
    transform: rotate(180deg);
}

/* MOBILE */

@media(max-width:767px) {

    .custom-faq .accordion-button {
        font-size: 16px;
        padding: 22px;
        padding-right: 70px;
    }

    .custom-faq .accordion-body {
        padding: 0 22px 22px;
        font-size: 14px;
    }

    .custom-faq .accordion-button::before {
        width: 36px;
        height: 36px;
        right: 18px;
    }
}

/*Scroll Indicator*/
.scroll-indicator {
    position: absolute;
    bottom: -78px;
    left: 51%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

}

.scroll-indicator-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid hsl(240 5% 64%);
    border-radius: 12px;
    position: relative;
}

.scroll-indicator-wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: hsl(142 76% 45%);
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {

    0%,
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    50% {
        opacity: 0.3;
        transform: translate(-50%, 12px);
    }
}

@media(max-width: 576px) {
    .scroll-indicator {
        position: absolute;
        bottom: -62px;
        left: 53%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        color: hsl(var(--muted-foreground));
    }
}

/* section {
    scroll-margin-top: 120px;
} */
/* ─── Nav Wrapper ─── */
.supafast-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 20px 16px 0;
    z-index: 999;
}

/* ─── Glass Pill ─── */
.supafast-nav {
    background:
        linear-gradient(180deg,
            rgba(18, 25, 45, .92),
            rgba(7, 12, 22, .92));

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

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

    box-shadow:
        0 12px 40px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    padding: 10px 16px 10px 20px;
    width: 100%;
    max-width: 800px;
    border-radius: 64px;
}

.supafast-nav::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: rgba(255, 255, 255, .03);
    z-index: -1;
}

.supafast-nav.expanded {
    border-radius: 24px;
}

section {
    scroll-margin-top: 120px;
}

/* ─── Brand / Logo ─── */
.supafast-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.brand-logo {
    width: 25% !Important;
    height: 40px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.brand-logo svg {
    width: 16px;
    height: 16px;
}

.brand-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ─── Desktop Nav Links ─── */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;

}

.nav-links a.active {
    color: #fff;
    font-weight: bold;
    background: #000;
    opacity: 1;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 40px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.nav-links a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ─── Book a Call CTA ─── */
.btn-book {
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 52px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease, transform 0.15s ease;
}

.btn-book:hover {
    background-color: #ffffff;
    transform: scale(1.02);
    color: #000000;
}

.btn-book:active {
    transform: scale(0.98);
}

/* ─── Book a Call CTA ─── */
.btn-book-new {
    background-color: #ffffff;
    color: #000000 !important;
    border: none;
    border-radius: 52px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease, transform 0.15s ease;
}


.btn-book-new:active {
    transform: scale(0.98);
}

/* ─── Mobile Hamburger Toggle ─── */
.mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.mobile-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger → X animation */
.mobile-toggle.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

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

.mobile-toggle.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Mobile Dropdown Menu ───*/
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px 4px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
}

.mobile-menu.show {
    display: flex;
}

.mobile-menu a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 15px;
    font-weight: 450;
    padding: 10px 14px;
    text-align: center;
    border-radius: 14px;
    transition: color 0.2s, background 0.2s;
}

/* .mobile-menu a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
} */

.mobile-menu .btn-book {
    margin-top: 6px;
    text-align: center;
    width: 100%;
}

/* ─── Breakpoints ─── */
@media (max-width: 639px) {

    .nav-links,
    .btn-book.desktop-btn {
        display: none !important;
    }

    .mobile-toggle {
        display: flex;
    }
}


.demo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    gap: 12px;
    padding: 100px 24px 40px;
}

.demo-hero h1 {
    color: rgba(255, 255, 255, 0.12);
    font-size: clamp(40px, 8vw, 96px);
    font-weight: 600;
    letter-spacing: -0.04em;
    margin: 0;
}


/* ── 07 tilt card ── */
.tilt-stage {
    perspective: 1000px;
}

.tilt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(59, 130, 246, .25),
            transparent 50%);  

    pointer-events: none;
    transition: background .1s;
}


.tilt-card {
    width: 100vw;
    /* border-radius: 18px; */
    transform-style: preserve-3d;
    will-change: transform;
    /* background: linear-gradient(150deg, #16261c, #0e100f); */
    border: 1px solid var(--green-border);
    /* padding: 36px; */
    display: flex;
    /* flex-direction: column; */
    /* justify-content: space-between; */
    position: relative;
    overflow: hidden;
}


/* ── 08 marquee ── */
.mq {
    overflow: hidden;
    border-block: 1px solid var(--border);
    padding: 22px 0;
}

.mq-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.mq-track span {
    font-size: clamp(1.6rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    padding: 0 28px;
    white-space: nowrap;
}

.mq-track .dot {
    color: var(--green);
}


/* ## 3 · 3D CAROUSEL */
.car {
    margin-top: 48px;
    height: 62vh;
    display: grid;
    place-items: center;
    perspective: 1400px;
    cursor: grab;
    user-select: none
}

.car.dragging {
    cursor: grabbing
}

.car__ring {
    position: relative;
    width: clamp(180px, 22vw, 260px);
    height: clamp(240px, 30vw, 340px);
    transform-style: preserve-3d;
    will-change: transform
}

/* .car__item{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;align-items:flex-end;padding:22px;
  border:1px solid rgba(255,255,255,.14)} */
.car__item {
    position: absolute;
    inset: 0;

    border-radius: 22px;

    padding: 28px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    color: #fff;

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

    overflow: hidden;
}

.car__item h3 {
    margin: 0 0 10px;

    color: #fff;

    font-family: "Space Grotesk";

    font-size: 24px;

    font-weight: 700;

    line-height: 1.1;
}

.car__item p {
    margin: 0;

    color: rgba(255, 255, 255, .92);

    font-size: 15px;

    line-height: 1.55;

    max-width: 18ch;
}

.car__item::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .05));

    pointer-events: none;
}

.car__item h3,
.car__item p {
    position: relative;
    z-index: 2;
}
/* ---------- horizontal scroll ---------- */
.h-sec {
    background: var(--blue);
    color: var(--bone);
    overflow: hidden
}

.h-wrap {
    height: 100svh;
    display: flex;
    align-items: center
}

.h-track {
    display: flex;
    gap: 4vw;
    padding: 0 5vw;
    width: max-content;
    will-change: transform
}

.h-panel {
    width: min(72vw, 640px);
    flex-shrink: 0
}

.h-panel .hp-art {
    height: 52vh;
    margin-bottom: 22px
}

.h-panel h3 {
    font-family: var(--disp);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 3vw, 2rem)
}

.h-panel p {
    opacity: .8;
    max-width: 42ch;
    margin-top: 8px
}

.h-panel.hp-title {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.h-panel.hp-title h3 {
    font-size: clamp(2.6rem, 8vw, 6rem);
    line-height: .95
}

.h-panel .r-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--lav)
}


@media(max-width: 576px){

.h-panel .hp-art {
    height: 20vh;

}
.h-panel {
    width: min(70vw, 640px);
    flex-shrink: 0
}
}

/* ## 3 · DRAGGABLE INFINITE SLIDER */
.ds {
    margin-top: 40px;
    overflow: hidden;
    cursor: grab;
    user-select: none
}

.ds.dragging {
    cursor: grabbing
}

.ds__track {
    display: flex;
    gap: 20px;
    will-change: transform
}

.ds__card {
    flex: 0 0 clamp(220px, 26vw, 320px);
    height: clamp(280px, 34vw, 420px);
    border-radius: 16px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    border: 1px solid var(--line)
}

.ds__card h3 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 22px
}

.ds__card span {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    display: block;
    margin-bottom: 6px;
    font-family: "Space Grotesk";
    letter-spacing: .1em;
    text-transform: uppercase
}

.result-circle {
    width: 180px;
    height: 180px;

    margin: auto;

    border-radius: 50%;

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

    text-align: center;

    position: relative;

    background:
        radial-gradient(circle at top,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .02));

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

    backdrop-filter: blur(20px);

    transition: .4s ease;
}

.result-circle:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .25);
}

.result-number {
    display: block;

    font-size: 38px;
    font-weight: 700;
    line-height: 1;

    color: #d4af37;
    /* luxury gold */
    margin-bottom: 12px;

    font-family: "Space Grotesk", sans-serif;
}

.result-circle p {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;

    color: rgba(255, 255, 255, .85);

    max-width: 120px;
}

@media(max-width:768px) {

    .result-circle {
        width: 140px;
        height: 140px;
    }

    .result-number {
        font-size: 30px;
    }

    .result-circle p {
        font-size: 11px;
        max-width: 95px;
    }

}

.result-circle::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: 50%;

    background:
        conic-gradient(from 180deg,
            transparent,
            rgba(212, 175, 55, .35),
            transparent);

    z-index: -1;

    filter: blur(14px);

    opacity: .7;
}

/*Floating Items footer*/
.floating-actions {
    position: fixed !important;

    right: 24px;
    bottom: 24px;

    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.floating-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 18px;

    border-radius: 999px;

    text-decoration: none;

    color: #fff;

    backdrop-filter: blur(18px);

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

    transition: .35s ease;

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

.floating-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.calendly-btn {
    background:
        linear-gradient(135deg,
            #6d28d9,
            #9333ea);
}

.whatsapp-btn {
    background:
        linear-gradient(135deg,
            #25D366,
            #128C7E);
}

.floating-btn:hover {
    transform:
        translateY(-4px) scale(1.03);
}

@media(max-width:768px) {

    .floating-actions {
        right: 16px;
        bottom: 16px;
    }

    .floating-btn span {
        display: none;
    }

    .floating-btn {
        width: 56px;
        height: 56px;

        padding: 0;

        justify-content: center;
    }

    .floating-btn svg {
        width: 22px;
        height: 22px;
    }
}

.whatsapp-btn {
    animation: waPulse 2.5s infinite;
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/*Final CTA*/

.cta-sec {
    background:
        radial-gradient(circle at 85% 15%,
            rgba(35, 135, 229, .22),
            transparent 40%),
        linear-gradient(135deg,
            #162c4a 0%,
            #10213a 50%,
            #0a172b 100%);

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

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35);
}

.cta-sec .cta-head,
.cta-sec .cta-para {
    width: 75%;
    color: rgba(255, 255, 255, .84);
}

@media(max-width: 576px) {
    .car__item h3 {
        font-size: 18px;
    }

    .car__item p {
        font-size: 12px;
    }

    .cta-sec .cta-head,
    .cta-sec .cta-para {
        width: 100%;
    }
}

/*Case-study btn*/
.case-study-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    transition: all .35s ease;
    white-space: nowrap;
}

.case-study-btn span {
    transition: transform .35s ease;
}

.case-study-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    color: #fff;
}

.case-study-btn:hover span {
    transform: translate(3px, -3px);
}

.case-study-btn:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width:768px) {
    .case-study-btn {
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 10px;
    }
}

@media (max-width:480px) {
    .case-study-btn {
        width: 50%;
        justify-content: center;
        margin-bottom: 1em;
    }
}

/*Footer*/
.footer-card,
.footer-cta {
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.footer-card {
    background: #142742;
    border: 1px solid rgba(255, 255, 255, .08);
}

.footer-cta {

    background:
        radial-gradient(circle at top left,
            rgba(124, 58, 237, .4),
            transparent 40%),

        linear-gradient(135deg,
            #5b21b6,
            #7c3aed,
            #8b5cf6);

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

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 420px;
}

.eyebrow {
    font-size: .8rem;
    letter-spacing: 2px;
    font-weight: 600;
    color: #fff;
}

.footer-card h3 {
    margin: 30px 0;
    color: #fff;
    font-size: 2rem;
}

.footer-cta h2 {
    color: #fff;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 700;
    max-width: 800px;
}

.footer-card p {
    color: rgba(255, 255, 255, .8);
}

.footer-btn {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 10px;
}

.footer-nav {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
}

/* ## 1 · VARIABLE FONT WEIGHT */

.vfw {
    font-family: var(--clash-font);
    font-weight: 200;
    font-size: clamp(40px, 11vw, 150px);
    color: #fff;
    text-align: center;
    line-height: .95;
    letter-spacing: -.01em;
    cursor: default
}

.vfw .ch {
    display: inline-block;
    transition: font-weight .15s linear, transform .2s var(--ease);
    will-change: font-weight
}

/*Contact us*/

html,
body {
    height: 100%;
    font-family: var(--clash-font)
}

body {
    background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 40%, var(--bg3) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--t1);
    overflow-x: hidden;
}

/* ── Layout ──────────────────────────────────── */
.page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.page * {
    cursor: pointer !important;
}

/* ── Left panel ──────────────────────────────── */
.left {
    padding: 60px 56px 60px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-right: .5px solid rgba(255, 255, 255, 0.06);
}

.left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(74, 158, 255, 0.2) 40%, rgba(74, 158, 255, 0.2) 60%, transparent);
}

.logo {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--t2);
    letter-spacing: .02em;
    margin-bottom: auto;
}

.logo span {
    color: var(--accent)
}

.left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0
}

.eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.eyebrow::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--gold);
    opacity: .6;
}

.left-heading {
    font-family: var(--serif);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--t1);
    margin-bottom: 20px;
}

.left-heading em {
    font-style: italic;
    color: var(--accent)
}

.left-sub {
    font-size: 15px;
    font-weight: 300;
    color: var(--t2);
    line-height: 1.75;
    max-width: 380px;
    margin-bottom: 44px;
}

/* Trust items */
.trust-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 44px
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.trust-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.08);
    border: .5px solid rgba(74, 158, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.trust-icon svg {
    width: 14px;
    height: 14px;
    fill: var(--accent)
}

.trust-text {
    font-size: 13px;
    font-weight: 400;
    color: var(--t2);
    line-height: 1.5
}

.trust-text strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
    margin-bottom: 1px
}

/* Stat row */
.stat-row {
    display: flex;
    gap: 0;
    border: .5px solid var(--b1);
    border-radius: 12px;
    overflow: hidden;
}

.stat {
    flex: 1;
    padding: 14px 18px;
    border-right: .5px solid var(--b1);
    background: rgba(12, 29, 51, 0.5);
}

.stat:last-child {
    border-right: none
}

.stat-n {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    color: var(--t1);
    line-height: 1;
    margin-bottom: 3px;
}

.stat-l {
    font-size: 11px;
    font-weight: 300;
    color: var(--t3);
    line-height: 1.4
}

/* Availability dot */
.avail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 300;
    color: var(--t3);
    margin-top: 32px;
}

.avail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(42, 154, 88, 0.2);
    animation: pulse 2.5s ease infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(42, 154, 88, 0.2)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(42, 154, 88, 0.08)
    }
}

/* ── Right panel — step form ─────────────────── */
.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px 60px 56px;
    position: relative;
}

/* Progress bar */
.progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
}

.progress-step {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    transition: background .4s var(--ease);
}

.progress-step.done {
    background: var(--green)
}

.progress-step.active {
    background: var(--accent)
}

.step-count {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--t3);
    white-space: nowrap;
    min-width: 44px;
    text-align: right;
}

/* Steps container */
.steps-outer {
    position: relative;
    min-height: 360px
}

.step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.step.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

.step.exit {
    opacity: 0;
    transform: translateX(-40px);
    pointer-events: none;
}

.step-q {
    font-family: var(--serif);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 400;
    color: var(--t1);
    line-height: 1.2;
    letter-spacing: -.3px;
    margin-bottom: 8px;
}

.step-hint {
    font-size: 13px;
    font-weight: 300;
    color: var(--t3);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Choice pills */
.choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.choice {
    padding: 10px 18px;
    border-radius: 100px;
    border: .5px solid var(--b1);
    background: transparent;
    color: var(--t2);
    font-family: var(--clash-font);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all .18s var(--ease);
    user-select: none;
}

.choice:hover {
    border-color: var(--accent);
    color: var(--t1);
    background: rgba(74, 158, 255, 0.07);
}

.choice.selected {
    border-color: var(--accent);
    background: rgba(74, 158, 255, 0.12);
    color: var(--accent);
}

/* Text inputs */
.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px
}

.field-solo {
    margin-bottom: 28px
}

.fl {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fl label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--t3);
}

.fl input,
.fl textarea,
.fl select {
    background: transparent;
    border: none;
    border-bottom: .5px solid var(--b1);
    border-radius: 0;
    padding: 10px 0;
    font-family: var(--clash-font);
    font-size: 15px;
    font-weight: 300;
    color: var(--t1);
    outline: none;
    transition: border-color .2s;
    -webkit-appearance: none;
    width: 100%;
}

.fl input::placeholder,
.fl textarea::placeholder {
    color: var(--t4);
    font-weight: 300
}

.fl input:focus,
.fl textarea:focus,
.fl select:focus {
    border-bottom-color: var(--accent)
}

.fl textarea {
    resize: none;
    height: 80px;
    line-height: 1.6
}

.fl select option {
    background: #0c1d33;
    color: var(--t1)
}

/* Nav buttons */
.step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px
}

.btn-back {
    background: transparent;
    border: none;
    font-family: var(--clash-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--t3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    transition: color .15s;
}

.btn-back:hover {
    color: var(--t2)
}

.btn-back svg {
    width: 14px;
    height: 14px;
    fill: currentColor
}

.btn-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--accent);
    border: none;
    border-radius: 100px;
    font-family: var(--clash-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #04101f;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.btn-next:hover {
    background: var(--accent2);
    transform: translateY(-1px)
}

.btn-next:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none
}

.btn-next svg {
    width: 14px;
    height: 14px;
    fill: #04101f;
    transition: transform .2s
}

.btn-next:hover:not(:disabled) svg {
    transform: translateX(3px)
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--gold);
    border: none;
    border-radius: 100px;
    font-family: var(--clash-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #150d00;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.btn-submit:hover {
    background: var(--gold2);
    transform: translateY(-1px)
}

.btn-submit svg {
    width: 14px;
    height: 14px;
    fill: #150d00
}

/* ── Success state ────────────────────────────── */
.success-state {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 360px;
}

.success-state.show {
    display: flex
}

.success-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-bg);
    border: .5px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.success-check svg {
    width: 24px;
    height: 24px;
    fill: var(--green)
}

.success-h {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 400;
    color: var(--t1);
    line-height: 1.15;
    letter-spacing: -.3px;
    margin-bottom: 12px;
}

.success-p {
    font-size: 14px;
    font-weight: 300;
    color: var(--t2);
    line-height: 1.75;
    max-width: 380px;
    margin-bottom: 32px;
}

.success-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(42, 154, 88, 0.1);
    border: .5px solid rgba(42, 154, 88, 0.3);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    color: var(--green);
}

.success-tag svg {
    width: 12px;
    height: 12px;
    fill: var(--green)
}

/* ── Responsive ──────────────────────────────── */
@media(max-width:991.98px) {
    .page {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .left {
        padding: 48px 24px 40px;
        border-right: none;
        border-bottom: .5px solid rgba(255, 255, 255, 0.06);
    }

    .left::after {
        display: none
    }

    .left-content {
        padding: 32px 0 24px
    }

    .right {
        padding: 48px 24px 64px
    }

    .field-pair {
        grid-template-columns: 1fr
    }

    .progress-wrap {
        margin-bottom: 36px
    }
}

@media(max-width:575.98px) {
    .left {
        padding: 40px 20px 32px
    }

    .right {
        padding: 40px 20px 56px
    }

    .left-heading {
        font-size: 32px
    }

    .stat-row {
        flex-wrap: wrap
    }

    .stat {
        min-width: 45%
    }
}

/*Case study stylings*/
    .case-study {
        padding: 8em 2em;
    }

    .riyad-main {
        padding-right: 2em;
    }

    .riyad-main h1 {
        letter-spacing: 0.04em;
        text-align: left;
        color: rgba(255, 255, 255, .84);
    }

    .riyad-para {
        font-weight: 400;
        line-height: 1.4;
        font-size: 16px;

    }

    .breadcrumbs {
        color: #fff;
        display: flex;
        gap: 1em;
        justify-content: center;
        align-items: center;
    }


    .about-project {
        padding: 5em 2em;
    }

    .overview {
        border-top: 1px solid #dad8d8;
        border-bottom: 1px solid #d9d8d8;
        padding: 3em;
    }

    @media(max-width: 576px) {
        .case-study {
            padding: 3em 1em;
        }
        .hero-banner .btn-primary,
.sounds .btn-primary,
.case-study .btn-primary,
.final-cta .btn-primary {

    padding: 10px 20px;

}
}



@media (min-width: 768px) {
    .faqs {
       font-size: 32px!important;
    }
}