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

/*------------------------------------------------------
    LARGE DESKTOP
------------------------------------------------------*/

@media (max-width:1400px){

    .contact-card{

        grid-template-columns:320px 1fr;

        gap:36px;

    }

}

/*------------------------------------------------------
    TABLET LANDSCAPE
------------------------------------------------------*/

@media (max-width:1150px){

    .contact-hero{

        min-height:58vh;

        padding:120px 5% 70px;

    }

    .hero-content{

        padding:60px 48px;

    }

    .contact-card{

        grid-template-columns:1fr;

    }

    .contact-info{

        position:relative;

        top:auto;

        min-height:auto;

    }

}

/*------------------------------------------------------
    TABLET
------------------------------------------------------*/

@media (max-width:900px){

    .contact-section{

        padding:70px 28px;

    }

    .contact-card{

        padding:30px;

    }

    .contact-form-area{

        padding:32px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .review-card{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:600px){

    .contact-hero{

        min-height:auto;

        padding:110px 20px 60px;

    }

    .hero-content{

        padding:42px 24px;

        border-radius:24px;

    }

    .hero-content h1{

        font-size:clamp(2.3rem,10vw,3.5rem);

    }

    .hero-content p{

        font-size:.96rem;

    }

    .contact-section{

        padding:50px 18px;

    }

    .contact-card{

        padding:20px;

        border-radius:24px;

    }

    .contact-info{

        padding:28px 22px;

        border-radius:22px;

    }

    .contact-form-area{

        padding:24px 18px;

        border-radius:22px;

    }

    .form-step{

        padding:24px 18px;

        border-radius:22px;

    }

    .step-header{

        margin-bottom:30px;

    }

    .step-header h2{

        font-size:2rem;

    }

    .phone-wrapper{

        flex-direction:column;

        align-items:stretch;

    }

    .phone-code{

        width:100%;

        border-right:none;

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

    }

    .buttons,
    .step-actions{

        flex-direction:column;

    }

    .button,
    .next-btn{

        width:100%;

    }

}

/*------------------------------------------------------
    SMALL MOBILE
------------------------------------------------------*/

@media (max-width:420px){

    .hero-content{

        padding:34px 18px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .contact-info h2{

        font-size:1.8rem;

    }

    .step-header h2{

        font-size:1.8rem;

    }

}