/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
    :root{
        --image-border-radius: 24px;
        --section-distance: 60px;
        --size-1: 15px;
        --size-2: 25px;
        --size-3: 45px;
    }
    h1{
        font-size: 4.4rem
    }
    h2{
        font-size: 3.2rem
    }
    h3{
        font-size: 2.6rem
    }
    .grid-2{
        gap: 60px
    }
    
    /* header mobile styles */
   
    .header .logo img {
        height: 50px
    }
    .header .social{
        margin-left: auto
    }
    
    .header.only-mobile .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--size-1)
    }

    .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;
        position: absolute;
        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(100dvw - 60px);
        height: 100dvh;
        z-index: 2;
        padding: 20px;
        transition: 0.3s
    }

    .header-mobile-wrap .main-menu {
        padding-top: var(--size-3)
    }

    .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;
        display: flex;
        font-size: 1.6rem
    }
    .header-mobile-wrap address{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: var(--size-3)
    }
   
    .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: 100dvw;
        height: 100dvh;
        transition: 0.1s
    }
    .header-mobile-wrap .main-menu nav >ul >li{
        flex-direction: column;
        gap: 20px
    }

    /* end of header mobile styles */

    .only-desktop{
        display: none
    }

    .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: 400px
    }
    .advantages .content .grid-2.images {
        gap: var(--size-2);
    }
    .advantages ul.advantages-list{
        grid-template-columns: 1fr
    }
    .advantages{
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)
    }
    .header-mobile-wrap address{
        display: flex;
        flex-direction: column;
        gap: 20px
    }
    .header-mobile-wrap address a{
        color: var(--white)
    }

    /* footer */
   

    /* end of footer */

}