/* =========================================================
   SAMRAMBA KERALAM 2030
   HEADER + NAVIGATION + HERO
   CONSOLIDATED RC2 MASTER
========================================================= */


/* =========================================================
   1. RC2 FOUNDATION
========================================================= */

:root {

    /* Brand */
    --rc2-navy: #0B1F3A;
    --rc2-navy-dark: #07182D;
    --rc2-green: #16A34A;
    --rc2-green-dark: #0A8754;

    /* Backgrounds */
    --rc2-white: #FFFFFF;
    --rc2-bg: #F8FAFC;
    --rc2-bg-soft: #F1F5F9;

    /* Text */
    --rc2-text: #0F172A;
    --rc2-text-soft: #475569;
    --rc2-text-muted: #64748B;

    /* Borders */
    --rc2-border: #E2E8F0;

    /* Layout */
    --rc2-container: 1200px;

    /* Motion */
    --rc2-transition:
        cubic-bezier(.22,.61,.36,1);

}


/* =========================================================
   GLOBAL RC2 BEHAVIOUR
========================================================= */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}


body {
    width:
        100%;

    max-width:
        100%;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   2. HEADER
========================================================= */

.rc2-header {

    position:
         fixed;

    top:
        0;

    width:
        100%;

    padding:
        0;

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

    backdrop-filter:
        blur(16px);

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

    border-bottom:
        1px solid rgba(226,232,240,.8);

    z-index:
        5000;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* =========================================================
   3. HEADER INNER
========================================================= */

.rc2-header-inner {

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

    min-height:
        72px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    transition:
        min-height .35s ease;

}


/* =========================================================
   4. HEADER LOGO
========================================================= */

.rc2-logo-link {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.rc2-logo {

    width:
        auto;

    height:
        54px;

    display:
        block;

}


/* =========================================================
   5. HEADER SCROLL STATES
========================================================= */

.rc2-header.is-scrolled {

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

    border-bottom:
        1px solid rgba(226,232,240,.95);

    box-shadow:
        0 8px 28px
        rgba(15,23,42,.08);

}


.rc2-header.is-scrolled .rc2-header-inner {

    min-height:
        60px;

}


.rc2-header.is-scrolled .rc2-logo {

    height:
        46px;

}


.rc2-header.is-hidden {

    transform:
        translateY(-100%);

}


/* =========================================================
   6. DESKTOP NAVIGATION
========================================================= */

.rc2-desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    margin-left:
        auto;

}


.rc2-desktop-nav a {

    position:
        relative;

    color:
        var(--rc2-text);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        color .2s ease;

}


.rc2-desktop-nav a:hover {

    color:
        var(--rc2-green);

}


/* =========================================================
   7. ACTIVE NAVIGATION
========================================================= */

.rc2-desktop-nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -8px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--rc2-green);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform .25s ease;

}


.rc2-desktop-nav a.active {

    color:
        var(--rc2-green);

}


.rc2-desktop-nav a.active::after {

    transform:
        scaleX(1);

}


/* =========================================================
   8. HEADER CTA
========================================================= */

.rc2-header-cta {

    border:
        none;

    min-height:
        44px;

    padding:
        0 20px;

    border-radius:
        12px;

    background:
        var(--rc2-green);

    color:
        #FFFFFF;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    white-space:
        nowrap;

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

}


.rc2-header-cta:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 18px
        rgba(22,163,74,.20);

}


.rc2-header.is-scrolled .rc2-header-cta {

    min-height:
        40px;

    padding-left:
        17px;

    padding-right:
        17px;

}


/* =========================================================
   9. MOBILE MENU BUTTON
========================================================= */

.rc2-menu-button {

    display:
        none;

    flex-shrink:
        0;

    touch-action:
        manipulation;

}


/* =========================================================
   10. MOBILE MENU — BASE
========================================================= */

.rc2-mobile-menu {

    display:
        none;

}


/* =========================================================
   11. HERO — BASE
========================================================= */

.rc2-hero {

    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(22,163,74,.045),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FAFC 100%
        );

    padding:
        110px 0 60px;

}


.rc2-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(22,163,74,.055),
            transparent 28%
        );

}


/* =========================================================
   12. HERO INNER
========================================================= */

.rc2-hero-inner {

    position:
        relative;

    z-index:
        1;

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

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    grid-template-rows:
        auto;

    align-items:
        center;

    column-gap:
        60px;

    row-gap:
        0;

}


/* =========================================================
   13. HERO CONTENT
========================================================= */

.rc2-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

}


/* =========================================================
   14. HERO BADGE
========================================================= */

.rc2-hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #ECFDF5;

    color:
        var(--rc2-green-dark);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .04em;

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

}


.rc2-hero-badge:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(22,163,74,.10);

}


.rc2-badge-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--rc2-green);

}


/* =========================================================
   15. HERO HEADING
========================================================= */

.rc2-hero h1 {

    margin:
        20px 0 18px;

    color:
        var(--rc2-navy);

    font-family:
        Poppins,
        sans-serif;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.08;

    letter-spacing:
        -.035em;

}


.rc2-hero h1 span {

    display:
        block;

    color:
        var(--rc2-green);

}


/* =========================================================
   16. HERO DESCRIPTION
========================================================= */

.rc2-hero-description {

    max-width:
        590px;

    margin:
        0;

    color:
        var(--rc2-text-soft);

    font-size:
        14px;

    line-height:
        1.65;

}



/* =========================================================
   17. HERO VALUE POINTS
========================================================= */


.rc2-value-points {

    display: flex;

    flex-wrap: nowrap;

    gap: 10px;

    margin-top: 14px;

    width: 100%;

    max-width: 520px;

}


.rc2-value-points > div {

    flex: 1 1 0;

    min-width: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 7px 7px;

    box-sizing: border-box;

    background: #FFFFFF;

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

    border-radius: 8px;

    color: var(--rc2-text);

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

}



.rc2-value-points svg {

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    color: var(--rc2-green);

}



/* =========================================================
   18. HERO ACTIONS
========================================================= */

.rc2-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        16px;

}

.rc2-primary-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 20px;

    border:
        none;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #16A34A,
            #0A8754
        );

    color:
        #FFFFFF;

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

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(22,163,74,.18);

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


.rc2-primary-cta:hover {

       background:
        linear-gradient(
            135deg,
            #0A8754,
            #06703F
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(22,163,74,.24);

}

.rc2-primary-cta:active {

    background:
        linear-gradient(
            135deg,
            #06703F,
            #055A33
        );

    transform:
        translateY(1px);

}


.rc2-secondary-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        48px;

    padding:
        0 4px;

    border:
        none;

    background:
        transparent;

    color:
        var(--rc2-navy);

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

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        color .25s ease,
        transform .25s ease;
}


.rc2-secondary-cta:hover {

    color:
        var(--rc2-green);

    transform:
        translateX(2px);

}

.rc2-secondary-cta:active {

    color:
        var(--rc2-green);

    transform:
        translateX(2px);

}

.rc2-secondary-cta svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke-width: 1.7;
    transition: transform .25s ease, stroke-width .25s ease;
}

.rc2-secondary-cta:hover svg {
    transform: translateX(3px);
    stroke-width: 1.9;
}

.rc2-secondary-cta:active svg {
    transform: translateX(3px);
}


/* =========================================================
   19. HERO TRUST LINE
========================================================= */

.rc2-trust-line {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        15px;

    margin-top:
        14px;

    color:
        var(--rc2-text-muted);

    font-size:
        11px;

}


.rc2-trust-line span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    white-space:
        nowrap;

}


.rc2-trust-line svg {

    width:
        14px;

    height:
        14px;

    flex:
        0 0 auto;

    color:
        var(--rc2-green);

}


/* =========================================================
   20. HERO PRODUCT EXHIBITION
========================================================= */


/* ---------------------------------------------------------
   PRODUCT CONTAINER
--------------------------------------------------------- */

.rc2-hero-product {

    grid-column:
        2;

    grid-row:
        1;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(40px);

}


/* =====================================================
   TEXLEARN — HERO QUIZ VIEW
===================================================== */

.tk-hero-quiz {
    width: 100%;
    min-height: 420px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
   




background:
    radial-gradient(
        ellipse at top left,
        rgba(96, 165, 250, 0.22) 0%,
        rgba(147, 197, 253, 0.10) 24%,
        transparent 48%
    ),
    radial-gradient(
        ellipse at bottom right,
        rgba(52, 211, 153, 0.24) 0%,
        rgba(110, 231, 183, 0.10) 25%,
        transparent 50%
    ),
    linear-gradient(
        135deg,
        #FFFFFF 0%,
        #FBFDFF 52%,
        #F8FFFB 100%
    );

border: 1px solid rgba(143, 211, 226, 0.65);

border-radius: 28px;

box-shadow:
    0 12px 32px rgba(52, 125, 180, 0.10),
    0 5px 16px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

    font-family: Inter, sans-serif;
}

.tk-hero-quiz[hidden],
.tk-hero-quiz-content[hidden] {
    display: none !important;
}

.tk-hero-quiz-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.tk-hero-quiz-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16866A;
    background: #E7F5EF;
    border-radius: 13px;
}

.tk-hero-quiz-icon svg {
    width: 23px;
    height: 23px;
}

.tk-hero-quiz-heading h2 {
    margin: 0 0 4px;
    color: #172B4D;
    font-family: Poppins, sans-serif;
    font-size: clamp(21px, 2.2vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.tk-hero-quiz-heading p {
    margin: 0;
    color: #64748B;
    font-size: 13px;
    line-height: 1.5;
}

.tk-hero-quiz-status {
    color: #64748B;
    font-size: 14px;
    line-height: 1.6;
}

.tk-hero-quiz-question {
    margin: 0 0 9px;
    color: #172B4D;
    font-family: Poppins, sans-serif;
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 600;
    line-height: 1.4;
}

.tk-hero-quiz-instruction {
    margin: 0 0 16px;
    color: #64748B;
    font-size: 13px;
    line-height: 1.6;
}

.tk-hero-quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.tk-hero-quiz-option {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid #E5EAF0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #25364D;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.tk-hero-quiz-option:hover {
    background: #F7FCF9;
    border-color: #91CDB8;
}

.tk-hero-quiz-option.is-selected {
    background: #EFF9F4;
    border-color: #16866A;
    box-shadow: inset 0 0 0 1px #16866A;
}

.tk-hero-quiz-option-letter {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #EAF2FF;
    color: #315BB5;
    font-size: 12px;
    font-weight: 700;
}

.tk-hero-quiz-option:nth-child(2) .tk-hero-quiz-option-letter {
    background: #E7F5EF;
    color: #16866A;
}

.tk-hero-quiz-option:nth-child(3) .tk-hero-quiz-option-letter {
    background: #FFF2DF;
    color: #B45309;
}

.tk-hero-quiz-option:nth-child(4) .tk-hero-quiz-option-letter {
    background: #F3EAFE;
    color: #8553B5;
}

.tk-hero-quiz-option:focus-visible  {
    outline: 3px solid rgba(22, 134, 106, 0.25);
    outline-offset: 3px;
}


.tk-hero-quiz-feedback {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid #D6EEE3;
    border-radius: 12px;
    background: #F1F8F5;
    color: #25364D;
    font-size: 13px;
    line-height: 1.65;
}

.tk-hero-quiz-feedback h3 {
    margin: 0 0 5px;
    color: #16866A;
    font-family: Poppins, sans-serif;
    font-size: 16px;
}

.tk-hero-quiz-feedback p {
    margin: 0;
}

.tk-hero-quiz-options.tk-hero-quiz-results {
    gap: 20px;
}


/* Compact hero quiz — preserve original mobile dimensions */
@media (max-width: 767px) {

    .rc2-hero-product:has(.tk-hero-quiz:not([hidden])) {
        aspect-ratio: 16 / 9;
        min-height: 0;
        align-self: start;
    }

    .tk-hero-quiz {
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 7px 9px;
        box-sizing: border-box;
        gap: 4px;
        overflow: hidden;
        border-radius: 20px;
        overflow-y: auto;
    }




    /* Compact but fully visible heading */
    .tk-hero-quiz-heading {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
    }

    .tk-hero-quiz-icon {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        border-radius: 8px;
    }

    .tk-hero-quiz-icon svg {
        width: 16px;
        height: 16px;
    }

    .tk-hero-quiz-heading h2 {
        margin: 0 0 1px;
        font-size: 14px;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .tk-hero-quiz-heading p {
        font-size: 9px;
        line-height: 1.2;
    }

    .tk-hero-quiz-status {
        font-size: 9px;
        line-height: 1.2;
    }

   .tk-hero-quiz-question {
      width: calc(100% - 24px);
    margin: 4px 8px 3px;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: normal;
    box-sizing: border-box;
}

    .tk-hero-quiz-instruction {
        margin: 0 0 3px;
        font-size: 9px;
        line-height: 1.2;
        display: none;
    }

    .tk-hero-quiz-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 2px 20px 0 20px;
     transform: translateY(10px);
    }

    .tk-hero-quiz-option {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    height: auto;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

    .tk-hero-quiz-option-letter {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
}

    .tk-hero-quiz-feedback {
        margin-top: 4px;
        padding: 6px;
        font-size: 10px;
        line-height: 1.25;
    }

    .tk-hero-quiz-feedback h3 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .tk-hero-quiz-vote {
    justify-content: flex-start;
    padding-top: 10px;
    box-sizing: border-box;
}

.tk-hero-quiz-options.tk-hero-quiz-results {
    gap: 14px;
}

}

@media (prefers-reduced-motion: reduce) {
    .tk-hero-quiz-option {
        transition: none;
    }
}



/* =====================================================
   HERO QUIZ — SMALL PHONE
   420px and below
===================================================== */

@media (max-width: 420px) {

    
.tk-hero-quiz {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 10px 10px 20px;
    gap: 0;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: visible;
}


    /* Keep each frame inside the existing hero area */
    .tk-hero-quiz-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

    /* INTRO FRAME */
    .tk-hero-quiz-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px;
        text-align: center;
    }

    .tk-hero-quiz-intro[hidden],
    .tk-hero-quiz-vote[hidden],
    .tk-hero-quiz-content[hidden] {
        display: none !important;
    }

    .tk-hero-quiz-intro-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #E5F6EF;
        color: #16866A;
        flex-shrink: 0;
    }

    .tk-hero-quiz-intro-icon svg {
        width: 24px;
        height: 24px;
    }

    .tk-hero-quiz-intro h2 {
        margin: 0;
        font-size: 19px;
        line-height: 1.12;
        letter-spacing: -0.5px;
        color: #142D3A;
    }

    .tk-hero-quiz-intro p {
        margin: 0;
        font-size: 11px;
        line-height: 1.3;
        color: #64748B;
    }

    .tk-hero-quiz-start {
        min-height: 36px;
        margin-top: 2px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 0;
        border-radius: 9px;
        background: #16866A;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .tk-hero-quiz-start svg {
        width: 15px;
        height: 15px;
    }

    .tk-hero-quiz-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 4px;
    }

    .tk-hero-quiz-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #D4DCE3;
    }

    .tk-hero-quiz-dots span.is-active {
        width: 17px;
        border-radius: 10px;
        background: #16866A;
    }

    /* QUESTION FRAME */
    .tk-hero-quiz-vote {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        overflow: hidden;
         padding: 5px 2px;
         box-sizing: border-box;
    }

    .tk-hero-quiz-status {
        font-size: 9px;
        line-height: 1.2;
    }

 .tk-hero-quiz-question {
     width: calc(100% - 24px);
     min-height: 29px;
     margin: 0 8px 3px;
      padding: 0 4px;
     transform: translateY(-7px);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    white-space: normal;
     box-sizing: border-box;
}

    .tk-hero-quiz-instruction {
        margin: 0 0 4px;
    font-size: 9px;
    line-height: 1.2;
    display: none;
    }

    .tk-hero-quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
     margin: 2px 18px 0 18px;
     transform: translateY(0px);
    }


.tk-hero-quiz-option {
    width: 100%;
    min-width: 0;
    min-height: 27px;
    height: auto;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 9px;
    line-height: 1;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}


   .tk-hero-quiz-option-letter {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    border-radius: 7px;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
}

    .tk-hero-quiz-feedback {
    margin-top: 3px;
    padding: 5px 6px;
    font-size: 9px;
    line-height: 1.2;
    box-sizing: border-box;
}

.tk-hero-quiz-feedback h3 {
    margin: 0 0 4px;
    padding: 2px 0;
    font-size: 11px;
    line-height: 1.3;
}

.tk-hero-quiz-feedback p {
    margin: 0;
    line-height: 1.2;
}

.tk-hero-quiz-options.tk-hero-quiz-results {
    gap: 6px;
}

}






/* ---------------------------------------------------------
   UNBOXING STAGE
--------------------------------------------------------- */

.rc2-unboxing-stage {

    position:
        relative;

    width:
        min(100%, 560px);

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    border-radius:
        30px;

    background:
        radial-gradient(
            ellipse 48% 38% at 50% 10%,
            rgba(255,255,255,.20) 0%,
            rgba(220,235,255,.09) 28%,
            rgba(7,24,45,.35) 52%,
            transparent 76%
        ),
        linear-gradient(
            180deg,
            #07182D 0%,
            #061525 55%,
            #030C18 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),

        inset 0 -45px 70px
        rgba(0,0,0,.24),

        0 30px 70px
        rgba(15,23,42,.16);

    transform:
    translate3d(0,-25px,0);

}

/* Hide the original book display while the quiz is active */
.rc2-unboxing-stage[hidden] {
    display: none !important;
}


/* ---------------------------------------------------------
   STAGE FLOOR
--------------------------------------------------------- */

.rc2-unboxing-stage::after {

    content:
        "";

    position:
        absolute;

    left:
        5%;

    right:
        5%;

    bottom:
        25px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.11),
            transparent
        );

    pointer-events:
        none;

    z-index:
        2;

}


/* ---------------------------------------------------------
   STAGE LIGHTING
--------------------------------------------------------- */

.rc2-unboxing-stage::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse 48% 38% at 50% 10%,
            rgba(255,255,255,.20) 0%,
            rgba(220,235,255,.09) 28%,
            rgba(7,24,45,.35) 52%,
            transparent 76%
        );

    z-index:
        1;

}


/* ---------------------------------------------------------
   SPOTLIGHT
--------------------------------------------------------- */

.rc2-unboxing-spotlight {

    position:
        absolute;

    top:
        -105px;

    left:
        50%;

    width:
        470px;

    height:
        470px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.28) 0%,
            rgba(205,230,255,.13) 26%,
            rgba(205,230,255,.045) 47%,
            transparent 72%
        );

    filter:
        blur(2px);

    pointer-events:
        none;

    z-index:
        2;

}


/* ---------------------------------------------------------
   PRODUCT SHADOW
--------------------------------------------------------- */

.rc2-unboxing-shadow {

    position:
        absolute;

    left:
        50%;

    bottom:
        66px;

    width:
        68%;

    height:
        52px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(0,0,0,.58);

    filter:
        blur(22px);

    pointer-events:
        none;

    z-index:
        3;

}


/* ---------------------------------------------------------
   PODIUM
--------------------------------------------------------- */

.rc2-unboxing-podium {

    position:
        absolute;

    left:
        50%;

    bottom:
        28px;

    width:
        88%;

    max-width:
        500px;

    height:
        auto;

    transform:
        translateX(-50%);

    display:
        block;

    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    z-index:
        3;

    filter:
        drop-shadow(
            0 14px 20px
            rgba(0,0,0,.38)
        );

}


/* ---------------------------------------------------------
   PRODUCT WRAPPER
--------------------------------------------------------- */

.rc2-unboxing-product {

    position:
        relative;

    width:
        min(92%, 500px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        4;

    transform:
        translate(25px, 25px);

    transform-origin:
        center bottom;

    will-change:
        transform;

}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.rc2-product-image {

    display:
        block;

    width:
        auto;

    max-width:
        480px;

    max-height:
        500px;

    object-fit:
        contain;

    border-radius:
        0;

    filter:
        drop-shadow(
            0 30px 38px
            rgba(0,0,0,.40)
        );

    user-select:
        none;

    -webkit-user-drag:
        none;

    will-change:
        transform,
        filter;

}


/* ---------------------------------------------------------
   OBSOLETE PRODUCT EFFECT
--------------------------------------------------------- */

.rc2-product-badge {

    display:
        none !important;

}


/* =========================================================
   21. OVERHEAD VELVET CURTAIN
========================================================= */

/* ---------------------------------------------------------
   FOUR-HEADED NAVY VELVET OVERHEAD VALANCE
--------------------------------------------------------- */

.rc2-velvet-valance {

    position:
        absolute;

    top:
        -20px;

    left:
        -2%;

    right:
        -2%;

    height:
        145px;

    z-index:
        7;

    pointer-events:
        none;

}


/* ---------------------------------------------------------
   INDIVIDUAL VELVET PANELS
--------------------------------------------------------- */

.rc2-valance-panel {

    position:
        absolute;

    top:
        0;

    height:
        120px;

    background:
        linear-gradient(
            180deg,
            #071A35 0%,
            #06152D 30%,
            #061329 60%,
            #030D20 100%
        );

    border-radius:
        0 0 50% 50% /
        0 0 72% 72%;

    box-shadow:
        inset 0 3px 6px
        rgba(255,255,255,.045),

        inset 0 -12px 18px
        rgba(0,0,0,.34),

        0 8px 16px
        rgba(0,0,0,.34);

}


/* ---------------------------------------------------------
   VELVET FOLD TEXTURE
--------------------------------------------------------- */

.rc2-valance-panel::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        inherit;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.035) 5%,
            transparent 10%,
            rgba(0,0,0,.13) 15%,
            transparent 21%
        );

    opacity:
        .8;

    pointer-events:
        none;

}


/* ---------------------------------------------------------
   FOUR OVERLAPPING VALANCE HEADS
--------------------------------------------------------- */

.rc2-valance-1 {

    left:
        0;

    width:
        27%;

}


.rc2-valance-2 {

    left:
        24%;

    width:
        27%;

}


.rc2-valance-3 {

    left:
        49%;

    width:
        27%;

}


.rc2-valance-4 {

    right:
        0;

    width:
        27%;

}

/* =========================================================
   22. TABLET
   768px–900px
========================================================= */

@media (min-width: 768px) and (max-width: 900px) {

    .rc2-hero-product {

        min-height:
            480px;

    }


    .rc2-unboxing-stage {

        width:
            min(100%, 520px);

        min-height:
            480px;

    }


    .rc2-unboxing-product {

        width:
            min(92%, 460px);

    }


    .rc2-product-image {

        max-height:
            450px;

    }

}


/* =========================================================
   25. MOBILE HEADER + MOBILE MENU
========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       MOBILE HEADER
    ----------------------------------------- */

    .rc2-header {

        background:
            linear-gradient(
                135deg,
                #F4FBF6 0%,
                #EAF7EE 50%,
                #F8FCF9 100%
            );

    }


    .rc2-header-inner {

        width:
            calc(100% - 28px);

        min-height:
            58px;

    }


    .rc2-logo {

        height:
            44px;

    }


    /* -----------------------------------------
       MOBILE MENU BUTTON
    ----------------------------------------- */

    .rc2-menu-button {

        margin-left:
            auto;

        width:
            44px;

        height:
            44px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

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

        border-radius:
            12px;

        background:
            #FFFFFF;

        color:
            var(--rc2-navy);

        cursor:
            pointer;

    }


    .rc2-menu-button svg {

        width:
            22px;

        height:
            22px;

    }


    /* -----------------------------------------
       HIDE DESKTOP NAVIGATION
    ----------------------------------------- */

    .rc2-desktop-nav,
    .rc2-header-cta {

        display:
            none;

    }


    /* -----------------------------------------
       MOBILE MENU
    ----------------------------------------- */

   .rc2-mobile-menu {

    position:
        fixed;

    inset:
        0;

    display:
        block;

    width:
        100vw;

    max-width:
        100vw;

    height:
        100dvh;

    max-height:
        100dvh;

    box-sizing:
        border-box;

    overflow:
        hidden;

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

    backdrop-filter:
        blur(18px);

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

    z-index:
        6000;

    transform:
        translateX(100%);

    transition:
        transform 750ms cubic-bezier(.2, .8, .2, 1);

}


    .rc2-mobile-menu.active {

        transform:
            translateX(0);

    }


    /* -----------------------------------------
       MOBILE MENU TOP BAR
    ----------------------------------------- */

    .rc2-mobile-menu-top {

        width:
            100%;

        min-height:
            62px;

        height:
            62px;

        padding:
            0 18px;

        box-sizing:
            border-box;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        border-bottom:
            1px solid var(--rc2-border);

    }


    .rc2-mobile-menu-top span {

        font-family:
            Poppins,
            sans-serif;

        color:
            var(--rc2-navy);

        font-size:
            14px;

        font-weight:
            800;

    }


    /* -----------------------------------------
       MOBILE CLOSE BUTTON
    ----------------------------------------- */

    .rc2-mobile-menu-top button {

        width:
            44px;

        min-width:
            44px;

        max-width:
            44px;

        height:
            44px;

        padding:
            0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        box-sizing:
            border-box;

        border:
            none;

        border-radius:
            12px;

        background:
            transparent;

        color:
            var(--rc2-navy);

        cursor:
            pointer;

    }


    .rc2-mobile-menu-top button svg {

        display:
            none;

    }


    .rc2-mobile-menu-top button::before {

        content:
            "×";

        display:
            block;

        font-family:
            Arial,
            sans-serif;

        font-size:
            36px;

        font-weight:
            300;

        line-height:
            1;

        color:
            #0B1F3A;

    }


    /* -----------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------- */

    .rc2-mobile-nav {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

        padding:
            12px 20px;

        display:
            flex;

        flex-direction:
            column;

        overflow-x:
            hidden;

    }


    .rc2-mobile-nav a {

        min-height:
            52px;

        width:
            100%;

        box-sizing:
            border-box;

        display:
            flex;

        align-items:
            center;

        padding:
            17px 4px;

        border-bottom:
            1px solid #F1F5F9;

        color:
            var(--rc2-navy);

        text-decoration:
            none;

        font-size:
            16px;

        font-weight:
            650;

    }


    /* -----------------------------------------
       MOBILE MENU CTA
    ----------------------------------------- */

    .rc2-mobile-nav button {

        display: block;

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

        margin-top:
            20px;

        margin-left:
            0;

        margin-right:
            0;

        min-height:
            52px;

        padding:
            0 16px;

        overflow:
            hidden;

        border:
            none;

        border-radius:
            14px;

        background:
            linear-gradient(
                135deg,
                #16A34A,
                #0A8754
            );

        color:
            #FFFFFF;

        font-size:
            15px;

        font-weight:
            800;

        box-shadow:
            0 12px 28px
            rgba(22,163,74,.22);

    }

}


/* =========================================================
   23. NORMAL PHONE
   421px–767px
========================================================= */

@media (min-width: 421px) and (max-width: 767px) {

    .rc2-hero {

        padding:
            80px 0 22px;

    }


    .rc2-hero-inner {

        width:
        calc(100% - 16px);

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-areas:
            "badge"
            "heading"
            "description"
            "product"
            "values"
            "actions"
            "trust";

        gap:
            0;

        text-align:
            center;

    }


    .rc2-hero-intro {

        display:
            contents;

        margin:
            0;

        padding:
            0;

        transform:
            none;

    }


    .rc2-hero-badge {

        grid-area:
            badge;

        justify-self:
            center;

        margin:
            0 0 12px;

        padding:
            6px 10px;

        font-size:
            10px;

    }


    .rc2-hero-intro h1 {

        grid-area:
            heading;

        width:
            100%;

        margin:
            0 0 12px;

        font-size:
            clamp(30px, 8.5vw, 36px);

        line-height:
            1.07;

        text-align:
            center;

    }


    .rc2-hero-description {

        grid-area:
            description;

        width:
            100%;

        max-width:
            100%;

        margin:
            0 auto 8px;

        padding:
            0;

        font-size:
            14.5px;

        line-height:
            1.52;

        text-align:
            center;

    }


    .rc2-hero-product {

        grid-area:
            product;

        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        min-height:
            0;

        margin:
            0 0 17px;

        overflow:
            visible;

        transform:
            none;

    }


    .rc2-unboxing-stage {

    width:
        100%;

    min-height:
        0;

    aspect-ratio:
        16 / 9;

    border-radius:
        24px;

    transform:
        translate3d(0,0,0);

}


    /* Overhead curtain */

    .rc2-velvet-valance {

        top:
            -28px;

        height:
            62px;

    }


    .rc2-valance-panel {

        height:
            62px;

    }


    /* Spotlight */

    .rc2-unboxing-spotlight {

        top:
            -82px;

        width:
            360px;

        height:
            360px;

    }


    /* Product */

   .rc2-unboxing-product {

      width: min(75%,250px);

     margin-left: auto;
    margin-right: auto;

   transform:
        translate3d(65px, 0, 0);

}


   .rc2-product-image {
    width: 100%;
    max-height: 250px;
}


    /* Shadow */

    .rc2-unboxing-shadow {

        bottom:
            53px;

        width:
            72%;

        height:
            40px;

        filter:
            blur(19px);

    }


    /* Podium */

    .rc2-unboxing-podium {

        width:
            80%;

        bottom:
            3px;

    }



    /* Value points */

    .rc2-value-points {

        grid-area:
            values;

        width:
            80%;

        display:
            grid;

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

        gap:
            9px;

        margin:
            0;

        transform:
            none;

            justify-self: left;

    }


    .rc2-value-points div {

        min-height:
            34px;

       padding: 4px 5px;

        box-sizing:
            border-box;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

         gap:
            clamp(3px, 0.8vw, 5px);

        white-space:
            nowrap;

         font-size:
            clamp(8.5px, 2.2vw, 10px);

        font-weight:
            600;

    }


    .rc2-value-points svg {

         width:
            clamp(13px, 3.3vw, 15px);

        
        height:
            clamp(13px, 3.3vw, 15px);

        flex:
            0 0 auto;

    }


    /* CTA */

    .rc2-hero-actions {

        grid-area:
            actions;

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            7px;

        margin:
            22px 0 12px;

        transform:
            none;

    }


    .rc2-primary-cta,
    .rc2-secondary-cta {

        width:
            100%;

        min-width:
            0;

        height:
            clamp(46px, 11.8vw, 50px);

        min-height:
            clamp(46px, 11.8vw, 50px);

        margin:
            0;

        padding:
            0 7px;

        box-sizing:
            border-box;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        white-space:
            nowrap;

        border-radius:
            11px;

    }


       .rc2-primary-cta {

        font-size:
            clamp(15px, 3.6vw, 16px);

        font-weight:
            600;

    }


    .rc2-secondary-cta {

        font-size:
            clamp(13px, 3.1vw, 14px);

        font-weight:
            600;

         gap:
            clamp(3px, 0.8vw, 4px);

            transform: translateX(-32px);

    }


    .rc2-secondary-cta svg {

        width:
            clamp(13px, 3.3vw, 15px);

        height:
            clamp(13px, 3.3vw, 15px);

    }


    /* Trust */

    .rc2-trust-line {

        grid-area:
            trust;

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        gap:
            8px;

        margin-top:
            5px;

        transform:
            none;

    }


    .rc2-trust-line span {

        display:
            inline-flex;

        align-items:
            center;

        gap:
            3px;

        white-space:
            nowrap;

    }


    .rc2-trust-line svg {

        width:
            12px;

        height:
            12px;

        flex:
            0 0 auto;

    }


    /* Mobile menu */

    .rc2-mobile-menu {

        width:
            100vw;

        max-width:
            100vw;

        overflow-x:
            hidden;

        box-sizing:
            border-box;

    }


   .rc2-mobile-menu-top{
    
    min-height:clamp(56px,15vw,62px);
    height:clamp(56px,15vw,62px);
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;

}


    .rc2-mobile-nav {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

         padding:
        clamp(8px,2.5vw,12px)
        clamp(16px,5vw,20px);

        display:
            flex;

        flex-direction:
            column;

        overflow-x:
            hidden;

    }


    .rc2-mobile-nav a{
    min-height:clamp(46px,13vw,52px);

    width:100%;
    box-sizing:border-box;

    display:flex;
    align-items:center;

    padding:
        clamp(13px,4vw,17px)
        4px;

    border-bottom:1px solid #F1F5F9;

    color:var(--rc2-navy);
    text-decoration:none;

    font-size:clamp(15px,4vw,16px);
    font-weight:650;
    line-height:1.2;
}


    .rc2-mobile-nav button {

        width:
            100%;

        max-width:
            100%;

        box-sizing:
            border-box;

        overflow:
            hidden;

    }


    
    /* NORMAL PHONE — POLL INTRO FRAME */
   #tkHeroQuizIntro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    padding: 14px;
    box-sizing: border-box;
    text-align: center;
}

    #tkHeroQuizIntro .tk-hero-quiz-intro-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 13px;
    }

    #tkHeroQuizIntro h2 {
    margin: 0;
    transform: translateY(-12px);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

    #tkHeroQuizIntro p {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }

   #tkHeroQuizIntro .tk-hero-quiz-start {
    min-height: 42px;
    margin-top: 4px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #16866A;
    border-radius: 10px;
    background: #16866A;
    color: #FFFFFF;

    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


}


/* =========================================================
   24. SMALL PHONE
   420px AND BELOW
========================================================= */

@media (max-width: 420px) {

    .rc2-hero {

        padding:
            80px 0 22px;

    }


   .rc2-hero-inner {

    width:
        calc(100% - 16px);

    display:
        grid;

    grid-template-columns:
        1fr;

    grid-template-areas:
        "badge"
        "heading"
        "description"
        "product"
        "values"
        "actions"
        "trust";

    gap:
        0;

    text-align:
        center;

}

 .rc2-hero-badge {

        grid-area:
            badge;


        justify-self:
            left;

        margin:
            0 0 4px;

        padding:
            6px 6px;

        font-size:
            8px;

    }

.rc2-hero-intro {

    display:
        contents;

    margin:
        0;

    padding:
        0;

    transform:
        none;

}


    .rc2-hero h1 {

         margin-top: 6px;

        text-align: left;

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

            line-height:
        1.09;

    }


    .rc2-hero-description {

    text-align: left;

    grid-area:
        description;

    width:
        100%;

    max-width:
        100%;

    margin:
        0 auto 12px;

    font-size:
            11px;

    font-weight:
            400;

    line-height:
            1.7;

    }


  .rc2-hero-product {

    grid-column:
        1;

    grid-row:
        auto;

    width:
        100%;

    min-height:
        0;

    margin:
        0 0 17px;

    overflow:
        visible;

    transform:
        none;

    grid-area:
        product;

}


    .rc2-unboxing-stage {

    width:
        100%;

    min-height:
        0;

    aspect-ratio:
        16 / 9;

    border-radius:
        24px;

    transform:
        none;

}

/* Overhead curtain */

    .rc2-velvet-valance {

        top:
            -30px;

        height:
            62px;

    }


    .rc2-valance-panel {

        height:
            62px;

    }



    .rc2-unboxing-spotlight {

        top:
            -78px;

        width:
            330px;

        height:
            330px;

    }


   .rc2-unboxing-product {

    width: min(52%, 220px);

    display:
        flex;

    margin-left:
        auto;

    margin-right:
        auto;

        position:
        relative;

    transform: translate3d(60px, 10px, 0px);

    z-index:
        8;

    align-items:
        center;

    justify-content:
        center;

}


    .rc2-product-image {

        width:
            96%;

        max-height:
            375px;

    }


    .rc2-unboxing-shadow {

        bottom:
            52px;

    }


    .rc2-unboxing-podium {

        width:
            75%;

        bottom:
            2px;

    }

/* Value points */

.rc2-value-points {

    grid-area:
        values;

    width:
        85%;

    display:
        grid;

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

    gap:
        7px;

    margin:
        0;

    transform:
        none;

}


.rc2-value-points div {

    min-width:
        0;

    min-height:
        26px;

    padding: clamp(2.5px, 0.8vw, 3.5px) clamp(1.5px, 0.6vw, 2.5px);

    box-sizing:
        border-box;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
            clamp(2px, 0.8vw, 3px);

    white-space:
        nowrap;

     font-size:
            clamp(7.5px, 2.15vw, 8.5px);

    font-weight:
        600;

}


.rc2-value-points svg {

    width:
            clamp(11px, 3.1vw, 12px);

    height:
            clamp(11px, 3.1vw, 12px);

    flex:
        0 0 auto;

}

.rc2-primary-cta,
    .rc2-secondary-cta {

        height:
            clamp(36px, 11vw, 38px);

        min-height:
            clamp(36px, 11vw, 38px);

    }


    .rc2-primary-cta {

        font-size:
            clamp(12px, 3.6vw, 14px);

    }


    .rc2-secondary-cta {

        font-size:
            clamp(10.5px, 3vw, 12px);

        gap:
            clamp(2px, 0.8vw, 4px);

    }


    .rc2-secondary-cta svg {

        width:
            clamp(12px, 3.1vw, 14px);

        height:
            clamp(12px, 3.1vw, 14px);

    }



.rc2-trust-line {
    font-size: 7px;
    line-height: 1;
    gap: 1px;
}

.rc2-trust-line svg {
    width: 8px;
    height: 8px;
}


    .rc2-mobile-menu-top{
        min-height:clamp(54px,14vw,58px);
        height:clamp(54px,14vw,58px);
    }

    .rc2-mobile-nav{
        padding:
            clamp(7px,2.2vw,9px)
            clamp(14px,4.5vw,18px);
    }

    .rc2-mobile-nav a {
        min-height:clamp(44px,12vw,48px);

        padding:
            clamp(11px,3.2vw,13px)
            4px;

        font-size:clamp(12.5px,3.7vw,14px);
        line-height:1.1;
    }

    .rc2-mobile-nav button{
    margin-top:
        clamp(14px,4vw,18px);

    min-height:
        clamp(46px,12vw,50px);

    padding:
        0 clamp(12px,4vw,16px);

    border-radius:
        clamp(11px,3vw,14px);

    font-size:
        clamp(13px,3.6vw,15px);

    line-height:
        1.2;
}

.rc2-mobile-menu-top button{
    width:clamp(38px,11vw,42px);
    min-width:clamp(38px,11vw,42px);
    max-width:clamp(38px,11vw,42px);
    height:clamp(38px,11vw,42px);

    border-radius:clamp(10px,2.8vw,12px);
}

.rc2-mobile-menu-top button::before{
    font-size:clamp(30px,8.5vw,34px);
}

}


/* =========================================================
   28. FOCUS ACCESSIBILITY
========================================================= */

.rc2-menu-button:focus-visible,
.rc2-mobile-menu-top button:focus-visible,
.rc2-mobile-nav a:focus-visible,
.rc2-mobile-nav button:focus-visible {

    outline:
        3px solid rgba(22,163,74,.28);

    outline-offset:
        3px;

}


/* =========================================================
   29. TOUCH DEVICES
========================================================= */

@media (hover:none) and (pointer:coarse) {

    .rc2-primary-cta:hover,
    .rc2-secondary-cta:hover,
    .rc2-hero-badge:hover {

        transform:
            none;

        box-shadow:
            none;

    }

}


/* =========================================================
   30. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* ===========================
   SAMRAMBA KERALAM 2030
=========================== */

html{
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: "Inter", sans-serif;
    background:#ffffff;
    color:#1E293B;
    line-height:1.6;
}

header{
    background:#ffffff;
    border-bottom:1px solid #E2E8F0;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    padding:18px 8%;
    position:sticky;
    top:0;
    z-index:1000;
}

.container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1280px;
    margin:auto;
}

.logo{
    height:72px;
}

nav a{
    color:#0B1F3A;
    text-decoration:none;
    margin-left:36px;
    font-weight:600;
    transition:.3s;
}

nav a:hover{
    color:#16A34A;
}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}


/* ===========================
   Navigation Button
=========================== */

.nav-btn{

    background:#16A34A;
    color:#ffffff;
    text-decoration:none;
    padding:12px 24px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;

}

.nav-btn:hover{

    background:#15803D;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,163,74,.25);

}


/* =========================================================
   OPPORTUNITIES & UPDATES HUB
   DESKTOP / BASE
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.opportunities-hub {

    padding:
        22px 8% 20px;

    background:
        #FFFFFF;

    border-top:
        1px solid #E5E7EB;

    border-bottom:
        1px solid #E5E7EB;

}


/* =========================================================
   HUB INNER
========================================================= */

.opportunities-hub-inner {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        30px;

    align-items:
        center;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.opportunities-hub-label {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.hub-label-eyebrow {

    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        #16A34A;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.opportunities-hub-label h2 {

    margin:
        0 0 5px;

    color:
        #0B1F3A;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1.2;

}


.opportunities-hub-label p {

    max-width:
        190px;

    margin:
        0;

    color:
        #64748B;

    font-size:
        11px;

    line-height:
        1.5;

}


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

.opportunities-hub-banner {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    overflow:
        visible;

    background:
        #F8FAFC;

    border:
        1px solid #E2E8F0;

    border-radius:
        18px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.055);

}


/* =========================================================
   VIEWPORT
========================================================= */

.hub-viewport {

    width:
        100%;

    overflow:
        hidden;

    border-radius:
        18px;

}


/* =========================================================
   TRACK
========================================================= */

.hub-track {

    width:
        100%;

    display:
        flex;

    transition:
        transform .55s ease;

}


/* =========================================================
   STANDARD SLIDE
   TEXT LEFT / IMAGE RIGHT
========================================================= */

.hub-slide {

    flex:
        0 0 100%;

    width:
        100%;

    min-width:
        100%;

    height:
        240px;

    min-height:
        240px;

    max-height:
        240px;

    display:
        grid;

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

    align-items:
        stretch;

    overflow:
        hidden;

}


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

.hub-slide-image {

    width:
        500px;

    min-width:
        500px;

    height:
        240px;

    min-height:
        240px;

    max-height:
        240px;

    grid-column:
        2;

    grid-row:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #FFFFFF;

}


.hub-slide-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;    

    object-position:
        center;

}

.hub-image-contain {

    object-fit:
        contain;

}

.hub-image-cover {

    object-fit:
        cover;

}

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

.hub-image-placeholder {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        #ECFDF5;

    color:
        #16A34A;

}


.hub-image-placeholder svg {

    width:
        28px;

    height:
        28px;

}


/* =========================================================
   SLIDE CONTENT
========================================================= */

.hub-slide-content {

    min-width:
        0;

    grid-column:
        1;

    grid-row:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        16px 52px 16px 24px;

}


/* =========================================================
   SLIDE LABEL
========================================================= */

.hub-slide-label {

    display:
        inline-block;

    margin-bottom:
        5px;

    color:
        #16A34A;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;

}


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

.hub-slide-content h3 {

    margin:
        0 0 5px;

    color:
        #0B1F3A;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.25;

}


/* =========================================================
   SLIDE DESCRIPTION
========================================================= */

.hub-slide-content p {

    max-width:
        650px;

    margin:
        0 0 9px;

    color:
        #64748B;

    font-size:
        12px;

    line-height:
        1.5;

}


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

.hub-slide-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    width:
        fit-content;

    color:
        #15803D;

    text-decoration:
        none;

    font-size:
        10.5px;

    font-weight:
        700;

}


.hub-slide-button svg {

    width:
        13px;

    height:
        13px;

    transition:
        transform .2s ease;

}


.hub-slide-button:hover svg {

    transform:
        translateX(3px);

}


/* =========================================================
   DESKTOP CAROUSEL ARROWS
========================================================= */

.hub-arrow {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        5;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid #E2E8F0;

    border-radius:
        50%;

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

    color:
        #0B1F3A;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px rgba(15,23,42,.08);

}


.hub-arrow svg {

    width:
        14px;

    height:
        14px;

}


.hub-prev {

    left:
        -42px;

}


.hub-next {

    right:
        -42px;

}


/* =========================================================
   DESKTOP CAROUSEL DOTS
========================================================= */

.hub-dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        row;

    gap:
        5px;

    margin:
        8px 0 0;

}


.hub-dot {

    flex:
        0 0 auto;

    width:
        5px;

    height:
        5px;

    min-width:
        5px;

    min-height:
        5px;

    padding:
        0;

    margin:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #CBD5E1;

}


.hub-dot.active {

    width:
        16px;

    min-width:
        16px;

    height:
        5px;

    min-height:
        5px;

    border-radius:
        999px;

    background:
        #16A34A;

}


/* =========================================================
   OPPORTUNITIES & UPDATES HUB
   NORMAL PHONE
========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------
       SECTION
    ----------------------------------------- */

    .opportunities-hub {

          padding:
        clamp(22px, 4.3vw, 23px)
        9px
        clamp(27.5px, 5.5vw, 28.5px);

    position:
        relative;

    z-index:
        1;

    }


    /* -----------------------------------------
       HUB INNER
    ----------------------------------------- */

    .opportunities-hub-inner {

        display:
            block;

    }


    /* -----------------------------------------
       SECTION LABEL
    ----------------------------------------- */

    .opportunities-hub-label {

        margin-bottom:
            14px;

    }


    .hub-label-eyebrow {

        margin-bottom:
            4px;

        font-size:
            9px;

        line-height:
            1.3;

    }


    .opportunities-hub-label h2 {

        margin:
            0 0 5px;

        font-size:
            19px;

        line-height:
            1.2;

    }


    .opportunities-hub-label p {

        max-width:
            100%;

        margin:
            0;

        font-size:
            11px;

        line-height:
            1.45;

    }


    /* -----------------------------------------
       CAROUSEL CONTAINER
    ----------------------------------------- */

    .opportunities-hub-banner {

        width:
            100%;

        border-radius:
            15px;

        overflow:
            hidden;

    }


    /* -----------------------------------------
       VIEWPORT
    ----------------------------------------- */

    .hub-viewport {

    width:
        100%;

    height:
        auto;

    overflow:
        hidden;

    border-radius:
        15px;

    touch-action:
        pan-y;

}


    /* -----------------------------------------
       TRACK
    ----------------------------------------- */

    .hub-track {

        display:
            flex;

        width:
            100%;

        transition:
            transform .45s ease;

        will-change:
            transform;

    }


    /* -----------------------------------------
       SLIDE
       IMAGE ABOVE / TEXT BELOW
    ----------------------------------------- */

    .hub-slide{

    flex:
        0 0 100%;

    width:
        100%;

    min-width:
        100%;

    height:
        auto;

    min-height:
        0;

    max-height:
        none;

    display:
        grid;

    grid-template-columns:
        1fr;

    grid-template-rows:
        auto auto;

    align-items:
        stretch;

}


    /* -----------------------------------------
       IMAGE
       FULL WIDTH
    ----------------------------------------- */

    .hub-slide-image{

    width:
        100%;

    min-width:
        0;

    height:
        176px;

    min-height:
        176px;

    grid-column:
        1;

    grid-row:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #FFFFFF;

}



    .hub-slide-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


    /* -----------------------------------------
       SLIDE CONTENT
    ----------------------------------------- */

    .hub-slide-content {

    min-width:
        0;

    grid-column:
        1;

    grid-row:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

     padding:
        11px 17px 12px;

}


    /* -----------------------------------------
       SLIDE LABEL
    ----------------------------------------- */

    .hub-slide-label {

        margin-bottom:
            3px;

        font-size:
            9px;

        line-height:
            1.3;

    }


    /* -----------------------------------------
       SLIDE TITLE
    ----------------------------------------- */

    .hub-slide-content h3 {

        margin:
            0 0 4px;

         font-size:
        clamp(13px, 3.6vw, 15px);

        line-height:
            1.3;

    }


    /* -----------------------------------------
       SLIDE DESCRIPTION
    ----------------------------------------- */

    .hub-slide-content p {

        max-width:
            100%;

        margin:
            0 0 5px;

        font-size:
        clamp(9.5px, 2.65vw, 11px);

        line-height:
            1.4;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .hub-slide-button {

        width:
            fit-content;

        font-size:  clamp(10px, 2.3vw, 11px);

        line-height:
            1.3;

    }


    .hub-slide-button svg {

        width:
            14px;

        height:
            14px;

    }


    /* -----------------------------------------
       ARROWS
       HIDDEN ON MOBILE
    ----------------------------------------- */

    .hub-arrow {

        display:
            none;

    }


    /* -----------------------------------------
       DOTS
    ----------------------------------------- */

    .hub-dots {

        display:
            flex;

        width:
            100%;

        height:
            10px;

        min-height:
            10px;

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            row;

        gap:
            6px;

        margin:
            10px 0 0;

        position:
        relative;

        z-index: 2;

    }


    /* -----------------------------------------
       DOT
    ----------------------------------------- */

    .hub-dot {

        flex:
            0 0 auto;

        width:
            6px;

        height:
            6px;

        min-width:
            6px;

        min-height:
            6px;

        padding:
            0;

        margin:
            0;

        border:
            0;

        border-radius:
            50%;

    }


    /* -----------------------------------------
       ACTIVE DOT
    ----------------------------------------- */

    .hub-dot.active {

        width:
            18px;

        height:
            6px;

        min-width:
            18px;

        min-height:
            6px;

        border-radius:
            999px;

    }

    }


    /* =========================================================
   OPPORTUNITIES & UPDATES HUB
   SMALL PHONE
   420px AND BELOW
========================================================= */

@media (max-width: 420px) {


    /* -----------------------------------------
       SECTION
    ----------------------------------------- */

  .opportunities-hub {

    padding:
        clamp(16px, 4.3vw, 18px)
         9px
        clamp(20px, 5.5vw, 24px);

}


    /* -----------------------------------------
       SECTION LABEL
    ----------------------------------------- */

    .opportunities-hub-label {

        margin-bottom:
            11px;

    }


    .hub-label-eyebrow {

        margin-bottom:
            3px;

        font-size:
            8px;

        line-height:
            1.3;

    }


    .opportunities-hub-label h2 {

        margin:
            0 0 4px;

        font-size:
            15px;

        line-height:
            1.2;

    }


    .opportunities-hub-label p {

        font-size:
            10px;

        line-height:
            1.45;

    }


    /* -----------------------------------------
       CAROUSEL CONTAINER
    ----------------------------------------- */

    .opportunities-hub-banner {

        border-radius:   clamp(11px, 3.3vw, 14px);
           

    }


    /* -----------------------------------------
       VIEWPORT
    ----------------------------------------- */

    .hub-viewport {

        border-radius:
            14px;

    }


    /* -----------------------------------------
       IMAGE
       SMALL PHONE
    ----------------------------------------- */

   .hub-slide-image {

    height:
        clamp(130px, 36vw, 150px);

    min-height:
        clamp(130px, 36vw, 150px);

}


    /* -----------------------------------------
       SLIDE CONTENT
    ----------------------------------------- */

   .hub-slide-content {

    padding:
        clamp(8px, 2.5vw, 10px)
        clamp(11px, 3.5vw, 14px)
        clamp(9px, 2.8vw, 11px);

}


    /* -----------------------------------------
       SLIDE LABEL
    ----------------------------------------- */

    .hub-slide-label {

        margin-bottom:
            3px;

        font-size:
            clamp(7.5px, 2.1vw, 8.5px);

        line-height:
            1.3;

    }


    /* -----------------------------------------
       SLIDE TITLE
    ----------------------------------------- */

    .hub-slide-content h3 {

        margin:
            0 0 4px;

        font-size:
        clamp(11.5px, 3.2vw, 13px);

        line-height:
            1.3;

    }


    /* -----------------------------------------
       SLIDE DESCRIPTION
    ----------------------------------------- */

    .hub-slide-content p {

        margin:
            0 0 5px;

        
    font-size:
        clamp(8.8px, 2.5vw, 10px);

        line-height:
            1.35;

    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .hub-slide-button {

        font-size:  clamp(8.5px, 2.3vw, 9.5px);
            

        line-height:
            1.3;

    }


    .hub-slide-button svg {

        width:
            13px;

        height:
            13px;

    }


    /* -----------------------------------------
       DOTS
    ----------------------------------------- */

    .hub-dots {

        gap:
            5px;

        margin:
            8px 0 0;

    }


    /* -----------------------------------------
       DOT
    ----------------------------------------- */

    .hub-dot {

        width:
            5px;

        height:
            5px;

        min-width:
            5px;

        min-height:
            5px;

    }


    /* -----------------------------------------
       ACTIVE DOT
    ----------------------------------------- */

    .hub-dot.active {

        width:
            16px;

        height:
            5px;

        min-width:
            16px;

        min-height:
            5px;

    }

}

/* -----------------------------------------
   SPACE BEFORE FEATURED CAROUSEL
----------------------------------------- */

#featured-carousel{

    margin-top:
        0px;

}

/* =====================================================
   WHY CHOOSE SK LEARNING MODULES
===================================================== */

.why-bundle {
    position: relative;

    padding:
        50px 0 50px;

    background:
        #F8FAFC;
}

.why-bundle::before {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin-bottom: 45px;

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

}

.why-bundle .container {

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

    max-width:
        var(--rc2-container);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        70px;

    box-sizing:
        border-box;
}


/* =====================================================
   LEFT INTRODUCTION
===================================================== */

.why-bundle .section-title {
    flex: 0 1 380px;
    max-width: 380px;

    text-align: left;
}

.why-bundle .section-title h2 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing:
        -0.675px;
    color: #0B1F3A;
    margin: 0 0 20px;
    line-height: 1.15;
}

.why-bundle .section-title p {
    font-size: 15px;
    color: #475569;

    line-height: 1.8;

    margin: 0;
}


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

.features-grid {
    flex: 1 1 0;
    min-width: 0;

    display: grid;

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

    gap: 24px;
}


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

.feature-card {
    position: relative;

    background: #FFFFFF;

    padding: 24px 20px;

    border-radius: 20px;

    text-align: center;

    border: 1px solid #E5E7EB;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .06);

    min-height: 210px;

    box-sizing: border-box;

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

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


/* =====================================================
   GREEN TOP ACCENT
===================================================== */

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

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #16A34A;

    border-radius: 20px 20px 0 0;

    transform: scaleX(0);

    transition: .35s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);

    border-color: #16A34A;

    box-shadow:
        0 20px 40px rgba(22, 163, 74, .12);
}


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

.feature-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 22px;

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

    background: #F0FDF4;

    border-radius: 18px;
}

.feature-icon svg {
    width: 30px;
    height: 30px;

    stroke: #16A34A;
    stroke-width: 2.2;
}

.feature-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


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

.feature-card h3 {
    font-family:
        "Poppins",
        sans-serif;

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

    color: #0B1F3A;

    margin: 0 0 14px;

    line-height: 1.3;
}


/* =====================================================
   FEATURE DESCRIPTION
===================================================== */

.feature-card p {
    color: #666;

    line-height: 1.65;

    font-size: 14px;

    margin: 0;
}


/* =====================================================
   FIRST FEATURE ICON
===================================================== */

.features-grid .feature-card:first-child .feature-icon svg {
    stroke: white;
}


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

@media (max-width: 1100px) {

    .why-bundle {
        padding: 50px 6%;
    }

    .why-bundle .container {
        gap: 45px;
    }

    .why-bundle .section-title {
        flex-basis: 320px;
        max-width: 320px;
    }

    .why-bundle .section-title h2 {

        font-family:
            "Poppins",
            sans-serif;

        font-size:
            20px;

        font-weight:
            700;

        line-height:
            1.15;

    }

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

}


/* =====================================================
   MOBILE — COMPACT 2-COLUMN UI
===================================================== */

@media (max-width: 767px) {

    .why-bundle {

    padding:
        35px 18px 30px;

}


    .why-bundle .container {

        display:
            block;

        width:
            100%;

        max-width:
            100%;

        margin:
            0;

    }


    /* ---------------------------------------------
       INTRODUCTION
    --------------------------------------------- */

    .why-bundle .section-title {

        width:
            100%;

        max-width:
            100%;

        margin:
            0 0 30px;

        text-align:
            left;

    }


    .why-bundle .section-title h2 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.15;

    margin:
        0 0 14px;

}


    .why-bundle .section-title p {

        font-size:
            12px;

        line-height:
            1.65;

        margin:
            0;

    }


    /* ---------------------------------------------
       COMPACT FEATURE GRID
    --------------------------------------------- */

    .features-grid {

        width:
            100%;

        display:
            grid;

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

        gap:
            14px;

        min-width:
            0;

    }


    /* ---------------------------------------------
       COMPACT FEATURE CARD
    --------------------------------------------- */

    .feature-card {

    width:
        100%;

    min-width:
        0;

    min-height:
        0;

    height:
        auto;

    box-sizing:
        border-box;

    padding:
        16px 12px;

    border-radius:
        16px;

    justify-content:
        flex-start;

}


    /* ---------------------------------------------
       ICON
    --------------------------------------------- */

    .feature-icon {

        width:
            46px;

        height:
            46px;

        min-width:
            46px;

        margin:
            0 auto 12px;

        border-radius:
            14px;

    }


    .feature-icon svg {

        width:
            23px;

        height:
            23px;

    }


    /* ---------------------------------------------
       TITLE
    --------------------------------------------- */

   .feature-card h3 {

    font-size:
        clamp(12px, 3.2vw, 13px);

    line-height:
        1.25;

    margin:
        0 0 7px;

}


    /* ---------------------------------------------
       DESCRIPTION
    --------------------------------------------- */

    .feature-card p {

    font-size:
        clamp(10.5px, 2.9vw, 12px);

    line-height:
        1.4;

    margin:
        0;

}

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 420px) {

    .why-bundle {

    padding:
        20px 11px 25px;

}


    .why-bundle .section-title {

        margin-bottom:
            26px;

    }


    .why-bundle .section-title h2 {

        font-family:
            "Poppins",
            sans-serif;

        font-size:
            15px;
           

        font-weight:
            700;

        line-height:
            1.15;

    }


    .why-bundle .section-title p {

        font-size:
           clamp(10px, 2.9vw, 11px);

        line-height:
            1.65;

    }


    .features-grid {

        gap:
            12px;

    }


   .feature-card {

    height:
        auto;

    padding:
        14px 10px;

    border-radius:
        15px;

}


    .feature-icon {

        width:
            42px;

        height:
            42px;

        min-width:
            42px;

        margin-bottom:
            10px;

        border-radius:
            13px;

    }


    .feature-icon svg {

        width:
            21px;

        height:
            21px;

    }


  .feature-card h3 {

    font-size:
        clamp(9px, 3.1vw, 10px);

    font-weight:
        500;

    line-height:
        1.25;

    margin-bottom:
        6px;

}


  .feature-card p {

    font-size:
        clamp(8px, 2.8vw, 9px);

    line-height:
        1.4;

}

}

/* ==========================================
   WHAT YOU'LL LEARN
========================================== */

.topics-section {

    padding: 50px 8%;

    background: #FFFFFF;

}


/* ==========================================
   TWO COLUMN LAYOUT
========================================== */

.topics-content {

    display: flex;

    align-items: center;

    gap: 70px;

}


.topics-left {

    flex: 1;

    max-width: 430px;

}


.topics-right {

    flex: 1.6;

}


/* ==========================================
   BADGE
========================================== */

.section-badge {

    display: inline-block;

    padding: 8px 18px;

    background: #ECFDF3;

    color: #16A34A;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 18px;

}


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

.topics-left h2 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        32px;

    font-weight:
        700;

    color:
        #0B1F3A;

    line-height:
        1.2;

    margin-bottom:
        20px;

}


/* ==========================================
   DESCRIPTION
========================================== */

.topics-left p {

    font-size: 15px;

    line-height: 1.8;

    color: #475569;

}


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

.topics-grid {

    display: grid;

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

    gap: 20px;

}


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

.topic-card {

    background: #FFFFFF;

    border: 1px solid #E5E7EB;

    border-radius: 20px;

    padding: 28px 20px;

    text-align: center;

    min-height: 150px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 8px 24px rgba(15,23,42,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;

}


.topic-card img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 12px;
}



/* ==========================================
   HOVER
========================================== */

.topic-card:hover {

    transform: translateY(-6px);

    border-color: #16A34A;

    box-shadow:
        0 18px 36px rgba(15,23,42,.10);

}


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

.topic-card:first-child {

    background:
        linear-gradient(
            180deg,
            #F0FDF4 0%,
            #FFFFFF 100%
        );

    border: 2px solid #16A34A;

}


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

.topic-card svg {

    width: 38px;

    height: 38px;

    stroke: #16A34A;

    margin-bottom: 16px;

    flex-shrink: 0;

}


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

.topic-card h3 {

    font-family:
        "Poppins",
        sans-serif;

    min-height:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        16px;

    line-height:
        1.35;

    font-weight:
        700;

    color:
        #0B1F3A;

    margin:
        0;
}


/* ==========================================
   ACCESSIBILITY
========================================== */

.topic-card:focus-within {

    border-color: #16A34A;

    box-shadow:
        0 18px 36px rgba(15,23,42,.10);

}


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

@media (max-width: 1000px) {

    .topics-content {

        gap: 50px;

    }

    .topics-left h2 {

        font-size: 20px;

    }

    .topics-grid {

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

        gap: 18px;

    }

    .topic-card {

        min-height: 170px;

        padding: 24px 18px;

    }

}


/* ==========================================
   MOBILE
   COMPACT 2-COLUMN UI
========================================== */

@media (max-width: 767px) {
    
    .section-badge {
        font-size:
        10px;

       } 

    .topics-section {

    padding:
        35px 12px clamp(28px, 6vw, 42px);

}




    .topics-content {

        display: block;

        width: 100%;

    }


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

    .topics-left {

        width: 100%;

        max-width: 100%;

        text-align: left;

        margin-bottom: 30px;

         transform:
            translateY(-6px);


    }


    .topics-left h2 {

    font-size:
        clamp(17px, 4.6vw, 19px);

    line-height:
        1.15;

    margin-bottom:
        clamp(12px, 3.5vw, 16px);

}


    .topics-left p {

    font-size:
        clamp(11px, 2.9vw, 12px);

    line-height:
        1.6;

}


    /* --------------------------------------
       GRID
    -------------------------------------- */

    .topics-grid {

    width:
        100%;

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

    gap:
        10px;
}


    /* --------------------------------------
       CARDS
    -------------------------------------- */

   .topic-card {

    min-height:
        clamp(108px, 28vw, 125px);

    padding:
        clamp(13px, 3.5vw, 18px)
        clamp(6px, 2vw, 8px);

    border-radius:
        15px;
}


 .topic-card svg {

    width:
        clamp(26px, 7vw, 30px);

    height:
        clamp(26px, 7vw, 30px);

    margin-bottom:
        clamp(7px, 2.5vw, 10px);
}

  .topic-card h3 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(11px, 3.2vw, 12px);

    font-weight:400;

    line-height:
        1.2;

    text-align:
        center;
}

}


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

@media (max-width: 420px) {

.topics-section {
    padding: 30px 16px clamp(24px, 6vw, 32px);
}

    .section-badge {
        font-size: 8px;

    }


    .topics-left h2 {

    font-size:
        clamp(14px, 4.4vw, 15px);

    line-height:
        1.15;

}


    .topics-left p {

    font-size:
        clamp(10px, 2.9vw, 11px);

    line-height:
        1.55;

}


    .topics-grid {

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

        gap:
            8px;

        align-items: stretch;    
    }


   .topic-card {

    box-sizing: border-box;

    min-height: 0;

   padding: clamp(8px, 2.5vw, 10px) clamp(3px, 1vw, 4px);

    border-radius:
        14px;

     justify-content: center;    
}


.topic-card img {

        width: 46px;
        height: 46px;
        object-fit: contain;
        margin: 0 auto 5px;
        flex-shrink: 0;
    }


   .topic-card svg {

    width:
        clamp(24px, 7vw, 27px);

    height:
        clamp(24px, 7vw, 27px);

    margin-bottom:
        clamp(6px, 2.2vw, 8px);
}


    .topic-card h3 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(8px, 2.7vw, 9px);

    font-weight:400;

    line-height:
        1.2;

    margin: 0;
        min-height: 0;    
}


}


/* =========================================================
   ENTREPRENEURIAL VIDEO SECTION
========================================================= */

.hub-video-section {

    padding:
         40px 8% 40px;

    background:
        #FFFFFF;

    border-top:
        1px solid #E5E7EB;

    border-bottom:
        1px solid #E5E7EB;

}


.hub-video-inner{

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

}


.hub-video-label{

    margin-bottom:
        14px;

}


.hub-video-eyebrow {

    display:
        inline-block;

    margin-bottom:
        4px;

    color:
        #16A34A;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}


.hub-video-label h2 {

    margin:
        0 0 4px;

    color:
        #0B1F3A;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1.2;

}


.hub-video-label p{

    margin:
        0;

    color:
        #64748B;

    font-size:
        11px;

    line-height:
        1.5;

}


/* =========================================================
   VIDEO PLAYER
========================================================= */

/* =========================================================
   VIDEO GRID — CAROUSEL TRACK
========================================================= */

.hub-video-viewport{

    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    overflow:
        hidden;

}


.hub-video-grid{

    display:
        flex;

    flex-wrap:
        nowrap;

    gap:
        18px;

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    transform:
        translateX(0);

    transition:
        transform 0.35s ease;

}


.hub-video-card{

    position:
        relative;

    flex:
        0 0 calc(
            (100% - 36px) / 3
        );

    width:
        calc(
            (100% - 36px) / 3
        );

    min-width:
        calc(
            (100% - 36px) / 3
        );

    overflow:
        hidden;

    border:
        1px solid #E2E8F0;

    border-radius:
        16px;

    background:
        #F8FAFC;

    box-shadow:
        0 8px 24px rgba(15,23,42,.055);

}

.hub-video-play{

    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    padding:
        0;

    margin:
        0;

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;

    line-height:
        0;

}


.hub-video-thumbnail{

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.hub-video-play-button{

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

    box-shadow:
        0 7px 22px rgba(0,0,0,.22);

}


.hub-video-play-button svg{

    width:
        23px;

    height:
        23px;

    fill:
        #16A34A;

    stroke:
        #16A34A;

}


.hub-video-placeholder{

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    aspect-ratio:
        16 / 9;

    color:
        #94A3B8;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        13px;

    font-weight:
        600;

}


.hub-video-card iframe{

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    border:
        0;

}



/* =========================================================
   VIDEO NAVIGATION — MOBILE
========================================================= */

.hub-video-navigation{

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin:
        10px auto 0;

}


.hub-video-dots{

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    width:
        auto;

    height:
        7px;

}


.hub-video-dot{

    flex:
        0 0 7px;

    width:
        7px;

    min-width:
        7px;

    max-width:
        7px;

    height:
        7px;

    min-height:
        7px;

    max-height:
        7px;

    padding:
        0;

    margin:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        #CBD5E1;

    box-sizing:
        border-box;

}


.hub-video-dot.active{

    flex:
        0 0 20px;

    width:
        20px;

    min-width:
        20px;

    max-width:
        20px;

    height:
        7px;

    min-height:
        7px;

    max-height:
        7px;

    border-radius:
        999px;

    background:
        #16A34A;

}


.hub-video-nav-button{

    flex:
        0 0 30px;

    width:
        30px;

    min-width:
        30px;

    max-width:
        30px;

    height:
        30px;

    min-height:
        30px;

    max-height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid #E2E8F0;

    border-radius:
        50%;

    background:
        #FFFFFF;

    color:
        #0B1F3A;

    box-sizing:
        border-box;

}


.hub-video-nav-button svg{

    width:
        15px;

    height:
        15px;

}


/* =========================================================
   VIDEO HUB — DESKTOP ARROW POSITIONING
========================================================= */

@media (min-width: 1025px){

    .hub-video-carousel{
        position: relative;
    }

    .hub-video-nav-button{

        position: absolute;

        top: 50%;

        transform:
            translateY(-50%);

        z-index:
            10;

    }

    .hub-video-prev{
        left: -42px;
    }

    .hub-video-next{
        right: -42px;
    }

}


@media (max-width:767px){

    /* =========================================================
       VIDEO SECTION — MOBILE
       ========================================================= */

.hub-video-carousel {
    position: relative;
}
       

.hub-video-section{
    position:relative;
    padding:24px clamp(10px,2.8vw,18px) 28px;
    border-top-color:transparent;
    border-bottom-color:transparent;
}

.hub-video-section::before,
.hub-video-section::after{
    content:"";
    position:absolute;
    left:50%;
    width:82%;
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        to right,
        transparent 0%,
        #E5E7EB 18%,
        #E5E7EB 82%,
        transparent 100%
    );
    pointer-events:none;
}

.hub-video-section::before{
    top:0;
}

.hub-video-section::after{
    bottom:0;
}


.hub-video-label {

    margin-bottom:
        clamp(8px, 2.5vw, 12px);

}


.hub-video-eyebrow {

    margin-bottom:
        clamp(2px, 0.8vw, 3px);

    font-size:
        clamp(8px, 2.4vw, 10px);

}


.hub-video-label h2 {

    margin:
        0 0 clamp(3px, 1vw, 5px);

    font-size:
        clamp(17px, 4.8vw, 19px);

    line-height:
        1.18;

}


.hub-video-label p {

    font-size:
        clamp(10px, 2.8vw, 12px);

    line-height:
        1.45;

}


.hub-video-banner{

    border-radius:
        15px;

}


.hub-video-image{

    width:
        100%;

    height:
        auto;

    object-fit:
        contain;

}

/* =========================================================
   VIDEO HUB — MOBILE SWIPE
========================================================= */

.hub-video-grid{

        display: flex;

        gap: 0;

        width: 100%;

        max-width: none;

        margin: 0;

        overflow: visible;

        transform: translateX(0);

        transition: transform 0.35s ease;

        touch-action: pan-y;

    }



.hub-video-card{

    flex:
        0 0 100%;

    width:
        100%;

    min-width:
        100%;

    border-radius:
        15px;

}


.hub-video-play{

    width:
        100%;

}


.hub-video-play-button{

    width:
        clamp(38px, 10vw, 46px);

    height:
        clamp(38px, 10vw, 46px);

}


.hub-video-play-button svg{

    width:
        clamp(17px, 4.5vw, 21px);

    height:
        clamp(17px, 4.5vw, 21px);

}


.hub-video-navigation {

    margin:
        clamp(10px, 2.8vw, 13px) auto 0;

    gap:
        clamp(10px, 3vw, 14px);

    min-height:
        clamp(26px, 7.5vw, 30px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hub-video-nav-button {

    position:
        absolute;

    top:
        calc(100% + clamp(13px, 3.5vw, 16px));

      width:
        clamp(17px, 4.5vw, 20px);

    height:
        clamp(17px, 4.5vw, 20px);

    min-width:
        clamp(17px, 4.5vw, 20px);

    min-height:
        clamp(17px, 4.5vw, 20px);

    max-width:
        none;

    max-height:
        none;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    z-index:
        5;

}

.hub-video-nav-button svg {

    width:
        clamp(8px, 2.2vw, 9px);

    height:
        clamp(8px, 2.2vw, 9px);

}

.hub-video-dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(4px, 1.5vw, 6px);

    width:
        auto;

    height:
        clamp(6px, 1.8vw, 7px);

}


.hub-video-dot {

    flex:
        0 0 clamp(5px, 1.4vw, 6px);

    width:
        clamp(5px, 1.4vw, 6px);

    min-width:
        clamp(5px, 1.4vw, 6px);

    max-width:
        clamp(5px, 1.4vw, 6px);

    height:
        clamp(5px, 1.4vw, 6px);

    min-height:
        clamp(5px, 1.4vw, 6px);

    max-height:
        clamp(5px, 1.4vw, 6px);

}


.hub-video-dot.active {

    flex:
        0 0 clamp(14px, 4vw, 17px);

    width:
        clamp(14px, 4vw, 17px);

    min-width:
        clamp(14px, 4vw, 17px);

    max-width:
        clamp(14px, 4vw, 17px);

    height:
        clamp(5px, 1.4vw, 6px);

    min-height:
        clamp(5px, 1.4vw, 6px);

    max-height:
        clamp(5px, 1.4vw, 6px);

}


.hub-video-prev {
    left:
        calc(50% - 72px);
}

.hub-video-next {
    right:
        calc(50% - 72px);
}

}


/* =========================================================
   VIDEO HUB — SMALL PHONE TEXT
========================================================= */

@media (max-width:420px){

    .hub-video-section {
        padding:
            24px 9px 28px;
    }

    .hub-video-label {
        margin-bottom:
            clamp(8px, 2.5vw, 10px);
    }

    .hub-video-eyebrow {
        margin-bottom:
            clamp(2px, 0.7vw, 3px);

        font-size:
            clamp(7.5px, 2.2vw, 8.5px);

        letter-spacing:
            clamp(0.8px, 0.25vw, 1px);
    }

    .hub-video-label h2 {
        margin:
            0 0 clamp(3px, 0.9vw, 4px);

        font-size:
            clamp(14px, 4.4vw, 15px);

        line-height:
            1.18;
    }

    .hub-video-label p {
        font-size:
            clamp(9px, 2.6vw, 10px);

        line-height:
            1.4;
    }

}


/* =========================================================
   FEATURED LEARNING MODULES — BASE / DESKTOP
========================================================= */

.featured-modules{

    padding:70px 8% 45px;

    background:#FFFFFF;

}

.featured-modules .section-title-center{

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

    max-width:
        var(--rc2-container);

    margin:
        0 auto;

    box-sizing:
        border-box;

}

.featured-modules .section-title-center h2{

    font-size:30px;
    font-weight:700;
    line-height:1.2;
    font-family:"Poppins", sans-serif;
     margin:
        0 0 14px;

}

.featured-modules .section-title-center p{

    font-family:"Inter", sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:1.7;
    color:#64748B;

}

.featured-carousel{

    position:relative;
    display:flex;
    align-items:center;
    gap:18px;

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

    margin:
        0 auto;

}

.featured-carousel-arrow{

    width:40px;
    height:40px;
    min-width:40px;
    border:none;
    border-radius:50%;
    background:#FFFFFF;
    color:#0B1F3A;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(15,23,42,.10);
    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
    z-index:5;

}

.featured-carousel-arrow svg{

    width:22px;
    height:22px;

}

.featured-carousel-arrow:hover{

    transform:translateY(-2px);
    background:#16A34A;
    color:#FFFFFF;
    box-shadow:0 12px 28px rgba(22,163,74,.20);

}

.featured-grid{

    display:flex;
    gap:30px;
    width:100%;
    max-width:1200px;
    margin:60px auto 0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    padding:10px 4px 20px;
    scrollbar-width:none;

}

.featured-grid::-webkit-scrollbar{

    display:none;

}

.featured-carousel .featured-grid{

    flex:1;
    min-width:0;
    margin-top:0;

}

.module-card{

    background:#FFFFFF;
    border:1px solid #E5E7EB;
    border-radius:20px;
    padding:24px;
    display:flex;
    flex-direction:column;
    min-height:440px;
    flex:0 0 calc((100% - 60px) / 3);
    scroll-snap-align:start;
    box-shadow:0 12px 35px rgba(15,23,42,.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.module-card:hover{

    transform:translateY(-8px);
    border-color:#16A34A;
    box-shadow:0 25px 60px rgba(15,23,42,.12);

}

.module-cover{

    position:relative;
    height:110px;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:15px;
    padding:20px;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(
        135deg,
        #071A34 0%,
        #0B2E6D 45%,
        #16A34A 100%
    );
    transition:.35s;

}

.module-card:hover .module-cover{

    transform:scale(1.02);

}

.module-cover::before{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-120px;
    right:-80px;

}

.module-cover::after{

    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    left:-60px;
    bottom:-70px;

}

.module-cover-content{

    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

}

.module-cover-text{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.module-cover .module-number{

    font-size:8px;
    letter-spacing:1px;
    color:#FFFFFF;
    font-weight:700;

}

.module-cover-text h4{

    margin:0;
    color:#FFFFFF;
    font-size:14px;
    font-weight:700;
    line-height:1.25;

}

.module-cover .preview-badge{

    background:rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
    color:#FFFFFF;
    padding:7px 11px;
    border-radius:999px;
    font-size:7px;
    font-weight:600;

}

.module-ribbon{

    position:absolute;
    top:16px;
    right:-38px;
    padding:8px 44px;
    background:#F59E0B;
    color:#FFFFFF;
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    transform:rotate(35deg);
    z-index:3;

}

.module-card h3{

    font-family:"Poppins", sans-serif;
    font-size:15px;
    color:#0B1F3A;
    line-height:1.2;
    margin-bottom:16px;

}

.module-card p{

    color:#64748B;
    font-size:12px;
    line-height:1.8;
    margin-bottom:24px;

}

.module-footer{

    margin-top:auto;

}

.module-meta{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:24px;
    color:#64748B;
    font-size:10px;

}

.module-button{

    display:block;
    width:100%;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(135deg,#22C55E,#16A34A);
    color:#FFFFFF;
    padding:7px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    transition:all .3s ease;

}

.module-button:hover{

    transform:translateY(-2px);
    background:linear-gradient(135deg,#16A34A,#15803D);
    box-shadow:0 12px 30px rgba(22,163,74,.25);

}

/* =========================================================
   FEATURED MODULES — INDIVIDUAL COLOR THEMES
========================================================= */


/* ---------------------------------------------------------
   MODULE 01 — 500 TIPS FOR STARTUP FOLKS
   CHERRY RED
--------------------------------------------------------- */

.featured-grid .module-card:nth-child(1) .module-cover {

    background:
        linear-gradient(
            135deg,
            #9F1239 0%,
            #BE123C 45%,
            #E11D48 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -18px 30px rgba(76,5,25,.18);

}

.featured-grid .module-card:nth-child(1) .module-button {

    background:
        linear-gradient(
            135deg,
            #BE123C 0%,
            #E11D48 100%
        );

    box-shadow:
        0 8px 20px rgba(190,18,60,.20);

}

.featured-grid .module-card:nth-child(1) .module-button:hover {

    background:
        linear-gradient(
            135deg,
            #9F1239 0%,
            #BE123C 100%
        );

    box-shadow:
        0 12px 30px rgba(190,18,60,.27);

}


/* ---------------------------------------------------------
   MODULE 02 — CONTAGIOUS
   ORANGE MATTE
--------------------------------------------------------- */

.featured-grid .module-card:nth-child(2) .module-cover {

    background:
        linear-gradient(
            135deg,
            #C2410C 0%,
            #EA580C 48%,
            #F97316 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -18px 30px rgba(124,45,18,.16);

}

.featured-grid .module-card:nth-child(2) .module-button {

    background:
        linear-gradient(
            135deg,
            #EA580C 0%,
            #F97316 100%
        );

    box-shadow:
        0 8px 20px rgba(234,88,12,.18);

}

.featured-grid .module-card:nth-child(2) .module-button:hover {

    background:
        linear-gradient(
            135deg,
            #C2410C 0%,
            #EA580C 100%
        );

    box-shadow:
        0 12px 30px rgba(234,88,12,.25);

}


/* ---------------------------------------------------------
   MODULE 03 — PSYCHOLOGY OF SELLING
   LIGHT RED / CORAL
--------------------------------------------------------- */

.featured-grid .module-card:nth-child(3) .module-cover {

    background:
        linear-gradient(
            135deg,
            #BE123C 0%,
            #E11D48 48%,
            #FB7185 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -18px 30px rgba(136,19,55,.14);

}

.featured-grid .module-card:nth-child(3) .module-button {

    background:
        linear-gradient(
            135deg,
            #E11D48 0%,
            #FB7185 100%
        );

    box-shadow:
        0 8px 20px rgba(225,29,72,.18);

}

.featured-grid .module-card:nth-child(3) .module-button:hover {

    background:
        linear-gradient(
            135deg,
            #BE123C 0%,
            #E11D48 100%
        );

    box-shadow:
        0 12px 30px rgba(225,29,72,.25);

}

.featured-footer{

    max-width:900px;
    margin:45px auto 0;
    text-align:center;

}

.featured-footer p{

    font-size:14px;
    line-height:1.8;
    color:#475569;

}

.featured-footer strong{

    color:#16A34A;

}


/* =========================================================
   FEATURED LEARNING MODULES — NORMAL PHONE
   ≤ 767px
========================================================= */

@media (max-width:767px){

    .featured-modules {

    padding:
        clamp(42px, 10vw, 52px)
        14px
        clamp(24px, 6vw, 32px);
    background:#FFFFFF;
}


    .featured-modules .section-badge {

        padding:
            clamp(6px, 1.8vw, 8px)
            clamp(12px, 3.5vw, 16px);

        font-size:
            clamp(8.5px, 2.5vw, 10px);

        letter-spacing:
            clamp(.8px, .25vw, 1px);

        margin-bottom:
            clamp(10px, 3vw, 14px);

        line-height:
            1.2;
    }

    .featured-modules .section-title-center{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    text-align:left;
}


   .featured-modules .section-title-center h2{
    font-size:19px;
    font-weight:700;
    line-height:1.2;
    font-family:"Poppins", sans-serif;
    margin-bottom:clamp(6px,2vw,9px);
}

    .featured-modules .section-title-center p{
        font-family:"Inter", sans-serif;
        font-size:12px;
        font-weight:400;
        line-height:1.6;
        color:#64748B;
    }

    .featured-carousel{
        gap:0;
        width:100%;
    }

    .featured-carousel-arrow{
        display:none;
    }

    .featured-carousel .featured-grid{
        padding-left:0px;
        padding-right:0px;
          width:100%;
    }

    .featured-grid{
        gap:16px;
        padding:8px 4px 18px;
    }

    .featured-modules .featured-carousel .featured-grid{
        margin-top:20px !important;
    }

.featured-grid .module-card{
    flex:0 0 88%;
    min-height:0;
    height:auto;
    padding:22px;
    border-radius:20px;
     display: flex;
    flex-direction: column;
}

    .module-cover{
        height:125px;
        padding:18px;
        margin-bottom:20px;
        border-radius:16px;
    }

    .module-cover-text{
        gap:8px;
    }

    .module-cover-text h4{
        font-size:13px;
        line-height:1.25;
    }

    .module-cover .preview-badge{
        padding:5px 9px;
        font-size:7px;
    }

    .module-card h3{
        font-family:"Poppins", sans-serif;
        font-size:13px;
        line-height:1.2;
        margin-bottom:12px;
    }

    .module-card p{
        font-size:11px;
        line-height:1.6;
        margin-bottom: clamp(24px, 5vw, 30px);
    }

   .featured-grid .module-footer {

    margin-top: auto;
}

    .module-meta{
        gap:10px;
        margin-bottom:16px;
        font-size:10px;
    }

    .module-button{
       padding:
        clamp(11px,3vw,14px);

    font-size:
        clamp(11px,3vw,13px);

    line-height:1.2;

    border-radius:
        clamp(8px,2vw,9px);
    margin-top: auto !important;
}

    .featured-footer{
        margin-top:40px;
    }

    .featured-footer p{
        font-size:12px;
        line-height:1.6;
    }

}


/* =========================================================
   FEATURED LEARNING MODULES — SMALL PHONE
   ≤ 420px
========================================================= */

@media (max-width:420px){

        .featured-modules {
    padding:
        clamp(42px, 10vw, 52px)
        10px
        clamp(24px, 6vw, 32px);
    background:#FFFFFF;
}

    .featured-grid{
        gap:clamp(8px,2.5vw,10px);
        padding-left:2px;
        padding-right:2px;
    }


    /* -----------------------------------------------------
       SECTION BADGE
    ----------------------------------------------------- */

   .featured-modules .section-badge {
    padding:
        8px 18px;

    font-size:
        8px;

    letter-spacing:
        1px;

    line-height:
        1.2;
}


    /* -----------------------------------------------------
       SECTION TITLE
    ----------------------------------------------------- */

    .featured-modules .section-title-center{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    text-align:left;
}

    .featured-modules .section-title-center h2{
        
    font-size:
        clamp(14px,4.2vw,15px);
    line-height:1.2;
    margin-bottom:
        clamp(5px,1.8vw,7px);
}


    /* -----------------------------------------------------
       SECTION DESCRIPTION
    ----------------------------------------------------- */

    .featured-modules .section-title-center p{
        font-size:
            clamp(10px, 2.9vw, 11px);

        line-height:1.5;
        margin-top:0;
    }


    /* -----------------------------------------------------
       MODULE CARD
    ----------------------------------------------------- */

.featured-grid .module-card{
    flex:0 0 86% !important;
    min-height:150px !important;
    height:auto !important;
    padding:14px !important;
    border-radius:clamp(15px,4vw,16px);
}


    .featured-grid .module-cover{
        height:clamp(90px,24vw,95px) !important;
        padding:12px !important;
        margin-bottom:clamp(12px,3.5vw,14px) !important;
        border-radius:clamp(12px,3.5vw,13px);
    }


    .featured-grid .module-cover-text{
        gap:clamp(4px,1.5vw,5px);
    }


    .featured-grid .module-cover-text h4{
        font-size:
            clamp(9px,3.4vw,10px) !important;

        line-height:1.2;
    }


    .featured-grid .module-cover .module-number{
        font-size:
            clamp(6px,2.4vw,7px) !important;
    }


    .featured-grid .module-cover .preview-badge{
        padding:4px 7px;
        font-size:
            clamp(5px,2vw,6px);
    }


    /* -----------------------------------------------------
       MODULE CONTENT
    ----------------------------------------------------- */

    .featured-grid .module-card h3{
        font-size:
            clamp(10px,3.4vw,11px) !important;

        line-height:1.2;
        margin-bottom:
            clamp(7px,2vw,8px);
    }


.featured-grid .module-card p{
    font-size:clamp(8px,2.9vw,9px);
    line-height:1.45;
    margin-bottom: clamp(24px, 5vw, 28px);
}



    .featured-grid .module-footer {
        margin-top:auto;
            
    }


    .featured-grid .module-meta{
        gap:
            clamp(6px,2vw,7px);

        margin-bottom:
            clamp(8px,2.8vw,10px);

        font-size:
            clamp(7px,2.7vw,8px);
    }


    /* -----------------------------------------------------
       READ PREVIEW BUTTON
    ----------------------------------------------------- */

    .featured-grid .module-button{
        padding:
            clamp(8px,2.8vw,10px);

        font-size:
            clamp(8.5px,2.7vw,9.5px);

        line-height:1.2;
        border-radius:
            clamp(7.5px,2.8vw,8.5px);
    }

    .featured-footer{
    margin-top:clamp(24px,7vw,30px);
}

.featured-footer p{
    font-size:clamp(8px,2.9vw,9px);
    line-height:1.5;
    margin:0 auto;
    max-width:clamp(290px,86vw,340px);
}

}

/* =========================================================
   LEARNING TRACKS
========================================================= */

.learning-tracks {

    padding:
        40px 8% 40px;

    background:
        #FFFFFF;

    border-top:
        1px solid #E5E7EB;

}

.learning-tracks .section-title-center{

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

    max-width:
        var(--rc2-container);

    margin:
        0 auto;

    box-sizing:
        border-box;

}


.learning-tracks-eyebrow {

    margin:
        0 0 10px;

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

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        #16A34A;

}


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

.learning-tracks .section-title-center h2 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        30px;

    font-weight:
        700;

    margin-bottom:
        10px;

}

.learning-tracks .section-title-center p {

    margin:
        0;

    max-width:
        100%;

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

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.7;

    color:
        #64748B;

    text-align:
        left;

}



/* =========================================================
   LEARNING TRACKS GRID — DESKTOP
========================================================= */

.learning-tracks-grid {

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

    max-width:
        var(--rc2-container);

    margin:
        60px auto 0;

    display:
        grid;

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

    gap:
        24px;

}


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

.track-card {

    width:
        100%;

    min-width:
        0;

    box-sizing:
        border-box;

    background:
        #FFFFFF;

    border:
        1px solid #E5E7EB;

    border-radius:
        20px;

    padding:
        24px 20px;

    text-align:
        center;

    min-height:
        50px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    cursor:
        pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

}

.track-3d-icon {

    width:
        58px;

    height:
        58px;

    display:
        block;

    object-fit:
        contain;

    flex-shrink:
        0;

    margin:
        0 auto 10px;

}


/* =========================================================
   TRACK CARD — HOVER
========================================================= */

.track-card:hover {

    transform:
        translateY(-8px);

    border-color:
        #16A34A;

    box-shadow:
        0 20px 45px rgba(15,23,42,.10);

}


.track-card svg {

    width:
        42px;

    height:
        42px;

    color:
        #16A34A;

    stroke:
        #16A34A;

    stroke-width:
        2.2;

    margin-bottom:
        18px;

}


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

.track-card h3 {

    width:
        100%;

    margin:
        0 0 14px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        16px;

    font-weight:
        700;

    color:
        #0B1F3A;

    line-height:
        1.3;

    min-height:
        0px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   TRACK DESCRIPTION
========================================================= */

.track-card p {

    margin:
        0;

    font-size:
        14px;

    line-height:
        1.7;

    color:
        #64748B;

}


/* =========================================================
   OPTIONAL TRACK TAG
========================================================= */

.track-tag {

    display:
        inline-block;

    margin-top:
        22px;

    padding:
        8px 16px;

    border-radius:
        999px;

    background:
        #F0FDF4;

    color:
        #15803D;

    font-size:
        13px;

    font-weight:
        600;

    border:
        1px solid #BBF7D0;

}


/* =========================================================
   FIRST CARD HIGHLIGHT
========================================================= */

.track-card:first-child {

    background:
        linear-gradient(
            180deg,
            #F0FDF4 0%,
            #FFFFFF 100%
        );

    border:
        2px solid #16A34A;

}


/* =========================================================
   TABLET
   577px — 992px
========================================================= */

@media (min-width: 768px) and (max-width: 900px) {

    .learning-tracks {

        padding:
            60px 5% 60px;

    }

    .learning-tracks-eyebrow {

        font-size:
            12px;

        margin-bottom:
            9px;

    }


    .learning-tracks .section-title-center h2 {

        font-size:
            30px;

    }

    .learning-tracks .section-title-center p {

        max-width:
            720px;

        font-size:
            15px;

        line-height:
            1.65;

    }


    .learning-tracks-grid {

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

        gap:
            20px;

        margin-top:
            45px;

    }


    .track-card {

        padding:
            28px 18px;

    }


    .track-card svg {

        width:
            38px;

        height:
            38px;

    }


    .track-card h3 {

        font-size:
            17px;

    }


    .track-card p {

        font-size:
            14px;

        line-height:
            1.6;

    }

}


/* =========================================================
   NORMAL MOBILE
   421px — 576px
========================================================= */

@media (min-width: 421px) and (max-width: 767px) {

 .learning-tracks {
    padding:
        clamp(34px, 9vw, 42px)
        24px
        clamp(28px, 7vw, 36px);
}

    .learning-tracks-eyebrow {

        font-size:
            10px;

        margin-bottom:
            8px;

        letter-spacing:
            .07em;

    }


    .learning-tracks .section-title-center {

    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    text-align:left;
}

    .learning-tracks .section-title-center h2 {

        font-size:
            19px;

        line-height:
            1.2;

        margin-bottom:
            10px;

    }

    .learning-tracks .section-title-center p {

        max-width:
            100%;

        font-size:
            12px;

        line-height:
            1.6;

    }


.learning-tracks-grid {

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

    column-gap:
        18px;

    row-gap:
        16px;

    width:
        calc(100% - 24px);

    margin:
        30px auto 0;

}


     .track-card {

    height:
        140px;

    min-height:
        140px;

    padding:
        12px 10px;

    border-radius:
        18px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}

.track-3d-icon {

    width:
        46px;

    height:
        46px;

    margin-bottom:
        7px;

}


    .track-card i {

        width:
            38px;

        height:
            38px;

        margin-bottom:
            7px;

        border-radius:
            12px;

    }


    .track-card svg {

        width:
            22px;

        height:
            22px;

    }


    .track-card h3 {

        font-size:
            clamp(12px, 2.7vw, 13px);

        font-weight:
            500;

        line-height:
            1.2;

        margin:
            0 0 5px;

        min-height:
            0;

        text-align:
            center;

    }


    .track-card p {

        font-size:
            11px;

        line-height:
            1.3;

        margin:
            0;

        text-align:
            center;

    }


    .track-tag {

        margin-top:
            18px;

        padding:
            7px 13px;

        font-size:
            12px;

    }

}


/* =========================================================
   SMALL MOBILE
   420px AND BELOW
========================================================= */

@media (max-width: 420px) {

.learning-tracks {

    padding:
        clamp(28px, 8vw, 34px)
        8px
        clamp(24px, 7vw, 30px);
}

  .learning-tracks .section-badge {
        margin-bottom: 8px;
    }

    .learning-tracks-eyebrow {

        font-size:
            8px;

        margin-bottom:
            7px;

        letter-spacing:
            .06em;

    }

    .learning-tracks .section-title-center {

    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    text-align:left;
}


    .learning-tracks .section-title-center h2 {

        font-size:
            16px;

        line-height:
            1.2;

        margin-bottom:
            8px;

    }


    .learning-tracks .section-title-center p {

        max-width:
            100%;

        font-size:
           clamp(10px, 2.9vw, 11px);

        line-height:
            1.58;

    }


.learning-tracks-grid {

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

    column-gap:
        18px;

    row-gap:
        16px;

    width:
        calc(100% - 16px);

    margin:
        26px auto 0;

}


    .track-card {

    height:
        114px;

    min-height:
        114px;

    padding:
        8px 7px;

    border-radius:
        16px;

    box-sizing:
        border-box;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}


   .track-3d-icon {

    width:
        40px;

    height:
        40px;

    margin-bottom:
        5px;

}


    .track-card svg {

        width:
            20px;

        height:
            20px;

    }


    .track-card h3 {

        font-size:
            clamp(10px, 2.7vw, 11px);

        font-weight:
            500;

        line-height:
            1.2;

        margin:
            0 0 5px;

        min-height:
            0;

        text-align:
            center;

    }


    .track-card p {

        font-size:
            clamp(9px, 2.7vw, 10px);

        line-height:
            1.3;

        margin:
            0;

        text-align:
            center;

    }

    .track-tag {

        margin-top:
            18px;

        padding:
            7px 13px;

        font-size:
            12px;

    }

}

/* =====================================================
   MISSION / ABOUT SECTION
===================================================== */

.mission-section {

    padding:
        116px 0 100px;

    background:
        #FFFFFF;

}


/* =====================================================
   ABOUT SECTION CONTAINER
===================================================== */

.mission-section > .container {

    width:
        min(100%, 1200px);

    max-width:
        1200px;

    margin:
        0 auto;

    display:
        block;

}


/* =====================================================
   OUR VISION INTRO
===================================================== */

.mission-section .section-header {

    width:
        100%;

    max-width:
        820px;

    margin:
        0 auto;

    text-align:
        center;

}


.mission-section .section-badge {

    display:
        inline-block;

    padding:
        8px 18px;

    border-radius:
        999px;

    background:
        #ECFDF3;

    color:
        #16A34A;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    margin-bottom:
        20px;

}


.mission-section h2 {

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        30px;

    font-weight:
        800;

    line-height:
        1.2;

    color:
        #0B1F3A;

    margin:
        0 0 22px;

}


.mission-section h2 span {

    color:
        #16A34A;

}


.mission-section .section-description {

    max-width:
        720px;

    margin:
        0 auto;

    font-size:
        15px;

    line-height:
        1.9;

    color:
        #64748B;

}


/* =====================================================
   CONTENT
===================================================== */

.mission-content {

    width:
        100%;

    display:
        grid;

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

    gap:
        70px;

    align-items:
        start;

    margin-top:
        80px;

}


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

.mission-profile {

    text-align:
        center;

    position:
        static;

    top:
        120px;

}


.profile-image {

    width:
        210px;

    height:
        210px;

    margin:
        0 auto 26px;

    border-radius:
        50%;

    overflow:
        hidden;

    border:
        6px solid #FFFFFF;

    box-shadow:
        0 18px 40px rgba(15,23,42,.11),
        0 0 0 6px #ECFDF3;

}

.profile-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.mission-profile h3{

    font-size:13px;

    color:#0B1F3A;

    font-weight:700;

    margin-bottom:8px;

}

.profile-role{

    font-size:12px;

    color:#64748B;

    line-height:1.8;

}


/* =====================================================
   MESSAGE
===================================================== */

.mission-main{

    width:100%;

}

.mission-message{

    font-size:14px;

    color:#475569;

    line-height:1.95;

}

.mission-message p{

    margin-bottom:24px;

}

.mission-message strong{

    color:#0B1F3A;

}


/* =====================================================
   QUOTE
===================================================== */

.mission-message blockquote {

    margin:
        42px 0;

    padding:
        28px 34px;

    background:
        linear-gradient(
            135deg,
            #F0FDF4 0%,
            #FFFFFF 100%
        );

    border-left:
        5px solid #16A34A;

    border-radius:
        18px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

    font-size:
        22px;

    line-height:
        1.5;

    font-style:
        italic;

    font-weight:
        700;

    color:
        #0B1F3A;
}


/* =====================================================
   VISION • MISSION • PROMISE
===================================================== */

.mission-values {

    grid-column:
        1 / -1;

    display:
        grid;

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

    gap:
        28px;

    margin-top:
        -13px;

}

.value-card {

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FFFB 100%
        );

    border:
        1px solid #E5E7EB;

    border-top:
        4px solid #16A34A;

    border-radius:
        22px;

    padding:
        32px 28px;

    text-align:
        center;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);

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

}

.value-card:hover{

    transform:translateY(-8px);

    border-color:#16A34A;

    box-shadow:0 22px 50px rgba(15,23,42,.10);

}

.value-icon{

    width:72px;

    height:72px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#ECFDF3;

    display:flex;

    align-items:center;

    justify-content:center;

}

.value-icon svg{

    width:34px;

    height:34px;

    stroke:#16A34A;

    stroke-width:2.2;

}

.value-card h3{

    font-family:
        "Poppins",
        sans-serif;

    font-size:18px;

    font-weight:700;

    color:#0B1F3A;

    margin-bottom:8px;

}

.value-card p{

    font-size:15px;

    color:#64748B;

    line-height:1.8;

    margin:0;

}


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

@media (max-width: 992px) {

    .mission-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mission-profile {
        position: static;
    }

    .mission-values {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .mission-message blockquote {
        font-size: 24px;
        padding: 24px;
    }

}


/* =====================================================
   NORMAL MOBILE
   421px – 767px
===================================================== */

@media (min-width:421px) and (max-width:767px) {

   .mission-section {
    padding: 80px 16px 90px;
}

    .mission-section > .container {
        width: 100%;
        max-width: 1200px;
    }


    .mission-section h2 {
        font-size: 25px;
    }

    .mission-section .section-description {
        font-size: 15px;
    }

    .profile-image {
        width: 180px;
        height: 180px;
    }

    .mission-profile h3 {
        font-size: 15px;
    }

    .mission-message {
        font-size: 14px;
    }

}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    .mission-values,
    .mission-values .value-card {
        transition: none !important;
        animation: none !important;
    }

}

/* ------------------------------------------
       MOBILE COVER-FLOW
------------------------------------------ */

@media (max-width: 767px) {

     .mission-values {
        position: relative;
        display: block;
        height: 360px;
        padding: 20px 0 30px;
        overflow: hidden;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        perspective: 1000px;

        transition:
            opacity 650ms ease,
            transform 650ms ease;
    }

    .mission-values .value-card {
        position: absolute;
        top: 20px;
        left: 50% !important;
        width: 78%;
        margin: 0 !important;
        box-sizing: border-box;

        transform: translateX(-50%) scale(.92);
        opacity: .65;

        transition:
            transform .55s cubic-bezier(.22,.61,.36,1),
            opacity .55s ease,
            box-shadow .55s ease;
    }


    /* LEFT CARD */

    .mission-values .value-card.mvc-left {
        left: 50% !important;
        transform: translateX(-88%) scale(.92) rotateY(8deg);
        opacity: .65;
        z-index: 1;
    }


    /* CENTRE CARD */

   .mission-values .value-card.mvc-center {
        left: 50% !important;
        transform: translateX(-50%) scale(1.05);
        opacity: 1;
        z-index: 3;
        box-shadow: 0 24px 55px rgba(15,23,42,.18);
    }


    /* RIGHT CARD */

     .mission-values .value-card.mvc-right {
        left: 50% !important;
        transform: translateX(-12%) scale(.92) rotateY(-8deg);
        opacity: .65;
        z-index: 1;
    }

       .mission-values.mvc-reveal-pending {
        opacity: 0;
        transform: translateY(18px);
    }

      .mission-values.mvc-reveal-visible {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   SMALL MOBILE
   420px AND BELOW
===================================================== */

@media (max-width: 420px) {

   .mission-section {
    padding: 80px 6% 48px;
    box-sizing: border-box;
}

.mission-content {
    margin-top: 45px;
}


.mission-section .section-header {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}


.mission-section .section-badge {
    padding: 7px 16px;
    margin-bottom: 15px;
    font-size: 10px;
    letter-spacing: 0.9px;
}


.mission-section h2 {
    margin: 0 0 18px;
    font-size: clamp(20px, 7.2vw, 24px);
    line-height: 1.16;
    letter-spacing: -0.6px;
}


.mission-section .section-description {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.7;
}

 .mission-profile h3 {
        font-size: 15px;
    }

    .mission-message {
        font-size: 13px;
    }

.mission-message blockquote {
    margin: 22px 0;
    padding: 20px 18px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.35px;
}



.mission-values .value-card {
    width: 72%;
    height: 235px;
    min-height: 235px;
    box-sizing: border-box;
    padding: 17px 15px;
}

.mission-values .value-card h3{

    font-family:
        "Poppins",
        sans-serif;

    font-size:16px;

    font-weight:700;

    color:#0B1F3A;

    margin-bottom:7px;

}

.mission-values .value-card p {
    font-size: 12px;
    line-height: 1.4;
}


}

/* ==========================================
   PRICING SECTION
========================================== */

.pricing-section{

    padding:80px 0;

    background:#F8FAFC;

}

.pricing-wrapper{

    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:70px;

    align-items:start;

}

@media(max-width:992px){

    .pricing-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }

}


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

.pricing-section .section-header{

    text-align:left;

    max-width:560px;

}

.pricing-section .section-header h2{

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

     font-size:30px;

    line-height:1.18;

    margin-bottom:16px;

}

.pricing-section .section-header p {

    max-width:500px;

    font-size:15px;

    line-height:1.7;

    color:#64748B;

}

/* ==========================================
   PRICING — SECTION LABEL
========================================== */

.pricing-section .section-label{

    display:inline-block;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

    color:#16A34A;

    margin-bottom:10px;

}


/* ==========================================
   VALUE HIGHLIGHTS
========================================== */

.pricing-highlights{

    margin:26px 0 14px;

}

.highlight-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    font-size:13px;

    font-weight:500;

    color:#374151;

    line-height:1.5;

}

.highlight-item span{

    color:#16A34A;

    font-size:17px;

    font-weight:700;

    flex-shrink:0;

    margin-top:2px;

}


/* ==========================================
   VALUE STATEMENT
========================================== */

.value-statement{

    margin-top:30px;

}

.value-statement h4{

    color:#16A34A;

    font-size:1.rem;

    margin-bottom:8px;

}

.value-statement p{

     font-size:15px;

    color:#64748B;

    line-height:1.8;

}


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

.pricing-card {

    max-width:400px;

    width:100%;

    margin: 2px 0 0;
    left: 0;
    top: 0;

    background:#FFFFFF;

    border-radius:20px;

    padding:20px 28px;

    text-align:center;

    border:2px solid #22C55E;

    box-shadow:0 18px 45px rgba(15,23,42,.10);

    position:relative;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

    transform: translate(90px, -18px);

}


.pricing-card:hover {
    transform: translate(90px, -22px);
    box-shadow: 0 24px 55px rgba(15,23,42,.13);
}



/* ==========================================
   BADGE
========================================== */

.pricing-badge{

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    background:linear-gradient(135deg,#22C55E,#16A34A);

    color:#FFFFFF;

    padding:7px 20px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.6px;

}


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

.pricing-card h3{

    margin-top:14px;

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

    font-size:1.2rem;

    font-weight:700;

    line-height:1.35;
}


/* ==========================================
   PRICE
========================================== */

.price{

    margin: 8px 0 3px;

}

.currency{

    font-size:1.7rem;

    font-weight:700;

    vertical-align:top;

    color:#0B1F3A;

}

.amount{

    font-size:3.5rem;

    font-weight:800;

    color:#16A34A;

    line-height:1;

}

.price-note{

    font-size:.70rem;

    color:#64748B;

    margin-bottom:10px;

    font-weight:500;

}


/* ==========================================
   FEATURES
========================================== */

.pricing-features {

    list-style:none;

    padding:0;

    margin:0 0 10px;

    text-align:left;

}

.pricing-features li {

    display:flex;

    align-items:center;

    gap:8px;

    padding:4px 0;

    border-bottom:1px solid #EDF2F7;

    font-size:10px;

    line-height:1.25;

    color:#374151;

}


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

#pricingButton {

    width:100%;

    background:linear-gradient(135deg,#22C55E,#16A34A);

    color:#FFFFFF;

    border:none;

    padding: 10px 13px;

    font-size:.95rem;

    font-weight:700;

    border-radius:10px;

    cursor:pointer;

    box-shadow:0 14px 35px rgba(22,163,74,.28);

    transition:all .3s ease;

}

#pricingButton:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 45px rgba(22,163,74,.35);

}

#pricingButton:active{

    transform:translateY(0);

}


/* ==========================================
   PAYMENT NOTE
========================================== */

.secure-payment{

    margin-top:7px;

    color:#64748B;

    font-size:.50rem;

}


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

.trust-grid{

    display:grid;

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

    gap:5px;

    margin-top:8px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:4px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:6px;

    padding:3px 5px;

    transition:all .3s ease;

}

.trust-item:hover{

    border-color:#22C55E;

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(15,23,42,.08);

}

.trust-icon{

    width:19px;

    height:19px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ECFDF5;

    font-size:9px;

    flex-shrink:0;

}

.trust-item span{

    font-size:.55rem;

    line-height:1.15;

    font-weight:600;

    color:#374151;

}

.small-phone-break {
    display: none;
}


/* ==========================================
   NORMAL MOBILE
   421px – 767px
========================================== */

@media (min-width:421px) and (max-width:767px) {

 .pricing-section {
    padding:
        clamp(20px, 5vw, 28px)
        0
        clamp(30px, 6vw, 40px);
}

    .pricing-section .section-header h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 19px;
    }

    .pricing-section .section-header p {
        font-size: 12px;
    }

      .pricing-card {
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
        padding: 40px 28px;
        margin: 2px auto 0;
        left: auto;
        top: auto;
         transform: translateY(-12px);
        
    }

   .pricing-card h3 {
    margin-top: -8px;
    margin-bottom: clamp(3px, 1vw, 5px);
    font-size: clamp(.95rem, 4.5vw, 1.1rem);
    line-height: 1.2;
}

 .pricing-card:hover,
.pricing-card:active {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

    .amount {
        font-size: 4rem;
    }

    .price-note{
    font-size:
        clamp(.42rem,2.8vw,.46rem);

}

}


/* ==========================================
   SMALL MOBILE
   420px AND BELOW
========================================== */

@media (max-width: 420px) {


     .pricing-section {
        padding:
            clamp(20px, 5vw, 24px)
            0
            clamp(38px, 10vw, 46px);
    }


.pricing-section .section-label{
    font-size:clamp(8px,2.6vw,9px);
    letter-spacing:clamp(1px,.3vw,1.2px);
    margin-bottom:clamp(7px,2vw,9px);
}


    .pricing-section .section-header h2 {
    font-family:'Poppins', sans-serif;
    font-size:clamp(15px,4.2vw,16px);
    line-height:1.2;
    margin-bottom:clamp(7px,2vw,9px);
}

.pricing-section .section-header p {
    font-size:clamp(10px, 2.9vw, 11px);
    line-height:1.6;
}

/* -----------------------------------------------------
   VALUE HIGHLIGHTS — SMALL PHONE
----------------------------------------------------- */

.pricing-highlights{
    margin:
        clamp(20px,5.5vw,24px)
        0
        clamp(10px,3vw,14px);
}

.highlight-item{
    gap:
        clamp(7px,2.2vw,9px);

    margin-bottom:
        clamp(11px,3.2vw,14px);

    font-size:
        clamp(8px,3.1vw,9px);

    font-weight:500;

    line-height:1.45;
}

.highlight-item span{
    font-size:
        clamp(14px,4.8vw,15px);

    margin-top:
        clamp(1px,.5vw,2px);
}

/* -----------------------------------------------------
   VALUE STATEMENT — SMALL PHONE
----------------------------------------------------- */

.value-statement{
    margin-top:
        clamp(22px,6vw,28px);
}

.value-statement h4{
    font-size:
        clamp(12px,4vw,13px);

    line-height:1.25;

    margin-bottom:
        clamp(5px,1.8vw,7px);
}

.value-statement p{
    font-size:
        clamp(10px, 2.9vw, 11px);

    line-height:1.55;
}


     .pricing-card {
        width: 100%;
        max-width: 400px;
        box-sizing: border-box;
        margin: 2px auto 0;
        padding:
            clamp(18px, 5vw, 22px)
            clamp(14px, 4.5vw, 18px);
        left: auto;
        top: auto;
        transform: translateY(-12px);
        border-radius: clamp(16px, 4.5vw, 18px);
    }


.pricing-card:hover,
.pricing-card:active {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


   .pricing-badge{
    top:
        clamp(-14px,-3.5vw,-12px);

    padding:
        clamp(5px,1.7vw,6px)
        clamp(14px,4vw,18px);

    font-size:
        clamp(9px,2.6vw,10px);

    letter-spacing:
        clamp(.4px,.15vw,.6px);

    line-height:1.2;
}

    .pricing-card h3{
    margin-top:clamp(2px,0.8vw,4px);
    margin-bottom:clamp(3px,1vw,5px);
    font-size:clamp(.95rem,4.5vw,1.1rem);
    line-height:1.2;
}

.small-phone-break {
    display: initial;
}

    .price{
    margin:
        clamp(8px,2.5vw,10px)
        0
        clamp(2px,0.8vw,4px);
}

.currency{
    font-size:
        clamp(1.45rem,6vw,1.75rem);

    font-weight:700;
}

.amount{
    font-size:
        clamp(2.7rem,14vw,3.4rem);

    font-weight:700;
    line-height:1;
}

.price-note{
    font-size:
        clamp(.42rem,2.8vw,.46rem);

    margin-bottom:
        clamp(8px,2.5vw,10px);

    font-weight:500;
}

    .pricing-features {
        margin-bottom: 9px;
    }

   .pricing-features li {
    padding: 4px 0;
    font-size: clamp(9.5px, 2.9vw, 10.5px);
    line-height: 1.25;
}

 #pricingButton {
    padding:
        clamp(9px,2.7vw,11px)
        clamp(10px,3vw,12px);

    font-size:
        clamp(.84rem,3.3vw,.94rem);

    line-height:1.2;

    border-radius:
        clamp(9px,2.6vw,11px);
}

.secure-payment{
    margin-top:clamp(4px,1.3vw,6px);
    margin-bottom:0;
    font-size:clamp(.46rem,1.8vw,.52rem);
    line-height:1.2;
    opacity:.8;
}

   .pricing-card .trust-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(8px,1.2vw,5px);
    margin-top:clamp(5px,1.7vw,7px);
}

.pricing-card .trust-item{
    gap:clamp(2px,1vw,3px);
    padding:4px 5px;
    border-radius:clamp(5px,1.7vw,6px);
    width:100%;
    min-width:0;
    box-sizing:border-box;
}

.trust-icon{
    width:clamp(18px,5vw,21px);
    height:clamp(18px,5vw,21px);
    font-size:clamp(8px,2.3vw,9px);
}

.trust-item span{
    font-size:clamp(.50rem,1.8vw,.58rem);
    line-height:1.1;
}

}

/* ==========================================
   FINAL CTA — PREMIUM VERSION
========================================== */

.final-cta {
    position: relative;
    padding: 88px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 50%, rgba(59, 130, 246, 0.22), transparent 38%),
        radial-gradient(circle at 82% 50%, rgba(34, 197, 94, 0.16), transparent 34%),
        linear-gradient(135deg, #0b1230 0%, #111d5c 48%, #172c9b 100%);
    color: #fff;
}

/* Subtle background glow */
.final-cta::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -220px;
    left: -120px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.12);
    filter: blur(80px);
    pointer-events: none;
}

/* Subtle green glow */
.final-cta::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    bottom: -220px;
    right: -100px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.10);
    filter: blur(80px);
    pointer-events: none;
}


/* Main layout */

.final-cta .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.final-cta-content {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 70px;
}


/* Left side */

.final-cta-text {
    text-align: left;
}

.final-cta-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #4ade80;
}

.final-cta h2 {
    margin: 0;

    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1.5px;

    color: #ffffff;
}


/* Right side */

.final-cta-action {
    text-align: left;
}

.final-cta p {
    max-width: 540px;
    margin: 0 0 28px;

    font-size: .90rem;
    line-height: 1.75;

    color: rgba(255, 255, 255, 0.82);
}


/* CTA Button */

#finalCTAButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 220px;

    padding: 17px 30px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #22C55E,
        #16A34A
    );

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 800;

    letter-spacing: 0.2px;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(22, 163, 74, 0.32);

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

#finalCTAButton span {
    font-size: 1.25rem;
    line-height: 1;

    transition: transform 0.3s ease;
}

#finalCTAButton:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(22, 163, 74, 0.42);

    filter: brightness(1.05);
}

#finalCTAButton:hover span {
    transform: translateX(4px);
}

#finalCTAButton:active {
    transform: translateY(-1px);
}


/* Small reassurance line */

.final-cta-note {
    margin-top: 16px;

    font-size: 0.72rem;
    font-weight: 500;

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


/* ==========================================
   FINAL CTA — TABLET
========================================== */

@media (max-width: 850px) {

    .final-cta {
        padding: 75px 20px;
    }

    .final-cta-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .final-cta-text,
    .final-cta-action {
        text-align: center;
    }

    .final-cta p {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================
   FINAL CTA — MOBILE
========================================== */

@media (min-width:421px) and (max-width:767px) {

    .final-cta {
        padding: 65px 20px;
    }

    .final-cta-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
        margin-bottom: 14px;
    }

    .final-cta h2 {
        font-size: 1.875rem;
        line-height: 1.12;
        letter-spacing: -0.8px;
    }

    .final-cta p {
        font-size: 0.90rem;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    #finalCTAButton {
        width: 100%;
        max-width: 320px;
        padding: 17px 24px;
        font-size: 1rem;
    }

    .final-cta-note {
        font-size: 0.72rem;
    }
}

/* ==========================================
   FINAL CTA — SMALL PHONE
   Compact two-line version
========================================== */

@media (max-width:420px){

   .final-cta{
    padding:
        clamp(30px,8vw,38px)
        18px;
}


    .final-cta-eyebrow{
    margin-bottom:clamp(7px,2vw,9px);

    font-size:clamp(0.56rem,2.2vw,0.62rem);

    letter-spacing:clamp(1px,0.35vw,1.3px);

    line-height:1.2;
}


    .final-cta h2{
    margin:0 auto;
    width:100%;
    max-width:none;

    font-size:clamp(1.50rem,7vw,1.70rem);
    line-height:1.08;
    letter-spacing:clamp(-.8px,-.18vw,-.7px);

    white-space:normal;
}


    .final-cta p{
    max-width:clamp(290px,86vw,340px);

    margin:
        clamp(14px,4vw,18px)
        auto
        clamp(14px,4vw,18px);

    font-size:clamp(0.75rem,3.1vw,0.85rem);

    line-height:1.5;
}


   #finalCTAButton{
    width:100%;
     max-width:clamp(220px,68vw,260px);

    padding:
        clamp(9px,2.8vw,11px)
        clamp(14px,4.5vw,18px);

    font-size:clamp(.82rem,3.2vw,.9rem);

    line-height:1.2;

    border-radius:clamp(9px,2.8vw,11px);
}


#finalCTAButton span{
    font-size:clamp(1rem,4.2vw,1.2rem);
    line-height:1;
}


    .final-cta-note{
    margin-top:clamp(6px,2vw,9px);

    font-size:clamp(0.52rem,2vw,0.62rem);

    line-height:1.2;
    font-weight:500;

    color:rgba(255,255,255,0.48);
}

}

/* ==========================================
   SUPPORT SECTION
========================================== */

.support-section{

    padding:80px 20px;

    background:#F5F8FC;

}

.support-box{

    max-width:1100px;

    margin:auto;

    background:#ffffff;

    border-radius:18px;

    padding:50px;

    text-align:center;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

.support-box h2{

    color:#0B2E6D;

    margin-bottom:15px;

}

.support-box p{

    color:#555;

    line-height:1.8;

}

.support-details{

    display:flex;

    justify-content:space-between;

    gap:25px;

    margin:45px 0;

    flex-wrap:wrap;

}

.support-item{

    flex:1;

    min-width:220px;

    background:#F8FAFC;

    border-radius:12px;

    padding:25px;

}

.support-item h4{

    color:#0B2E6D;

    margin-bottom:10px;

}

/* ==========================================
   FOOTER
========================================== */

.site-footer {

    background: #0f172a;

    color: #ffffff;

    padding: 52px 0 0;

}


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

.footer-grid {

    display: grid;

    grid-template-columns: 2.1fr 1fr 1.1fr 1fr;

    gap: 55px;

    align-items: start;

}


/* ==========================================
   FOOTER HEADINGS
========================================== */

.footer-column h3,
.footer-column h4 {

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

    margin: 0 0 18px;

    color: #ffffff;

}

.footer-column h3 {

    font-size: 1.15rem;

    font-weight: 700;

    letter-spacing: .2px;

}

.footer-column h4 {

    font-size: 1rem;

    font-weight: 700;

}


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

.footer-column p {

    max-width: 390px;

    margin: 0 0 18px;

    color: #cbd5e1;

    font-size: .9rem;

    line-height: 1.75;

}


/* ==========================================
   FOOTER LINKS
========================================== */

.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-column li {

    margin-bottom: 10px;

}

.footer-column a {

    color: #cbd5e1;

    font-size: .9rem;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

    display: inline-block;

}

.footer-column a:hover {

    color: #22C55E;

    transform: translateX(3px);

}


/* ==========================================
   CONTACT
========================================== */

.footer-column strong {

    color: #ffffff;

    font-weight: 600;

}


/* ==========================================
   FOOTER BOTTOM
========================================== */

.footer-bottom {

    margin-top: 36px;

    border-top: 1px solid rgba(255, 255, 255, .10);

    text-align: center;

    padding: 18px 20px;

    color: #94a3b8;

}

.footer-bottom p {

    margin: 0;

    font-size: .78rem;

    line-height: 1.5;

}

.footer-bottom strong {

    color: #cbd5e1;

    font-weight: 600;

}


/* ==========================================
   FOOTER — NORMAL PHONE
   max-width:768px
========================================== */

@media (max-width:767px){

    .site-footer{

        padding-top:40px;

    }


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

    .footer-grid{

        display:grid;

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

        gap:18px 24px;

        text-align:left;

    }


    /* ==========================================
       BRAND — FULL WIDTH
    ========================================== */

    .footer-column:first-child{

        grid-column:1 / -1;

        text-align:center;

        margin-bottom:2px;

    }

    .footer-column:first-child h3{

        margin-bottom:11px;

        font-size:1.1rem;

    }

    .footer-column:first-child p{

        max-width:100%;

        margin-bottom:4px;

        font-size:.86rem;

        line-height:1.55;

    }


    /* ==========================================
       FOOTER HEADINGS
    ========================================== */

    .footer-column h3,
    .footer-column h4{

        margin-bottom:10px;

    }

    .footer-column h4{

        font-size:.95rem;

    }


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

    .footer-column p{

        max-width:100%;

        margin-bottom:9px;

        font-size:.86rem;

        line-height:1.55;

    }


    /* ==========================================
       FOOTER LINKS
    ========================================== */

    .footer-column li{

        margin-bottom:6px;

    }

    .footer-column a{

        font-size:.86rem;

    }


    /* ==========================================
   CONTACT — CENTERED
========================================== */

.footer-column:last-child{

    grid-column:1 / -1;

    display:block;

    width:100%;

    text-align:center;

    margin-top:2px;

}

.footer-column:last-child h4{

    text-align:center;

    margin-bottom:10px;

}

.footer-column:last-child p{

    width:100%;

    margin:0;

    text-align:center;

    font-size:.78rem;

    line-height:1.5;

}


    /* ==========================================
       SUPPORT HOURS — HIDDEN ON MOBILE
    ========================================== */

    .footer-support-hours{

        display:none;

    }


    /* ==========================================
       FOOTER BOTTOM
    ========================================== */

    .footer-bottom{

        margin-top:20px;

        padding:15px 20px;

    }

    .footer-bottom p{

        font-size:.72rem;

        line-height:1.4;

    }

}


/* ==========================================
   FOOTER — SMALL PHONE
   max-width:420px
========================================== */

@media (max-width:420px){

   .site-footer{
    padding-top:clamp(30px,8vw,40px);
}


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

   .footer-grid{
    gap:
        clamp(16px,5vw,22px)
        clamp(12px,4vw,16px);
}


    /* ==========================================
       BRAND
    ========================================== */

    .footer-column:first-child h3{
    font-size:clamp(.92rem,3.8vw,1rem);
    line-height:1.2;
    margin-bottom:clamp(8px,2.5vw,11px);
}

.footer-column:first-child p{
    font-size:clamp(.74rem,3vw,.82rem);
    line-height:1.5;
    margin-bottom:4px;
}


    /* ==========================================
       FOOTER HEADINGS
    ========================================== */

   .footer-column h4{
    font-size:clamp(.82rem,3.2vw,.9rem);
    line-height:1.2;
    margin-bottom:clamp(8px,2.5vw,11px);
}


    /* ==========================================
       FOOTER LINKS
    ========================================== */

    .footer-column li{
    margin-bottom:clamp(4px,1.5vw,6px);
}

.footer-column a{
    font-size:clamp(.76rem,2.9vw,.84rem);
    line-height:1.3;
}


    /* ==========================================
       CONTACT — CENTERED
    ========================================== */

   .footer-column:last-child{
    display:block;
    grid-column:1 / -1;
    width:100%;
    text-align:center;
    margin-top:clamp(0px,.8vw,2px);
}

.footer-column:last-child h4{
    text-align:center;
    margin-bottom:clamp(7px,2.2vw,10px);
}

.footer-column:last-child p{
    width:100%;
    margin:0;
    text-align:center;
    font-size:clamp(.74rem,2.9vw,.82rem);
    line-height:1.45;
}


    /* ==========================================
       FOOTER BOTTOM
    ========================================== */

   .footer-bottom{
    margin-top:clamp(18px,5vw,26px);
    padding:
        clamp(12px,3.5vw,16px)
        15px;
}

.footer-bottom p{
    font-size:clamp(.60rem,2.4vw,.68rem);
    line-height:1.4;
}

}

/* ==========================================
   SAMRAMBA RC2
   MOBILE NAVIGATION
========================================== */

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #0B1F3A;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mobile-menu-toggle svg {
    width: 23px;
    height: 23px;
}

.mobile-menu {
    display: none;
}


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

@media (max-width: 900px) {

    .site-header {
        padding: 12px 18px;
    }

    .header-inner {
        width: 100%;
    }

    .logo {
        height: 52px;
        width: auto;
    }

    .desktop-nav,
    .site-header .nav-btn {
        display: none;
    }

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

    .mobile-menu {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        z-index: 9998;

        padding: 20px 22px;

        transform: translateX(100%);
        transition: transform 0.3s ease;

        display: block;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 24px;

        border-bottom: 1px solid #E2E8F0;
    }

    .mobile-menu-header span {
        font-family: "Poppins", sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #0B1F3A;
    }

    .mobile-menu-close {
        width: 44px;
        height: 44px;

        border: 1px solid #E2E8F0;
        border-radius: 12px;

        background: #FFFFFF;
        color: #0B1F3A;

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

        cursor: pointer;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;

        padding-top: 22px;
    }

    .mobile-nav a {
        padding: 17px 4px;

        color: #0B1F3A;
        text-decoration: none;

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

        border-bottom: 1px solid #F1F5F9;
    }

    .mobile-nav a:active {
        color: #16A34A;
    }

    .mobile-nav .mobile-nav-cta {
        margin-top: 22px;

        text-align: center;

        border: none;
        border-radius: 14px;

        padding: 16px;

        background: linear-gradient(
            135deg,
            #22C55E,
            #16A34A
        );

        color: #FFFFFF;

        box-shadow:
            0 12px 30px
            rgba(22, 163, 74, .22);
    }

}

/* =========================================================
   SAMRAMBA KERALAM 2030
   V1 RC2 — MOBILE-FIRST DESIGN SYSTEM
   ========================================================= */

   /* =========================================================
   RC2.1 — DESIGN TOKENS
   ========================================================= */

:root {

    /* Brand */
    --rc2-navy: #0B1F3A;
    --rc2-navy-dark: #07182D;
    --rc2-green: #16A34A;
    --rc2-green-dark: #0A8754;

    /* Backgrounds */
    --rc2-white: #FFFFFF;
    --rc2-bg: #F8FAFC;
    --rc2-bg-soft: #F1F5F9;

    /* Text */
    --rc2-text: #0F172A;
    --rc2-text-soft: #475569;
    --rc2-text-muted: #64748B;

    /* Borders */
    --rc2-border: #E2E8F0;

    /* Radius */
    --rc2-radius-sm: 10px;
    --rc2-radius-md: 14px;
    --rc2-radius-lg: 18px;
    --rc2-radius-xl: 24px;

    /* Shadows */
    --rc2-shadow-sm:
        0 4px 14px rgba(15, 23, 42, 0.06);

    --rc2-shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --rc2-shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.12);

    /* Layout */
    --rc2-container: 1200px;

    /* Mobile spacing */
    --rc2-section-mobile: 52px;
    --rc2-section-desktop: 88px;

}


/* =========================================================
   RC2.1 — GLOBAL FOUNDATION
   ========================================================= */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {

    overflow-x: hidden;

    background:
        var(--rc2-white);

    color:
        var(--rc2-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* Prevent images from overflowing */

img {

    max-width: 100%;
    height: auto;

}


/* Better button / link touch behavior */

button,
a,
input,
select,
textarea {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   RC2.1 — CONTAINER
   ========================================================= */

.container {

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

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   RC2.1 — SECTION SYSTEM
   ========================================================= */

section {

    scroll-margin-top: 90px;

}


/* =========================================================
   RC2.1 — SECTION HEADINGS
   ========================================================= */

.section-header {

    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;

}

.section-header h2 {

    margin-bottom: 12px;

    color:
        var(--rc2-navy);

}

.section-header p {

    color:
        var(--rc2-text-soft);

}


/* =========================================================
   RC2.1 — BUTTON FOUNDATION
   ========================================================= */

.btn,
.nav-btn,
.hero-btn,
.modal-button {

    min-height: 48px;

    border-radius:
        var(--rc2-radius-md);

}


/* =========================================================
   RC2.1 — CARD FOUNDATION
   ========================================================= */

.feature-card,
.topic-card,
.module-card,
.track-card {

    border-radius:
        var(--rc2-radius-lg);

}


/* =========================================================
   RC2.1 — MOBILE FOUNDATION
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       Container
    ----------------------------------------- */

    .container {

        width:
            calc(100% - 32px);

    }


    /* -----------------------------------------
       Sections
    ----------------------------------------- */

    section {

        padding-top:
            var(--rc2-section-mobile);

        padding-bottom:
            var(--rc2-section-mobile);

    }


    /* -----------------------------------------
       Headings
    ----------------------------------------- */

    .section-header {

        margin-bottom: 28px;

    }

    .section-header h2 {

        font-size: 26px;
        line-height: 1.18;

        letter-spacing: -0.02em;

    }

    .section-header p {

        font-size: 15px;
        line-height: 1.6;

    }


    /* -----------------------------------------
       General text
    ----------------------------------------- */

    p {

        line-height: 1.6;

    }


    /* -----------------------------------------
       Touch targets
    ----------------------------------------- */

    button,
    .btn,
    .nav-btn,
    .hero-btn {

        min-height: 48px;

    }


    /* -----------------------------------------
       Cards
    ----------------------------------------- */

    .feature-card,
    .topic-card,
    .module-card,
    .track-card {

        border-radius:
            var(--rc2-radius-lg);

    }

}


/* =========================================================
   RC2.1 — SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .container {

        width:
            calc(100% - 28px);

    }

    .section-header h2 {

        font-size: 24px;

    }

}


/* =========================================================
   RC2.3 — FEATURED CAROUSEL
========================================================= */

#featured-carousel {

    margin-top:
        0px;

    margin-bottom:
        -35px;

    position:
        relative;

    width:
        100%;

}


.rc2-carousel-container {

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

    margin:
        0 auto;

}


.rc2-carousel-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        28px;

}


.rc2-carousel-heading {

    max-width:
        650px;

}


.rc2-carousel-eyebrow {

    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--rc2-green);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .08em;

}


.rc2-carousel-heading h2 {

    font-size: 32px;

    margin:
        0 0 8px;

    color:
        var(--rc2-navy);

    font-family:
        Poppins,
        sans-serif;

    line-height:
        1.1;

    letter-spacing:
        -.025em;

}


.rc2-carousel-heading p {

    margin:
        0;

    color:
        var(--rc2-text-soft);

    font-size:
        16px;

    line-height:
        1.55;

}


.rc2-carousel-content h3 {

    margin:
        0 0 4px;

    color:
        var(--rc2-navy);

    font-family:
        Poppins,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.15;

    letter-spacing:
        -.01em;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}

.rc2-carousel-content p {

    font-size:
        9.5px;
}


.rc2-carousel-controls {

    display:
        flex;

    gap:
        8px;

    flex:
        0 0 auto;

}


.rc2-carousel-control {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        white;

    color:
        var(--rc2-navy);

    cursor:
        pointer;

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

}


.rc2-carousel-control:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(15,23,42,.10);

}


.rc2-carousel {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

}


.rc2-carousel-track {

    position:
        relative;

    width:
        100%;

    display:
        flex;

    gap:
        20px;

}


.rc2-carousel-card {

    flex:
        0 0 300px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.08);

}


.rc2-carousel-image-wrap {

    position:
        relative;

    overflow:
        hidden;

     height:
    auto;

aspect-ratio: 0.75;

}


.rc2-carousel-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

}


.rc2-carousel-badge {

    position:
        absolute;

    top:
        12px;

    left:
        12px;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--rc2-navy);

    color:
        white;

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================================
   RC2.3 — CARD CONTENT
   COMPACT INFORMATION AREA
========================================================= */

.rc2-carousel-content {

    padding:
        9px 8px 10px;

}

.rc2-carousel-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        30px;

    padding:
        0 10px;

    border-radius:
        8px;

    background:
        #ECFDF5;

    color:
        var(--rc2-green);

    text-decoration:
        none;

    font-size:
        9.5px;

    font-weight:
        700;

}


.rc2-carousel-button svg {

    width:
        10px;

    height:
        10px;

}


/* =========================================================
   RC2.3 — FEATURED CAROUSEL
   NORMAL PHONES
========================================================= */

@media (max-width: 767px) {

       #featured-carousel {

        margin-top:
            -28px;

    }

    .rc2-carousel-eyebrow {

        display: block;

        margin: 0 0 8px;

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

        font-size: 8px;

        line-height: 1.2;

        letter-spacing:
            .07em;

        text-transform:
            uppercase;

        color:
            #16A34A;

        text-align:
            center;

    }

    .rc2-carousel-heading h2 {

        margin:
            0 0 10px;

        font-family:
            "Poppins",
            sans-serif;

        font-size: 19px;

        line-height: 1.2;

        letter-spacing: -.025em;

        color:
            #0B1F3A;

    }

    .rc2-carousel-heading p {

        max-width:
            100%;

        margin:
            0 auto;

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

        font-size:
            12px;

        font-weight:
            400;

        line-height:
            1.6;

        color:
            #64748B;

    }

    .rc2-carousel-content h3 {
        font-size: 13px;
        line-height: 1.3;
    }

    }







/* =========================================================
   SAMRAMBA KERALAM 2030
   FINAL RC2 VISUAL POLISH
   ---------------------------------------------------------
   Safe final override layer.
   Keeps the existing site system intact while refining:
   - mobile-first hero
   - 3D exhibition stage
   - product presentation
   - spotlight
   - cloth reveal layers
   - mobile responsiveness
   - touch / accessibility behavior
========================================================= */


/* =========================================================
   GLOBAL VISUAL POLISH
========================================================= */

:root {
    --rc2-stage-top: #102943;
    --rc2-stage-mid: #08192c;
    --rc2-stage-bottom: #030b15;

    --rc2-green-soft: rgba(22, 163, 74, .12);

    --rc2-transition:
        cubic-bezier(.22, .61, .36, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }
}


/* =========================================================
   SAMRAMBA KERALAM 2030
   RC2 — FINAL MASTER HERO / MOBILE POLISH
   ---------------------------------------------------------
   This final layer intentionally overrides earlier RC2
   experiments so the stylesheet can remain backward-safe.
   Product image is preserved exactly as supplied.
   ========================================================= */

:root {
    --rc2-stage-top: #dbeafe;
    --rc2-stage-mid: #b9d5ea;
    --rc2-stage-bottom: #6f91ad;
    --rc2-stage-floor: rgba(255,255,255,.22);
    --rc2-fabric-1: #061321;
    --rc2-fabric-2: #0b2238;
    --rc2-fabric-3: #173a56;
    --rc2-fabric-shadow: rgba(0,0,0,.36);
    --rc2-transition: cubic-bezier(.22,.61,.36,1);
}


/* ---------------------------------------------------------
   TOUCH DEVICES — remove hover lift that can feel sticky
--------------------------------------------------------- */

@media (hover:none) and (pointer:coarse) {
    .rc2-primary-cta:hover,
    .rc2-secondary-cta:hover,
    .rc2-hero-badge:hover {
        transform:none;
        box-shadow:none;
    }
}



/* =========================================================
   HOME / COMMUNITY / ABOUT PAGE TRANSITIONS
========================================================= */

/* -----------------------------------------
   HOME ↔ COMMUNITY
----------------------------------------- */


body.home-community-transition {
    opacity: 0;
    transition: opacity 850ms var(--rc2-transition);
}

body.home-community-ready {
    opacity: 1;
}

body.home-community-exit {
    opacity: 0;
}



/* -----------------------------------------
   HOME → LIBRARY
----------------------------------------- */

#pageContent.home-page-transition {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 850ms var(--rc2-transition),
        transform 850ms var(--rc2-transition);
}

#pageContent.home-community-transition:has(.rc2-mobile-menu.active),
#pageContent.home-page-transition:has(.rc2-mobile-menu.active) {

    transform:
        none;

}


#pageContent.home-page-exit {
    opacity: 0;
    transform: translateX(-20px);
}


/* -----------------------------------------
   ABOUT PAGE — ENTER
----------------------------------------- */

body.about-page-transition {
    opacity: 0;
    transform: translateX(20px);
    transition:
        opacity 850ms var(--rc2-transition),
        transform 850ms var(--rc2-transition);
}

body.about-page-ready {
    opacity: 1;
    transform: translateX(0);
}

body.about-page-exit {
    opacity: 0;
    transform: translateX(-20px);
}



/* =========================================================
   SAMRAMBA KERALAM 2030
   FINAL MOBILE HORIZONTAL SPACE SYSTEM
   ---------------------------------------------------------
   Purpose:
   - Remove duplicate mobile horizontal restrictions
   - Give content more usable mobile width
   - Preserve intentional carousel/card spacing
   - Preserve desktop/tablet behavior
   - Keep existing global .container intact
========================================================= */


/* =========================================================
   1. HERO
   ---------------------------------------------------------
   Remove unintended horizontal product displacement.
========================================================= */

@media (max-width: 767px) {

    .rc2-hero-product {
        transform: translate3d(0, 0, 0);
    }

    .rc2-trust-line {
        width: 100%;
        max-width: none;

        flex-wrap: wrap;

        justify-content: flex-start;

        column-gap: 10px;
        row-gap: 6px;
    }

}


/* =========================================================
   2. LEARNING TRACKS
   ---------------------------------------------------------
   Current normal mobile spacing is 24px.
   Reduce to 16px so the two-column grid gets more usable width.
========================================================= */

@media (max-width: 767px) {

    .learning-tracks {
        padding-left: 16px;
        padding-right: 16px;
    }

}


/* =========================================================
   3. TOPICS
   ---------------------------------------------------------
   Topics already owns horizontal section padding.
   Its child .container was adding another mobile width
   restriction through the global container system.
========================================================= */

@media (max-width: 767px) {

    .topics-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .topics-section > .container {
        width: 100%;
        max-width: none;
    }

}


/* =========================================================
   6. FINAL CTA
   ---------------------------------------------------------
   Final CTA already owns horizontal padding.
   Prevent the global .container from adding another
   mobile width reduction.
========================================================= */

@media (max-width: 767px) {

    .final-cta > .container {
        width: 100%;
        max-width: 1200px;
    }

}


/* =========================================================
   7. MOBILE SAFETY
   ---------------------------------------------------------
   Prevent width calculations from creating accidental
   horizontal overflow when sections contain grids,
   flex layouts, or full-width children.
========================================================= */

@media (max-width: 767px) {

    .learning-tracks,
    .topics-section,
    .mission-section,
    .pricing-section,
    .final-cta,
    .site-footer {
        box-sizing: border-box;
        max-width: 100%;
    }

    .learning-tracks-grid,
    .topics-content,
    .mission-content,
    .pricing-wrapper,
    .final-cta-content,
    .footer-grid {
        min-width: 0;
        box-sizing: border-box;
    }

}


/* =========================================================
   END — FINAL MOBILE HORIZONTAL SPACE SYSTEM
========================================================= */


/* =====================================================
   TEXLEARN — SHARED HERO VIEW TRANSITIONS
===================================================== */

.tk-hero-view {
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.tk-hero-view.tk-hero-fading {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tk-hero-view {
        transition-duration: 0.01ms;
    }
}


/* =====================================================
   TEXLEARN — SHARED HERO VIEW POSITIONING
===================================================== */

.rc2-hero-product {
    position: relative;
}

.rc2-hero-product > .tk-hero-view,
.rc2-hero-product > #tkHeroCampaign {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, 560px);
    margin: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform: translate(-50%, -50%);
}

/* Dynamic campaign view */
.rc2-hero-product > #tkHeroCampaign {
    height: 520px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 28px;
    background: #07182D;
}

#tkHeroCampaign a {
    position: absolute;
    inset: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    transition: opacity 1s ease-in-out;
}

#tkHeroCampaign img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Show only the active campaign image */
/* Respect JavaScript image visibility */
#tkHeroCampaign a[hidden] {
    display: none !important;
}


/* Book view */
.rc2-hero-product > #rc2UnboxingStage {
    min-height: 520px;
}


/* Quiz view */
.rc2-hero-product > #tkHeroQuiz {
    height: 520px;
    min-height: 520px;
}


/* Founders poster — unique styling */
.rc2-hero-product > #tkHeroFounders {
    height: 520px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 28px;
    background: #07182D;
}


/* Founders poster image */
#tkHeroFounders img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
}


/* Keep inactive views hidden */
.tk-hero-view[hidden] {
    display: none !important;
}


/* Tablet */
@media (min-width: 768px) and (max-width: 900px) {

    .rc2-hero-product > .tk-hero-view {
        min-height: 480px;
        height: 480px;
    }

}


/* Normal phones and small phones */
@media (max-width: 767px) {

    .rc2-hero-product {
        position: relative;
        aspect-ratio: 16 / 9;
        min-height: 0;
        align-self: start;
    }

.rc2-hero-product > .tk-hero-view,
.rc2-hero-product > #tkHeroCampaign {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: none;
}

/* Align Book and Founders with the campaign position */
.rc2-hero-product > #rc2UnboxingStage,
.rc2-hero-product > #tkHeroFounders {
    top: 0;
    transform: none;
}

   .rc2-hero-product > #rc2UnboxingStage {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: 100%;
}

.rc2-hero-product > #tkHeroFounders {
    height: 100%;
    min-height: 0;
}

}


/* Smooth crossfade between poll intro and question */
.tk-hero-quiz-frame {
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

.tk-hero-quiz-frame.tk-frame-fading {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tk-hero-quiz-frame {
        transition-duration: 0.01ms;
    }
}




/* TEXLEARN — Refined desktop poll spacing */
@media (min-width: 768px) {

    /* Keep the intro content available on desktop */
    #tkHeroQuizIntro .tk-hero-quiz-intro-icon,
    #tkHeroQuizIntro h2,
    #tkHeroQuizIntro p {
        display: none;
    }

    /* Compact question frame */
    #tkHeroQuizVote {
        position: relative;
        padding-top: 88px;
        padding-bottom: 16px;
    }

    /* Heading */
    #tkHeroQuizVote::before {
        content: "💡  Think you know?";
        display: block;
        position: absolute;
        top: 12px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 27px;
        font-weight: 700;
        line-height: 1.2;
        color: inherit;
    }

    /* Subtitle */
    #tkHeroQuizVote::after {
        content: "Let's see what you think.";
        position: absolute;
        top: 48px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 1.35;
        color: inherit;
        opacity: 0.8;
    }

    /* No intro button on desktop */
    #tkHeroQuizStart {
        display: none !important;
    }

    /* Slightly tighten spacing between question elements */
    #tkHeroQuizContent {
        margin-top: 0;
    }
}



/* =====================================================
   TEXLEARN — POLL INTRO / QUESTION FRAME OVERLAP
   Keep both phone frames in the same position.
===================================================== */

@media (max-width: 767px) {

    #tkHeroQuiz {
        position: relative;
        display: block;
        overflow: hidden;
    }

    #tkHeroQuiz > #tkHeroQuizIntro,
    #tkHeroQuiz > #tkHeroQuizVote {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
        margin: 0;
    }

    #tkHeroQuiz > #tkHeroQuizIntro:not([hidden]) {
        z-index: 2;
    }

    #tkHeroQuiz > #tkHeroQuizVote:not([hidden]) {
        z-index: 1;
    }

    #tkHeroQuiz > #tkHeroQuizIntro[hidden],
    #tkHeroQuiz > #tkHeroQuizVote[hidden] {
        display: none !important;
    }

}


/* HOME PAGE WHATSAPP BUTTON */

.home-whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));

    width: 56px;
    height: 56px;

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

    background: #25D366;
    color: #ffffff;

    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);

    z-index: 9999;

    text-decoration: none;
    transition: transform 0.25s ease;
}

.home-whatsapp-button i {
    width: 29px;
    height: 29px;
    stroke-width: 2.2;
}

.home-whatsapp-button:hover {
    transform: scale(1.08);
}


/* WHATSAPP BUTTON — SMALL PHONES */

@media (max-width: 420px) {

    .home-whatsapp-button {
        width: 40px;
        height: 40px;

        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .home-whatsapp-button i {
        width: 21px;
        height: 21px;
    }

}