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

CTM PATH™ Guided Journey v6.0

Purpose
Responsive Mobile System

Responsibility
• Desktop First
• Laptop
• Tablet
• Mobile
• Small Mobile
• Landscape Support
• Touch Optimization

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


/*==================================================
Large Desktop
==================================================*/

@media (min-width:1600px){

    .container{

        max-width:1440px;

    }

    .hero{

        max-width:980px;

        margin-top:120px;

        gap:80px;

    }

    .brand-logo{

        width:220px;

    }

    .welcome-block{

        margin-top:90px;

    }

    .tamil{

        font-size:4.8rem;

    }

    .tamil-welcome{

        font-size:3.8rem;

    }

    .tamil-intro{

        font-size:3.3rem;

    }

    .english{

        font-size:2.15rem;

    }

    .english-welcome{

        font-size:2.6rem;

    }

}


/*==================================================
Desktop
==================================================*/

@media (max-width:1400px){

    .container{

        max-width:1120px;

    }

}


/*==================================================
Laptop
==================================================*/

@media (max-width:1200px){

    .container{

        max-width:980px;

    }

    .hero{

        margin-top:100px;

        gap:64px;

    }

    .brand-logo{

        width:190px;

    }

    .welcome-block{

        margin-top:70px;

    }

    .tamil{

        font-size:3.8rem;

    }

    .tamil-welcome{

        font-size:3rem;

    }

    .tamil-intro{

        font-size:2.7rem;

    }

    .english{

        font-size:1.8rem;

    }

    .english-welcome{

        font-size:2rem;

    }

}/*==================================================
Tablet Landscape
==================================================*/

@media (max-width:1024px){

    .screen{

        padding:

            160px

            36px

            60px;

    }

    .container{

        max-width:860px;

    }

    .hero{

        margin-top:80px;

        gap:54px;

    }

    .brand-logo{

        width:170px;

    }

    .welcome-block{

        margin-top:58px;

    }

    .tamil{

        font-size:3.2rem;

    }

    .tamil-welcome{

        font-size:2.6rem;

    }

    .tamil-intro{

        font-size:2.3rem;

    }

    .english{

        font-size:1.55rem;

    }

    .english-welcome{

        font-size:1.8rem;

    }

    .btn{

        min-width:300px;

    }

}


/*==================================================
Tablet Portrait
==================================================*/

@media (max-width:900px){

    .screen{

        padding:

            150px

            28px

            56px;

    }

    .hero{

        gap:48px;

    }

    .welcome-block{

        margin-top:46px;

    }

    .row{

        flex-direction:column;

    }

    .grid-2,

    .grid-3{

        grid-template-columns:1fr;

    }

}


/*==================================================
Mobile
==================================================*/

@media (max-width:768px){

    .screen{

        padding:

            138px

            20px

            42px;

        min-height:100svh;

    }

    .container{

        width:100%;

    }

    .hero{

        width:100%;

        margin-top:64px;

        gap:40px;

    }

    .brand-logo{

        width:145px;

    }

    .welcome-block{

        margin-top:36px;

        margin-bottom:18px;

        gap:18px;

    }

    .introduction-block{

        gap:22px;

    }

    .screen-caption{

        font-size:.78rem;

        letter-spacing:2px;

    }

    .tamil{

        font-size:2.45rem;

        line-height:1.42;

    }

    .tamil-welcome{

        font-size:2.15rem;

    }

    .tamil-intro{

        font-size:1.95rem;

    }

    .english{

        max-width:100%;

        font-size:1.2rem;

        line-height:1.75;

    }

    .english-welcome{

        font-size:1.5rem;

    }

    .btn{

        width:100%;

        min-width:100%;

    }

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2.2rem;

    }

    h3{

        font-size:1.8rem;

    }

}

/*==================================================
Small Mobile
==================================================*/

@media (max-width:480px){

    .screen{

        padding:

            120px

            16px

            34px;

    }

    .brand-logo{

        width:120px;

    }

    .hero{

        margin-top:52px;

        gap:34px;

    }

    .welcome-block{

        margin-top:30px;

        margin-bottom:16px;

        gap:16px;

    }

    .introduction-block{

        gap:18px;

    }

    .tamil{

        font-size:2rem;

    }

    .tamil-welcome{

        font-size:1.8rem;

    }

    .tamil-intro{

        font-size:1.65rem;

    }

    .english{

        font-size:1.05rem;

    }

    .english-welcome{

        font-size:1.25rem;

    }

    .screen-caption{

        font-size:.72rem;

    }

    .card{

        padding:22px;

    }

    .message{

        padding:22px;

    }

}


/*==================================================
Very Small Mobile
==================================================*/

@media (max-width:360px){

    .brand-logo{

        width:104px;

    }

    .hero{

        gap:28px;

    }

    .tamil{

        font-size:1.8rem;

    }

    .tamil-welcome{

        font-size:1.6rem;

    }

    .tamil-intro{

        font-size:1.45rem;

    }

    .english{

        font-size:.92rem;

    }

    .english-welcome{

        font-size:1.08rem;

    }

    .btn{

        min-height:56px;

    }

    .btn-title{

        font-size:.95rem;

    }

    .btn-subtitle{

        font-size:.72rem;

    }

}


/*==================================================
Landscape Phones
==================================================*/

@media (max-height:600px) and (orientation:landscape){

    .screen{

        padding:

            90px

            24px

            30px;

        min-height:auto;

    }

    .hero{

        margin-top:20px;

        gap:20px;

    }

    .brand-logo{

        width:90px;

    }

    .welcome-block{

        margin-top:20px;

        gap:12px;

    }

    .tamil{

        font-size:2rem;

    }

    .english{

        font-size:1rem;

    }

}


/*==================================================
Touch Devices
==================================================*/

@media (hover:none){

    .btn:hover,

    .card:hover,

    .choice:hover,

    .booking-date:hover,

    .booking-slot:hover{

        transform:none;

    }

}


/*==================================================
Safe Area Support
==================================================*/

@supports (padding:max(0px)){

    .screen{

        padding-left:max(20px,env(safe-area-inset-left));

        padding-right:max(20px,env(safe-area-inset-right));

        padding-top:max(120px,env(safe-area-inset-top));

        padding-bottom:max(40px,env(safe-area-inset-bottom));

    }

}