@charset "utf-8";
/*==================================================
DRMC.CL
responsive.css
==================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

    .hero{

        max-width:1200px;
        padding:50px;

    }

    .text-container h1{

        font-size:3.5rem;

    }

    .worker-image{

        max-width:560px;

    }

}

/*==============================
1200px
==============================*/

@media (max-width:1200px){

    .hero{

        gap:40px;

    }

    .logo{

        width:210px;
        margin-bottom:60px;

    }

    .text-container h1{

        font-size:3rem;

    }

    .text-container p{

        font-size:1.1rem;

    }

    .worker-image{

        max-width:480px;

    }

}

/*==============================
1024px
==============================*/

@media (max-width:1024px){

    .hero{

        padding:40px;
        gap:20px;

    }

    .hero-content{

        width:55%;

    }

    .hero-worker{

        width:45%;

    }

    .text-container{

        gap:20px;

    }

    .line{

        height:90px;

    }

    .text-container h1{

        font-size:2.6rem;

    }

    .btn-primary{

        padding:18px 34px;

    }

}

/*==============================
992px
==============================*/

@media (max-width:992px){

    .hero{

        flex-direction:column;
        justify-content:center;
        text-align:center;

        min-height:100vh;

    }

    .hero-content{

        width:100%;
        align-items:center;

    }

    .hero-worker{

        width:100%;
        justify-content:center;
        margin-top:40px;

    }

    .text-container{

        justify-content:center;
        text-align:left;

    }

    .worker-image{

        max-width:420px;

    }

}

/*==============================
768px
==============================*/

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    .hero{

        padding:30px 25px;

    }

    .logo{

        width:180px;
        margin-bottom:45px;

    }

    .text-container{

        flex-direction:column;
        text-align:center;
        gap:18px;

    }

    .line{

        width:70px;
        height:6px;
        min-width:70px;

    }

    .text-container h1{

        font-size:2.2rem;

    }

    .text-container p{

        font-size:1rem;
        line-height:1.7;

    }

    .worker-image{

        max-width:360px;

    }

    .btn-primary{

        width:100%;
        max-width:320px;

    }

    .modal{

        padding:20px;

    }

    .modal-content{

        padding:35px 25px;

        max-height:90vh;

        overflow-y:auto;

    }

}

/*==============================
576px
==============================*/

@media (max-width:576px){

    .hero{

        padding:25px 20px;

    }

    .logo{

        width:150px;

    }

    .text-container h1{

        font-size:1.9rem;

    }

    .text-container p{

        font-size:.95rem;

    }

    .worker-image{

        max-width:290px;

    }

    .btn-primary{

        width:100%;
        font-size:.95rem;

        padding:16px;

    }

    .modal-content{

        border-radius:14px;

        padding:30px 20px;

    }

    .close-modal{

        width:38px;
        height:38px;

        font-size:24px;

    }

}

/*==============================
480px
==============================*/

@media (max-width:480px){

    .hero{

        min-height:auto;

        padding-top:50px;
        padding-bottom:30px;

    }

    .text-container h1{

        font-size:1.7rem;

    }

    .text-container p{

        font-size:.92rem;

    }

    .worker-image{

        width:100%;
        max-width:250px;

    }

    .modal-header h2{

        font-size:1.5rem;

    }

}

/*==============================
390px
==============================*/

@media (max-width:390px){

    .hero{

        padding:40px 15px;

    }

    .logo{

        width:135px;

    }

    .text-container h1{

        font-size:1.5rem;

    }

    .text-container p{

        font-size:.9rem;

    }

    .worker-image{

        max-width:220px;

    }

    .btn-primary{

        font-size:.9rem;

    }

    .modal-content{

        padding:25px 18px;

    }

}

/*==============================
360px
==============================*/

@media (max-width:360px){

    .text-container h1{

        font-size:1.4rem;

    }

    .worker-image{

        max-width:200px;

    }

}

/*==============================
320px
==============================*/

@media (max-width:320px){

    .hero{

        padding:25px 12px;

    }

    .logo{

        width:120px;

    }

    .text-container h1{

        font-size:1.25rem;

    }

    .text-container p{

        font-size:.85rem;

    }

    .worker-image{

        max-width:180px;

    }

    .btn-primary{

        font-size:.85rem;

        padding:14px;

    }

}/* CSS Document */