/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    :root {
        --section-distance: 45px;
        --btn-height: 48px
    }
   
    .grid-4{
        grid-template-columns: 1fr
    }
    .btn{
        padding: 0 24px;
        font-size: 1.8rem;
        height: var(--btn-height)
    }
    
    .main-block .content{
        padding-top: 62px;
        display: flex;
        flex-direction: column-reverse;
        gap: var(--size-1)
    }
    .text-and-small-imgs{
        flex-direction: column-reverse
    }
    .text-and-small-imgs .text{
        margin-top: var(--size-2);
        padding-right: 0
    }
    .main-block .content >div{
        height: auto;
        padding-bottom: 0
    }
    .main-block .small-imgs{
        gap: var(--size-1)
    }
    h1{
        font-size: 2.4rem;
        letter-spacing: 0px
    }
    .subtitle{
        font-size: 1.6rem
    }
    h2, .about .subtitle + p, .testimonials .subtitle + p, .contacts .subtitle + p,
    .our-partners .subtitle + p
    {
        font-size: 2rem;
        line-height: 1.6;
        letter-spacing: 0px;
        width: 100%
    }
    .about .advantages{
        width: 100%;
        flex-direction: column;
        margin: var(--size-3) 0 var(--size-4) auto
    }
    .about .media .img-container, .about .media, .about .media .video-wrapper, .about .media .video-wrapper video {
        height: 50dvh;
        max-height: 350px
    }
    .play-pause{
        min-width: 70px;
        min-height: 70px;
        width: 70px;
        height: 60px;
        top: calc(50% - 30px);
        left: calc(50% - 30px)
    }
    .about .media .btn{
        margin: -69px auto 0
    }
    .testimonials .content{
        flex-direction: column;
        gap: var(--size-3)
    }
    .testimonials .content >div{
        width: 100%
    }
    .testimonials-slider .img-container{
        height: 50dvh;
        max-height: 350px
    }
    .testimonials-slider .text, .testimonials-slider .author {
        margin-top: var(--size-1)
    }
    .owl-dots{
        margin-left: 0;
        gap: var(--size-1)
    }
    .owl-dot{
        width: var(--size-2)
    }
    .infinite-slider{
        gap: 100px
    }
    .infinite-slider__items{
        gap: 75px
    }
    .contacts .subtitle + p{
        width: 100%
    }
    .contact-form {
        padding: var(--size-2) 0
    }
    .contact-form input{
        height: var(--size-4)
    }
    .contact-form input, .contact-form textarea{
        background: #ffffff1a
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder{
        color: var(--white)
    }
    .mfp-close-btn-in .mfp-close {
        top: var(--size-1);
        right: var(--size-1)
    }
    
}
@media all and (max-width: 600px){
    
   
}
@media all and (max-width: 480px){
   
   
}
@media all and (max-width: 400px){
   
    section p:not(:first-child) {
        margin-top: var(--size-1)
    }


}
@media all and (max-width: 360px){
   
   
}