/*=========================================
THE EXPERIENCE
RESPONSIVE
=========================================*/

@media(max-width:1200px){

    .floating-grid {
    grid-template-columns: 30% 58%;
    }

    .floating-intro {
    font-size: 18px !important;
    }

    .floating-right p{
        font-size: 16px;
    }

    .floating-left h2{
        font-size: 40px;
    }
     .floating-left h2 br{
        display: none !important;
     }

     .highlight h3 {
    color: #fff;
    font-size: 18px;
     }

     .experience-content h2{
        font-size: 40px;
     }

     .experience-intro {
    font-size: 16px;
     }

     .experience-item h3 {
    font-size: 20px;
     }

     .purpose-heading h2 {
    font-size: 40px;
    line-height: 50px;
     }

     .purpose-text h3 {
    font-size: 22px;
     }

     .purpose-text p{
        font-size: 16px;
     }

     .purpose-number{
        font-size: 40px;
     }
    .experience-grid{

        grid-template-columns:420px 1fr;

        gap:70px;

    }

    .about-content h1{
        font-size: 40px !important;
    }

    .waitlist-wrapper h2 {
    font-size: 40px;
    line-height: 50px;
    margin-top: 0px;
    }

    .waitlist-wrapper p{
        font-size: 16px;
    }

    .waitlist-form input{
        height: 50px;
    }

    .waitlist-form button{
        height: 50px;
    }
    .experience-image{

        height:620px;

    }

}

@media(max-width:992px){

    .experience-section{

        padding:120px 0;

    }

   

    .experience-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .experience-image{

        position:relative;

        top:auto;

        height:520px;

        order:1;

    }

    .experience-content{

        order:2;

        max-width:100%;

    }

    .experience-content h2{

        font-size:56px;

    }

}

@media(max-width:768px){

    .experience-section{

        padding:90px 0;

    }

    .experience-grid{

        gap:50px;

    }

    .experience-image{

        height:420px;

        border-radius:22px;

    }

    .experience-content h2{

        font-size:42px;

        line-height:1.05;

        margin:20px 0 25px;

    }

    .experience-intro{

        font-size:16px;

        line-height:1.8;

        margin-bottom:45px;

    }

    .experience-list{

        padding-left:40px;

    }

    .experience-list::before{

        left:12px;

    }

    .step-number{

        left:-40px;

        width:28px;

        height:28px;

        font-size:10px;

    }

    .experience-item{

        gap:18px;

        padding-bottom:35px;

    }

    .experience-item h3{

        font-size:22px;

        margin-bottom:10px;

    }

    .experience-item p{

        font-size:15px;

        line-height:1.8;

    }

}

@media(max-width:480px){

    .experience-section{

        padding:80px 0;

    }

    .experience-image{

        height:300px;

        border-radius:18px;

    }

    .experience-content h2{

        font-size:34px;

    }

    .experience-intro{

        font-size:15px;

    }

    .experience-list{

        padding-left:32px;

    }

    .experience-list::before{

        left:10px;

    }

    .step-number{

        left:-32px;

        width:24px;

        height:24px;

        font-size:9px;

    }

    .experience-item h3{

        font-size:19px;

    }

    .experience-item p{

        font-size:14px;

        line-height:1.7;

    }

}


/*=========================================
WHAT IS FLOATING
RESPONSIVE
=========================================*/

@media (max-width:991px){

    .floating-section{

        padding:120px 0;

    }

    

    .floating-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .floating-left{

        position:relative;

        top:auto;

    }

    .floating-left h2{

        font-size:30px;

    }

    .floating-right{

        max-width:100%;

    }

    .floating-intro{

        font-size:24px !important;

        margin-bottom:30px !important;

    }

    .floating-right p{

        font-size:17px !important;

        line-height:1.9;

    }

    .experience-image {
        display: none;
    }


        .experience-content h2 {
        font-size: 30px;
        line-height: 40px;
    }


    .floating-highlights{

        margin-top:70px;

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

        gap:25px;

    }

}


@media (max-width:767px){

    .floating-section{

        padding:90px 0;

    }

    .floating-grid{

        gap:40px;

    }

    .floating-left h2{

        font-size:30px;

        line-height:1.05;

    }

    .floating-intro{

        font-size:20px !important;

        line-height:1.6 !important;

    }

    .floating-right p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:20px;

    }

    .floating-highlights{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:50px;

    }

    .highlight{

        padding:18px 0;

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

    }

    .highlight:last-child{

        border-bottom:none;

    }

    .highlight::before{

        width:50px;

    }

    .highlight h3{

        font-size:18px;

    }

    

}


@media (max-width:480px){

    .floating-section{

        padding:70px 0;

    }

    .floating-left h2{

        font-size:34px;

    }

    .floating-intro{

        font-size:18px !important;

    }

    .floating-right p{

        font-size:14px;

    }

    .highlight h3{

        font-size:18px;

    }

}

@media(max-width:991px){

    .spa-purpose{

        padding:100px 0;

    }

    .purpose-heading{

        margin-bottom:70px;
    

    }

    .purpose-row{

        grid-template-columns:70px 1fr;

        gap:30px;

    }

    .purpose-heading h2 {
    font-size: 30px;
    line-height: 40px;
     }

     .purpose-text h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .purpose-number {
        font-size: 26px;
    }

    .waitlist-wrapper h2{
        font-size: 30px;
        line-height: 40px;
    }

    .waitlist-form button{
        font-size: 14px;
    }
}

@media(max-width:767px){

    .spa-purpose{

        padding:90px 0;

    }

    .purpose-heading h2{

        font-size:30px;

    }

    .purpose-row{

        grid-template-columns:1fr;

        gap:20px;

        padding:35px 0;

    }

    .purpose-number{

        font-size:26px;

    }

    .purpose-text h3{

        font-size:18px;

        margin-bottom:15px;

    }

    .purpose-text p{

        font-size:16px;

        line-height:1.8;

    }

    .purpose-quote{

        margin-top:70px;

    }

    .purpose-quote p{

        font-size:26px;

        padding-left:20px;

    }

        .about-content h1 {
        font-size: 26px !important;
    }
}

@media(max-width:460px){
    .about-footer-labels{
            display: inline !important;
    text-align: center;
    }

        .floating-left h2 {
        font-size: 25px;
        letter-spacing: 0px;
    }

        .experience-content h2 {
        font-size: 28px;
        line-height: 36px;
    }

        .purpose-heading h2 {
        font-size: 27px;
        line-height: 31px;
        letter-spacing: 0;
    }

        .waitlist-wrapper h2 {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: 0px;
    }

        .purpose-text h3 {
        font-size: 17px;
 
    }

    .waitlist-form button {
        font-size: 11px;
    }
}