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

@media (max-width:1200px){

    .hero{
        padding-top:160px;
    }

    .hero-grid{
        gap:60px;
    }

    .why-grid{
        grid-template-columns:repeat(4,1fr);
        gap:35px;
    }

    .compliance-grid{

        display:grid;

        grid-template-columns:1fr 1fr;

        grid-template-areas:
            "image image"
            "content card";

        gap:45px;

        align-items:start;

    }

    .compliance-image{

        grid-area:image;

        max-width:700px;

        width:100%;

        margin:auto;

         aspect-ratio:16/8;

        overflow:hidden;

    }

    .compliance-image img{

        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;

    }

    .compliance-content{

        grid-area:content;

    }

    .compliance-content h2{
        font-size:28px;
    }

    .compliance-content p{

        font-size:15px;
        line-height:1.5;

    }

    .compliance-card{

        grid-area:card;

        max-width:100%;

        margin:0;

    }

}

/*==================================================
1100px
==================================================*/

@media (max-width:1100px){

    nav{

        gap:28px;

    }

    nav a{

        font-size:17px;

    }

    header .logo{

        width:18%;

    }

    .logo img{

        width:150px;

    }

}

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

@media (max-width:1024px){

    .process-grid{

        display:grid;

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

        gap:50px 35px;

        justify-items:center;

    }

    .process-arrow{

        display:none;

    }

    .process-item{

        width:100%;
        margin-bottom:0;

    }

    .process-card{

        width:170px;
        height:170px;

    }

}

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

@media (max-width:992px){

    /*=========================
    HEADER
    =========================*/

    nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    header .btn{

        display:none;

    }

    .nav-links{
        display:none;
    }

    .header-btn{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

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

    .hero{

        min-height: auto;
        padding-bottom:80px;

    }

    .hero-grid{

        grid-template-columns:1fr;
        gap:60px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content h1{

        font-size:3.8rem;
        line-height:1.1;

    }

    .hero-content p{

        max-width:700px;
        margin:30px auto;

    }

    .hero-content .btn-group{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-form{

        width:100%;
        max-width:700px;
        margin:auto;

    }

    /*=========================
    CTA HERO
    =========================*/

    .hero-cta{

        position:relative;
        left:auto;
        bottom:auto;
        transform:none;

        margin-top:40px;
        padding:0;

    }

    .hero-cta-box{

        grid-template-columns:1fr;
        text-align:center;
        gap:25px;
        padding:35px;

    }

    .hero-cta-icon{

        margin:auto;

    }

    /*=========================
    SERVICES
    =========================*/

    .services{

        padding:100px 0 120px;

    }

    .services-grid{

        grid-template-columns:repeat(2,1fr) !important;
        gap:25px;

    }

    /*=========================
    WHY
    =========================*/

    .why-grid{

        grid-template-columns:repeat(2,1fr);
        gap:45px 30px;

    }

    /*=========================
    PROCESS
    =========================*/

    .process-grid{

        display:grid;

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

        gap:50px;

        justify-items:center;

    }

    .process-arrow{

        display:none;

    }

    .process-item{

        margin-bottom:0;
        width:100%;

    }

    .process-card{

        width:170px;
        height:170px;

    }

    /*=========================
    FAQ
    =========================*/

    .faq-grid{

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

    }

    /*=========================
    FOOTER
    =========================*/

    .footer-grid{

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

    }

}

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

@media (max-width:768px){

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

    .hero{

        padding-top:130px;
        padding-bottom:100px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-content p{

        font-size:1.05rem;

    }

    .hero-form{

        max-width:100%;

    }

    /*=========================
    CTA HERO
    =========================*/

    .hero-cta{

        margin-top:40px;

    }

    /*=========================
    SERVICES
    =========================*/

    .services{

        padding:80px 0;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    /*=========================
    WHY
    =========================*/

    .why-grid{

        grid-template-columns:repeat(2,1fr);
        gap:35px 20px;

    }

    /*=========================
    FOOTER CTA
    =========================*/

    .footer-cta{

        height:auto;
        padding:90px 0;

    }

    .footer-cta h2{

        font-size:38px;

    }

    .footer-cta p{

        font-size:17px;

    }

    /*=========================
    FOOTER
    =========================*/

    .footer-grid{

        grid-template-columns:repeat(2,1fr);
        gap:40px;
        text-align:center;

    }

    .footer-logo{

        margin:auto auto 25px;

    }

    .footer-about p{

        margin:auto;

    }

    .footer-contact li,
    .footer-links li{

        justify-content:center;

    }

}

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

@media (max-width:480px){

    .hero{

        padding-top:110px;

    }

    .hero-content h1{

        font-size:2.2rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .services-grid{
        
        grid-template-columns:1fr !important;
    }

    .section-title{

        font-size:2rem;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .process-grid{
        grid-template-columns:1fr !important;
        gap: 30px;
    }

    .process-card{

        width:150px;
        height:150px;

    }

    .compliance-grid{
        
        grid-template-columns:1fr;
        grid-template-areas:
            "image"
            "content"
            "card";
        gap:30px;
    }

    .faq-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-cta h2{

        font-size:2rem;

    }

    .section-header h2{
        font-size:38px;
    }

}