/* =========================================================
           RESET
        ========================================================= */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "Sora", sans-serif;
            color: #0b1c24;
            background: #ffffff;
            overflow-x: hidden;
        }
        img,

        video {

            max-width: 100%;

            display: block;

        }

            li {
                list-style: disc !important; 
            }

        button,

        input,

        select {

            font: inherit;

        }



        a {

            text-decoration: none;

            color: inherit;

        }





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

           VARIABLES

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



        :root {



            --dark: #03171d;

            --dark2: #061e26;



            --card: #08232c;



            --aqua: #86f4e1;

            --aqua2: #20d8c7;



            --white: #ffffff;



            --light: #f7fbfc;



            --text: #0c1c24;

            --muted: #6a7b84;



            --container: 1240px;



        }





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

           COMMON

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



        .container {

            width: min(var(--container), calc(100% - 40px));

            margin: auto;

        }



        .section {

            padding: 50px 0;

        }



        .dark-section {

            background: var(--dark);

            color: white;

        }



        .light-section {

            background: #ffffff;

        }

        
        .section-tag-dark {
            display: inline-block;
            color: #6a7b84;
            font-size: 12px;            
            font-weight: 600;
            margin-bottom: 14px;
        }


        .section-title {
            font-size: clamp(34px, 3vw, 56px);
            line-height: 1.08;
            margin-bottom: 20px;
        }



        .section-title span {

            color: var(--aqua2);

        }



        .section-text {

            color: var(--muted);

            line-height: 1.7;

            max-width: 700px;

        }



        .btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        min-height: 28px;

        padding: 12px 12px;

        border-radius: 999px;

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;

        border: 1px solid transparent;

        transition: .3s;

    }



        .btn-primary {

            color: #042228;

            background: var(--aqua);

        }
        


        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(85, 242, 223, .22);
        }
       .btn-outline {
        color: white;
        border: 1px solid rgba(255,255,255,.35);
        background: transparent;

    }
/* =========================================================

           HEADER

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



       .fde-header {
    position: sticky;
    top: 0;

    width: 100%;
    height: 82px;

    display: flex;
    align-items: center;

    z-index: 99999;

    background: #03171d !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.fde-header .fde-header-inner {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    height: 100%;

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

    margin: 0 auto;
}


.fde-header .fde-logo {
    position: relative;
    z-index: 2;

    color: #ffffff !important;

    margin: 0;
    padding: 0;
}

.fde-header .fde-logo span {
    color: #86f4e1 !important;
}




 .fde-header .fde-nav {
    display: flex;
    align-items: center;
}

.fde-header .fde-nav a {
    color: #ffffff;
}

.fde-header .fde-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.fde-header .fde-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: auto;
    margin-right: 40px;
}

.fde-header .fde-nav a {
    display: inline-block;
    white-space: nowrap;
}

.fde-header .fde-logo {
    flex-shrink: 0;
}

.fde-header .btn {
    flex-shrink: 0;
}



    .fde-nav a:hover {

        color: var(--aqua);

    }



        .mobile-menu-btn {



            display: none;



            color: white;



            background: none;



            border: 0;



            font-size: 27px;



            cursor: pointer;



        }





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

           HERO

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

a.btn {
    padding: 14px 7px !important;
    font-size: 12px !important;
}

.fde-hero {

    position: relative;

    min-height: 637px;

    background: #021317;

    color: #fff;

    overflow: hidden;

}



.hero-media {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

}



.hero-video-desktop {

     position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover; 

    object-position: 58% bottom;

    display: block;

    transform: none;

    -webkit-mask-image: none;

    mask-image: none;

}



/* MOBILE hidden on desktop */

.hero-video-mobile {

    display: none;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;



    background: linear-gradient(

        90deg,

        rgba(1, 17, 22, 0.90) 0%,

        rgba(1, 17, 22, 0.82) 20%,

        rgba(1, 17, 22, 0.58) 38%,

        rgba(1, 17, 22, 0.25) 52%,

        rgba(1, 17, 22, 0.06) 68%,

        transparent 82%

    );

}



.hero-content {

    position: relative;

    z-index: 5;

    min-height: 500px;

    display: flex;

    align-items: center;

    padding-top: 20px;

    padding-bottom: 35px;

}



.hero-copy {

    width: 48%;

    max-width: 620px;

}

.hero-title {

    font-size: clamp(37px, 2vw, 74px);

    line-height: 0.98;

    margin-bottom: 22px;

}

.hero-title span {

    display: block;

    color: var(--aqua);

}



.hero-description {

    max-width: 560px;

    color: #bac9ce;

    line-height: 1.6;

    font-size: 13px;

    margin-bottom: 28px;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 34px;

}



.hero-stats {

    display: flex;

    gap: 36px;

    flex-wrap: wrap;

}



.hero-stat strong {

    display: block;

    color: var(--aqua);

    font-size: 16px;

    margin-bottom: 4px;

}



.hero-stat span {

    color: #9cb1b7;

    font-size: 12px;

}


/* =========================================================
   FEATURED IN / BRAND STRIP
========================================================= */

.brand-strip {
    width: 100%;
    overflow: hidden;

    padding: 14px 0;

    background: #fff;

    border-top: 1px solid #e7edef;
    border-bottom: 1px solid #e7edef;
}


.brand-strip-inner {
    display: flex;
    align-items: center;
}


/* FIXED FEATURED LABEL */

.brand-label {
    position: relative;
    z-index: 5;

    flex: 0 0 auto;

    min-width: 150px;

    padding-right: 25px;

    color: #6d7c84;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    white-space: nowrap;

    background: #fff;
}


/* SLIDER AREA */

.brand-slider {
    min-width: 0;
    flex: 1;

    overflow: hidden;
}


/* TRACK */

.brand-track {
    display: flex;
    align-items: center;

    width: max-content;
}


/* EACH IDENTICAL GROUP */

.brand-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* LOGO ITEM */

.brand-item {
    min-height: 46px;

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

    flex: 0 0 auto;

    padding: 0 24px;

    border-left: 1px solid #d8e1e4;
}


.brand-item img {
    display: block;
    width: auto;
    max-width: 112px;
    object-fit: contain;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 768px) {

    .brand-track {
        width: 100%;
    }

    .brand-group {
        width: 100%;
        justify-content: space-between;
    }

    /* desktop duplicate hide */
    .brand-group:nth-child(2) {
        display: none;
    }

}


/* =========================================================
   MOBILE AUTO SLIDER
========================================================= */

@media (max-width: 767px) {

    .brand-strip {
        padding: 10px 0;
    }


    .brand-strip-inner {
        width: 100% !important;
        max-width: none !important;

        padding-left: 15px;
        padding-right: 0;

        margin: 0 !important;
    }


    /* FEATURED IN FIXED */

    .brand-label {
        min-width: 105px;

        padding-right: 12px;

        font-size: 10px;

        height: 58px;

        display: flex;
        align-items: center;

        box-shadow:
            12px 0 14px rgba(255,255,255,.95);
    }


    /* moving part only */

    .brand-slider {
        flex: 1;
        overflow: hidden;
    }


    .brand-track {
        display: flex;

        width: max-content;

        animation:
            brandAutoSlide
            12s
            linear
            infinite;

        will-change: transform;
    }


    .brand-group {
        display: flex !important;
        flex-shrink: 0;
    }


    .brand-item {
        width: 150px;
        min-width: 150px;

        padding: 0 18px;

        border-left:
            1px solid #e1e7ea;
    }


    .brand-item img {
        width: auto;

        max-width: 120px;
        max-height: 31px;
    }


    /*
     * One FULL group move karo.
     * Because dono groups exact duplicate hain,
     * reset visible nahi hoga.
     */
    @keyframes brandAutoSlide {

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

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

    }

}
/* =========================================================
   OPPORTUNITY SECTION sjkds
========================================================= */

.opportunity {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        #03171d
        url("../images/bgimage.png")
        center center / cover
        no-repeat;
    isolation: isolate;
}

/* Keep the supplied background image visible while preserving text contrast. */
.opportunity::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(1, 15, 20, 0.12);
}

.opportunity::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(74, 235, 219, 0.04),
            transparent 40%
        );
}

.opportunity-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    align-items: center;
}


/* =========================================================
   OPPORTUNITY LEFT CONTENT
========================================================= */

.opportunity-content {
    position: relative;
    z-index: 3;
}

.opportunity .section-title {
    color: #fff;
    margin-bottom: 30px;
}

.opportunity .section-title span {
    color: var(--aqua);
}

.opportunity-tag,
.curriculum-tag,.hero-program {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 13px;
    border: 1px solid rgba(37, 216, 199, 0.55);
    border-radius: 999px;
    background: rgba(3, 34, 40, 0.92);
    color: #38e2d2;
    font-size: 10px;
    font-weight: 700;
        margin-bottom: 13px;

    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.production-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.production-tag::before {
    content: "";
    width: 42px;
    height: 2px;
    flex: 0 0 42px;
    background: #6a7b84;
    border-radius: 10px;
}
/* ===============================
   BENEFITS LIST
=============================== */
.benefits {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 26px;
    max-width: 430px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.benefit:last-child {
    border-bottom: 0;
}


/* ===============================
   ICON BOX
=============================== */
.benefit-icon,
.benefit-icon-image {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;

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

    border-radius: 16px;
    overflow: hidden;

    border: 1px solid rgba(69, 236, 220, 0.38);
    background: rgba(4, 28, 34, 0.96);

    /* outer soft glow */
    box-shadow:
        0 0 12px rgba(52, 226, 209, 0.08),
        0 0 22px rgba(52, 226, 209, 0.05);
}

/* inner bluish wall glow */
.benefit-icon::before,
.benefit-icon-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;

    background:
        linear-gradient(to bottom, rgba(99, 247, 231, 0.13), transparent 24%),
        linear-gradient(to top, rgba(99, 247, 231, 0.06), transparent 24%),
        linear-gradient(to right, rgba(99, 247, 231, 0.06), transparent 18%),
        linear-gradient(to left, rgba(99, 247, 231, 0.06), transparent 18%),
        radial-gradient(circle at 50% 22%, rgba(125, 252, 238, 0.08), transparent 34%);

    filter: blur(5px);
    opacity: 0.95;
}

/* crisp inner wall line */
.benefit-icon::after,
.benefit-icon-image::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    pointer-events: none;
    z-index: 1;

    box-shadow:
        inset 0 0 0 1px rgba(110, 247, 232, 0.08),
        inset 0 8px 14px rgba(110, 247, 232, 0.04),
        inset 0 -6px 12px rgba(110, 247, 232, 0.02),
        inset 6px 0 10px rgba(110, 247, 232, 0.02),
        inset -6px 0 10px rgba(110, 247, 232, 0.02);
}

/* content above glow */
.benefit-icon > *,
.benefit-icon-image > * {
    position: relative;
    z-index: 2;
}


/* ===============================
   IF USING IMAGE ICONS
=============================== */
.benefit-icon-image img {
    width: 42px;
    
    object-fit: contain;
    display: block;

    filter:
        drop-shadow(0 0 4px rgba(134, 244, 225, 0.45))
        drop-shadow(0 0 8px rgba(134, 244, 225, 0.16));
}

.fde-hero .container.hero-content {
    max-width: 1101px !important;
}
/* ===============================
   IF USING SVG ICONS
=============================== */
.benefit-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: #86f4e1;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 0 4px rgba(134, 244, 225, 0.40))
        drop-shadow(0 0 8px rgba(134, 244, 225, 0.14));
}


/* ===============================
   TEXT
=============================== */
.benefit h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.benefit p {
    margin: 0;
    color: #9eb2b7;
    font-size: 14px;
    line-height: 1.45;
}

/* =========================================================
   FDE CYCLE WRAPPER
========================================================= */

.cycle {
    position: relative;
    width: 100%;
    max-width: 680px;
    min-height: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.cycle-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
}

.cycle-path {
    fill: none;
    stroke: rgba(73, 224, 211, 0.76);
    stroke-width: 1.8;
    stroke-dasharray: 3.6 5.5;
    stroke-linecap: round;
}

.cycle-end-dot {
    fill: #79f1df;
    filter: drop-shadow(0 0 5px rgba(121, 241, 223, 0.9));
}

.cycle-moving-dot {
    fill: #8af8e8;
    filter:
        drop-shadow(0 0 4px #86f4e1)
        drop-shadow(0 0 9px rgba(134, 244, 225, 0.75));
}

.cycle-label {
    fill: #72efde;
    font-family: "Sora", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 5px;
}


/* =========================================================
   CYCLE CARD ROW
========================================================= */

.cycle-cards {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 145px 35px 170px 35px 145px;
    justify-content: center;
    align-items: center;
    gap: 0;
}


/* =========================================================
   CYCLE CARDS
   Dark centre + bluish shade only along inner walls
========================================================= */

.cycle-card {
    position: relative;
   
    padding: 17px 12px;
    border: 1px solid rgba(67, 235, 220, 0.42);
    border-radius: 18px;
    background: rgba(4, 28, 34, 0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;

    box-shadow:
        0 0 10px rgba(57, 228, 212, 0.06),
        0 0 18px rgba(57, 228, 212, 0.04);
}

/* Thin inner rim similar to the reference card. */
.cycle-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;

    /* smoky haze + inner wall glow */
    background:
        radial-gradient(circle at 50% 18%, rgba(130, 255, 240, 0.10), transparent 28%),
        radial-gradient(circle at 32% 38%, rgba(110, 240, 228, 0.08), transparent 30%),
        radial-gradient(circle at 68% 36%, rgba(110, 240, 228, 0.07), transparent 28%),
        radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.03), transparent 38%),
        linear-gradient(to bottom, rgba(92, 247, 231, 0.10), transparent 22%),
        linear-gradient(to top, rgba(92, 247, 231, 0.05), transparent 22%),
        linear-gradient(to right, rgba(92, 247, 231, 0.05), transparent 18%),
        linear-gradient(to left, rgba(92, 247, 231, 0.05), transparent 18%);
    
    filter: blur(6px);
    opacity: 0.75;
}

/* No centre radial glow. */
.cycle-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    pointer-events: none;
    z-index: 1;

    box-shadow:
        inset 0 0 0 1px rgba(96, 245, 229, 0.08),
        inset 0 8px 18px rgba(82, 237, 221, 0.05),
        inset 0 -8px 16px rgba(82, 237, 221, 0.02),
        inset 8px 0 14px rgba(82, 237, 221, 0.02),
        inset -8px 0 14px rgba(82, 237, 221, 0.02);
}


.cycle-card > * {
    position: relative;
    z-index: 2;
}


/* Center FDE card has a slightly stronger inner-wall shine. */
.cycle-card-main {
    position: relative;
    
    padding: 18px 15px;
    border: 1px solid rgba(99, 241, 224, 0.88);
    border-radius: 20px;
    background: rgba(4, 31, 38, 0.97);
    overflow: hidden;

    box-shadow:
        0 0 16px rgba(70, 232, 216, 0.10),
        0 0 26px rgba(70, 232, 216, 0.06);
}

.cycle-card-main::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;

    /* stronger smoky center-card effect */
    background:
        radial-gradient(circle at 50% 16%, rgba(145, 255, 242, 0.14), transparent 26%),
        radial-gradient(circle at 28% 34%, rgba(100, 244, 229, 0.10), transparent 28%),
        radial-gradient(circle at 72% 34%, rgba(100, 244, 229, 0.09), transparent 28%),
        radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.04), transparent 40%),
        linear-gradient(to bottom, rgba(104, 247, 231, 0.13), transparent 22%),
        linear-gradient(to top, rgba(104, 247, 231, 0.06), transparent 22%),
        linear-gradient(to right, rgba(104, 247, 231, 0.06), transparent 18%),
        linear-gradient(to left, rgba(104, 247, 231, 0.06), transparent 18%);

    filter: blur(10px);
    opacity: 0.95;
}
.cycle-card-main::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    pointer-events: none;
    z-index: 1;

    box-shadow:
        inset 0 0 0 1px rgba(118, 246, 231, 0.10),
        inset 0 12px 24px rgba(104, 247, 231, 0.06),
        inset 0 -10px 20px rgba(104, 247, 231, 0.025),
        inset 10px 0 18px rgba(104, 247, 231, 0.025),
        inset -10px 0 18px rgba(104, 247, 231, 0.025);
}
.cycle-card-main > * {
    position: relative;
    z-index: 2;
}

/* =========================================================
   CYCLE CARD ICONS
========================================================= */

.cycle-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: #72efde;
}

/* SVG fallback, if any card still uses inline SVG. */
.cycle-card-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(114, 239, 222, 0.18));
}

/* Image icons. */
.cycle-card-icon-image {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cycle-card-icon-image img {
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 0 3px rgba(122, 248, 232, 0.38))
        drop-shadow(0 0 7px rgba(122, 248, 232, 0.12));
}

.cycle-user-icon {
    margin-bottom: 8px;
}

.cycle-user-icon svg {
    width: 32px;
    height: 32px;
}


/* =========================================================
   CYCLE CARD TYPOGRAPHY
========================================================= */

.cycle-card h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.32;
}

.cycle-card-main h3 {
    margin: 0;
    color: #fff;
    font-size: 31px;
    font-weight: 500;
    line-height: 1;
}

.cycle-card-main p {
    margin: 10px 0 0;
    color: #9bb7bb;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 2px;
}


/* =========================================================
   BETWEEN-CARD ARROWS
========================================================= */

.cycle-arrow {
    overflow: hidden;
}

.cycle-arrow svg {
    width: 21px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    animation: fdeArrowMove 1.05s linear infinite;
}

@keyframes fdeArrowMove {
    0% {
        transform: translateX(-4px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(5px);
        opacity: 0;
    }
}


/* =========================================================
   OPPORTUNITY RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .opportunity-grid {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 30px;
    }

    .cycle {
        transform: scale(0.9);
        transform-origin: center right;
        width: 111%;
    }
}

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

    .opportunity-content {
        max-width: 650px;
    }

    .cycle {
        width: 100%;
        max-width: 680px;
        margin: 30px auto 0;
        transform: none;
    }
}

@media (max-width: 767px) {
    .opportunity {
        padding-top: 65px;
        padding-bottom: 65px;
        background-position: 65% center;
    }

    .benefits {
        max-width: none;
    }

    .cycle {
        position: relative;

        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        margin: 38px auto 0 !important;
        padding: 22px 18px !important;

        display: block !important;

        border:
            1px solid rgba(53, 224, 208, 0.65);

        border-radius: 28px;

        background:
            linear-gradient(
                180deg,
                rgba(3, 26, 33, 0.78),
                rgba(3, 22, 29, 0.90)
            );

        box-shadow:
            inset 0 0 25px rgba(65, 226, 211, 0.03),
            0 0 22px rgba(48, 220, 205, 0.04);

        overflow: hidden;
        transform: none !important;
    }
    /* Desktop curve animation mobile par hide */

    .cycle-svg {
        display: none !important;
    }


     /* =========================================
       STACK
    ========================================= */

    .cycle-cards {
        position: relative;
        z-index: 3;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }

     /* =========================================
       BUSINESS + IMPACT CARDS
    ========================================= */

    .cycle-card:not(.cycle-card-main) {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 108px !important;

        padding: 17px 22px !important;

        display: grid !important;

        grid-template-columns:
            72px
            minmax(0, 1fr);

        align-items: center !important;

        column-gap: 18px;

        text-align: left !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                135deg,
                rgba(5, 35, 43, 0.97),
                rgba(4, 29, 36, 0.98)
            );

        border:
            1px solid rgba(87, 215, 208, 0.38);

        box-shadow:
            inset 0 0 20px rgba(83, 231, 218, 0.035),
            0 0 12px rgba(49, 222, 208, 0.04);
    }
      /* ICON AREA */

    .cycle-card:not(.cycle-card-main)
    .cycle-card-icon {
        width: 64px !important;
        height: 64px !important;

        margin: 0 !important;

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


    .cycle-card:not(.cycle-card-main)
    .cycle-card-icon img {
        width: 46px !important;
        max-width: 46px !important;
        height: auto;

        object-fit: contain;
    }


    /* TITLE */

    .cycle-card:not(.cycle-card-main) h3 {
        margin: 0 !important;

        color: #ffffff;

        font-size: 17px !important;
        line-height: 1.3 !important;

        font-weight: 700;

        text-align: left !important;
    }


    /* desktop line break ko mobile par space jaisa treat karo */

    .cycle-card:not(.cycle-card-main) h3 br {
        display: none;
    }


    /* =========================================
       CENTER FDE CARD
    ========================================= */

    .cycle-card-main {
        width: 86% !important;
        max-width: 320px !important;

        min-height: 112px !important;

        padding: 18px 23px !important;

        display: grid !important;

        grid-template-columns:
            72px
            minmax(0, 1fr);

        grid-template-rows:
            auto
            auto;

        align-items: center !important;

        column-gap: 17px;

        border-radius: 35px !important;

        border:
            1px solid rgba(65, 244, 220, 0.95) !important;

        background:
            linear-gradient(
                135deg,
                rgba(6, 76, 78, 0.96),
                rgba(4, 47, 55, 0.98)
            ) !important;

        box-shadow:
            0 0 18px rgba(42, 236, 213, 0.16),
            0 0 35px rgba(42, 236, 213, 0.08),
            inset 0 0 25px rgba(93, 248, 230, 0.08);

        overflow: hidden;
    }


    .cycle-card-main .cycle-card-icon {
        grid-column: 1;
        grid-row: 1 / span 2;

        width: 65px !important;
        height: 65px !important;

        margin: 0 !important;

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


    .cycle-card-main .cycle-card-icon img {
        width: 48px !important;
        max-width: 48px !important;
        height: auto;

        object-fit: contain;
    }


    .cycle-card-main h3 {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        margin: 0 0 5px !important;

        color: #ffffff;

        font-size: 31px !important;
        line-height: 1 !important;

        font-weight: 500 !important;

        text-align: center;
    }


    .cycle-card-main p {
        grid-column: 2;
        grid-row: 2;

        align-self: start;

        margin: 0 !important;

        color: #d9eeee !important;

        font-size: 8px !important;
        line-height: 1.45 !important;

        font-weight: 600;

        letter-spacing: 2px !important;

        text-align: center;
    }


    /* =========================================
       DOWN ARROWS
    ========================================= */

    .cycle-arrow {
        position: relative;

        width: 45px !important;
        height: 64px !important;

        display: flex !important;

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

        margin: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }


   .cycle-arrow svg {
    width: 28px !important;
    height: 28px !important;

    fill: none;
    stroke: #78f1e2 !important;
    stroke-width: 2 !important;

    animation:
        fdeArrowMoveMobile
        1.05s
        linear
        infinite !important;
    }

@keyframes fdeArrowMoveMobile {

    0% {
        transform:
            rotate(90deg)
            translateX(-6px);

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform:
            rotate(90deg)
            translateX(7px);

        opacity: 0;
    }

}
    @keyframes fdeMobileArrowDown {

        0%,
        100% {
            transform:
                rotate(90deg)
                translateX(-3px);

            opacity: 0.55;
        }

        50% {
            transform:
                rotate(90deg)
                translateX(4px);

            opacity: 1;
        }

    }


    /* =========================================
       SMOKE / GLOW INSIDE CARDS
    ========================================= */

    .cycle-card::before,
    .cycle-card-main::before {
        opacity: 0.9 !important;
    }


    /* =========================================
       SMALL MOBILE
    ========================================= */

    @media (max-width: 390px) {

        .cycle {
            padding:
                18px
                14px !important;

            border-radius: 24px;
        }


        .cycle-card:not(.cycle-card-main) {
            grid-template-columns:
                58px
                minmax(0, 1fr);

            min-height: 100px !important;

            padding:
                15px
                17px !important;

            column-gap: 13px;
        }


        .cycle-card:not(.cycle-card-main)
        .cycle-card-icon {
            width: 54px !important;
            height: 54px !important;
        }


        .cycle-card:not(.cycle-card-main)
        .cycle-card-icon img {
            width: 40px !important;
        }


        .cycle-card-main {
            width: 92% !important;

            grid-template-columns:
                58px
                minmax(0, 1fr);

            padding:
                17px
                18px !important;

            column-gap: 12px;
        }


        .cycle-card-main .cycle-card-icon {
            width: 55px !important;
            height: 55px !important;
        }


        .cycle-card-main .cycle-card-icon img {
            width: 42px !important;
        }


        .cycle-card-main h3 {
            font-size: 27px !important;
        }

    }
}

/* =========================================================
   PRODUCTION JOURNEY
========================================================= */

.production {
    position: relative;
    overflow: hidden;
    background: #fbfdfe;
    padding: 62px 0 70px;
}

.production-container {
    width: min(var(--container), calc(100% - 90px));
}


/* =========================================================
   TAG
========================================================= */

.production-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 17px;

    color: #6a7681;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
}

.production-tag::before {
    content: "";

    width: 38px;
    height: 2px;
    flex: 0 0 38px;

    background: #81909a;
    border-radius: 10px;
}


/* =========================================================
   TITLE
========================================================= */

.production-title {
    position: relative;
    width: fit-content;

    margin-bottom: 0;

    color: #0a131a;

    font-size: clamp(34px, 3vw, 54px);
    line-height: 1.06;
    font-weight: 700;
}

.production-title span {
    color: var(--aqua2);
}


/* =========================================================
   FLOW WRAPPER
========================================================= */

.production-flow-wrap {
    width: 100%;
    margin-top: 28px;
}

.production-flow {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns:
        1fr
        180px
        1fr
        180px
        1fr
        180px   
        1fr
        180px
        1fr;
    align-items: start;
}


/* =========================================================
   STEP
========================================================= */

.production-item {
    position: relative;
    min-width: 0;
    z-index: 3;
}

.production-number {
    display: block;

    min-height: 20px;

    margin-bottom: 14px;

    text-align: center;

    color: #64727c;

    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}


/* =========================================================
   LARGE CIRCLE
========================================================= */

.production-icon {
    position: relative;

    width: 76px;
    height: 76px;

    margin: 0 auto;

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

    border-radius: 50%;

    background: #fff;

    border: 1px solid rgba(65, 218, 204, 0.25);

    box-shadow:
        0 0 0 7px rgba(68, 226, 212, 0.07),
        0 0 20px rgba(46, 220, 203, 0.20);

    color: #0a141a;

    z-index: 4;
}

.production-icon svg {
    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CONNECTOR
========================================================= */

.production-connector {
    position: relative;

    /*
     * number = 20px
     * margin = 14px
     * circle = 76px
     *
     * circle centre = 20 + 14 + 38 = 72px
     *
     * connector height = 36
     * margin top = 72 - 18 = 54
     *
     * Isliye line EXACT circle centre me baithegi.
     */
    height: 36px;

    margin-top: 54px;

    z-index: 2;

    overflow: visible;
}


/* LINE ONLY BETWEEN TWO CIRCLES */

.production-connector-line {
    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 2px;

    transform: translateY(-50%);

    background: linear-gradient(
        90deg,
        rgba(52, 215, 201, 0.35),
        rgba(52, 215, 201, 0.95),
        rgba(52, 215, 201, 0.35)
    );

    z-index: 1;
}


/* =========================================================
   MOVING ARROW
========================================================= */

.production-arrow-runner {
    position: absolute;

    top: 50%;
    left: 0;

    width: 36px;
    height: 36px;

    transform: translateY(-50%);

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

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid rgba(50, 212, 197, 0.5);

    box-shadow:
        0 0 0 4px rgba(71, 226, 211, 0.06),
        0 0 13px rgba(42, 213, 197, 0.18);

    color: #17242a;

    z-index: 3;

    animation:
        productionConnectorArrow
        1.7s
        linear
        infinite;
}

.production-arrow-runner svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/*
   EACH ARROW:
   LEFT EDGE -> RIGHT EDGE -> restart
*/

@keyframes productionConnectorArrow {

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

    8% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 36px);
        opacity: 0;
    }

}


/* slightly stagger them so sab exact same position par na ho */

.production-connector:nth-of-type(2) .production-arrow-runner {
    animation-delay: 0s;
}

.production-connector:nth-of-type(4) .production-arrow-runner {
    animation-delay: -0.4s;
}

.production-connector:nth-of-type(6) .production-arrow-runner {
    animation-delay: -0.8s;
}

.production-connector:nth-of-type(8) .production-arrow-runner {
    animation-delay: -1.2s;
}


/* =========================================================
   TEXT
========================================================= */

.production-item h3 {
    margin-top: 19px;

    color: #10191f;

    text-align: center;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.production-small-line {
    display: block;

    width: 18px;
    height: 2px;

    margin: 7px auto 0;

    background: #82eadd;

    border-radius: 10px;
}

.production-item p {
    margin-top: 9px;

    color: #687983;

    text-align: center;

    line-height: 1.45;

    font-size: 13px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .production-container {
        width: calc(100% - 50px);
    }

    .production-flow-wrap {
        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 18px;
    }

    .production-flow {
        min-width: 1000px;

        grid-template-columns:
            140px
            75px
            140px
            75px
            140px
            75px
            140px
            75px
            140px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .production {
        padding: 55px 0 60px;
    }

    .production-container {
        width: calc(100% - 30px);
    }

    .production-title {
        font-size: 33px;
        line-height: 1.08;
    }

    .production-flow {
        min-width: 900px;

        grid-template-columns:
            125px
            68px
            125px
            68px
            125px
            68px
            125px
            68px
            125px;
    }

    .production-icon {
        width: 72px;
        height: 72px;
    }

    .production-icon svg {
        width: 30px;
        height: 30px;
    }

    /*
       Mobile circle is 72px:
       20 + 14 + 36 = 70
       connector 36/2 = 18
       margin-top = 52
    */

    .production-connector {
        margin-top: 52px;
    }

    .production-arrow-runner {
        width: 34px;
        height: 34px;
    }

    @keyframes productionConnectorArrow {

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

        8% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            left: calc(100% - 34px);
            opacity: 0;
        }

    }

}

/* =========================================================
   INDIVIDUAL STEPS
========================================================= */

.production-item {
    position: relative;

    z-index: 3;

    min-width: 0;
}


/* NUMBERS */

.production-number {
    display: block;

    margin-bottom: 14px;

    text-align: center;

    color: #64727c;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   LARGE CIRCLE
========================================================= */

.production-icon {
    position: relative;

    width: 76px;
    height: 76px;

    margin: 0 auto;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border:
        1px solid rgba(65, 218, 204, 0.23);

    box-shadow:
        0 0 0 7px rgba(68, 226, 212, 0.07),
        0 0 20px rgba(46, 220, 203, 0.18);

    color: #0a141a;

    /*
       IMPORTANT:
       arrow line will travel behind circles
    */
    z-index: 4;
}


/* subtle aqua ring */

.production-icon::after {
    content: "";

    position: absolute;
    inset: -5px;

    border-radius: 50%;

    border:
        1px solid rgba(92, 231, 218, 0.10);

    pointer-events: none;
}


/* icon SVG */

.production-icon svg {
    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   TEXT
========================================================= */

.production-item h3 {
    margin-top: 19px;

    color: #10191f;

    text-align: center;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.production-small-line {
    display: block;

    width: 18px;
    height: 2px;

    margin:
        7px auto 0;

    background: #82eadd;

    border-radius: 10px;
}


.production-item p {
    margin-top: 9px;

    color: #687983;

    text-align: center;

    line-height: 1.45;

    font-size: 13px;
}


/* Empty grid columns */

.production-space {
    min-width: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .production-container {
        width:
            calc(100% - 50px);
    }


    .production-flow {
        /*
           Preserve horizontal reference-style layout.
           User can scroll instead of squeezing everything.
        */

        min-width: 950px;

        grid-template-columns:
            135px
            70px
            135px
            70px
            135px
            70px
            135px
            70px
            135px;
    }


    .production-flow-wrap {
        overflow-x: auto;

        overflow-y: hidden;

        padding-bottom: 15px;

        scrollbar-width: thin;
    }


    .production-track-line {
        left: 67px;
        right: 67px;
    }


    .production-moving-arrow {
        left: 67px;

        animation:
            productionArrowJourneyTablet
            6s
            linear
            infinite;
    }


    @keyframes productionArrowJourneyTablet {

        0% {
            left: 67px;
            opacity: 0;
        }

        3% {
            opacity: 1;
        }

        97% {
            opacity: 1;
        }

        100% {
            left: calc(100% - 67px);
            opacity: 0;
        }

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .production {
        padding:
            55px 0
            60px;
    }


    .production-container {
        width:
            calc(100% - 30px);
    }


    .production-title {
        font-size: 33px;

        line-height: 1.08;
    }


    .production-title::after {
        margin-top: 13px;
    }


    .production-flow-wrap {
        margin-top: 30px;
    }


    .production-flow {
        min-width: 865px;

        grid-template-columns:
            125px
            60px
            125px
            60px
            125px
            60px
            125px
            60px
            125px;
    }


    .production-icon {
        width: 72px;
        height: 72px;
    }


    .production-icon svg {
        width: 30px;
        height: 30px;
    }


    .production-track-line {
        top: 82px;

        left: 62px;
        right: 62px;
    }


    .production-moving-arrow {
        top: 64px;

        width: 36px;
        height: 36px;

        left: 62px;

        animation:
            productionArrowJourneyMobile
            6s
            linear
            infinite;
    }


    @keyframes productionArrowJourneyMobile {

        0% {
            left: 62px;
            opacity: 0;
        }

        3% {
            opacity: 1;
        }

        97% {
            opacity: 1;
        }

        100% {
            left: calc(100% - 62px);
            opacity: 0;
        }

    }

}
        /* =========================================================
   WHO CAN BECOME AN FDE
========================================================= */

.audience {
    position: relative;
    padding: 0 !important;
    background: #f9fcfd;
    color: #0b1934;
}


/* =========================================================
   SECTION MINI HEADER
========================================================= */

.audience-header {
    width: 100%;

    background:
        linear-gradient(
            90deg,
            #032430 0%,
            #043847 50%,
            #03212c 100%
        );

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


.audience-header-inner {
    min-height: 66px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}


/* LOGO */

.audience-logo {
    color: #fff;

    font-size: 21px;

    line-height: 1;

    font-weight: 800;
}


.audience-logo span {
    color: var(--aqua);
}


/* NAV */

.audience-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 44px;

    margin-left: auto;
}


.audience-nav a {
    color: rgba(255, 255, 255, 0.88);

    font-size: 13px;

    font-weight: 500;

    transition: 0.25s;
}


.audience-nav a:hover {
    color: var(--aqua);
}


/* HEADER CTA */

.audience-header-btn {
    min-height: 43px;

    padding: 9px 25px;

    margin-left: 40px;

    background: #71f2e1;

    color: #062029;

    border: none;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 18px rgba(61, 225, 210, 0.10);
}


.audience-header-btn svg {
    width: 17px;

    height: 17px;

    margin-left: 8px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   MAIN BODY
========================================================= */

.audience-body {
    padding: 32px 0 28px;

    background:
        radial-gradient(
            circle at 96% 8%,
            rgba(70, 222, 210, 0.035),
            transparent 34%
        ),
        #fbfdfe;
}


/* =========================================================
   TAG
========================================================= */

.audience-tag, .overview-tag, .reviews-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    gap: 13px;
    margin-bottom: 13px;
    color: #000;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 1.3px;
    background: #bde9e7;
}


/* =========================================================
   HEADING
========================================================= */

.audience-title {
    margin: 0 0 8px;

    color: #091630;

    font-size: clamp(36px, 3vw, 52px);

    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -1.4px;
}


.audience-title span {
    color: #00f4fe;
}


/* DESCRIPTION */

.audience-intro {
    margin: 0;

    color: #637593;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   GRID
========================================================= */

.audience-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 22px;
}


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

.audience-card {
    position: relative;

    min-height: 176px;

    padding: 20px 25px 15px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98),
            rgba(251, 253, 254, 0.98)
        );

    border:
        1px solid #e1e9ee;

    border-radius: 13px;

    box-shadow:
        0 3px 12px rgba(28, 66, 85, 0.025);

    overflow: hidden;
}


/* subtle light card glow */

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

    position: absolute;

    width: 180px;

    height: 140px;

    left: -40px;

    top: -35px;

    background:
        radial-gradient(
            circle,
            rgba(70, 225, 211, 0.06),
            transparent 65%
        );

    pointer-events: none;
}


/* =========================================================
   CARD MAIN ROW
========================================================= */

.audience-card-main {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        76px
        minmax(0, 1fr);

    gap: 22px;

    align-items: start;
}


/* =========================================================
   ICON BOX
========================================================= */

.audience-icon {
    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #e9fbfa,
            #e2f8f6
        );

    color: #102b3b;

    box-shadow:
        inset 0 0 18px rgba(50, 207, 194, 0.04);
}


.audience-icon svg {
    width: 39px;

    height: 39px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   CARD TEXT
========================================================= */

.audience-card-content {
    padding-top: 2px;
}


.audience-card h3 {
    margin: 0 0 6px;

    color: #07152f;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;
}


.audience-card-content p {
    max-width: 350px;

    margin: 0;

    color: #566b88;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   SKILL PATH
========================================================= */

.audience-skill-path {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 13px;

    padding-top: 10px;

    border-top:
        1px solid #e2eaef;
}


/* EXISTING SKILLS PILL */

.skill-pill {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding: 5px 14px;

    border-radius: 999px;

    background: #eff4f8;

    color: #000;

    font-size: 11px;

    font-weight: 600;
}


/* ARROW */

.skill-arrow {
    width: 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #27d9c7;
}


.skill-arrow svg {
    width: 19px;

    height: 19px;

    fill: none;

    stroke: #00f4fe;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* FDE PILL */

.fde-pill {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 58px;

    min-height: 28px;

    padding: 5px 14px;

    border-radius: 999px;

    background: #00f4fe;

    color: #000;

    font-size: 11px;

    font-weight: 700;
}



/* =========================================================
   BOTTOM CTA
========================================================= */

.audience-cta {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title button"
            "text  button";

        align-items: center;
        column-gap: 40px;
        row-gap: 4px;

        text-align: left;

        padding: 40px 32px;
    }

    

.audience-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(82, 229, 214, 0.08),
            transparent 48%
        );
}


.audience-cta > * {
    position: relative;

    z-index: 2;
}


.audience-cta h3 {
        grid-area: title;

        margin: 0;
    font-weight: 800;
        font-size: 26px;
        line-height: 1.15;
    }


.audience-cta h3 span {
    color: #1fcfc0;
}


  .audience-cta p {
        grid-area: text;

        margin: 0;

        font-size: 12px;
    }


/* CTA BUTTON */
/* =========================================================
   AUDIENCE CTA BUTTON FIX
========================================================= */

.audience-cta .audience-cta-btn {
    grid-area: button;

    width: 100%;
    min-width: 310px;
    min-height: 48px;

    padding: 12px 24px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    justify-self: end;
    align-self: center;

    border: none !important;
    outline: none !important;

    border-radius: 9px !important;

    background: linear-gradient(
        90deg,
        #042f43,
        #07394f
    ) !important;

    color: #2ce1cf !important;

    cursor: pointer;

    font-family: "Sora", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 18px rgba(3, 44, 63, 0.12) !important;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.audience-cta .audience-cta-btn span {
    color: #2ce1cf !important;
}

.audience-cta .audience-cta-btn svg {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    fill: none !important;
    stroke: #2ce1cf !important;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audience-cta .audience-cta-btn:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        90deg,
        #06384d,
        #08465d
    ) !important;

    color: #4ce9dc !important;

    box-shadow:
        0 10px 22px rgba(3, 44, 63, 0.18) !important;
}

.audience-cta .audience-cta-btn:hover span {
    color: #4ce9dc !important;
}

.audience-cta .audience-cta-btn:hover svg {
    stroke: #4ce9dc !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .audience-header-inner {
        gap: 20px;
    }


    .audience-nav {
        gap: 24px;
    }


    .audience-header-btn {
        margin-left: 10px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .audience-grid {
        gap: 14px;
    }


    .audience-card {
        padding:
            20px
            18px
            15px;
    }


    .audience-card-main {
        grid-template-columns:
            64px
            minmax(0, 1fr);

        gap: 16px;
    }


    .audience-icon {
        width: 62px;
        height: 62px;
    }


    .audience-icon svg {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .audience-header {
        padding: 0;
    }


    .audience-header-inner {
        min-height: auto;
        padding: 12px 0;
        flex-wrap: wrap;
        gap: 12px;
    }


    .audience-logo {
        font-size: 19px;
    }


    /*
       PPC/reference type mini header:
       mobile me navigation hide.
    */
    .audience-nav {
        display: flex !important;
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        overflow-x: auto;
        padding-top: 8px;
        scrollbar-width: none;
    }

     .audience-nav::-webkit-scrollbar {
        display: none;
    }

        .audience-nav a {
        flex: 0 0 auto;
        font-size: 12px;
        white-space: nowrap;
    }




    .audience-header-btn {
        margin-left: auto;
    }


    .audience-header-btn svg {
        width: 15px;
        height: 15px;
    }


    .audience-body {
        padding:
            36px 0
            35px;
    }


    .audience-title {
        font-size: 36px;

        letter-spacing: -1px;
    }


    .audience-intro {
        font-size: 14px;
    }


    .audience-grid {
        grid-template-columns: 1fr;

        margin-top: 25px;
    }


    .audience-card {
        min-height: auto;

        padding:
            20px
            18px
            15px;
    }


    .audience-card-main {
        grid-template-columns:
            64px
            minmax(0, 1fr);
    }


    .audience-icon {
        width: 62px;
        height: 62px;
    }


    .audience-card h3 {
        font-size: 15px;
    }


    .audience-card-content p {
        font-size: 12px;
    }


    .audience-skill-path {
        gap: 10px;
    }


    .skill-pill,
    .fde-pill {
        font-size: 10px;
    }


    .audience-cta {
        margin-top: 16px;

        padding:
            25px
            18px;
    }


    .audience-cta h3 {
        font-size: 21px;
    }


    .audience-cta-btn {
        width: 100%;

        min-width: 0;

        gap: 15px;
    }

}



/* =========================================================
   ALUMNI
========================================================= */

.alumni {
    position: relative;
    overflow: hidden;

    padding: 55px 0 48px;

    color: #fff;

    background:
        linear-gradient(
            rgba(3, 14, 20, 0.72),
            rgba(3, 14, 20, 0.78)
        ),
        url("../images/bgimage.png");
         background-repeat: no-repeat;

    background-position: center center;

    background-size: 100% auto;
}

/* optional extra dark overlay for readability */
.alumni::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 10%,
            rgba(68, 224, 214, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(40, 196, 188, 0.06),
            transparent 24%
        ),
        rgba(2, 12, 18, 0.30);
}

/* content always above overlay */
.alumni .container {
    position: relative;
    z-index: 2;
}



/* =========================================================
   TAG
========================================================= */

.alumni-tag {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 15px;

    color: #72eadf;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}


/* =========================================================
   TITLE
========================================================= */

.alumni-title {
    margin-bottom: 4px;

    max-width: 760px;

    color: #ffffff;

    font-size: clamp(34px, 3vw, 52px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -1px;
}


.alumni-title span {
    display: block;

    color: #43e5d5;
}


/* intro */

.alumni-intro {
    margin-top: 7px;

    color: #a4b5c0;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   GRID
========================================================= */

.alumni-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 22px;
}


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

.alumni-card {
    position: relative;

    min-width: 0;

    padding: 19px 16px 14px;

    border-radius: 13px;

    border:
        1px solid rgba(132, 186, 209, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(16, 42, 56, 0.92),
            rgba(8, 30, 43, 0.94)
        );

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10),
        inset 0 0 20px rgba(94, 210, 209, 0.015);

    overflow: hidden;

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}


.alumni-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(83, 222, 210, 0.28);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.16),
        0 0 22px rgba(45, 207, 195, 0.04);
}


/* subtle internal glow */

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

    position: absolute;

    width: 160px;
    height: 130px;

    top: -65px;
    right: -55px;

    background:
        radial-gradient(
            circle,
            rgba(63, 221, 211, 0.06),
            transparent 67%
        );

    pointer-events: none;
}


/* =========================================================
   TOP PROFILE
========================================================= */

.alumni-head {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 17px;
}


.alumni-profile {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 14px;
}


/* =========================================================
   PHOTO
========================================================= */

.alumni-avatar {
    width: 76px;

    height: 76px;

    flex: 0 0 76px;

    padding: 0;

    overflow: hidden;

    border-radius: 50%;

    background: #173742;

    border:
        1px solid rgba(126, 235, 222, 0.24);

    box-shadow:
        0 0 15px rgba(65, 215, 202, 0.06);
}


.alumni-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}


/* =========================================================
   PERSON INFO
========================================================= */

.alumni-person {
    min-width: 0;
}


.alumni-person h3 {
    margin: 0 0 5px;

    color: #fff;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;
}


.alumni-person > p {
    margin: 0 0 7px;

    color: #91a8b7;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   COMPANY
========================================================= */

.alumni-company {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #fff;

    font-size: 13px;

    font-weight: 600;
}


.alumni-company img {
    width: 23px;

    height: 23px;

    flex: 0 0 23px;

    object-fit: contain;
}


/* =========================================================
   LINKEDIN
========================================================= */

.alumni-linkedin {
    width: 24px;

    height: 24px;

    flex: 0 0 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 3px;

    background: #0a93e5;

    color: #fff;

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    box-shadow:
        0 0 10px rgba(10, 147, 229, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.alumni-linkedin:hover {
    transform: translateY(-2px);

    box-shadow:
        0 4px 13px rgba(10, 147, 229, 0.28);
}


/* =========================================================
   CAREER SHIFT
========================================================= */

.career-shift {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        30px
        minmax(0, 1fr);

    gap: 8px;

    align-items: center;

    margin-top: 3px;

    padding-bottom: 13px;

    border-bottom:
        1px solid rgba(165, 193, 205, 0.15);
}


/* =========================================================
   CAREER BOX
========================================================= */

.career-box {
    min-height: 74px;

    padding: 12px 11px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    border-radius: 8px;

    border:
        1px solid rgba(159, 192, 205, 0.12);

    background:
        linear-gradient(
            145deg,
            rgba(31, 57, 71, 0.92),
            rgba(27, 52, 66, 0.90)
        );

    color: #fff;

    font-size: 11px;

    line-height: 1.45;
}


.career-box.after {
    border-color:
        rgba(41, 218, 196, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(10, 68, 70, 0.91),
            rgba(10, 57, 62, 0.94)
        );

    box-shadow:
        inset 0 0 17px rgba(54, 223, 207, 0.035);
}


.career-label {
    display: block;

    margin-bottom: 7px;

    color: #a8b8c2;

    font-size: 9px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.5px;
}


.career-box.after .career-label {
    color: #4ce7d5;
}


.career-box strong {
    color: #fff;

    font-size: 10px;

    line-height: 1.45;

    font-weight: 600;
}


/* =========================================================
   SHIFT ARROW
========================================================= */

.career-shift-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    color: #c5d1d6;
}


.career-shift-arrow svg {
    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

    animation:
        alumniCareerArrow
        1.4s
        ease-in-out
        infinite;
}


@keyframes alumniCareerArrow {

    0%,
    100% {
        transform: translateX(-2px);
        opacity: 0.55;
    }

    50% {
        transform: translateX(3px);
        opacity: 1;
    }

}


/* =========================================================
   PROFILE LINK
========================================================= */

.alumni-profile-link {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 12px;

    color: #38ddcd;

    font-size: 11px;

    font-weight: 600;

    transition:
        color 0.25s ease;
}


.alumni-profile-link svg {
    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.25s ease;
}


.alumni-profile-link:hover {
    color: #79f3e4;
}


.alumni-profile-link:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .alumni-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .alumni-card:last-child {
        grid-column: 1 / -1;

        max-width: calc(50% - 9px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alumni {
        padding:
            55px 0
            45px;
    }


    .alumni-title {
        font-size: 35px;
    }


    .alumni-intro {
        font-size: 13px;
    }


    .alumni-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .alumni-card:last-child {
        grid-column: auto;

        max-width: none;
    }


    .alumni-avatar {
        width: 68px;
        height: 68px;

        flex-basis: 68px;
    }


    .career-shift {
        grid-template-columns:
            minmax(0, 1fr)
            28px
            minmax(0, 1fr);
    }


    .career-box {
        min-height: 72px;

        padding:
            11px
            9px;
    }

}

/* =========================================================
   CURRICULUM
========================================================= */

.curriculum {
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #fff;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(22, 131, 158, 0.15),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #052231,
            #052b3b 48%,
            #041d2a
        );
}



.curriculum-apply-btn {
    min-height: 38px;

    padding: 8px 19px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border: 0;
    border-radius: 6px;

    background: #79f1e2;

    color: #04232c;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.curriculum-apply-btn svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;

    transition: transform .25s ease;
}

.curriculum-apply-btn:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   CONTAINER
========================================================= */

.curriculum-container {
    padding-top: 35px;
    padding-bottom: 48px;
}


/* =========================================================
   HEADER
========================================================= */

.curriculum-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;

    margin-bottom: 26px;
}

.curriculum-heading {
    max-width: 730px;
}

.curriculum-title {
    margin: 0;

    color: #fff;

    font-size: clamp(34px, 3vw, 52px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}

.curriculum-title span {
    color: #4de6d6;
}

.curriculum-description {
    margin-top: 13px;

    color: #b0c1c8;

    font-size: 14px;

    line-height: 1.55;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.curriculum-download-btn {
    min-width: 300px;
    min-height: 52px;

    padding: 10px 16px;

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

    gap: 18px;

    border: 1px solid #42cfc2;

    border-radius: 9px;

    background: #00f4fe;

    color: #000;

    cursor: pointer;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.curriculum-download-left {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    font-size: 11px;

    font-weight: 600;
}

.curriculum-download-left svg,
.curriculum-download-icon {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: #000;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   LAYOUT
========================================================= */

.curriculum-layout {
    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    gap: 20px;

    align-items: start;
}


/* =========================================================
   MODULE LEFT MENU
========================================================= */

.module-list {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 2px;

    max-height: 520px;
}

.module-btn {
    width: 100%;

    min-height: 64px;

    padding: 10px 12px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        20px;

    align-items: center;

    gap: 11px;

    border: 1px solid rgba(124, 182, 196, .20);

    border-radius: 7px;

    background:
        rgba(5, 41, 56, .78);

    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.module-btn:hover {
    border-color: rgba(80, 227, 213, .40);
}

.module-btn.active {
    color: #06262e;

    border-color: #63ebdd;

    background:
        linear-gradient(
            90deg,
            #65e9dd,
            #8af5e7
        );
}

.module-no {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 7px;
    margin: 0px 0 0px 0;
    background:
        rgba(255,255,255,.08);

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}

.module-btn.active .module-no {
    background: rgba(15, 165, 160, .17);

    color: #06434a;
}

.module-btn-copy {
    min-width: 0;
}

.module-btn-copy strong {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;

    line-height: 1.25;
}

.module-btn-copy small {
    display: block;

    color: #9bb0b8;

    font-size: 9px;

    line-height: 1.3;
}

.module-btn.active .module-btn-copy small {
    color: #326468;
}

.module-chevron {
    color: #46dfd1;

    font-size: 27px;

    font-weight: 300;
}

.module-btn.active .module-chevron {
    color: #073941;
}


/* =========================================================
   SCROLL AREA — RECORDING EFFECT
========================================================= */

.curriculum-scroll {
    height: 520px;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(89, 226, 213, .7)
        rgba(255,255,255,.06);
}

.curriculum-scroll::-webkit-scrollbar {
    width: 6px;
}

.curriculum-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);

    border-radius: 10px;
}

.curriculum-scroll::-webkit-scrollbar-thumb {
    background: rgba(89, 226, 213, .7);

    border-radius: 10px;
}


/* =========================================================
   MODULE PANEL
========================================================= */

.curriculum-module {
    min-height: 505px;

    margin-bottom: 16px;

    padding: 24px;

    color: #0d1930;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fcfdfe
        );

    border: 1px solid #dde7eb;

    border-radius: 11px;

    scroll-margin-top: 0;
}

.curriculum-module:last-child {
    margin-bottom: 0;
}

.curriculum-module-label {
    display: block;

    margin-bottom: 9px;

    color: #2acbbb;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.curriculum-module h3 {
    margin: 0 0 6px;

    color: #0b152e;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 700;
}

.curriculum-module-description,
.curriculum-module-top p {
    margin: 0;

    color: #526781;

    font-size: 12px;

    line-height: 1.5;
}

.curriculum-divider {
    height: 1px;

    margin: 17px 0;

    background: #dce5e9;
}

.topics-label {
    display: block;

    margin-bottom: 10px;

    color: #31c8ba;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


/* =========================================================
   TOPICS
========================================================= */

.module-topics {
    display: grid;

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

    gap: 12px;

    margin-top: 0;
}

.topic {
    min-height: 204px;

    padding: 13px;

    border: 1px solid #e5ecef;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #f9fbfc,
            #f5f9fb
        );
}

.topic h4 {
    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 11px;

    color: #18243d;

    font-size: 13px;

    line-height: 1.35;
}

.topic h4 span {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background: #00f4fe;

    color: #06323a;

    font-size: 12px;

    font-weight: 700;
}

.topic ul {
    margin: 0;

    padding-left: 17px;

    color: #354866;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   BOTTOM INFO
========================================================= */

.module-bottom-info {
    display: grid;

    grid-template-columns:
        1.2fr
        .9fr;

    gap: 20px;

    margin-top: 17px;

    padding-top: 15px;

    border-top: 1px solid #dce5e9;
}

.module-info-item {
    display: grid;

    grid-template-columns:
        36px
        minmax(0,1fr);

    gap: 10px;

    align-items: start;
}

.module-info-item + .module-info-item {
    padding-left: 20px;

    border-left: 1px solid #dce5e9;
}

.module-info-icon {
    color: #086b6e;
}

.module-info-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.module-info-item strong {
    display: block;

    margin-bottom: 3px;

    color: #17243d;

    font-size: 11px;
}

.module-info-item p {
    color: #586b82;

    font-size: 9px;

    line-height: 1.45;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 1000px) {

    .curriculum-mini-nav {
        gap: 22px;
    }

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

    .curriculum-download-btn {
        min-width: 290px;
    }

    .curriculum-layout {
        grid-template-columns:
            245px
            minmax(0,1fr);
    }

    .module-topics {
        grid-template-columns: 1fr;
    }

    .topic {
        min-height: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

    .curriculum-mini-nav {
        display: none;
    }

    .curriculum-mini-header-inner {
        min-height: 56px;
    }

    .curriculum-logo {
        font-size: 19px;
    }

    .curriculum-apply-btn {
        min-height: 35px;

        padding: 7px 13px;
    }

    .curriculum-container {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .curriculum-title {
        font-size: 34px;
    }

    .curriculum-description br {
        display: none;
    }

    .curriculum-download-btn {
        width: 100%;

        min-width: 0;
    }


    .module-list {
        position: static;

        display: flex;

        flex-direction: row;

        gap: 8px;

        max-height: none;

        margin-bottom: 15px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .module-list::-webkit-scrollbar {
        display: none;
    }

    .module-btn {
        flex: 0 0 230px;
    }

    .curriculum-scroll {
        height: 560px;
    }

    .curriculum-module {
        padding: 18px;

        min-height: 530px;
    }

    .curriculum-module h3 {
        font-size: 23px;
    }

    .module-topics {
        grid-template-columns: 1fr;
    }

    .module-bottom-info {
        grid-template-columns: 1fr;
    }

    .module-info-item + .module-info-item {
        padding-left: 0;

        padding-top: 15px;

        border-left: 0;

        border-top: 1px solid #dce5e9;
    }

}

/* =========================================================
   MOBILE CURRICULUM ACCORDION
========================================================= */

.curriculum-mobile-accordion {
    display: none;
}


/* =========================================================
   MOBILE ONLY
========================================================= */

@media (max-width: 767px) {

    /* Desktop curriculum layout hide */
    .curriculum-layout {
        display: none;
    }

    .curriculum-mobile-accordion {
        display: block;

        margin-top: 26px;
    }


    .curriculum-accordion-item {
        margin-bottom: 16px;

        border-radius: 18px;

        overflow: hidden;

        background: #171717;
    }


    .curriculum-accordion-trigger {
        width: 100%;

        min-height: 55px;

        padding: 12px 12px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        border: 0;

        background: #252525;

        color: #fff;

        text-align: left;

        cursor: pointer;

        border-radius: 18px;

        font-size: 15px;

        line-height: 1.35;

        font-weight: 600;

        transition:
            background 0.25s ease,
            border-radius 0.25s ease;
    }


    .curriculum-accordion-trigger:hover {
        background: #2b2b2b;
    }


    .curriculum-accordion-icon {
        flex: 0 0 28px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #a9a9a9;

        font-size: 32px;

        line-height: 1;

        font-weight: 300;

        transition:
            transform 0.3s ease,
            color 0.3s ease;
    }


    /* Closed content */
    .curriculum-accordion-content {
        max-height: 0;

        overflow: hidden;

        background: #f9fcfd;

        transition:
            max-height 0.45s ease;
    }


    .curriculum-accordion-inner {
        padding: 22px 22px 25px;

        color: #0d1930;
    }


    .curriculum-accordion-inner h3 {
        margin: 8px 0 7px;

        font-size: 22px;

        line-height: 1.25;
    }


    .curriculum-accordion-inner > p {
        margin: 0;

        color: #5f7185;

        font-size: 13px;

        line-height: 1.55;
    }


    /* ACTIVE */
    .curriculum-accordion-item.active .curriculum-accordion-content {
        max-height: 1300px;
    }


    .curriculum-accordion-item.active .curriculum-accordion-trigger {
        border-radius:
            18px 18px 0 0;
    }


    .curriculum-accordion-item.active .curriculum-accordion-icon {
        transform: rotate(45deg);

        color: #70eadc;
    }


    /* topics */
    .mobile-topic {
        margin-top: 18px;

        padding: 16px;

        border-radius: 10px;

        background: #f1f7f9;

        border: 1px solid #e1eaed;
    }


    .mobile-topic h4 {
        margin: 0 0 10px;

        font-size: 14px;
    }


    .mobile-topic ul {
        margin: 0;

        padding-left: 18px;

        color: #55687d;

        font-size: 12px;

        line-height: 1.7;
    }

}
/* =========================================================
   CURRICULUM PINNED SCROLL - DESKTOP
========================================================= */

@media (min-width: 768px) {

    .curriculum {
        position: relative;

        /*
         * JS exact height set karega.
         */
        min-height: 100vh;

        overflow: visible !important;
    }


    /*
     * Ye poora curriculum viewport me hold karega
     */
    .curriculum-pin {
        position: sticky;

        top: 0;

        width: 100%;

        min-height: 100vh;

        display: flex;
        align-items: center;

        background:
            radial-gradient(
                circle at 75% 30%,
                rgba(22, 131, 158, 0.15),
                transparent 34%
            ),
            linear-gradient(
                135deg,
                #052231,
                #052b3b 48%,
                #041d2a
            );

        overflow: hidden;
    }


    .curriculum-container {
        width: min(
            var(--container),
            calc(100% - 40px)
        );

        padding-top: 30px;
        padding-bottom: 30px;
    }


    /*
     * Inner scrollbar ko user directly nahi chalaye.
     * Page scroll hi modules ko control karega.
     */
    .curriculum-scroll {
        height: 520px;

        overflow-y: hidden !important;
        overflow-x: hidden !important;

        scroll-behavior: auto !important;

        scrollbar-width: none;
    }


    .curriculum-scroll::-webkit-scrollbar {
        display: none;
    }


    /*
     * Left module list viewport me stable
     */
    .module-list {
        max-height: 520px;
    }

}


/* =========================================================
   MOBILE - NORMAL ACCORDION
========================================================= */

@media (max-width: 767px) {

    .curriculum {
        min-height: auto !important;
        height: auto !important;
    }

    .curriculum-pin {
        position: static !important;

        min-height: auto !important;

        display: block !important;

        overflow: visible !important;
    }

}

/* =========================================================
   PROJECTS
========================================================= */

.projects {
    position: relative;

    padding: 30px 0 42px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #062435 0%,
            #052a3c 41%,
            #f7fafb 41%,
            #f7fafb 100%
        );
}


/* =========================================================
   HEADER
========================================================= */

.projects-tag, .fee-tag, .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 13px;
    border: 1px solid #38e2d2;
    border-radius: 999px;
    background: #38e2d2;
    color: #000;
    font-size: 10px;
    font-weight: 700;
        margin-bottom: 13px;

    line-height: 1;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}


.projects-title {
    margin: 0;

    color: #fff;

    font-size: clamp(30px, 2.5vw, 43px);

    line-height: 1.1;

    font-weight: 700;
}


.projects-title span {
    color: #33e1d1;
}


/* =========================================================
   TABS
========================================================= */

.project-tabs {
    display: grid;

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

    gap: 12px;

    margin-top: 16px;

    margin-bottom: 16px;
}


.project-tab {
    min-height: 62px;

    padding: 11px 17px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 4px;

    border:
        1px solid rgba(109, 180, 201, 0.25);

    border-radius: 8px;

    background:
        rgba(7, 44, 62, 0.75);

    color: #fff;

    cursor: pointer;

    text-align: left;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.project-tab:hover {
    transform: translateY(-2px);

    border-color:
        rgba(83, 223, 210, .45);
}


.project-tab small {
    color: #93aab5;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;
}


.project-tab strong {
    color: #fff;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;
}


.project-tab.active {
    border-color: #6eeadd;

    background:
        linear-gradient(
            135deg,
            #63e6da,
            #9af8ea
        );

    color: #062a31;

    box-shadow:
        0 7px 20px rgba(49, 221, 206, 0.12);
}


.project-tab.active small,
.project-tab.active strong {
    color: #073039;
}


/* =========================================================
   PROJECT PANEL
========================================================= */

.project-panel {
    display: none;
}


.project-panel.active {
    display: block;
}


.project-panel {
    position: relative;

    padding: 18px 22px 14px;

    color: #0a1735;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fcfdfe
        );

    border:
        1px solid #e0e8ec;

    border-radius: 13px;

    box-shadow:
        0 14px 36px rgba(4, 35, 49, 0.12);
}


/* =========================================================
   TOP HEADING
========================================================= */

.project-panel-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
}


.project-count {
    display: block;

    margin-bottom: 6px;

    color: #27bdae;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.project-panel h3 {
    margin: 0;

    color: #0a1433;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 700;
}


.project-category {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 25px;

    padding: 5px 12px;

    border-radius: 999px;

    background: #eef5fa;

    color: #466077;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .5px;
}


.project-short-description {
    color: #597084;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   WHAT YOU'LL BUILD
========================================================= */

.project-build {
    padding: 13px 18px;

    margin-top: 12px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #eafaf8,
            #f3fdfc,
            #eafaf8
        );
}


.project-build h4 {
    margin: 0 0 11px;

    color: #099a8d;

    font-size: 13px;
}


.project-build-grid {
    display: grid;

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

    gap: 18px;
}


.build-item {
    display: flex;

    align-items: center;

    gap: 11px;
}


.build-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #fff;

    color: #0eb3a4;

    font-size: 20px;

    box-shadow:
        0 4px 12px rgba(11, 164, 151, 0.08);
}


.build-item p {
    margin: 0;

    color: #455d74;

    font-size: 10px;

    line-height: 1.4;
}


/* =========================================================
   ARCHITECTURE
========================================================= */

.project-architecture {
    margin-top: 12px;

    padding: 13px 16px 12px;

    border:
        1px solid #dfe9ed;

    border-radius: 10px;

    background: #fff;
}


.architecture-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 5px;
}


.architecture-head h4 {
    margin: 0;

    color: #10203b;

    font-size: 14px;
}


.architecture-view-btn {
    min-height: 30px;

    padding: 6px 10px;

    border:
        1px solid #bad8ef;

    border-radius: 6px;

    background: #fff;

    color: #2783cf;

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;
}


/* =========================================================
   DIAGRAM
========================================================= */

.architecture-diagram {
    max-width: 780px;

    margin: 0 auto;

    text-align: center;
}

.architecture-diagram img {
    width: 100%;
    height: auto;
    display: block;
}

.architecture-user {
    width: 260px;

    margin: 0 auto;

    padding: 7px 12px;

    border: 1px solid #dfe8ed;

    border-radius: 7px;

    background: #f7fafc;
}


.architecture-user strong,
.architecture-user span {
    display: block;
}


.architecture-user strong {
    font-size: 10px;
}


.architecture-user span {
    color: #64788d;

    font-size: 8px;
}


.architecture-down-arrow {
    color: #19888e;

    line-height: 1;

    padding: 3px 0;

    font-size: 18px;
}


.architecture-down-arrow.small {
    padding: 2px 0;

    font-size: 15px;
}


.architecture-orchestrator {
    width: 300px;

    margin: 0 auto;

    padding: 8px 15px;

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #0c385e,
            #0b4774
        );

    color: #fff;
}


.architecture-orchestrator strong,
.architecture-orchestrator span {
    display: block;
}


.architecture-orchestrator strong {
    font-size: 10px;
}


.architecture-orchestrator span {
    margin-top: 2px;

    color: #d5e6f0;

    font-size: 8px;
}


/* connector visual */

.architecture-line-row {
    position: relative;

    height: 14px;

    margin: 0 auto;

    width: 70%;

    border-top: 2px solid #32bba9;
}


.architecture-line-row::before,
.architecture-line-row::after {
    content: "";

    position: absolute;

    top: -1px;

    width: 2px;

    height: 14px;

    background: #32bba9;
}


.architecture-line-row::before {
    left: 0;
}


.architecture-line-row::after {
    right: 0;
}


/* =========================================================
   AGENTS
========================================================= */

.architecture-agent-grid {
    display: grid;

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

    gap: 52px;

    align-items: start;
}


.architecture-column {
    min-width: 0;
}


.architecture-agent-card,
.architecture-tool-card {
    min-height: 48px;

    padding: 8px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        1px solid #dce6ea;

    border-radius: 7px;

    background: #fff;
}


.architecture-agent-card strong,
.architecture-tool-card strong {
    font-size: 10px;
}


.architecture-agent-card span,
.architecture-tool-card span {
    margin-top: 2px;

    color: #5c7187;

    font-size: 8px;
}


/* =========================================================
   MEMORY
========================================================= */

.architecture-memory {
    width: 400px;

    margin: 9px auto 0;

    padding: 8px 15px;

    border-radius: 7px;

    background:
        linear-gradient(
            90deg,
            #e8f7f6,
            #f0fbfa
        );

    border:
        1px solid #d9eeec;
}


.architecture-memory strong,
.architecture-memory span {
    display: block;
}


.architecture-memory strong {
    color: #16344b;

    font-size: 10px;
}


.architecture-memory span {
    margin-top: 2px;

    color: #5b7287;

    font-size: 8px;
}


/* =========================================================
   TECH STACK
========================================================= */

.project-tech-stack {
    display: grid;

    grid-template-columns:
        105px
        minmax(0,1fr);

    align-items: center;

    gap: 10px;

    margin-top: 10px;
}


.tech-stack-title {
    color: #10203a;

    font-size: 13px;
}


.tech-stack-items {
    display: grid;

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

    gap: 10px;
}


.tech-stack-item {
    min-height: 38px;

    padding: 7px 10px;

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

    gap: 8px;

    border: 1px solid #e0e9ed;

    border-radius: 7px;

    background: #ffffff;

    color: #3e5b75;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
}

.tech-stack-item img {
    
    height: 32px;

    object-fit: contain;

    display: block;
}

.tech-stack-item span {
    display: inline-block;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 1000px) {

    .project-build-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }


    .architecture-agent-grid {
        gap: 20px;
    }


    .tech-stack-items {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {

    .projects {
        padding-top: 45px;

        background:
            linear-gradient(
                180deg,
                #062435 0%,
                #052a3c 28%,
                #f7fafb 28%,
                #f7fafb 100%
            );
    }


    .projects-title {
        font-size: 33px;
    }


    .project-tabs {
        display: flex;

        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: none;
    }


    .project-tabs::-webkit-scrollbar {
        display: none;
    }


    .project-tab {
        flex: 0 0 165px;
    }


    .project-panel {
        padding: 17px 14px 14px;
    }


    .project-panel-heading {
        flex-direction: column;
    }


    .project-panel h3 {
        font-size: 23px;
    }


    .project-build-grid {
        grid-template-columns: 1fr;
    }


    .architecture-agent-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .architecture-line-row {
        display: none;
    }


    .architecture-orchestrator,
    .architecture-user,
    .architecture-memory {
        width: 100%;
    }


    .project-tech-stack {
        grid-template-columns: 1fr;
    }


    .tech-stack-items {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}




 /* =========================================================
   PROGRAM OVERVIEW
========================================================= */

.overview {
    position: relative;

    padding: 58px 30px 60px;

    background:
        radial-gradient(
            circle at 94% 5%,
            rgba(83, 219, 208, 0.035),
            transparent 28%
        ),
        #fbfdfe;

    color: #0a1733;
}


.overview-container {
    position: relative;
}

/* =========================================================
   TITLE
========================================================= */

.overview-title {
    margin: 0;

    color: #091632;

    font-size: clamp(36px, 3vw, 52px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}


.overview-title span {
    color: #25d6c6;
}


/* =========================================================
   GRID
========================================================= */

.overview-grid {
    display: grid;

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

    gap: 14px;

    margin-top: 28px;
}


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

.overview-card {
    position: relative;

    min-height: 150px;

    padding: 19px 20px;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: start;

    gap: 15px;

    border:
        1px solid #dfe8ec;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fcfdfe
        );

    box-shadow:
        0 4px 15px rgba(23, 60, 77, 0.025);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.overview-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(70, 210, 198, 0.28);

    box-shadow:
        0 8px 22px rgba(23, 60, 77, 0.06);
}


/* =========================================================
   ICON
========================================================= */

.overview-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #e8faf9,
            #e1f6f5
        );

    box-shadow:
        inset 0 0 14px rgba(53, 210, 198, 0.04);
}


.overview-icon img {
    width: 31px;
    height: 31px;

    object-fit: contain;

    display: block;
}


/* =========================================================
   CARD TEXT
========================================================= */

.overview-card-content {
    min-width: 0;

    padding-top: 2px;
}


.overview-card h3 {
    margin: 0 0 12px;

    color: #07152e;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 700;
}


.overview-card strong {
    display: block;

    margin-bottom: 7px;

    color: #091532;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 700;
}


.overview-card p {
    margin: 0;

    color: #667894;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   ACTIONS
========================================================= */

.overview-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 25px;
}


.overview-btn {
    min-height: 42px;

    padding: 9px 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.overview-btn svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* CALL */
.fee-call-btn:hover {
    color: #fff !important;
}

.overview-call-btn {
    min-width: 160px;
    border: 1px solid #26366e;
    background: #fff;
    color: #112154;
}

.overview-call-btn:hover{
    color: black;
}

.overview-whatsapp-btn:hover{
    color: #112154;
}

.overview-call-btn:hover {
    transform: translateY(-2px);

    background: #f8fafc;

    box-shadow:
        0 7px 18px rgba(18, 36, 78, 0.08);
}


/* WHATSAPP */

.overview-whatsapp-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: none;
}


.overview-whatsapp-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(5, 170, 176, 0.18);
}

.overview-whatsapp-btn svg,
.overview-whatsapp-btn svg path {
    fill: #25D366 !important;
    stroke: none !important;
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .overview-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .overview {
        padding:
            50px 0
            50px;
    }


    .overview-title {
        font-size: 35px;
    }


    .overview-grid {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 24px;
    }


    .overview-card {
        min-height: 135px;

        padding:
            18px
            16px;

        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap: 14px;
    }


    .overview-icon {
        width: 50px;
        height: 50px;
    }


    .overview-card strong {
        font-size: 17px;
    }


    .overview-actions {
        flex-direction: column;

        width: 100%;

        margin-top: 22px;
    }


    .overview-btn {
        width: 100%;

        max-width: 330px;
    }

}

 /* =========================================================
   LEARNER REVIEWS
========================================================= */

.reviews {
    position: relative;

    padding: 55px 0 60px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(65, 211, 200, 0.035),
            transparent 30%
        ),
        #f8fbfc;

    color: #09172e;
}


/* =========================================================
   HEADER
========================================================= */

.reviews-header {
    text-align: center;
    margin-bottom: 27px;
}


.reviews-title {
    margin: 0;

    color: #0b1b34;

    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}


.reviews-subtitle {
    margin: 6px 0 0;

    color: #77899a;

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


/* =========================================================
   GRID - MASONRY STYLE
========================================================= */

.reviews-grid {
    display: grid !important;

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

    grid-auto-rows: 8px;

    column-gap: 12px;
    row-gap: 12px;

    align-items: start;
}


.reviews-grid .review-card {
    width: 100%;

    margin: 0 !important;

    align-self: start;

    min-width: 0;
}


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

.review-card {
    position: relative;

    border:
        1px solid #dfe9ed;

    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 4px 14px rgba(30, 67, 84, 0.035);

    overflow: hidden;
}


/* =========================================================
   TEXT REVIEW
========================================================= */

.review-text-card {
    padding: 15px 14px 12px;
}


.review-quote {
    height: 18px;

    margin-bottom: 2px;

    color: #46cbd6;

    font-family: Georgia, serif;

    font-size: 37px;
    line-height: 1;
}


.review-text-card blockquote {
    margin: 0 0 14px;

    color: #263a4c;

    font-size: 12px;
    line-height: 1.42;

    font-weight: 400;
}


/* =========================================================
   USER ROW
========================================================= */

.review-user-row {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;

    padding-top: 8px;

    border-top:
        1px solid #e5ecef;
}


.review-user {
    display: flex;

    align-items: center;

    min-width: 0;

    gap: 9px;
}


.review-avatar {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    overflow: hidden;

    border-radius: 50%;

    background: #e9f5f5;
}


.review-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.review-user-copy {
    min-width: 0;
}


.review-user-copy strong {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 2px;

    color: #0b1b31;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;
}


.review-verified {
    color: #1688df;
    font-size: 6px;
}


.review-user-copy p {
    margin: 0 0 3px;

    color: #546b7c;

    font-size: 10px;
    line-height: 1.3;
}


.review-badge {
    display: inline-flex;

    align-items: center;

    min-height: 17px;

    padding: 2px 7px;

    border-radius: 999px;

    background: #e9f8f7;

    color: #32857f;

    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   YOUTUBE MODAL
========================================================= */

.review-video-thumb {
    cursor: pointer;
}


.youtube-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 20px;
}


.youtube-modal.active {
    display: flex;
}


.youtube-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.82);
}


.youtube-modal-box {
    position: relative;

    z-index: 2;

    width: min(900px, 100%);

    background: #000;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.45);
}


.youtube-modal-video {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;
}


.youtube-modal-video iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


.youtube-modal-close {
    position: absolute;

    top: 10px;
    right: 12px;

    z-index: 5;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

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

    color: #fff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   LINKEDIN
========================================================= */

.review-linkedin {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: flex;

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

    border-radius: 2px;

    background: #0789d4;

    color: #fff;

    font-size: 9px;
    font-weight: 800;

    line-height: 1;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.review-linkedin:hover {
    transform: translateY(-2px);

    box-shadow:
        0 4px 9px rgba(7, 137, 212, 0.2);
}


/* =========================================================
   VIDEO CARDS
========================================================= */

.review-video-card {
    padding: 0 0 11px;
}


.review-video-thumb {
    position: relative;

    aspect-ratio: 1.62 / 1;

    overflow: hidden;

    background: #13242c;
}


.review-video-thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(4, 13, 18, 0.72) 100%
        );
}


.review-video-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.review-play {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    width: 38px;
    height: 38px;

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

    display: grid;

    place-items: center;

    padding-left: 3px;

    border: 0;

    border-radius: 50%;

    background: #fff;

    color: #111;

    cursor: pointer;

    font-size: 15px;

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

    transition:
        transform 0.25s ease;
}


.review-play:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   VIDEO TITLE
========================================================= */

.review-video-title {
    position: absolute;

    left: 12px;
    bottom: 10px;

    z-index: 3;

    max-width: 72%;

    color: #fff;

    font-size: 9px;
    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   DURATION
========================================================= */

.review-duration {
    position: absolute;

    right: 8px;
    bottom: 8px;

    z-index: 3;

    padding: 2px 5px;

    border-radius: 3px;

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

    color: #fff;

    font-size: 7px;
    font-weight: 600;
}


.review-video-card .review-user-row {
    margin:
        10px
        12px
        0;

    padding-top: 0;

    border-top: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .reviews-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .reviews {
        padding:
            50px 0
            55px;
    }


    .reviews-title {
        font-size: 35px;
    }


    .reviews-grid {
        display: block !important;
    }


    .reviews-grid .review-card {
        margin-bottom: 13px !important;
    }


    .review-text-card blockquote {
        font-size: 11px;
        line-height: 1.5;
    }


    .review-user-copy strong {
        font-size: 10px;
    }


    .review-user-copy p {
        font-size: 8px;
    }


    .review-badge {
        font-size: 7px;
    }

}



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

           CAREER JOURNEY

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



        .career {



            background: var(--dark);



            color: white;



        }



        .career-track {



            position: relative;



            display: grid;



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



            gap: 35px;



            margin-top: 45px;



        }



        .career-line {



            position: absolute;



            top: 50%;



            left: 8%;

            right: 8%;



            height: 2px;



            background: rgba(77,232,216,.18);



        }



        .career-glow {



            position: absolute;



            width: 12px;

            height: 12px;



            top: 50%;

            left: 0;



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



            border-radius: 50%;



            background: var(--aqua);



            box-shadow:

                0 0 10px var(--aqua),

                0 0 25px var(--aqua);



            animation: journeyGlow 4s infinite linear;



        }



        @keyframes journeyGlow {



            0% {

                left: 0;

                opacity: 0;

            }



            8% {

                opacity: 1;

            }



            92% {

                opacity: 1;

            }



            100% {

                left: 100%;

                opacity: 0;

            }



        }



        .career-card {



            position: relative;



            z-index: 3;



            padding: 25px;



            min-height: 300px;



            border-radius: 12px;



            background: #071f28;



            border: 1px solid rgba(82,198,188,.18);



        }



        .career-icon {
            width: 48px;
            height: 48px;
            border-radius: 9px;
            background: #102f38;
            display: grid;
            place-items: center;
            color: var(--aqua);
            font-size: 22px;
            margin-bottom: 25px;
        }



        .career-step {
            font-size: 12px;
            color: var(--aqua);
            font-weight: 800;
            letter-spacing: 1px;
        }
        .career-card h3 {
            margin: 10px 0;
            font-size: 15px;
            line-height: 1.3;
        }

        .career-card p {
            color: #9cb0b7;
           line-height: 1.6;
            font-size: 12px;
        }
        /* =========================================================

           FAQ

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



        .faq {



            background: white;



        }



        .faq-wrap {



            max-width: 900px;



            margin: 45px auto 0;



        }



        .faq-item {



            border-bottom: 1px solid #e2eaec;



        }



        .faq-question {



            width: 100%;



            padding: 20px 0;



            border: 0;



            background: none;



            display: flex;



            justify-content: space-between;



            text-align: left;



            cursor: pointer;



            font-weight: 700;



            font-size: 16px;



        }



        .faq-answer {



            display: none;



            padding: 0 0 20px;



            color: var(--muted);



            line-height: 1.7;



        }



        .faq-item.active .faq-answer {

            display: block;

        }





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

           CTA

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



        .final-cta {



            padding: 80px 0;



            background:

                linear-gradient(

                    135deg,

                    #05242c,

                    #073f42

                );



            color: white;



            text-align: center;



        }



        .final-cta h2 {



            font-size: clamp(35px,4vw,55px);



            margin-bottom: 15px;



        }



        .final-cta p {



            color: #b4c7cb;



            margin-bottom: 25px;



        }





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

           FOOTER

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



        .fde-footer {



            background: #021217;



            color: white;



            padding: 65px 0 25px;



        }



        .footer-grid {



            display: grid;



            grid-template-columns: 1.4fr 1fr 1fr 1fr;



            gap: 45px;



        }



        .footer-about p {



            margin-top: 18px;



            color: #899fa6;



            line-height: 1.7;



            font-size: 13px;



        }



        .footer-col h4 {



            margin-bottom: 18px;



            font-size: 14px;



        }



        .footer-col a {



            display: block;



            color: #91a5ab;



            margin-bottom: 12px;



            font-size: 13px;



        }



        .footer-col a:hover {

            color: var(--aqua);

        }



        .footer-bottom {



            margin-top: 45px;



            padding-top: 20px;



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



            color: #758b92;



            font-size: 12px;



            display: flex;



            justify-content: space-between;



            gap: 20px;



        }


/* =========================================================
   FDE LEAD MODAL
========================================================= */

.lead-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 20px;

    background: rgba(2, 18, 24, 0.78);

    backdrop-filter: blur(5px);
}

.lead-modal.active {
    display: flex;
}


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

.lead-modal-card {
    position: relative;

    width: min(950px, 100%);

    /* min-height: 610px; */

    display: grid;

    grid-template-columns: 42% 58%;

    overflow: hidden;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   LEFT
========================================================= */

.lead-modal-left {
    position: relative;

    overflow: hidden;

    padding: 34px 34px 40px;

    color: #fff;

    background:
        radial-gradient(
            circle at 110% 105%,
            rgba(28, 218, 201, 0.23),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #031b24,
            #05313c
        );
}


.lead-modal-left::after {
    content: "";

    position: absolute;

    left: -100px;
    bottom: -120px;

    width: 500px;
    height: 220px;

    border-radius: 50%;

    border-top:
        2px solid rgba(55, 233, 216, 0.68);

    transform: rotate(-7deg);

    box-shadow:
        0 -18px 45px rgba(49, 225, 209, 0.12);
}


.lead-modal-logo {
    position: relative;
    z-index: 2;

    margin-bottom: 38px;

    font-size: 28px;

    font-weight: 800;
}

.lead-modal-logo span {
    color: #6af0df;
}


.lead-modal-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #55e3d6;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;
}


.lead-modal-line {
    display: block;

    width: 38px;
    height: 2px;

    margin-bottom: 28px;

    background: #4ce0d2;
}


.lead-modal-left h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #fff;

    font-size: 34px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -1px;
}

.lead-modal-left h2 span {
    color: #43e1d2;
}


/* =========================================================
   JOURNEY
========================================================= */

.lead-modal-journey {
    position: relative;
    z-index: 2;

    margin-top: 48px;
}


.lead-journey-item {
    display: flex;

    align-items: center;

    gap: 15px;

    color: #dbe8eb;

    font-size: 14px;

    opacity: 0.65;
}


.lead-journey-item.active {
    opacity: 1;
}


.lead-journey-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(52, 227, 211, 0.42);

    background:
        rgba(4, 51, 61, 0.85);

    color: #5ce8da;
}


.lead-journey-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.lead-journey-line {
    width: 1px;
    height: 27px;

    margin-left: 27px;

    border-left:
        2px dashed rgba(78, 226, 214, 0.5);
}


/* =========================================================
   RIGHT
========================================================= */

.lead-modal-right {
    position: relative;

    min-width: 0;

    background: #fff;
}


.modal-close {
    position: absolute;

    top: 15px;
    right: 17px;

    z-index: 20;

    width: 34px;
    height: 34px;

    border: 0;

    background: transparent;

    color: #4c5770;

    font-size: 29px;

    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   FORM STEP
========================================================= */

.lead-multi-form {
    height: 100%;
}


.lead-form-step {
    display: none;

    min-height: 610px;

    padding:
        42px
        38px
        28px;
}


.lead-form-step.active {
    display: block;
}


/* =========================================================
   PROGRESS
========================================================= */

.lead-progress-row {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 34px;
}


.lead-progress-row > span {
    color: #566176;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;
}


.lead-progress-track {
    width: 185px;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #e3e6eb;
}


.lead-progress-fill {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #36d8c9,
            #52e4d5
        );
}


.lead-progress-fill.step-1 {
    width: 50%;
}


.lead-progress-fill.step-2 {
    width: 100%;
}


/* =========================================================
   HEADING
========================================================= */

#leadRole {
    width: 100%;
    height: 38px;
    padding: 0 16px;

    border: 1px solid #d7dde7;
    border-radius: 12px;

    background: #fff;
    color: #5f6673;

    font-size: 13px;
    font-weight: 400;

    outline: none;
    cursor: pointer;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

#leadRole:hover {
    border-color: #b8c1cc;
}

#leadRole:focus {
    border-color: #2fd6cf;
    box-shadow: 0 0 0 3px rgba(47, 214, 207, 0.12);
}
.lead-form-heading h3 {
    margin: 0 0 7px;

    color: #111827;

    font-size: 28px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.7px;
}


.lead-form-heading p {
    margin: 0;

    max-width: 390px;

    color: #7d879a;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   FIELDS
========================================================= */




.lead-field > label {
    display: block;

    margin-bottom: 8px;

    color: #18202d;

    font-size: 12px;

    font-weight: 500;
}


.lead-field > label span {
    color: #0ebba9;
}


.lead-field input[type="text"],
.lead-field input[type="tel"],
.lead-field input[type="email"] {
    width: 100%;

    min-height: 49px;

    padding: 11px 14px;

    border:
        1px solid #d9dde5;

    border-radius: 8px;

    background: #fff;

    color: #18202e;

    font-size: 12px;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.lead-field input::placeholder {
    color: #9ca4b3;
}


.lead-field input:focus {
    border-color: #42dccc;

    box-shadow:
        0 0 0 3px rgba(66, 220, 204, 0.08);
}


.lead-field-error {
    border-color: #df5367 !important;

    box-shadow:
        0 0 0 3px rgba(223, 83, 103, 0.06) !important;
}


/* =========================================================
   RADIOS
========================================================= */

.lead-radio-grid {
    display: grid;

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

    gap: 9px;
}


.lead-radio-card {
    position: relative;

    min-height: 50px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid #dce1e8;

    border-radius: 8px;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}


.lead-radio-card input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.lead-radio-circle {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    border:
        2px solid #aeb7c5;

    border-radius: 50%;

    position: relative;
}


.lead-radio-card input:checked + .lead-radio-circle {
    border-color: #30d4c3;
}


.lead-radio-card input:checked + .lead-radio-circle::after {
    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    background: #30d4c3;
}


.lead-radio-card:has(input:checked) {
    border-color: #3bd8c8;

    background: #f2fcfb;
}


.lead-radio-card > span:last-child {
    color: #374151;

    font-size: 12px;
}


/* =========================================================
   BUTTONS
========================================================= */
.btn:hover{
    color:white !important;
}

.lead-primary-btn,
.lead-submit-btn,
.lead-back-btn {
    min-height: 49px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}


.lead-primary-btn {
    width: 100%;

    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    border: 0;

    background:
        linear-gradient(
            90deg,
            #35dacb,
            #45e1d2
        );

    color: #071e24;
}


.lead-primary-btn svg,
.lead-submit-btn svg,
.lead-back-btn svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ACTIONS
========================================================= */

.lead-step-actions {
    display: grid;

    grid-template-columns:
        118px
        1fr;

    gap: 12px;

    margin-top: 27px;
}


.lead-back-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid #d6dbe3;

    background: #fff;

    color: #1c2534;
}


.lead-submit-btn {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border: 0;

    background:
        linear-gradient(
            90deg,
            #35dacb,
            #45e1d2
        );

    color: #071e24;
}


/* =========================================================
   SECURITY
========================================================= */

.lead-security {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 7px;

    margin-top: 14px;

    color: #8a92a1;

    font-size: 9px;

    line-height: 1.45;
}


.lead-security svg {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    fill: none;

    stroke: #5e6879;

    stroke-width: 2;
}


/* =========================================================
   SUCCESS
========================================================= */

.lead-success-screen {
    display: none;

    min-height: 610px;

    padding: 60px 38px;

    text-align: center;
}


.lead-success-screen.active {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.lead-success-icon {
    width: 78px;
    height: 78px;

    margin-bottom: 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ddf8f2;

    color: #0a9f74;
}


.lead-success-icon svg {
    width: 42px;
    height: 42px;

    fill: none;

    stroke: currentColor;

    stroke-width: 3.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.lead-success-screen h3 {
    margin: 0 0 13px;

    color: #111827;

    font-size: 29px;

    font-weight: 700;
}


.lead-success-screen p {
    margin: 0;

    color: #81899a;

    font-size: 13px;

    line-height: 1.55;
}


.lead-success-btn {
    max-width: 340px;

    margin-top: 28px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .lead-modal {
        padding: 10px;
    }


    .lead-modal-card {
        display: block;

        max-height:
            calc(100vh - 20px);

        overflow-y: auto;

        border-radius: 12px;
    }


    .lead-modal-left {
        padding:
            24px
            22px
            25px;
    }


    .lead-modal-logo {
        margin-bottom: 20px;

        font-size: 24px;
    }


    .lead-modal-eyebrow,
    .lead-modal-line,
    .lead-modal-journey {
        display: none;
    }


    .lead-modal-left h2 {
        font-size: 25px;
    }


    .lead-form-step {
        min-height: auto;

        padding:
            30px
            20px
            24px;
    }


    .lead-progress-row {
        margin-bottom: 25px;
    }


    .lead-progress-track {
        flex: 1;
    }


    .lead-form-heading h3 {
        font-size: 25px;
    }


    .lead-radio-grid {
        grid-template-columns: 1fr;
    }


    .lead-success-screen {
        min-height: 420px;

        padding:
            50px
            22px
            30px;
    }

}



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

           TABLET

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



        @media(max-width: 1000px) {



            .fde-nav {

                display: none;

            }



            .mobile-menu-btn {

                display: block;

            }



            .opportunity-grid {

                grid-template-columns: 1fr;

            }



            .curriculum-layout {

                grid-template-columns: 250px 1fr;

            }



            .module-topics {

                grid-template-columns: 1fr 1fr;

            }



            .career-track {

                grid-template-columns: 1fr 1fr;

            }



            .career-line {

                display: none;

            }



            .footer-grid {

                grid-template-columns: 1fr 1fr;

            }



        }





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

           MOBILE

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



        @media(max-width: 767px) {



            .container {

                width: calc(100% - 30px);

            }

            .section {
                padding: 65px 0;
            }

            .fde-header .btn {
                display: none;
            }

            /* MOBILE HERO: text first, video below */

            .fde-hero {
                display: flex;
                flex-direction: column;
                min-height: auto;
                background: #021317;
                overflow: hidden;
            }

            .hero-content {
                order: 1;
                width: 100%;
                min-height: auto;
                padding-top: 80px;
                position: relative;
                z-index: 5;
                background: #021317;
               margin-left: 10px;  
               margin-right: 10px; 
               padding-bottom: 10px;
            }



            .hero-media {

                order: 2;
                position: relative;
                inset: auto;
                width: 100%;
                margin-top: -20px;                 
                height: 420px;
                overflow: hidden;
                z-index: 1;

            }



            .hero-video-desktop {
                display: none;
            }

            .hero-video-mobile {

                display: block;

                position: relative;

                inset: auto;

                width: 100%;

                height: 100%;

                max-width: none;

                object-fit: cover;

                object-position: center top;

            }



            .hero-overlay {

                display: none;

            }



            .hero-copy {

                width: 100%;

                max-width: 100%;

                padding-top: 0;

            }



            .hero-title {

                font-size: 37px;

            }



             .hero-description {

                font-size: 15px;

            }



            .hero-actions {

                gap: 12px;

            }



            .hero-actions .btn {

                width: 90%;

            }


            .cycle
             {
                min-height: auto;
                margin-top: 50px;
            }

            .cycle-svg {
                display: none;
            }


            .cycle-cards {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }



            .cycle-card,

            .cycle-card-main {



                width: 100%;



                min-height: 170px;



            }



            .cycle-arrow {



                transform: rotate(90deg);



            }



            .production-flow {



                overflow-x: auto;



                grid-template-columns:

                    135px

                    70px

                    135px

                    70px

                    135px

                    70px

                    135px

                    70px

                    135px;



                padding-bottom: 25px;



            }



            .production-icon {



                width: 85px;

                height: 85px;



            }



            .connector {

                height: 85px;

            }



            .audience-grid {

                grid-template-columns: 1fr;

            }



            .audience-cta {



                align-items: flex-start;



                flex-direction: column;



            }



            .alumni-grid {

                grid-template-columns: 1fr;

            }



            .curriculum-header {



                align-items: flex-start;



                flex-direction: column;



            }



            .module-list {



                position: static;



                display: flex;



                overflow-x: auto;



                margin-bottom: 20px;



            }



            .module-btn {



                flex: 0 0 190px;



                margin-right: 8px;



            }



            .module-topics {

                grid-template-columns: 1fr;

            }



            .project-tabs {



                display: flex;



                overflow-x: auto;



            }



            .project-tab {

                flex: 0 0 150px;

            }



            .project-feature-grid {

                grid-template-columns: 1fr 1fr;

            }



            .arch-agents {

                grid-template-columns: 1fr;

            }



            .overview-grid {

                grid-template-columns: 1fr;

            }



            .reviews-grid {

                grid-template-columns: 1fr;

            }



            .career-track {

                grid-template-columns: 1fr;

            }



            .footer-grid {

                grid-template-columns: 1fr;

            }



            .footer-bottom {



                flex-direction: column;



            }



        }

        .download-icon {

    width: 20px;

    height: 20px;

    flex: 0 0 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   GLOBAL BUTTON MOTION
========================================================= */

.btn,
.audience-cta-btn,
.audience-header-btn {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}


/* hover lift */
.btn:hover,
.audience-cta-btn:hover,
.curriculum-download-btn:hover,
.btn-outline:hover,
.audience-header-btn:hover {
    transform: translateY(-2px);
}

/* active press */
.btn:active,
.audience-cta-btn:active,
.curriculum-download-btn:active,
.audience-header-btn:active {
    transform: translateY(0) scale(0.98);
}


/* =========================================================
   SOFT SHINE SWEEP
========================================================= */

.btn::before,
.audience-cta-btn::before,
.audience-header-btn::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -45%;

    width: 28%;
    height: 200%;

    transform: rotate(18deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.24),
        transparent
    );

    transition: left 0.55s ease;

    pointer-events: none;
}


.btn:hover::before,
.audience-cta-btn:hover::before,
.audience-header-btn:hover::before {
    left: 120%;
}


/* =========================================================
   ARROW MOTION
========================================================= */

.btn svg,
.audience-cta-btn svg,
.audience-header-btn svg {
    transition: transform 0.25s ease;
}


.btn:hover svg,
.audience-cta-btn:hover svg,
.audience-header-btn:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   AQUA BUTTON GLOW
========================================================= */

.btn-primary,
.audience-header-btn {
    animation: softButtonGlow 2.8s ease-in-out infinite;
}


@keyframes softButtonGlow {

    0%,
    100% {
        box-shadow:
            0 0 0 rgba(134, 244, 225, 0),
            0 8px 20px rgba(32, 216, 199, 0.08);
    }

    50% {
        box-shadow:
            0 0 20px rgba(134, 244, 225, 0.18),
            0 10px 24px rgba(32, 216, 199, 0.14);
    }

}


/* =========================================================
   DARK CTA BUTTON
========================================================= */

.audience-cta-btn {
    animation: darkButtonGlow 3s ease-in-out infinite;
}


@keyframes darkButtonGlow {

    0%,
    100% {
        box-shadow:
            0 7px 15px rgba(3, 44, 63, 0.10);
    }

    50% {
        box-shadow:
            0 9px 22px rgba(18, 197, 183, 0.20);
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .btn,
    .audience-cta-btn,
    .audience-header-btn,
    .btn-primary {
        animation: none !important;
        transition: none !important;
    }

    .btn::before,
    .audience-cta-btn::before,
    .audience-header-btn::before {
        display: none;
    }

}

/* =========================================================
   MAIN MOBILE HEADER DRAWER
========================================================= */

.fde-mobile-drawer {
    display: none;
}


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

    .fde-nav {
        display: none;
    }

    .fde-header > .container > .btn,
    .fde-header-inner > .btn {
        display: none;
    }

    .mobile-menu-btn {
        display: flex !important;

        width: 42px;
        height: 42px;

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

        margin-left: auto;

        padding: 0;

        border: 0;
        background: transparent;

        color: #fff;

        font-size: 30px;
        line-height: 1;

        cursor: pointer;
    }


    /* DRAWER WRAPPER */

    .fde-mobile-drawer {
        position: fixed;
        inset: 0;

        z-index: 999999;

        display: block;

        visibility: hidden;
        opacity: 0;

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }

    .fde-mobile-drawer.active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }


    /* BACKDROP */

    .fde-mobile-drawer-backdrop {
        position: absolute;
        inset: 0;

        background: rgba(0,0,0,.58);
    }


    /* DRAWER */

    .fde-mobile-drawer-panel {
        position: absolute;

        top: 0;
        right: 0;

        width: min(320px, 86vw);
        height: 100%;

        padding: 26px 22px;

        background: #03171d;

        transform: translateX(100%);

        transition: transform .32s ease;

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

        overflow-y: auto;
    }

    .fde-mobile-drawer.active
    .fde-mobile-drawer-panel {
        transform: translateX(0);
    }


    /* CLOSE */

    .fde-mobile-drawer-close {
        position: absolute;

        top: 18px;
        right: 18px;

        width: 38px;
        height: 38px;

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

        border: 0;
        background: transparent;

        color: #fff;

        font-size: 34px;
        line-height: 1;

        cursor: pointer;
    }


    /* LOGO */

    .fde-mobile-drawer-logo {
        display: inline-block;

        margin-bottom: 42px;

        color: #fff;

        font-size: 24px;
        font-weight: 800;
    }

    .fde-mobile-drawer-logo span {
        color: var(--aqua);
    }


    /* NAV */

    .fde-mobile-drawer-nav {
        display: flex;

        flex-direction: column;

        gap: 0;

        margin-bottom: 28px;
    }

    .fde-mobile-drawer-nav a {
        display: block;

        padding: 16px 0;

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

        font-size: 16px;
        font-weight: 500;

        border-bottom:
            1px solid rgba(255,255,255,.09);
    }

    .fde-mobile-drawer-nav a:hover {
        color: var(--aqua);
    }


    /* CTA */

    .fde-mobile-drawer-cta {
        width: 100%;

        min-height: 46px;

        margin-top: 8px;
    }

}

/* =========================================================
   AUDIENCE CTA - FINAL MOBILE RESPONSIVE FIX
   KEEP THIS AT THE VERY END OF CSS FILE
========================================================= */

@media (max-width: 767px) {

    .audience-cta {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        grid-template-columns: none !important;
        grid-template-areas: none !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        margin-top: 18px !important;

        padding: 24px 18px !important;

        text-align: center !important;

        border-radius: 14px !important;

        box-sizing: border-box !important;
    }


    /* TITLE */

    .audience-cta h3 {
        grid-area: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        display: block !important;

        text-align: center !important;

        font-size: 21px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
    }


    .audience-cta h3 span {
        display: inline !important;
    }


    /* DESCRIPTION */

    .audience-cta p {
        grid-area: auto !important;

        width: 100% !important;
        max-width: 320px !important;

        margin: 8px auto 16px !important;

        text-align: center !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        white-space: normal !important;
        word-break: normal !important;
    }


    /* BUTTON */

    .audience-cta .audience-cta-btn {
        grid-area: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 48px !important;

        margin: 0 !important;

        padding: 11px 16px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;

        justify-self: auto !important;
        align-self: stretch !important;

        font-size: 11px !important;

        box-sizing: border-box !important;
    }


    .audience-cta .audience-cta-btn span {
        display: block !important;

        white-space: normal !important;

        text-align: center !important;
    }


    .audience-cta .audience-cta-btn svg {
        width: 17px !important;
        height: 17px !important;

        flex: 0 0 17px !important;
    }

}

/* =====================================================================
   FINAL CURRICULUM FIX — 9 MODULES
   Added for the latest 9-module HTML.
   Keep this block at the END of fdstyle.css.
===================================================================== */

@media (min-width: 768px) {

    /* Whole pinned curriculum */
    #curriculum.curriculum {
        position: relative;
        min-height: 100vh;
        overflow: visible !important;
    }

    #curriculum .curriculum-pin {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        min-height: 680px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    #curriculum .curriculum-container {
        width: min(var(--container), calc(100% - 40px));
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #curriculum .curriculum-header {
        margin-bottom: 18px;
    }

    #curriculum .curriculum-layout {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
        min-width: 0;
    }

    /* ---------------------------------------------------------
       LEFT MENU
       9 buttons must fit inside the same 520px visible area.
       9 x 54px + 8 x 4px = 518px
    --------------------------------------------------------- */
    #curriculum .module-list {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: 520px;
        max-height: 520px;
        overflow: hidden;
    }

    #curriculum .module-btn {
        width: 100%;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
        flex: 0 0 54px;

        padding: 6px 10px;

        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 10px;

        border-radius: 7px;
        box-sizing: border-box;
    }

    #curriculum .module-no {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    #curriculum .module-btn-copy {
        min-width: 0;
    }

    #curriculum .module-btn-copy strong {
        display: block;
        margin: 0;
        font-size: 11px;
        line-height: 1.18;
        overflow-wrap: normal;
        word-break: normal;
    }

    #curriculum .module-chevron {
        font-size: 24px;
        line-height: 1;
    }

    /* ---------------------------------------------------------
       RIGHT CONTENT
    --------------------------------------------------------- */
    #curriculum .curriculum-scroll {
        height: 520px;
        min-width: 0;

        overflow-y: hidden !important;
        overflow-x: hidden !important;

        scroll-behavior: auto !important;
        scrollbar-width: none;
    }

    #curriculum .curriculum-scroll::-webkit-scrollbar {
        display: none;
    }

    #curriculum .curriculum-module {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #curriculum .module-topics {
        min-width: 0;
    }

    #curriculum .topic {
        min-width: 0;
    }

    #curriculum .topic li {
        overflow-wrap: break-word;
        word-break: normal;
    }
}


/* Mobile remains accordion — no pinned page-scroll behaviour */
@media (max-width: 767px) {

    #curriculum.curriculum {
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    #curriculum .curriculum-pin {
        position: static !important;
        top: auto !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
        overflow: visible !important;
    }

    #curriculum .curriculum-layout {
        display: none !important;
    }

    #curriculum .curriculum-mobile-accordion {
        display: block !important;
    }

    /* New longer modules can contain more bullet points */
    #curriculum .curriculum-accordion-item.active
    .curriculum-accordion-content {
        max-height: 2200px;
    }
}

/* =========================================================
   CURRICULUM DESKTOP/MOBILE VISIBILITY FIX
========================================================= */

/*
 * Mobile accordion ke items desktop par kabhi show nahi honge,
 * chahe HTML me koi item wrapper se accidentally bahar bhi ho.
 */
@media (min-width: 768px) {

    #curriculum .curriculum-accordion-item {
        display: none !important;
    }

    #curriculum .curriculum-mobile-accordion {
        display: none !important;
    }

    #curriculum .curriculum-layout {
        display: grid !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #curriculum .curriculum-layout {
        display: none !important;
    }

    #curriculum .curriculum-mobile-accordion {
        display: block !important;
    }

    /*
     * Module 8/9 wrapper ke bahar bhi hon to mobile par
     * accordion item visible rahe.
     */
    #curriculum .curriculum-accordion-item {
        display: block !important;
    }
}

@media (min-width: 768px) {

    #curriculum .module-list {
        height: 520px !important;
        max-height: 520px !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 4px !important;

        overflow: hidden !important;
    }

    #curriculum .module-btn {
        width: 100% !important;

        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;

        flex: 0 0 54px !important;

        padding: 6px 10px !important;

        grid-template-columns:
            36px
            minmax(0, 1fr)
            18px !important;

        gap: 10px !important;
    }

    #curriculum .module-no {
        width: 34px !important;
        height: 34px !important;
    }

    #curriculum .module-btn-copy strong {
        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.18 !important;
    }
}

/* =========================================================
   MOBILE STICKY CTA
========================================================= */

.mobile-sticky-cta,
.mobile-call-popup {
    display: none;
}


@media (max-width: 767px) {

    body {
        padding-bottom: 72px;
    }


    /* =========================================
       BOTTOM CTA
    ========================================= */

    .mobile-sticky-cta {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 999990;

        display: grid;

        grid-template-columns:
            1fr
            1.35fr
            1fr;

        gap: 6px;

        padding:
            8px
            10px
            calc(8px + env(safe-area-inset-bottom));

        background:
            rgba(2, 25, 34, .98);

        border-top:
            1px solid rgba(86, 241, 224, .28);

        box-shadow:
            0 -8px 26px rgba(0,0,0,.24);
    }


    .mobile-sticky-btn {
        min-width: 0;

        min-height: 42px;

        display: flex;

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

        gap: 7px;

        padding: 7px 8px;

        border-radius: 6px;

        font-family:
            "Sora",
            sans-serif;

        font-size: 11px;

        line-height: 1;

        font-weight: 700;

        text-decoration: none;

        cursor: pointer;
    }


    /* CALL */

    .mobile-call-trigger {
        border:
            1px solid #10e9df;

        background:
            #062731;

        color:
            #57f3e6;
    }


    /* ENROLL */

    .mobile-enroll-btn {
        border:
            1px solid #25efe1;

        background:
            linear-gradient(
                90deg,
                #10e9df,
                #40f3e2
            );

        color:
            #052029;
    }


    /* WHATSAPP */

    .mobile-whatsapp-btn {
        border:
            1px solid #19c971;

        background:
            #062731;

        color:
            #2fe284;
    }
.mobile-whatsapp-btn svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;

    fill: #25D366 !important;
    stroke: none !important;
}

.mobile-whatsapp-btn svg path {
    fill: #25D366 !important;
    stroke: none !important;
}

    .mobile-sticky-icon {
        font-size: 16px;

        line-height: 1;
    }


    /* =========================================================
       CALL POPUP WRAPPER
    ========================================================= */

    .mobile-call-popup {
        position: fixed;

        inset: 0;

        z-index: 999999;

        display: block;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }


    .mobile-call-popup.active {
        visibility: visible;

        opacity: 1;

        pointer-events: auto;
    }


    .mobile-call-popup-backdrop {
        position: absolute;

        inset: 0;

        background:
            rgba(0,0,0,.58);

        backdrop-filter:
            blur(2px);
    }


    /* =========================================================
       POPUP
    ========================================================= */

    .mobile-call-popup-box {
        position: absolute;

        left: 50%;

        bottom:
            calc(
                72px +
                env(safe-area-inset-bottom)
            );

        width:
            calc(100% - 30px);

        max-width: 390px;

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

        padding: 16px;

        border:
            1px solid #18e6d9;

        border-radius: 10px;

        background:
            linear-gradient(
                180deg,
                #031f2a,
                #052c38
            );

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

        transition:
            transform .28s ease;
    }


    .mobile-call-popup.active
    .mobile-call-popup-box {
        transform:
            translateX(-50%)
            translateY(0);
    }


    /* CLOSE */

    .mobile-call-popup-close {
        position: absolute;

        top: 10px;
        right: 10px;

        width: 30px;
        height: 30px;

        display: flex;

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

        border:
            1px solid rgba(61,230,216,.55);

        border-radius: 50%;

        background:
            #062936;

        color:
            #d9ffff;

        font-size: 23px;

        line-height: 1;

        cursor: pointer;
    }


    /* HEADER */

    .mobile-call-popup-heading {
        display: grid;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 12px;

        align-items: center;

        padding-right: 38px;

        margin-bottom: 16px;
    }


    .mobile-call-popup-icon {
        width: 42px;
        height: 42px;

        display: flex;

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

        border:
            1px solid
            rgba(38,230,217,.38);

        border-radius: 8px;

        color:
            #2ceee0;

        font-size: 22px;

        background:
            rgba(5,49,62,.85);
    }


    .mobile-call-popup-heading h3 {
        margin: 0 0 3px;

        color: #ffffff;

        font-size: 18px;

        line-height: 1.2;

        font-weight: 700;
    }


    .mobile-call-popup-heading h3 span {
        color:
            #27e7da;
    }


    .mobile-call-popup-heading p {
        margin: 0;

        color:
            #9db4bd;

        font-size: 11px;
    }


    /* =========================================================
       PHONE ROW
    ========================================================= */

    .mobile-call-option {
        min-height: 62px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        padding: 9px 10px;

        margin-top: 8px;

        border:
            1px solid
            rgba(55,226,211,.35);

        border-radius: 8px;

        background:
            rgba(2,29,39,.86);
    }


    .mobile-call-country {
        min-width: 0;

        display: flex;

        align-items: center;

        gap: 10px;
    }


    .mobile-flag {
        font-size: 29px;

        line-height: 1;
    }


    .mobile-call-country small {
        display: block;

        margin-bottom: 2px;

        color:
            #9eb1b9;

        font-size: 10px;
    }


    .mobile-call-country strong {
        display: block;

        color:
            #ffffff;

        font-size: 13px;

        line-height: 1.2;

        font-weight: 700;

        white-space: nowrap;
    }


    .mobile-call-action {
        flex: 0 0 auto;

        min-width: 76px;

        display: flex;

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

        gap: 5px;

        padding: 8px 11px;

        border:
            1px solid
            #19e7da;

        border-radius: 7px;

        color:
            #28eddf;

        background:
            transparent;

        font-size: 12px;

        font-weight: 700;

        text-decoration: none;
    }

}

.program-fee-section {
    position: relative;

    padding: 70px 0 55px;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 22%,
            rgba(29, 177, 194, .10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #031822,
            #052b39 55%,
            #031923
        );
}



.fee-title {
    margin: 0 0 40px;

    color: #fff;

    font-size: clamp(38px, 4vw, 60px);

    line-height: 1.05;
}


.fee-title span {
    color: #72f2df;
}


.fee-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(430px, 1.05fr);

    gap: 55px;

    align-items: center;
}


.fee-details {
    max-width: 570px;
}


.fee-detail-item {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr);

    gap: 18px;

    align-items: center;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(97, 222, 216, .18);
}


.fee-detail-item:last-child {
    border-bottom: 0;
}


.fee-detail-icon {
    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    border:
        1px solid rgba(58, 226, 216, .14);

    background:
        rgba(10, 56, 67, .78);

    color: #78f2df;

    font-size: 26px;
}


.fee-detail-label {
    display: block;

    margin-bottom: 7px;

    color: #aab9bd;

    font-size: 11px;

    letter-spacing: 1px;
}


.fee-detail-item strong {
    display: block;

    color: #fff;

    font-size: 20px;

    line-height: 1.3;
}


.fee-detail-item p {
    margin: 6px 0 0;

    color: #d4dfe1;

    font-size: 14px;
}


.fee-cohort-row {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


.fee-enrollment-badge {
    padding: 5px 10px;

    border:
        1px solid #28dc75;

    border-radius: 999px;

    color: #32e983;

    background:
        rgba(24, 144, 80, .13);

    font-size: 10px;

    font-weight: 700;
}


/* CARD */

.fee-card {
    padding: 28px 30px;

    border:
        1px solid rgba(55, 230, 218, .8);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 38, 49, .96),
            rgba(5, 28, 40, .96)
        );

    box-shadow:
        0 0 26px rgba(45, 216, 205, .08),
        inset 0 0 26px rgba(49, 218, 206, .03);
}


.fee-card h3 {
    margin: 0 0 10px;

    font-size: 24px;
}


.fee-old-row {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.fee-old-price {
    color: #7f9095;

    font-size: 24px;

    text-decoration: line-through;
}


.fee-save {
    padding: 5px 13px;

    border-radius: 999px;

    background: #0d4c69;

    color: #fff;

    font-size: 11px;

    font-weight: 700;
}


.fee-current-price {
    margin-top: 4px;

    color: #72f2df;

    font-size: 30px;

    font-weight: 700;

    line-height: 1;
}


.fee-subtext {
    margin-top: 5px;

    color: #d5dfe1;

    font-size: 15px;
}


.fee-payment-option {
    min-height: 75px;

    margin-top: 24px;

    padding: 13px 16px;

    display: flex;

    align-items: center;

    gap: 14px;

    border:
        1px solid rgba(30, 196, 224, .55);

    border-radius: 10px;

    background:
        rgba(7, 48, 67, .8);
}


.fee-payment-option strong,
.fee-payment-option span {
    display: block;
}


.fee-payment-option strong {
    color: #63efdf;

    font-size: 13px;
}


.fee-payment-option span {
    margin-top: 4px;

    color: #b8c8cc;

    font-size: 11px;
}


.fee-payment-icon {
    font-size: 30px;

    color: #18d7e3;
}


.paypal-logo {
    width: 50px;

    font-size: 42px;

    font-weight: 800;

    font-style: italic;

    color: #2497e3;
}


.fee-paypal-option strong {
    color: #fff;

    font-size: 18px;
}


.paypal-arrow {
    margin-left: auto !important;

    color: #1ff0f3 !important;

    font-size: 36px !important;
}


.fee-enroll-btn {
    width: 100%;

    min-height: 52px;

    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    border: 0;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            #88f4df,
            #72e9db
        );

    color: #051d22;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;
}


.fee-security {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 14px;

    color: #c4d0d2;

    font-size: 11px;
}


.fee-security-line {
    width: 1px;

    height: 22px;

    background:
        rgba(73, 219, 207, .35);
}


/* BOTTOM CTA */

.fee-bottom-cta {
    display: grid;

    grid-template-columns:
        minmax(60px, 1fr)
        auto
        minmax(60px, 1fr);

    align-items: center;

    gap: 18px;

    max-width: 780px;

    margin:
        28px
        auto
        0;

    text-align: center;
}


.fee-bottom-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3adbcf
        );
}


.fee-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            #3adbcf,
            transparent
        );
}


.fee-bottom-cta p {
    margin: 0 0 8px;

    color: #d8e1e3;

    font-size: 12px;
}


.fee-call-btn {
    min-width: 270px;

    min-height: 46px;

    padding: 8px 18px;

    border:
        1px solid #28ddd3;

    border-radius: 8px;

    background: transparent;

    color: #7af0e0;

    font-weight: 700;

    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .fee-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .fee-card {
        max-width: 600px;
    }
}


@media (max-width: 767px) {

    .program-fee-section {
        padding:
            55px
            0
            45px;
    }

    .fee-title {
        margin-bottom: 25px;

        font-size: 34px;
    }

    .fee-detail-item {
        grid-template-columns:
            52px
            minmax(0,1fr);

        gap: 12px;

        padding: 17px 0;
    }

    .fee-detail-icon {
        width: 48px;

        height: 48px;

        font-size: 21px;
    }

    .fee-detail-item strong {
        font-size: 16px;
    }

    .fee-card {
        padding: 20px 17px;
    }


    .fee-security {
        gap: 9px;

        font-size: 9px;
    }

    .fee-bottom-cta {
        grid-template-columns: 1fr;
    }

    .fee-bottom-line {
        display: none;
    }

    .fee-call-btn {
        min-width: 0;

        width: 100%;
    }
}

@media (max-width: 767px) {

    .program-fee-section {
        overflow-x: hidden;
    }

    .fee-layout {
        display: block !important;
        width: 100% !important;
    }

    .fee-details {
        width: 100% !important;
        max-width: 100% !important;
    }

    .fee-detail-item {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;

        gap: 16px !important;

        align-items: start !important;

        padding: 22px 0 !important;
    }

    .fee-detail-icon {
        width: 54px !important;
        height: 54px !important;

        font-size: 22px !important;

        flex: 0 0 54px !important;
    }

    .fee-detail-item > div:last-child {
        min-width: 0 !important;
        width: 100% !important;
    }

    .fee-detail-label {
        display: block !important;

        margin-bottom: 8px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .fee-detail-item strong {
        display: block !important;

        width: 100% !important;

        font-size: 18px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .fee-detail-item p {
        width: 100% !important;

        margin-top: 6px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* Cohort date + Enrollment Open */
    .fee-cohort-row {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 9px !important;
    }

    .fee-enrollment-badge {
        display: inline-flex !important;

        width: auto !important;
        max-width: 100% !important;

        padding: 6px 10px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* Fee Card */
    .fee-card {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 28px !important;

        padding: 22px 18px !important;

        box-sizing: border-box !important;
    }

    .fee-card h3 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .fee-old-row {
        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center !important;

        gap: 10px !important;
    }

    .fee-old-price {
        font-size: 20px !important;
    }

    .fee-save {
        font-size: 10px !important;
    }

    .fee-current-price {
        font-size: 23px !important;
        line-height: 1 !important;
    }


    /* Payment option */
    .fee-payment-option {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        padding: 14px !important;

        box-sizing: border-box !important;
    }

    .fee-payment-option strong {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .fee-payment-option span {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }


    /* Enroll button */
    .fee-enroll-btn {
        width: 100% !important;

        min-height: 50px !important;

        font-size: 16px !important;
    }


    /* Security */
    .fee-security {
        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 8px 12px !important;

        text-align: center !important;

        font-size: 9px !important;
    }

    .fee-security-line {
        display: none !important;
    }


    /* Bottom CTA */
    .fee-bottom-cta {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        margin-top: 28px !important;
    }

    .fee-bottom-line {
        display: none !important;
    }

    .fee-call-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   FINAL FDE CF7 FORM STYLING
   Paste at very END of fdstyle.css
========================================================= */
.overview-whatsapp-btn
{
    min-width: 160px;
    border: 1px solid #26366e;
    background: #fff;
    color: #112154;

}

#leadModal .lead-modal-right {
    background: #ffffff !important;
    padding: 38px 42px !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}


/* CF7 wrapper */
#leadModal .lead-modal-right .wpcf7,
#leadModal .lead-modal-right .wpcf7-form,
#leadModal .lead-modal-right .fde-multi-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* STEPS */

#leadModal .fde-form-step {
    display: none !important;
    width: 100% !important;
}

#leadModal .fde-form-step.active {
    display: block !important;
}


/* FORM GROUP */

#leadModal .fde-multi-form .form-group {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}


/* CF7 generated wrappers */

#leadModal .fde-multi-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}


/* ALL INPUTS + SELECT */

#leadModal .fde-multi-form input[type="text"],
#leadModal .fde-multi-form input[type="email"],
#leadModal .fde-multi-form input[type="tel"],
#leadModal .fde-multi-form input[type="number"],
#leadModal .fde-multi-form select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    color: #111827 !important;

    font-family: "Sora", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-sizing: border-box !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


#leadModal .fde-multi-form input::placeholder {
    color: #7a8490 !important;
    opacity: 1 !important;
}


#leadModal .fde-multi-form input:focus,
#leadModal .fde-multi-form select:focus {
    border-color: #20d8c7 !important;
    box-shadow: 0 0 0 3px rgba(32, 216, 199, .12) !important;
}


/* =========================================================
   PHONE FIELD
========================================================= */

#leadModal .fde-multi-form .iti {
    width: 100% !important;
    display: block !important;
}


#leadModal .fde-multi-form .iti input {
    width: 100% !important;
    height: 56px !important;
    padding-left: 118px !important;
}


/* country selector */

#leadModal .fde-multi-form .iti__selected-country {
    border-right: 1px solid #e1e5e9 !important;
    padding: 0 12px !important;
}


#leadModal .fde-multi-form .iti__country-container {
    height: 56px !important;
}


/* =========================================================
   OTP SECTION
========================================================= */

#leadModal .fde-multi-form .otp-section {
    width: 100% !important;
    margin: 0 0 16px !important;
}


#leadModal .fde-multi-form .otp-section > p:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 135px !important;

    gap: 10px !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;
}


#leadModal .fde-multi-form .otp-section
.wpcf7-form-control-wrap {
    min-width: 0 !important;
}


#leadModal .fde-multi-form
input[name="otp_code"] {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
}


/* VERIFY BUTTON */

#leadModal #verifyOtpBtn {
    width: 135px !important;
    min-width: 135px !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #03171d !important;
    color: #ffffff !important;

    font-family: "Sora", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;

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

    white-space: nowrap !important;

    cursor: pointer !important;
}


#leadModal #verifyOtpBtn:hover {
    background: #0c343c !important;
}


/* OTP STATUS */

#leadModal #otp-status {
    display: block !important;

    margin: 8px 0 0 !important;

    min-height: 18px !important;

    font-size: 12px !important;
    line-height: 1.45 !important;

    color: #66727c;
}


/* =========================================================
   CONTINUE
========================================================= */

#leadModal #fdeNextStep {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 54px !important;
    min-height: 54px !important;

    margin: 6px 0 0 !important;

    padding: 0 24px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #20d8c7 !important;
    color: #03171d !important;

    font-family: "Sora", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


#leadModal #fdeNextStep:disabled {
    background: #bbd8d8 !important;
    color: rgba(3, 23, 29, .55) !important;

    opacity: 1 !important;

    cursor: not-allowed !important;
}


#leadModal #fdeNextStep:not(:disabled):hover {
    background: #86f4e1 !important;
}


/* =========================================================
   STEP 2
========================================================= */

#leadModal .fde-step-2 select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}


#leadModal .fde-form-buttons {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr) !important;

    gap: 12px !important;

    align-items: center !important;

    margin-top: 22px !important;
}


/* BACK BUTTON */

#leadModal .fde-back-btn {
    width: 130px !important;
    height: 52px !important;

    padding: 0 16px !important;

    border: 1px solid #d7dee5 !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    color: #18232b !important;

    font-family: "Sora", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

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

    cursor: pointer !important;
}


#leadModal .fde-back-btn:hover {
    background: #f5f8f9 !important;
}


/* SUBMIT */

#leadModal .fde-form-buttons
input[type="submit"] {
    width: 100% !important;
    height: 52px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #20d8c7 !important;
    color: #03171d !important;

    font-family: "Sora", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}


#leadModal .fde-form-buttons
input[type="submit"]:hover {
    background: #86f4e1 !important;
}


/* =========================================================
   CF7 ERRORS
========================================================= */

#leadModal .wpcf7-not-valid-tip {
    margin: 6px 3px 0 !important;

    font-size: 11px !important;
    line-height: 1.4 !important;

    color: #e5484d !important;
}


#leadModal .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 11px 14px !important;

    border: 1px solid #e1e5e9 !important;
    border-radius: 10px !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
}


#leadModal form.invalid
.wpcf7-response-output {
    border-color: #f1c56d !important;

    background: #fffaf0 !important;

    color: #5b491f !important;
}


/* spinner */

#leadModal .wpcf7-spinner {
    margin: 0 0 0 8px !important;
}


/* =========================================================
   REMOVE RANDOM EXTRA HEIGHT
========================================================= */

#leadModal .lead-modal-right,
#leadModal .lead-modal-right form,
#leadModal .lead-modal-right .wpcf7 {
    min-height: 0 !important;
}


#leadModal .lead-modal-right p:empty {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #leadModal .lead-modal-right {
        padding: 24px 18px !important;
    }


    #leadModal .fde-multi-form
    input[type="text"],
    #leadModal .fde-multi-form
    input[type="email"],
    #leadModal .fde-multi-form
    input[type="tel"],
    #leadModal .fde-multi-form
    select {
        height: 52px !important;
        min-height: 52px !important;

        font-size: 15px !important;

        border-radius: 11px !important;
    }


    #leadModal .fde-multi-form
    .otp-section > p:first-child {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }


    #leadModal #verifyOtpBtn {
        width: 100% !important;
        min-width: 0 !important;
    }


    #leadModal .fde-form-buttons {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }


    #leadModal .fde-back-btn {
        width: 100% !important;
    }

}

/* =========================================================
   FINAL MOBILE STICKY HEADER FIX
   KEEP AT VERY END OF CSS
========================================================= */

@media (max-width: 1000px) {

    .fde-header {
        position: sticky !important;
        top: 0 !important;

        width: 100% !important;
        height: 70px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        background: #03171d !important;

        z-index: 99999 !important;

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

        box-shadow:
            0 6px 20px rgba(0,0,0,.16) !important;
    }


    /* HEADER INNER */

    .fde-header .fde-header-inner {
        width: calc(100% - 30px) !important;
        max-width: none !important;

        height: 70px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 15px !important;
    }


    /* LOGO */

    .fde-header .fde-logo {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto !important;

        font-size: 22px !important;
        line-height: 1 !important;

        color: #fff !important;
    }


    .fde-header .fde-logo span {
        color: #86f4e1 !important;
    }


    /* DESKTOP NAV HIDE */

    .fde-header .fde-nav {
        display: none !important;
    }


    /* DESKTOP CTA HIDE */

    .fde-header .fde-header-inner > .btn,
    .fde-header > .container > .btn {
        display: none !important;
    }


    /* HAMBURGER */

    .fde-header .mobile-menu-btn {
        display: flex !important;

        width: 42px !important;
        height: 42px !important;

        flex: 0 0 42px !important;

        margin: 0 0 0 auto !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;

        background: transparent !important;
        color: #fff !important;

        font-size: 30px !important;
        line-height: 1 !important;

        cursor: pointer !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 767px) {

    .fde-header {
        height: 64px !important;
    }

    .fde-header .fde-header-inner {
        width: calc(100% - 30px) !important;
        height: 64px !important;
    }

    .fde-header .fde-logo {
        font-size: 21px !important;
    }

    .fde-header .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;

        flex-basis: 40px !important;

        font-size: 28px !important;
    }

}