/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    .top-banner address{
        display: flex;
        flex-direction: column;
        gap: 10px
    }
    .contacts__content form p{
        flex-direction: column;
        width: 100%
    }
    .contacts__content form input, .contacts__content form .wpcf7-submit{
        width: 100%
    }
    .footer-top .logo img {
        height: 70px
    }
    .contacts__content form > p{
        margin-top: 30px
    }
    section{
        overflow: hidden
    }

}
@media all and (max-width: 600px){
    h1 {
        font-size: 3.4rem
    }
    h2 {
        font-size: 3rem
    }
    h3, .small-images .description {
        font-size: 2.4rem
    }
    .subtitle div {
        width: 35px
    }
    .advantages ul.advantages-list, .advantages .content .grid-2.images,
    .projects-slider .small-images
    {
        grid-template-columns: 1fr
    }
    .about__media .owl-carousel .img-container > video, .about__media .owl-carousel .img-container >img, .services__media .owl-carousel .img-container > video, .services__media .owl-carousel .img-container >img, .projects__media .owl-carousel .item >div:first-child > video, .projects__media .owl-carousel .item >div:first-child >img {
        height: 380px
    }
    .contacts__content form p{
        gap: var(--size-1)
    }

    .main-block .content{
        padding-top: 195.6px
    }
}
@media all and (max-width: 480px){
    h1 {
        font-size: 2.6rem
    }
    h2 {
        font-size: 2.4rem
    }
    h3, .small-images .description {
        font-size: 2rem
    }
    .slider-nav-wrap{
        margin-top: 30px
    }
    .slider-nav-wrap .prev, .slider-nav-wrap .next
    {
        position: static
    }
    .slider-nav{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--size-1)
    }
    .subtitle{
        line-height: 1.6;
        text-wrap-mode: nowrap
    }
    .main-block .btns{
        flex-wrap: wrap;
        margin-top: var(--size-2)
    }
    .main-block .btn{
        width: 100%;
        display: inline-block
    }
    .btn {
        padding: 16px 20px;
        width: 100%
    }
}
@media all and (max-width: 400px){

    .owl-carousel .description{
        padding: var(--size-1)
    }
    section p:not(:first-child) {
        margin-top: 10px
    }
    .about__media .owl-carousel .img-container > video, .about__media .owl-carousel .img-container >img, .services__media .owl-carousel .img-container > video, .services__media .owl-carousel .img-container >img, .projects__media .owl-carousel .item >div:first-child > video, .projects__media .owl-carousel .item >div:first-child >img {
        height: 300px
    }
    .projects-slider .small-images .img-container {
        height: 140px
    }

    /*.main-block{*/
    /*    min-height: 100vh;*/
    /*    height: auto!important*/
    /*}*/
    /*.main-block .content{*/
    /*    padding-bottom: 30px*/
    /*}*/

}