/* ==========================================================================
   CTM PATH™ Guided Journey™

   File        : welcome.css
   Version     : 5.0

   Page        : 01 — Welcome™

   Purpose:

   Premium Welcome Experience Styling


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






/* ==========================================================================
   PAGE FOUNDATION
   ========================================================================== */


.welcome-page {


    width:

    100%;


    min-height:

    100vh;


    background:

    var(--ctm-background);


    color:

    var(--text-primary);


}









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


.welcome-hero {


    padding-top:

    var(--space-lg);


    padding-bottom:

    var(--space-md);


    text-align:

    center;


}








.welcome-content {


    max-width:

    900px;


    margin:

    0 auto;


}








.welcome-title {


    font-family:

    var(--font-tamil);


    font-size:

    clamp(
        38px,
        5vw,
        64px
    );


    line-height:

    1.45;


    font-weight:

    700;


    color:

    var(--text-primary);


}








.welcome-tagline {


    margin-top:

    24px;


    font-size:

    clamp(
        22px,
        3vw,
        32px
    );


    letter-spacing:

    4px;


    color:

    var(--ctm-gold);


    font-weight:

    700;


}








.welcome-description {


    margin-top:

    32px;


    font-size:

    22px;


    color:

    var(--text-secondary);


}








.welcome-description-en {


    margin-top:

    18px;


    font-size:

    18px;


    color:

    var(--text-muted);


}









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


.discovery-section {


    padding:

    var(--space-md) 0;


    text-align:

    center;


}








.section-heading h2 {


    font-family:

    var(--font-tamil);


    font-size:

    34px;


    color:

    var(--text-primary);


}








.section-heading p {


    margin-top:

    12px;


    color:

    var(--ctm-teal-light);


    letter-spacing:

    2px;


}








.discovery-grid {


    margin-top:

    45px;


    display:

    grid;


    grid-template-columns:

    repeat(
        4,
        1fr
    );


    gap:

    24px;


}








.discovery-card {


    padding:

    32px 24px;


    min-height:

    340px;


    display:

    flex;


    flex-direction:

    column;


    align-items:

    center;


    justify-content:

    flex-start;


    background:

    var(--ctm-glass);


    border:

    1px solid var(--border-soft);


    border-radius:

    var(--radius-lg);


    box-shadow:

    var(--shadow-premium);


    transition:

    all .35s ease;


}








.discovery-card:hover {


    transform:

    translateY(-8px);


    border-color:

    var(--ctm-gold);


    box-shadow:

    var(--shadow-gold);


}








.discovery-icon {


    width:

    72px;


    height:

    72px;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    border-radius:

    50%;


    font-size:

    34px;


    color:

    var(--ctm-gold);


    border:

    1px solid var(--border-gold);


    margin-bottom:

    18px;


}








.discovery-number {


    font-size:

    14px;


    letter-spacing:

    3px;


    color:

    var(--ctm-teal);


    margin-bottom:

    14px;


}








.discovery-card h3 {


    font-family:

    var(--font-tamil);


    font-size:

    22px;


    color:

    var(--text-primary);


}








.discovery-card h4 {


    margin-top:

    12px;


    color:

    var(--ctm-gold-light);


    font-size:

    15px;


    letter-spacing:

    1px;


}








.discovery-card p {


    margin-top:

    20px;


    color:

    var(--text-secondary);


    line-height:

    1.8;


}









/* ==========================================================================
   FINAL INVITATION
   ========================================================================== */


.welcome-invitation {


    padding:

    var(--space-lg) 0;


    text-align:

    center;


}








.welcome-invitation h2 {


    font-family:

    var(--font-tamil);


    font-size:

    36px;


}








.welcome-invitation p {


    margin-top:

    20px;


    color:

    var(--text-secondary);


}








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

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


.welcome-start-btn {


    margin-top:

    40px;


    padding:

    18px 45px;


    border:

    none;


    border-radius:

    var(--radius-pill);


    background:

    linear-gradient(

        135deg,

        var(--ctm-blue),

        var(--ctm-blue-deep)

    );


    color:

    white;


    font-size:

    18px;


    font-weight:

    700;


    box-shadow:

    var(--shadow-blue);


    transition:

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


}








.welcome-start-btn:hover {


    transform:

    translateY(-5px);


    box-shadow:

    0 0 60px var(--ctm-blue-glow);


}









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


@media(max-width:1100px){



.discovery-grid {


    grid-template-columns:

    repeat(
        2,
        1fr
    );


}



}







@media(max-width:700px){



.discovery-grid {


    grid-template-columns:

    1fr;


}



.welcome-title {


    font-size:

    36px;


}



.welcome-description {


    font-size:

    18px;


}



}