/*
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
    }
   
    .grid-2, .grid-3{
        grid-template-columns: 1fr;
        gap: var(--size-2)
    }
    
    
    /* header mobile styles */
   
    img.logo{
        height: 38px
    }
    .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: 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: block;
        position: relative
    }

    .header-mobile-wrap {
        position: fixed;
        z-index: 2;
        padding: var(--size-2);
        width: fit-content;
        height: fit-content;
        background: var(--gradient);
        top: 69.4px;
        right: var(--size-1);
        border-radius: var(--size-1);
        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(--white)
    }
  
    .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
    }
	.mobile-header-items{
		display: flex;
		align-items: center;
		gap: var(--size-1)
	}

    /* end of header mobile styles */

    .only-desktop{
        display: none
    }
    .main-block .media img{
        width: 100%
    }
    .advantages .badge{
        width: 90px;
        height: 200px;
        top: -18px
    }
    .advantages .badge__content{
        gap: 6px;
        width: 70px;
        top: 11px;
        left: 7px
    }
    .advantages .badge__content img{
        width: 36px
    }
    .advantages .badge__content h2{
        font-size: 1.4rem
    }
    .advantages__line{
        top: 36px;
        width: 1px;
        height: 828px;
        left: 36px;
        border-image: repeating-linear-gradient(to bottom, #8AC863 0 6px, transparent 6px 12px) 1
    }
    .advantages__items{
        flex-direction: column;
        width: auto;
        height: 900px
    }
    .advantages__item:nth-child(odd) .text {
        top: 0;
        left: -264px
    }
    .advantages__item:nth-child(even) .text {
        top: 0;
        left: auto;
        right: -264px
    }
    .advantages .content {
        padding: 0
    }
    section + blockquote span{
        font-size: 2.5rem
    }
    section.team .content h2{
        top: var(--size-2);
        padding-left: var(--size-2);
        padding-right: var(--size-2)
    }
    
    /* footer */
   

    /* end of footer */

}