/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
    :root{
        --section-distance: 48px
    }
 
   
    h2{
        font-size: 4rem
    }
    h3{
        font-size: 2.6rem
    }
    .grid-2, .grid-3{
        grid-template-columns: 1fr;
        gap: var(--size-2)
    }
    
    
    /* header mobile styles */
   
    
    .header.only-mobile .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--size-1)
    }
    header:not(.scroll) .header.only-mobile .container{
        align-items: flex-start
    }
    .menu-btns.open .menu-btn-open {
        display: block
    }

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

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

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

    .header-mobile-wrap {
        position: fixed;
        z-index: 2;
        padding: var(--size-2);
        background-color: var(--gold);
        height: fit-content;
        border-radius: var(--size-1);
        top: 106px;
        right: var(--size-1);
        width: fit-content;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: flex-end;
        box-shadow: 0 0 8px #f0ebde96;
        transition: 0.3s
    }

    .header-mobile-wrap .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-2)
    }

    .header-mobile-wrap .main-menu ul li a {
        line-height: 1;
        display: flex;
        color: var(--white)
    }
     .header-mobile-wrap .main-menu ul li a:hover{
        color: var(--white)
     }
    .header-mobile-wrap address{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-right: auto
    }
   .header-mobile-wrap address a{
        color: var(--white);
        font-size: 1.4rem
   }
    .header.menu-translate .header-mobile-wrap{
        transform: translateX(120%);
        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
    }
    .about .img-and-text .img-container {
        height: 420px;
        border: 4px solid var(--gold)
    }
    .header-mobile-wrap .email:before{
        content: url('../img/icons/email-white.svg');
        position: absolute;
        left: 0;
        top: 3px
    }
    .header-mobile-wrap .tel:before{
        content: url('../img/icons/tel-white.svg');
        position: absolute;
        left: 0;
        top: 3px
    }
    .header-mobile-wrap .location:before{
        content: url('../img/icons/location-white.svg');
        position: absolute;
        left: 0;
        top: 2px
    }

    /* end of header mobile styles */

    .only-desktop{
        display: none
    }

    
    /* footer */
   

    /* end of footer */

}