/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {
    h1, h2, .subscription-form h4 {
        font-size: 3rem!important
    }
    h3 {
        font-size: 2.4rem!important;
        word-break: break-word
    }
    .grid-2{
        gap: 30px
    }
    p, .btn, .subscription-form form input{
        font-size: 1.4rem!important
    }
    input, textarea{
        height: 50px
    }
    textarea {
        padding-top: 12px
    }
    .main-block .container{
        padding-bottom: 50px
    }
    .accordion__body, .accordion__item.active .accordion__body{
        padding-right: 0!important
    }
    .accordion .show, .accordion .hide {
        font-size: 4.5rem
    }
    .infinite-slider__items{
        gap: 75px
    }
    .contact .name {
        gap: 15px
    }
    .map-container{
        height: 350px
    }
    section:not(.main-block, .about), footer {
        margin-top: 100px!important
    }

    .main-banner-slider .owl-nav button.owl-next,
    .main-banner-slider .owl-nav button.owl-prev,
    .main-banner-slider .owl-nav button.owl-next:hover,
    .main-banner-slider .owl-nav button.owl-prev:hover
    {
        height: 24px;
        width: 12px
    }
    .catalog .owl-nav button.owl-prev, .testimonials .owl-nav button.owl-prev,
    .catalog .owl-nav button.owl-next, .testimonials .owl-nav button.owl-next,
    .catalog .owl-nav button.owl-prev:hover, .testimonials .owl-nav button.owl-prev:hover,
    .catalog .owl-nav button.owl-next:hover, .testimonials .owl-nav button.owl-next:hover
    {
        height: 20px;
        width: 10px
    }
    .main-block h1{
        margin-bottom: 15px
    }
    .services .media .img-container, .about .video-wrapper, .projects-items .img-container,
    .catalog-items .item, .accordion__info img
    {
        height: 350px;
    }
    .infinite-slider{
        gap: 100px
    }
    .slider-nav {
        gap: 20px
    }
    .subscription-form {
        padding: 50px 0
    }
    .sbscrbr-submit-block{
        margin-top: 30px
    }
    .footer p, .footer a, .footer span {
        font-size: 1.6rem
    }

    /*.main-block .container{*/
    /*    align-items: center;*/
    /*    padding-bottom: 0*/
    /*}*/
    .counter-items{
        gap: 50px
    }
    h2 + p{
        max-width: 100%
    }
    .contact .content-wrap {
        margin-top: 50px;
        gap: 50px
    }

    .content-wrap.grid-2 {
        gap: 50px
    }
    .play-pause{
        padding-left: 6px
    }
    .play-pause img{
        width: 23px
    }
    .subscription-form form, .subscription-form form input {
        width: 100%
    }
    address .location-link img {
        top: -7px
    }
    address img {
        width: 25px
    }
    address img {
        width: 25px;
    }
    address .email-link img{
        top: 3px
    }
    address a{
        padding-left: 45px
    }
    .accordion__item.active .accordion__body {
        padding-right: 40px
    }
    .header-mobile-wrap address .email-link img{
        top: 6px
    }
    .projects-item__content >.btn{
        margin-top: 50px
    }
    .testimonials-item__author .author-name{
        font-size: 1.8rem
    }
    .contact-form form >p{
        gap: 20px
    }
    .form-group.submit {
        margin-top: 30px
    }
    .testimonials-item {
        padding: 30px 20px
    }
    .footer-text .footer-text__links{
        gap: 7px 10px
    }

}
@media all and (max-width: 600px){
    
    .btn .img-wrap, .sbscrbr-submit-block:before {
        width: 35px;
        height: 35px
    }
    .btn .img-wrap img{
        width: 15px
    }
    .sbscrbr-submit-block {
        padding-right: 50px
    }
    .sbscrbr-submit-block:after {
        width: calc(100% - 50px);
        right: 50px
    }
    
}
@media all and (max-width: 480px){
   
    .slider-nav{
        display: none
    }
    .services .title-wrap{
        flex-direction: column;
        align-items: flex-start;
        gap: 25px
    }
}