/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
	#projects .projects-item .img-container{
		    grid-row: 1 / 1
	}
    .sub-menu{
        position: static!important;
        width: min-content;
        padding-top: 0
    }

    h1, h2, .subscription-form h4{
        font-size: 4.4rem!important
    }
    h3{
        font-size: 3rem!important;
        line-height: 1.4
    }
    .grid-2, .grid-1-2, .grid-2-1{
        grid-template-columns: 1fr;
        gap: 50px
    }
    .our-partners h2{
        margin-bottom: 50px
    }
    .content-wrap {
        margin-top: 50px
    }
    .content-wrap.grid-2{
        gap: 50px
    }
    .about .grid-2, .services .grid-2{
        grid-template-columns: 1fr
    }
    section:not(.main-block, .about), footer {
        margin-top: 150px
    }
    .main-block h1 {
        margin-bottom: 20px
    }
    .footer-text{
        padding: 30px 0;
        flex-wrap: wrap
    }
    .catalog-item__content{
        padding: 50px 20px
    }
    .catalog-items .item{
        height: 400px
    }
    .services .content-wrap >div{
        flex-direction: column;
        gap: 50px
    }
    .services .media .img-container{
        width: 100%
    }
    .our-partners .content-wrap{
        margin-top: 0
    }
    .contact .map-container{
        grid-row: 2
    }
    .contact .content-wrap{
        margin-top: 100px
    }
    .testimonials-item{
        height: auto
    }
    .slider-nav >div, .slider-nav >div img{
        width: 50px;
        height: 50px
    }
    .owl-theme .owl-dots{
        margin-top: 50px !important
    }
    .owl-theme .owl-dots .owl-dot span{
        width: 10px;
        height: 10px
    }
    .owl-theme .owl-dots{
        gap: 10px
    }

    .owl-carousel .owl-item h3 img {
        width: 20px;
        margin-left: 15px
    }
    .products .description {
        margin-top: 20px
    }
    .accordion__item{
        padding: 20px 0
    }
    .accordion__item.active .accordion__body{
        padding-top: 20px;
        height: auto
    }
    .accordion .show, .accordion .hide{
        font-size: 6.5rem
    }
    .infinite-slider__items img {
        max-height: 50px;
    }

    .subscription-form form, .subscription-form .form-group.submit{
        margin-top: 30px
    }
    .projects-item__content >.btn{
        position: static
    }
    .about .video-wrapper{
        max-width: 100%
    }

    /* header mobile styles */
    #header {
        display: none
    }
   
    .header {
        padding-top: 20px;
        padding-bottom: 20px
    }
    #header-mobile {
        display: block
    }

    #header-mobile .container {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .menu-btn-open {
        width: 35px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .menu-btn-open > div {
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 5px
    }

    .menu-btn-close {
        width: 30px;
        height: 25px;
        /*position: relative;*/
        /*margin-top: -12px;*/
        position: fixed;
        top: 20px;
        right: 15px;
    }

    .menu-btn-close > div {
        right: -3px;
        width: 30px;
        height: 2px;
        background-color: var(--white);
        position: absolute;
        top: calc(50% - 1px);
        border-radius: 5px
    }

    .menu-btn-close > div:first-child {
        transform: rotate(45deg)
    }

    .menu-btn-close > div:last-child {
        transform: rotate(-45deg)
    }

    .menu-btns {
        z-index: 3
    }

    .menu-btns.open .menu-btn-open {
        display: flex
    }

    .menu-btns.open .menu-btn-close {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-open {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-close {
        display: block
    }

    .header-mobile-wrap {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--black);
        width: calc(100vw - 55px);
        height: 100vh;
        z-index: 2;
        padding: 20px;
        overflow-y: scroll;
        transition: 0.3s
    }

    .header-mobile-wrap .main-menu {
        padding-top: 50px
    }

    .header-mobile-wrap .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .header-mobile-wrap .main-menu ul li a {
        line-height: 1.4;
        display: flex;
        font-size: 1.6rem
    }

    .header-mobile-wrap .main-menu nav >ul >li:last-child{
        gap: 15px
    }
    .header-mobile-wrap .main-menu nav >ul >li:last-child .sub-menu{
        padding: 0
    }
    .header-mobile-wrap address .location-link img {
        top: -5px;
    }
    .header-mobile-wrap address img{
        max-width: 20px
    }
    .header-mobile-wrap address a{
        padding-left: 35px
    }
    .header-mobile-wrap .content-wrap{
        gap: 50px
    }
    .header-mobile-wrap .content-wrap .name{
        display: flex;
        align-items: center;
        gap: 15px
    }
    .header-mobile-wrap .content-wrap .name h3{
        font-size: 1.8rem
    }
    .header-mobile-wrap .flags .img-container {
        width: 40px;
        height: 25px
    }
    .header-mobile-wrap address a, .header-mobile-wrap address span{
        font-size: 1.6rem;
        color: var(--white);
        line-height: 2.6rem;
        width: fit-content;
        word-break: break-word;
        margin-top: 0
    }
    .header-mobile-wrap address{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 30px
    }
    .header-mobile-wrap address .address{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .address:before{
        content: url("../img/icons/location-white.svg");
        position: absolute;
        top: 0;
        left: 0
    }
    .header-mobile-wrap address .email{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .email:before{
        content: url("../img/icons/email-white.svg");
        width: 17px;
        height: 14px;
        position: absolute;
        top: 4px;
        left: 0
    }
    .header-mobile-wrap address .tel{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .tel:before{
        content: url("../img/icons/call-white.svg");
        width: 17px;
        height: 14px;
        position: absolute;
        top: 2px;
        left: 0
    }
    .header-mobile-wrap .social{
        margin-top: 10px
    }
    .accordion__item.active .accordion__body{
        padding-bottom: 0
    }
    .header.menu-translate .header-mobile-wrap{
        transform: translateX(-100%);
        transition: 0.3s
    }
    .header:not(.menu-translate) .overlay{
        position: fixed;
        top: 0;
        right: 0;
        background: #20202047;
        backdrop-filter: blur(5px);
        width: 100vw;
        height: 100vh;
        transition: 0.1s
    }
    .header-mobile-wrap .main-menu nav >ul >li{
        flex-direction: column;
        gap: 20px
    }
    .menu-item-has-children >a:after{
        top: 0
    }
    .menu-item-has-children.pll-parent-menu-item >a:after{
        top: -2px
    }
    /* end of header mobile styles */


    .map-container iframe{
        height: 500px
    }
    .infinite-slider__items img{
        max-height: 40px
    }

    /* footer */
    .footer-bottom{
        flex-direction: column;
        padding: 15px 0 30px;
        gap: 15px
    }

    /* end of footer */

}