/* ==========================================================
   CSS-00
   VARIABLES
========================================================== */

:root{

    /* ------------------------------------------------------
       CSS-00.01
       Brand Colours
    ------------------------------------------------------- */

    --primary:#081C3A;

    --primary-light:#12376E;

    --primary-dark:#041024;

    --accent:#2C5FA5;

    --gold:#C7A54A;

    --gold-light:#D9BD6A;

    --success:#2E7D32;

    --warning:#F57C00;

    --danger:#C62828;

    --white:#FFFFFF;

    --off-white:#F8FAFC;

    --light:#EEF2F7;

    --gray-100:#F5F7FA;

    --gray-200:#E4E7EC;

    --gray-300:#CBD5E1;

    --gray-500:#64748B;

    --gray-700:#334155;

    --gray-900:#111827;

    --black:#000000;

    /* ------------------------------------------------------
       CSS-00.02
       Typography
    ------------------------------------------------------- */

    --font-heading:

        "Inter",

        sans-serif;

    --font-body:

        "Inter",

        sans-serif;

    --font-tamil:

        "Noto Sans Tamil",

        sans-serif;

    /* ------------------------------------------------------
       CSS-00.03
       Font Sizes
    ------------------------------------------------------- */

    --fs-xs:.80rem;

    --fs-sm:.90rem;

    --fs-base:1rem;

    --fs-md:1.10rem;

    --fs-lg:1.30rem;

    --fs-xl:1.70rem;

    --fs-2xl:2.40rem;

    --fs-3xl:3.30rem;

    --fs-4xl:4.30rem;

    /* ------------------------------------------------------
       CSS-00.04
       Font Weight
    ------------------------------------------------------- */

    --fw-light:300;

    --fw-normal:400;

    --fw-medium:500;

    --fw-semibold:600;

    --fw-bold:700;

    --fw-black:800;

    /* ------------------------------------------------------
       CSS-00.05
       Line Height
    ------------------------------------------------------- */

    --lh-tight:1.20;

    --lh-normal:1.60;

    --lh-loose:1.90;

    /* ------------------------------------------------------
       CSS-00.06
       Radius
    ------------------------------------------------------- */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:36px;

    --radius-round:999px;

    /* ------------------------------------------------------
       CSS-00.07
       Shadows
    ------------------------------------------------------- */

    --shadow-sm:

        0 4px 12px

        rgba(0,0,0,.08);

    --shadow-md:

        0 12px 30px

        rgba(0,0,0,.12);

    --shadow-lg:

        0 25px 60px

        rgba(0,0,0,.18);

    /* ------------------------------------------------------
       CSS-00.08
       Width
    ------------------------------------------------------- */

    --container:1200px;

    /* ------------------------------------------------------
       CSS-00.09
       Transition
    ------------------------------------------------------- */

    --transition:

        all .35s ease;

}

/* ==========================================================
   CSS-01
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--off-white);

    color:var(--gray-900);

    font-family:var(--font-body);

    font-size:var(--fs-base);

    line-height:var(--lh-normal);

    overflow-x:hidden;

}

img{

    display:block;

    width:100%;

    height:auto;

}

picture{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}

input,

textarea,

select{

    font:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;

    padding:120px 0;

}

footer{

    position:relative;

}

/* ==========================================================
   CSS-02
   TYPOGRAPHY
========================================================== */

/* ----------------------------------------------------------
   CSS-02.01
   Body
----------------------------------------------------------- */

body{

    font-family:var(--font-body);

    font-size:var(--fs-base);

    color:var(--gray-900);

    background:var(--off-white);

    line-height:var(--lh-normal);

}

/* ----------------------------------------------------------
   CSS-02.02
   Headings
----------------------------------------------------------- */

h1,

h2,

h3,

h4,

h5,

h6{

    font-family:var(--font-heading);

    font-weight:var(--fw-bold);

    color:var(--primary);

    line-height:var(--lh-tight);

}

/* ----------------------------------------------------------
   CSS-02.03
   Hero Heading
----------------------------------------------------------- */

h1{

    font-size:clamp(

        2.8rem,

        5vw,

        4.8rem

    );

    margin-bottom:24px;

}

/* ----------------------------------------------------------
   CSS-02.04
   Section Heading
----------------------------------------------------------- */

h2{

    font-size:clamp(

        2.1rem,

        4vw,

        3.2rem

    );

    margin-bottom:20px;

}

/* ----------------------------------------------------------
   CSS-02.05
   Sub Heading
----------------------------------------------------------- */

h3{

    font-size:clamp(

        1.35rem,

        2vw,

        2rem

    );

    margin-bottom:18px;

}

/* ----------------------------------------------------------
   CSS-02.06
   Card Heading
----------------------------------------------------------- */

h4{

    font-size:1.20rem;

    margin-bottom:14px;

}

/* ----------------------------------------------------------
   CSS-02.07
   Paragraph
----------------------------------------------------------- */

p{

    margin-bottom:20px;

}

/* ----------------------------------------------------------
   CSS-02.08
   Tamil Text
----------------------------------------------------------- */

.tamil-message{

    font-family:var(--font-tamil);

    font-size:1.18rem;

    line-height:2;

    color:var(--gray-700);

}

/* ----------------------------------------------------------
   CSS-02.09
   English Text
----------------------------------------------------------- */

.english-message{

    font-size:1.08rem;

    line-height:1.9;

    color:var(--gray-500);

}

/* ----------------------------------------------------------
   CSS-02.10
   Section Label
----------------------------------------------------------- */

.section-label{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 20px;

    border-radius:999px;

    background:rgba(44,95,165,.10);

    color:var(--accent);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

/* ----------------------------------------------------------
   CSS-02.11
   Section Title
----------------------------------------------------------- */

.section-title{

    text-align:center;

    margin-bottom:18px;

}

/* ----------------------------------------------------------
   CSS-02.12
   Section Subtitle
----------------------------------------------------------- */

.section-subtitle{

    text-align:center;

    color:var(--gold);

    font-weight:600;

    margin-bottom:40px;

}

/* ----------------------------------------------------------
   CSS-02.13
   Quote
----------------------------------------------------------- */

blockquote{

    max-width:900px;

    margin:80px auto;

    text-align:center;

    font-size:1.30rem;

    font-style:italic;

    color:var(--primary);

}

/* ==========================================================
   CSS-03
   LAYOUT
========================================================== */

/* ----------------------------------------------------------
   CSS-03.01
   Container
----------------------------------------------------------- */

.container{

    width:min(

        92%,

        var(--container)

    );

    margin-inline:auto;

}

/* ----------------------------------------------------------
   CSS-03.02
   Center Text
----------------------------------------------------------- */

.text-center{

    text-align:center;

}

/* ----------------------------------------------------------
   CSS-03.03
   Section
----------------------------------------------------------- */

section{

    position:relative;

    padding:120px 0;

}

/* ----------------------------------------------------------
   CSS-03.04
   Grid
----------------------------------------------------------- */

.grid{

    display:grid;

    gap:40px;

}

/* ----------------------------------------------------------
   CSS-03.05
   Two Columns
----------------------------------------------------------- */

.grid-2{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            1fr

        );

    gap:60px;

    align-items:center;

}

/* ----------------------------------------------------------
   CSS-03.06
   Three Columns
----------------------------------------------------------- */

.grid-3{

    display:grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap:36px;

}

/* ----------------------------------------------------------
   CSS-03.07
   Four Columns
----------------------------------------------------------- */

.grid-4{

    display:grid;

    grid-template-columns:

        repeat(

            4,

            1fr

        );

    gap:28px;

}

/* ----------------------------------------------------------
   CSS-03.08
   Card
----------------------------------------------------------- */

.card{

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:40px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

/* ----------------------------------------------------------
   CSS-03.09
   Card Hover
----------------------------------------------------------- */

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

/* ----------------------------------------------------------
   CSS-03.10
   Image
----------------------------------------------------------- */

.image-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ----------------------------------------------------------
   CSS-03.11
   Divider
----------------------------------------------------------- */

.divider{

    width:120px;

    height:4px;

    margin:40px auto;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        var(--accent),

        var(--gold)

    );

}

/* ----------------------------------------------------------
   CSS-03.12
   Vertical Space
----------------------------------------------------------- */

.spacer{

    height:120px;

}

/* ==========================================================
   CSS-04
   HEADER
========================================================== */

/* ----------------------------------------------------------
   CSS-04.01
   Header
----------------------------------------------------------- */

header{

    position:fixed;

    top:24px;

    left:0;

    width:100%;

    z-index:1000;

    transition:var(--transition);

}

/* ----------------------------------------------------------
   CSS-04.02
   Shrink Header
----------------------------------------------------------- */

header.scrolled{

    top:12px;

}

/* ----------------------------------------------------------
   CSS-04.03
   Header Container
----------------------------------------------------------- */

.header-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    max-width:1200px;

    margin:auto;

    padding:16px 32px;

    border-radius:999px;

    background:rgba(8,28,58,.85);

    backdrop-filter:blur(16px);

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

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

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

}

/* ----------------------------------------------------------
   CSS-04.04
   Logo
----------------------------------------------------------- */

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:48px;

    width:auto;

    transition:var(--transition);

}

header.scrolled .logo img{

    height:40px;

}

/* ----------------------------------------------------------
   CSS-04.05
   Navigation
----------------------------------------------------------- */

.navigation{

    display:flex;

}

.navigation ul{

    display:flex;

    align-items:center;

    gap:36px;

}

/* ----------------------------------------------------------
   CSS-04.06
   Navigation Links
----------------------------------------------------------- */

.navigation a{

    color:var(--white);

    font-weight:600;

    font-size:.95rem;

    position:relative;

    transition:var(--transition);

}

/* ----------------------------------------------------------
   CSS-04.07
   Hover
----------------------------------------------------------- */

.navigation a:hover{

    color:var(--gold-light);

}

/* ----------------------------------------------------------
   CSS-04.08
   Active Line
----------------------------------------------------------- */

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

.navigation a:hover::after{

    width:100%;

}

/* ----------------------------------------------------------
   CSS-04.09
   Mobile Menu Button
----------------------------------------------------------- */

.menu-button{

    display:none;

    color:var(--white);

    font-size:1.80rem;

    line-height:1;

}

/* ----------------------------------------------------------
   CSS-04.10
   Header Shadow
----------------------------------------------------------- */

header.scrolled .header-container{

    box-shadow:

        0 18px 45px

        rgba(0,0,0,.35);

}

/* ==========================================================
   CSS-05
   HERO
========================================================== */

/* ----------------------------------------------------------
   CSS-05.01
   Hero Section
----------------------------------------------------------- */

.hero{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    overflow:hidden;

    background:var(--primary-dark);

}

/* ----------------------------------------------------------
   CSS-05.02
   Hero Image
----------------------------------------------------------- */

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:

        heroZoom

        24s

        ease-in-out

        infinite alternate;

}

/* ----------------------------------------------------------
   CSS-05.03
   Dark Overlay
----------------------------------------------------------- */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(4,16,36,.82),

            rgba(8,28,58,.88)

        );

    z-index:1;

}

/* ----------------------------------------------------------
   CSS-05.04
   Hero Content
----------------------------------------------------------- */

.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    text-align:center;

    color:var(--white);

}

/* ----------------------------------------------------------
   CSS-05.05
   Hero Headings
----------------------------------------------------------- */

.hero h1{

    color:var(--white);

    margin-bottom:28px;

}

.hero h2{

    color:var(--gold-light);

    font-weight:500;

    margin-bottom:40px;

}

/* ----------------------------------------------------------
   CSS-05.06
   Hero Text
----------------------------------------------------------- */

.hero .tamil-message{

    color:rgba(

        255,

        255,

        255,

        .95

    );

    font-size:1.35rem;

}

.hero .english-message{

    color:rgba(

        255,

        255,

        255,

        .82

    );

    font-size:1.15rem;

}

/* ----------------------------------------------------------
   CSS-05.07
   Hero Button
----------------------------------------------------------- */

.hero .btn{

    margin-top:30px;

}

/* ----------------------------------------------------------
   CSS-05.08
   Trust Line
----------------------------------------------------------- */

.trust-line{

    margin-top:40px;

    color:rgba(

        255,

        255,

        255,

        .75

    );

    font-size:.95rem;

    letter-spacing:1px;

}

/* ----------------------------------------------------------
   CSS-05.09
   Scroll Indicator
----------------------------------------------------------- */

.hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:40px;

    width:30px;

    height:50px;

    border:2px solid rgba(

        255,

        255,

        255,

        .45

    );

    border-radius:30px;

    transform:translateX(-50%);

    z-index:2;

}

.hero::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:57px;

    width:6px;

    height:10px;

    background:var(--white);

    border-radius:999px;

    transform:translateX(-50%);

    animation:

        scrollMouse

        2s

        infinite;

    z-index:3;

}

/* ----------------------------------------------------------
   CSS-05.10
   Hero Animation
----------------------------------------------------------- */

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:

            translate(-50%,0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translate(-50%,14px);

    }

}

/* ==========================================================
   CSS-06
   STORY
========================================================== */

/* ----------------------------------------------------------
   CSS-06.01
   Story Section
----------------------------------------------------------- */

.story{

    background:var(--off-white);

}

/* ----------------------------------------------------------
   CSS-06.02
   Story Block
----------------------------------------------------------- */

.story-block{

    display:grid;

    grid-template-columns:

        1fr

        1fr;

    gap:80px;

    align-items:center;

    margin-bottom:140px;

}

/* ----------------------------------------------------------
   CSS-06.03
   Reverse Layout
----------------------------------------------------------- */

.story-block.reverse{

    direction:rtl;

}

.story-block.reverse>*{

    direction:ltr;

}

/* ----------------------------------------------------------
   CSS-06.04
   Story Image
----------------------------------------------------------- */

.story-image{

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.story-image img{

    width:100%;

    display:block;

    transition:

        transform

        .8s

        ease;

}

.story-image:hover img{

    transform:scale(1.05);

}

/* ----------------------------------------------------------
   CSS-06.05
   Story Content
----------------------------------------------------------- */

.story-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ----------------------------------------------------------
   CSS-06.06
   Story Headings
----------------------------------------------------------- */

.story-content h2{

    margin-bottom:20px;

}

.story-content h3{

    color:var(--gold);

    margin-bottom:28px;

}

/* ----------------------------------------------------------
   CSS-06.07
   Story Centre
----------------------------------------------------------- */

.story-center{

    max-width:900px;

    margin:0 auto;

    text-align:center;

    padding:80px 0;

}

/* ----------------------------------------------------------
   CSS-06.08
   Highlight Heading
----------------------------------------------------------- */

.highlight-heading{

    color:var(--primary);

    margin-bottom:28px;

}

/* ----------------------------------------------------------
   CSS-06.09
   Story Transition
----------------------------------------------------------- */

.story-transition{

    max-width:900px;

    margin:80px auto 0;

    padding:70px;

    text-align:center;

    background:var(--white);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}

/* ----------------------------------------------------------
   CSS-06.10
   Transition Text
----------------------------------------------------------- */

.transition-text{

    font-family:

        var(--font-tamil);

    font-size:1.35rem;

    line-height:2;

    color:var(--primary);

    margin-bottom:28px;

}

.transition-text-en{

    font-size:1.15rem;

    color:var(--gray-700);

    margin-bottom:40px;

}

/* ==========================================================
   CSS-07
   FINANCIAL REALITY GAP™
========================================================== */

/* ----------------------------------------------------------
   CSS-07.01
   Section
----------------------------------------------------------- */

.financial-gap{

    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--primary-dark)
        );

    color:var(--white);

    overflow:hidden;

}

/* ----------------------------------------------------------
   CSS-07.02
   Headings
----------------------------------------------------------- */

.financial-gap
.section-title{

    color:var(--white);

}

.financial-gap
.section-subtitle{

    color:var(--gold-light);

}

.financial-gap
.tamil-message{

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

}

.financial-gap
.english-message{

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

}

/* ----------------------------------------------------------
   CSS-07.03
   Dream Index Grid
----------------------------------------------------------- */

.dream-index{

    display:grid;

    grid-template-columns:

        repeat(
            2,
            1fr
        );

    gap:36px;

    margin-top:70px;

    margin-bottom:70px;

}

/* ----------------------------------------------------------
   CSS-07.04
   Gap Card
----------------------------------------------------------- */

.gap-card{

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

    border:

        1px solid

        rgba(
            255,
            255,
            255,
            .10
        );

    backdrop-filter:

        blur(
            12px
        );

    -webkit-backdrop-filter:

        blur(
            12px
        );

    border-radius:

        var(--radius-lg);

    padding:36px;

    transition:

        var(--transition);

}

/* ----------------------------------------------------------
   CSS-07.05
   Hover
----------------------------------------------------------- */

.gap-card:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 25px 50px

        rgba(
            0,
            0,
            0,
            .30
        );

}

/* ----------------------------------------------------------
   CSS-07.06
   Card Heading
----------------------------------------------------------- */

.gap-card h4{

    color:var(--white);

    font-size:1.30rem;

    margin-bottom:28px;

}

/* ----------------------------------------------------------
   CSS-07.07
   Status Row
----------------------------------------------------------- */

.status-row{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

}

/* ----------------------------------------------------------
   CSS-07.08
   Label
----------------------------------------------------------- */

.status-row span{

    width:90px;

    color:var(--white);

    font-size:.95rem;

    font-weight:600;

}

/* ----------------------------------------------------------
   CSS-07.09
   Progress Bar
----------------------------------------------------------- */

.bar{

    position:relative;

    flex:1;

    height:12px;

    border-radius:999px;

    overflow:hidden;

    background:

        rgba(
            255,
            255,
            255,
            .15
        );

}

/* ----------------------------------------------------------
   CSS-07.10
   Green
----------------------------------------------------------- */

.green{

    background:

        linear-gradient(

            90deg,

            #00C853,

            #69F0AE

        );

}

/* ----------------------------------------------------------
   CSS-07.11
   Orange
----------------------------------------------------------- */

.orange{

    background:

        linear-gradient(

            90deg,

            #FB8C00,

            #FFD54F

        );

}

/* ----------------------------------------------------------
   CSS-07.12
   Red
----------------------------------------------------------- */

.red{

    background:

        linear-gradient(

            90deg,

            #D50000,

            #FF5252

        );

}

/* ----------------------------------------------------------
   CSS-07.13
   Width Helpers
----------------------------------------------------------- */

.w25{

    width:25%;

}

.w30{

    width:30%;

}

.w35{

    width:35%;

}

.w40{

    width:40%;

}

.w45{

    width:45%;

}

.w55{

    width:55%;

}

.w60{

    width:60%;

}

.w65{

    width:65%;

}

.w70{

    width:70%;

}

.w75{

    width:75%;

}

.w100{

    width:100%;

}

/* ----------------------------------------------------------
   CSS-07.14
   Reflection
----------------------------------------------------------- */

.gap-reflection{

    max-width:850px;

    margin:90px auto 0;

    text-align:center;

}

.gap-reflection h3{

    color:var(--white);

}

.gap-reflection h4{

    color:var(--gold-light);

    margin-bottom:24px;

}

/* ----------------------------------------------------------
   CSS-07.15
   Section Action
----------------------------------------------------------- */

.section-action{

    text-align:center;

    margin-top:60px;

}

/* ==========================================================
   CSS-08
   WHY THE GAP EXISTS
========================================================== */

/* ----------------------------------------------------------
   CSS-08.01
   Section
----------------------------------------------------------- */

.why-gap{

    background:var(--white);

}

/* ----------------------------------------------------------
   CSS-08.02
   Illustration
----------------------------------------------------------- */

.gap-illustration{

    max-width:900px;

    margin:70px auto;

}

.gap-illustration img{

    width:100%;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

/* ----------------------------------------------------------
   CSS-08.03
   Reason Grid
----------------------------------------------------------- */

.reason-grid{

    display:grid;

    grid-template-columns:

        repeat(

            4,

            1fr

        );

    gap:32px;

    margin-top:80px;

}

/* ----------------------------------------------------------
   CSS-08.04
   Reason Card
----------------------------------------------------------- */

.reason-card{

    background:var(--off-white);

    border-radius:var(--radius-lg);

    padding:40px 28px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

/* ----------------------------------------------------------
   CSS-08.05
   Hover
----------------------------------------------------------- */

.reason-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

/* ----------------------------------------------------------
   CSS-08.06
   Icon
----------------------------------------------------------- */

.reason-icon{

    font-size:3rem;

    margin-bottom:24px;

}

/* ----------------------------------------------------------
   CSS-08.07
   Card Heading
----------------------------------------------------------- */

.reason-card h4{

    color:var(--primary);

    margin-bottom:18px;

}

/* ----------------------------------------------------------
   CSS-08.08
   Card Text
----------------------------------------------------------- */

.reason-card p{

    color:var(--gray-500);

    margin-bottom:0;

}

/* ----------------------------------------------------------
   CSS-08.09
   Reflection
----------------------------------------------------------- */

.section-reflection{

    max-width:900px;

    margin:100px auto 0;

    text-align:center;

}

.section-reflection h3{

    color:var(--primary);

}

.section-reflection h4{

    color:var(--gold);

    margin-bottom:28px;

}

/* ==========================================================
   CSS-09
   ABOUT
========================================================== */

/* ----------------------------------------------------------
   CSS-09.01
   Section
----------------------------------------------------------- */

.about{

    background:var(--off-white);

}

/* ----------------------------------------------------------
   CSS-09.02
   Mentor Photo
----------------------------------------------------------- */

.mentor-photo{

    width:260px;

    height:260px;

    margin:60px auto;

    overflow:hidden;

    border-radius:50%;

    border:8px solid var(--white);

    box-shadow:var(--shadow-lg);

}

.mentor-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ----------------------------------------------------------
   CSS-09.03
   Mission Card
----------------------------------------------------------- */

.mission-card,

.promise-card{

    max-width:900px;

    margin:60px auto;

    background:var(--white);

    padding:60px;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

    text-align:center;

}

/* ----------------------------------------------------------
   CSS-09.04
   Quote
----------------------------------------------------------- */

.mentor-quote{

    max-width:900px;

    margin:80px auto;

    padding:60px;

    border-left:6px solid var(--gold);

    background:var(--white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}

/* ----------------------------------------------------------
   CSS-09.05
   Signature
----------------------------------------------------------- */

.mentor-signature{

    width:220px;

    margin:50px auto;

}

.mentor-signature img{

    width:100%;

}

/* ==========================================================
   CSS-10
   WHY CTM PATH™
========================================================== */

/* ----------------------------------------------------------
   CSS-10.01
   Section
----------------------------------------------------------- */

.why-ctm{

    background:var(--white);

}

/* ----------------------------------------------------------
   CSS-10.02
   Comparison Grid
----------------------------------------------------------- */

.comparison-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            1fr

        );

    gap:50px;

    margin:80px 0;

}

/* ----------------------------------------------------------
   CSS-10.03
   Comparison Card
----------------------------------------------------------- */

.comparison-card{

    background:var(--off-white);

    padding:50px;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.comparison-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

/* ----------------------------------------------------------
   CSS-10.04
   Featured Card
----------------------------------------------------------- */

.comparison-card.featured{

    background:linear-gradient(

        180deg,

        var(--primary),

        var(--primary-dark)

    );

    color:var(--white);

}

.comparison-card.featured h3{

    color:var(--gold-light);

}

/* ----------------------------------------------------------
   CSS-10.05
   List
----------------------------------------------------------- */

.comparison-card ul{

    margin-top:30px;

}

.comparison-card li{

    margin-bottom:18px;

    line-height:1.8;

}

/* ----------------------------------------------------------
   CSS-10.06
   Pillar Grid
----------------------------------------------------------- */

.pillar-grid{

    display:grid;

    grid-template-columns:

        repeat(

            4,

            1fr

        );

    gap:30px;

    margin-top:90px;

}

/* ----------------------------------------------------------
   CSS-10.07
   Pillar Card
----------------------------------------------------------- */

.pillar-card{

    text-align:center;

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:40px 25px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.pillar-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.pillar-card div{

    font-size:3rem;

    margin-bottom:20px;

}

.pillar-card h4{

    color:var(--primary);

}

.pillar-card p{

    color:var(--gray-500);

    margin-bottom:0;

}

/* ==========================================================
   CSS-11
   CTM PATH™ ROADMAP
========================================================== */

/* ----------------------------------------------------------
   CSS-11.01
   Section
----------------------------------------------------------- */

.roadmap{

    background:var(--off-white);

}

/* ----------------------------------------------------------
   CSS-11.02
   Wrapper
----------------------------------------------------------- */

.roadmap-wrapper{

    max-width:900px;

    margin:80px auto;

    position:relative;

}

/* ----------------------------------------------------------
   CSS-11.03
   Vertical Line
----------------------------------------------------------- */

.roadmap-wrapper::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:40px;

    width:4px;

    background:linear-gradient(

        var(--accent),

        var(--gold)

    );

}

/* ----------------------------------------------------------
   CSS-11.04
   Step
----------------------------------------------------------- */

.roadmap-step{

    display:flex;

    align-items:flex-start;

    gap:35px;

    margin-bottom:60px;

    position:relative;

}

/* ----------------------------------------------------------
   CSS-11.05
   Step Number
----------------------------------------------------------- */

.step-number{

    width:80px;

    height:80px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:var(--white);

    font-size:1.4rem;

    font-weight:700;

    box-shadow:var(--shadow-md);

}

/* ----------------------------------------------------------
   CSS-11.06
   Featured Step
----------------------------------------------------------- */

.roadmap-step.featured .step-number{

    background:var(--gold);

    color:var(--primary);

}

/* ----------------------------------------------------------
   CSS-11.07
   Step Content
----------------------------------------------------------- */

.step-content{

    flex:1;

    background:var(--white);

    border-radius:var(--radius-lg);

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.step-content:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-lg);

}

.step-content h3{

    color:var(--primary);

}

.step-content h4{

    color:var(--gold);

    margin-bottom:16px;

}

.step-content p{

    color:var(--gray-500);

    margin-bottom:0;

}

/* ==========================================================
   CSS-12
   THE CTM PATH™ PROMISE
========================================================== */

/* ----------------------------------------------------------
   CSS-12.01
   Section
----------------------------------------------------------- */

.promise{

    background:

        linear-gradient(

            180deg,

            var(--primary),

            var(--primary-dark)

        );

    color:var(--white);

}

/* ----------------------------------------------------------
   CSS-12.02
   Heading
----------------------------------------------------------- */

.promise .section-title{

    color:var(--white);

}

.promise .section-subtitle{

    color:var(--gold-light);

}

.promise .tamil-message{

    color:rgba(

        255,

        255,

        255,

        .92

    );

}

.promise .english-message{

    color:rgba(

        255,

        255,

        255,

        .80

    );

}

/* ----------------------------------------------------------
   CSS-12.03
   Promise Grid
----------------------------------------------------------- */

.promise-grid{

    display:grid;

    grid-template-columns:

        repeat(

            2,

            1fr

        );

    gap:40px;

    margin:80px 0;

}

/* ----------------------------------------------------------
   CSS-12.04
   Promise Card
----------------------------------------------------------- */

.promise-grid .promise-card{

    max-width:none;

    margin:0;

    background:

        rgba(

            255,

            255,

            255,

            .08

        );

    border:1px solid rgba(

        255,

        255,

        255,

        .10

    );

    backdrop-filter:blur(12px);

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

    color:var(--white);

}

/* ----------------------------------------------------------
   CSS-12.05
   Promise Icon
----------------------------------------------------------- */

.promise-icon{

    font-size:3rem;

    margin-bottom:24px;

}

.promise-grid .promise-card h3{

    color:var(--gold-light);

}

.promise-grid .promise-card h4{

    color:var(--white);

}

.promise-grid .promise-card p{

    color:rgba(

        255,

        255,

        255,

        .82

    );

    margin-bottom:0;

}

/* ==========================================================
   CSS-13
   TESTIMONIALS
========================================================== */

/* ----------------------------------------------------------
   CSS-13.01
   Section
----------------------------------------------------------- */

.testimonials{

    background:var(--off-white);

}

/* ----------------------------------------------------------
   CSS-13.02
   Grid
----------------------------------------------------------- */

.testimonial-grid{

    display:grid;

    grid-template-columns:

        repeat(

            3,

            1fr

        );

    gap:36px;

    margin:80px 0;

}

/* ----------------------------------------------------------
   CSS-13.03
   Card
----------------------------------------------------------- */

.testimonial-card{

    background:var(--white);

    border-radius:var(--radius-xl);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

/* ----------------------------------------------------------
   CSS-13.04
   Image
----------------------------------------------------------- */

.testimonial-card img{

    height:260px;

    object-fit:cover;

}

/* ----------------------------------------------------------
   CSS-13.05
   Content
----------------------------------------------------------- */

.testimonial-card h3,

.testimonial-card h4,

.testimonial-card p{

    padding-left:30px;

    padding-right:30px;

}

.testimonial-card h3{

    margin-top:30px;

    color:var(--primary);

}

.testimonial-card h4{

    color:var(--gold);

}

.testimonial-card p{

    padding-bottom:35px;

    color:var(--gray-700);

}

/* ----------------------------------------------------------
   CSS-13.06
   Note
----------------------------------------------------------- */

.testimonial-note{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:var(--gray-500);

}

/* ==========================================================
   CSS-14
   FAQ
========================================================== */

/* ----------------------------------------------------------
   CSS-14.01
   Section
----------------------------------------------------------- */

.faq{

    background:var(--white);

}

/* ----------------------------------------------------------
   CSS-14.02
   FAQ List
----------------------------------------------------------- */

.faq-list{

    max-width:900px;

    margin:80px auto;

}

/* ----------------------------------------------------------
   CSS-14.03
   FAQ Item
----------------------------------------------------------- */

.faq-item{

    margin-bottom:24px;

    background:var(--off-white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:var(--transition);

}

/* ----------------------------------------------------------
   CSS-14.04
   Summary
----------------------------------------------------------- */

.faq-item summary{

    padding:28px 34px;

    cursor:pointer;

    list-style:none;

    font-size:1.10rem;

    font-weight:600;

    color:var(--primary);

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

/* ----------------------------------------------------------
   CSS-14.05
   Hover
----------------------------------------------------------- */

.faq-item:hover{

    box-shadow:var(--shadow-md);

}

/* ----------------------------------------------------------
   CSS-14.06
   Open
----------------------------------------------------------- */

.faq-item[open]{

    background:var(--white);

}

/* ----------------------------------------------------------
   CSS-14.07
   Answer
----------------------------------------------------------- */

.faq-item p{

    padding:0 34px 34px;

    color:var(--gray-700);

    line-height:1.9;

}

/* ==========================================================
   CSS-15
   DREAM
========================================================== */

/* ----------------------------------------------------------
   CSS-15.01
   Section
----------------------------------------------------------- */

.dream{

    position:relative;

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-align:center;

}

/* ----------------------------------------------------------
   CSS-15.02
   Image
----------------------------------------------------------- */

.dream-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ----------------------------------------------------------
   CSS-15.03
   Overlay
----------------------------------------------------------- */

.dream-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(4,16,36,.78),

            rgba(8,28,58,.88)

        );

    z-index:1;

}

/* ----------------------------------------------------------
   CSS-15.04
   Content
----------------------------------------------------------- */

.dream-content{

    position:relative;

    z-index:2;

    max-width:900px;

}

/* ----------------------------------------------------------
   CSS-15.05
   Text
----------------------------------------------------------- */

.dream h2{

    color:var(--white);

}

.dream h3{

    color:var(--gold-light);

}

.dream .tamil-message{

    color:rgba(

        255,

        255,

        255,

        .92

    );

}

.dream .english-message{

    color:rgba(

        255,

        255,

        255,

        .80

    );

}

/* ==========================================================
   CSS-16
   CALL TO ACTION
========================================================== */

/* ----------------------------------------------------------
   CSS-16.01
   Section
----------------------------------------------------------- */

.cta{

    background:var(--primary);

    color:var(--white);

    text-align:center;

}

/* ----------------------------------------------------------
   CSS-16.02
   Heading
----------------------------------------------------------- */

.cta .section-title{

    color:var(--white);

}

.cta .section-subtitle{

    color:var(--gold-light);

}

.cta .tamil-message{

    color:rgba(

        255,

        255,

        255,

        .92

    );

}

.cta .english-message{

    color:rgba(

        255,

        255,

        255,

        .82

    );

}

/* ----------------------------------------------------------
   CSS-16.03
   Trust Footer
----------------------------------------------------------- */

.trust-footer{

    margin-top:40px;

    color:rgba(

        255,

        255,

        255,

        .72

    );

    letter-spacing:1px;

}

/* ==========================================================
   CSS-17
   FOOTER
========================================================== */

/* ----------------------------------------------------------
   CSS-17.01
   Footer
----------------------------------------------------------- */

.footer{

    background:var(--primary-dark);

    color:rgba(

        255,

        255,

        255,

        .82

    );

    text-align:center;

    padding:100px 0 60px;

}

/* ----------------------------------------------------------
   CSS-17.02
   Logo
----------------------------------------------------------- */

.footer-logo{

    width:180px;

    margin:0 auto 40px;

}

/* ----------------------------------------------------------
   CSS-17.03
   Heading
----------------------------------------------------------- */

.footer h2{

    color:var(--white);

}

.footer h3{

    color:var(--gold-light);

    margin-bottom:30px;

}

/* ----------------------------------------------------------
   CSS-17.04
   Message
----------------------------------------------------------- */

.footer-message{

    max-width:700px;

    margin:0 auto 50px;

    line-height:2;

}

/* ----------------------------------------------------------
   CSS-17.05
   Links
----------------------------------------------------------- */

.footer-links,

.footer-social,

.footer-legal{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:24px;

    margin-bottom:35px;

}

.footer-links a,

.footer-social a,

.footer-legal a{

    color:rgba(

        255,

        255,

        255,

        .82

    );

}

.footer-links a:hover,

.footer-social a:hover,

.footer-legal a:hover{

    color:var(--gold-light);

}

/* ----------------------------------------------------------
   CSS-17.06
   Contact
----------------------------------------------------------- */

.footer-contact{

    margin-bottom:40px;

}

.footer-contact p{

    margin-bottom:6px;

    color:var(--gold-light);

}

.footer-contact a{

    display:block;

    margin-bottom:20px;

}

/* ----------------------------------------------------------
   CSS-17.07
   Copyright
----------------------------------------------------------- */

.copyright{

    margin-top:40px;

    color:rgba(

        255,

        255,

        255,

        .55

    );

    font-size:.90rem;

}

/* ==========================================================
   CSS-18
   BUTTONS
========================================================== */

/* ----------------------------------------------------------
   CSS-18.01
   Base Button
----------------------------------------------------------- */

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

}

/* ----------------------------------------------------------
   CSS-18.02
   Large
----------------------------------------------------------- */

.btn-lg{

    padding:18px 42px;

}

/* ----------------------------------------------------------
   CSS-18.03
   Extra Large
----------------------------------------------------------- */

.btn-xl{

    padding:20px 48px;

    font-size:1.05rem;

}

/* ----------------------------------------------------------
   CSS-18.04
   Primary
----------------------------------------------------------- */

.btn-primary{

    background:var(--gold);

    color:var(--primary);

}

.btn-primary:hover{

    background:var(--gold-light);

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

/* ----------------------------------------------------------
   CSS-18.05
   Outline
----------------------------------------------------------- */

.btn-outline{

    margin-top:20px;

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

    color:var(--white);

}

.btn-outline:hover{

    background:var(--white);

    color:var(--primary);

}

/* ==========================================================
   CSS-19
   UTILITIES & ANIMATIONS
========================================================== */

/* ----------------------------------------------------------
   CSS-19.01
   Utility Classes
----------------------------------------------------------- */

.hidden{

    display:none;

}

.center{

    text-align:center;

}

/* ----------------------------------------------------------
   CSS-19.02
   Reveal
----------------------------------------------------------- */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ----------------------------------------------------------
   CSS-19.03
   Fade
----------------------------------------------------------- */

.fade-in{

    animation:

        fadeIn

        1.2s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================================
   CSS-20
   RESPONSIVE
========================================================== */

@media(

    max-width:992px

){

    .grid-2,

    .comparison-grid,

    .dream-index,

    .promise-grid,

    .reason-grid,

    .pillar-grid,

    .testimonial-grid{

        grid-template-columns:1fr;

    }

    .story-block{

        grid-template-columns:1fr;

        gap:50px;

    }

    .story-block.reverse{

        direction:ltr;

    }

    .navigation{

        display:none;

    }

    .menu-button{

        display:block;

    }

    section{

        padding:90px 0;

    }

}

@media(

    max-width:768px

){

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.4rem;

    }

    .header-container{

        padding:16px 20px;

    }

    .roadmap-wrapper::before{

        left:30px;

    }

    .step-number{

        width:60px;

        height:60px;

        font-size:1.1rem;

    }

    .step-content{

        padding:25px;

    }

    .mission-card,

    .promise-card,

    .story-transition{

        padding:35px;

    }

    .btn{

        width:100%;

    }

}

@media(

    max-width:576px

){

    section{

        padding:70px 0;

    }

    .hero{

        min-height:90vh;

    }

    .footer-links,

    .footer-social,

    .footer-legal{

        flex-direction:column;

        gap:15px;

    }

}