@media only screen and (max-width:1250px){    
    .contact-wrapper {
        padding: 0 15px;
    }
}

@media only screen and (max-width:1070px){   


    .header{    
        display: none;
    }
    .menuBtn{    
        display: flex;
        z-index: 105;    
        width: 75px;
    }

    .intro {
        margin-top: 0;
    }

    .intro-wrapper {
        align-items: center;
        justify-content: center;
    }

    .header.popUp{    
        z-index: 100;   
         display: flex;
        flex-direction: column-reverse;    
        justify-content: flex-end;
        align-items:flex-start;    
        background-color: rgba(255, 255, 255, 1);
        border: none;
        position: fixed;    
     
        padding-left: 7%;    
        gap: 50px;
        top: 0;    
        right: 0;
        bottom: 0;    
        height: 100vh;
        width: 85vw;    
        animation-duration: 0.55s;  /* Время работы анимации */
        animation-fill-mode: both;  /* Поведение анимации */    
        animation-name: fadeInDown;/* Имя анимации */
    }

    header nav ul {
        display: flex;
        flex-direction: column;    
        align-items: flex-start;
        gap: 30px;    
        padding: 0;       
        font-size: 20px;
    }

    @keyframes fadeInDown { /* Сама анимация */
        0% {                
            /* Старт анимации */        
            opacity: 0;
            transform: translate3d(100%, 0px, 0px);    }
        100% {              
            /* в финале анимации - финал это заданная 0.55s */        
            opacity: 1;
            transform: none;    
        }
    }


    .header-nav , .header-top{
        background-color: transparent;
    }
    header nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 0;
    }

    header nav img {
        object-fit: cover;
        width: 200px;
    }

    .header-top-fix {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        gap: 40px;
    }

    .header-top-contact {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-contact-block, .header-contact-block a {
        color: #222;
        font-size: 20px;
    }

    .header-contact-block svg, .header-contact-block path {
        stroke: #222
    }

    .header-top-messenger p {
        display: none;
    }

    .intro-wrapper {
        height: 60%;
    }

    header {
        background: white;
    height: 70px;
    }

    .media-logo {
        display: block;
        width: 225px;
        margin-left: 10px;
    }
}

@media only screen and (max-width:900px){
    .intro-bottom-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .work {
        margin: 480px auto 0;
    }


    .conditions {
        height: auto;
    }
    
    .company-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .company-wrapper img {
        display: none;
    }
    
    .company-right, .company-left {
        margin-top: 0;
    }

    .choice-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .choice-left {
        margin: 0;
    }

    .choice-right {
        clip-path: none;
    }

    .choice-item {
        align-items: center;
        text-align: center;
    }

    .contact-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .map {
        width: 100%;
    }

    .contact {
        padding-bottom: 0;
    }

    .container {
        width: 100%;
    }

    .swiper-slide {
        width: 100% !important;
    }

    .intro-wrapper {
        height: 65%;
    }
}

@media only screen and (max-width:900px){
    .intro-wrapper {
        padding: 0 15px;
    }

    .intro-wrapper h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .intro-button {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .intro-bottom {
        margin-top: -50px;
    }

    .work h2 , .conditions-wrapper h2{
        font-size: 30px;
    }

    .company h2 {
        font-size: 20px;
        line-height: 33px;
    }
}

@media only screen and (max-width:500px){
    .intro-bottom h2 {
        font-size: 25px;
        text-align: center;
    }

    .contact {
        padding-top: 100px;
    }

    form {
        padding: 20px 0;
    }

    .header.popUp {
        width: 95vw;
    }

    .work {
        margin: 510px auto 0;
    }
    .map {
        height: 400px;
    }

    .conditions, .choice-left, .choice-right, .contact {
        background-attachment: scroll;
    }

    .conditions::after {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .conditions {
        background-position: center;
    }
}