/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
    :root{
        --section-distance: 60px
    }
    h1{
        font-size: 4.5rem
    }
    h2{
        font-size: 3rem
    }
   
    
    
    
    /* header mobile styles */
   
    img.logo{
        height: 38px
    }
    .header.only-mobile .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--size-1)
    }
  
    .menu-btns.open .menu-btn-open {
        display: flex
    }

    .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: flex;
        position: relative
    }

    .header-mobile-wrap {
        position: fixed;
        z-index: 2;
        padding: var(--size-2);
        width: fit-content;
        height: fit-content;
        background: var(--white);
        top: 82px;
        right: var(--size-1);
        border-radius: var(--size-1);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25);
        transition: 0.3s
    }


    .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;
        color: var(--secondary-color)
    }
  
    .header.menu-translate .header-mobile-wrap{
        transform: translateX(110%);
        transition: 0.3s
    }
   
    .header-mobile-wrap .main-menu nav >ul >li{
        flex-direction: column;
        gap: 20px
    }
    .header-mobile-wrap .social{
        margin-top: 20px
    }

    /* end of header mobile styles */

    .only-desktop{
        display: none
    }
    .main-block{
        padding-top: 62px
    }
    .main-slider .item{
        height: calc(100dvh - 74px);
        border: 4px solid var(--green)
    }
    .main-slider .item .text{
        max-width: 100%;
        margin-left: var(--size-1);
        padding-right: var(--size-1)
    }
    .main-slider .item .text p, .main-slider .item .text .btn{
        margin-top: var(--size-1)
    }
    .btn, input[type="button"]{
        padding: 0px var(--size-2);
        font-size: 1.6rem;
        height: 38px
    }
    .about-content{
        gap: var(--size-3)
    }
    /* footer */
   

    /* end of footer */

}