/* === HEADER === */
@media screen and (max-width: 1369px) {
    .container {
        max-width: 100%;
        padding: 0 50px;
    }

    .header-main{
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-content{
        width: 100%;
        text-align: center;
    }

    .header-contact{
        flex-direction: column;
    }

    .header-contact .call-us{
        margin-top: 50px;
    }

    .banner-wrapper{
        margin-top: 150px;
        width: 100%;
        margin-left: 0;
    }

    .banner-wrapper .banner{
        position: static;
        width: 100%;
    }

    .banner-wrapper .banner-bg{
        position: absolute;
        top: -5%;
        left: 1%;
        z-index: -1;
    }

    .section-content{
        margin-top: 60px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .section-content .suptitle{
        margin-bottom: 10px; 
    }
}

@media screen and (max-width: 1035px) {
    .header-main{
        margin-top: 70px;
    }
    .header-content{
        min-width: 0;
    }
    .header-content .title{
        font-size: 35px;
        font-weight: 700;
    }
    .header-content .subtitle{
        font-size: 16px;
    }
    .header-contact .call-us{
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .header-nav__items{
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        height: calc(100vh - 100px);
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 100px;
        align-items: center;
        opacity: 0;
        z-index: -1;
        transition: .3s linear;
    }

    .header-nav__items li{
        display: inline-block;
        text-align: center;
        font-size: 21px;
        margin:0 0 20px 0 !important;
        width: 100%;
        margin: 0;
    }
    
    .header-nav__items a:hover{
        border-bottom: 1px solid #000;
    }

    .header-contact{
        margin-top: 45px;
    }

    .banner-wrapper{
        margin-top: 45px;
    }

    .menu {
        transition: .3s linear;
        opacity: 1;
        z-index: 1;
        height: 100vh;
    }

    .menu-logo{
        display: block;
    }

    .section-content .title{
        font-size: 30px;
    }

    .section-content .title{
        font-size: 16px;
    }
}



@media screen and (max-width: 480px) {
    .section-content .title{
        font-size: 20px;
    }
}


/* === WHY US === */
@media screen and (max-width: 1369px) {
    .why-us{
        margin-top: 100px;
    }
    .why-us-cards{
        padding: 0 50px;
        gap: 30px;
    }
    .why-us-cards .card {
        min-width: 250px;
    }

    .card .title{
        font-size: 18px;
    }

    .card .description{
        font-size: 14px;
    }
}

@media screen and (max-width: 1035px) {
    .why-us{
        margin-top: 60px;
    }
    .why-us-cards{
        padding: 0 50px;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .why-us-cards .card {
        width: 35%;
    }
}

@media screen and (max-width: 480px) {
    .why-us-header{
        width: 260px;
    }

    .why-us-header .title{
        margin-top: 20px;
        font-size: 30px;
        line-height: 1;
    }
    
    .why-us-header .bg-title{
        top: -4%;
        font-size: 36px;
    }

    .why-us-cards{
        padding: 0 20px;
        gap: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .why-us-cards .card:not(:last-child) {
        margin-bottom: 30px;
    }

    .why-us-cards .card {
        width: 100%;
    }

    .card .title{
        font-size: 20px;
    }

    .card .description{
        font-size: 16px;
    }
}

/*==== ABOUT US ==== */

@media screen and (max-width: 1369px) {
    .about-us{
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 50px;
        margin-top: 100px;
    }

    .about-us .banner-wrapper{
        width: 100%;
        margin: 0;
    }

    .about-us .banner-wrapper .banner-bg{
        top: -4%;
        transform: scale(-1.03, -1.03 );
    }

}

@media screen and (max-width: 768px) {
    .about-us {
        margin-top: 42px;
    }

    .section-content{
        margin-top: 63px;
    }
}


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

@media screen and (max-width: 1369px) {
    .work-process{
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 50px;
        margin-top: 10px;
    }

    .work-process .banner-wrapper{
        width: 100%;
        margin: 100px 0;
    }
    
    .work-process .banner-wrapper .banner-bg{
        top: -4%;
    }
}

@media screen and (max-width: 768px){
    .work-process .banner-wrapper{
        margin: 42px 0 53px;
    }
}

/* ==== OUR EXPERIANCE ==== */
@media screen and (max-width: 1369px) {
    .our-experiance{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        padding: 0 50px;
    }
}

@media screen and (max-width: 768px) {
    .counters{
        flex-direction: column;
        align-items: center;
    }
}

/* ==== CONTACTS ==== */

@media screen and (max-width: 1369px) {
    .contacts{
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        padding: 0 50px;
    }

    .contact-info{
        width: 100%;
    }

    #textarea{
        height: 260px;
    }

    .contact-find-us{
        margin-top: 80px;
    }

    #map{
        width: 100%;
        margin-top: 50px;
    }
}

@media screen and (max-width: 768px) {
    #name, #email{
        width: 100%;
    }

    #email{
        margin-top: 20px;
    }

    #map{
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .footer{
        padding:0 50px 30px;
    }
}