/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
    :root{
        --section-distance: 60px
    }
 
    .grid-2{
        grid-template-columns: 1fr;
        gap: 60px
    }
    .grid-4{
        grid-template-columns: 1fr 1fr
    }
    h2{
        font-size: 3.5rem
    }
    h3, .footer-title{
        font-size: 2.4rem
    }
 
    section.advantages{
        padding: 96px 0 48px
    }
    .steps{
        margin: 70px auto;
        width: 290px
    }
    .steps-item img{
        min-width: 60px;
        min-height: 60px;
        width: 60px;
        height: 60px;
        outline: 12px solid #fffef4;
        margin-bottom: 0
    }
    .steps-item{
        flex-direction: row;
        align-items: center;
        gap: var(--size-1)
    }
    .step-1{
        left: 23px
    }
    .step-2{
        left: -14px;
        top: 133px
    }
    .step-3 {
        left: 33px;
        top: 339px
    }
    .step-4 {
        left: -7px;
        top: 515px
    }
    .step-5 {
        left: 25px;
        top: 712px
    }
    .step-6 {
        top: 900px;
        left: 6px
    }
    .step-7 {
        left: 30px;
        top: 1132px
    }
    .steps-item:nth-child(even) h3, .steps-item:nth-child(even) p {
        text-align: left
    }
    .steps-item:nth-child(odd) h3, .steps-item:nth-child(odd) p {
        text-align: right
    }
    .steps-item:nth-child(odd){
        flex-direction: row-reverse
    }
    
    .steps-item p{
        font-size: 1.1rem
    }
    .steps-item{
        max-width: 260px
    }
    .pale-title {
        display: none
    }
    .about__media{
        padding: 0 100px 0 0
    }
    .projects .decor-left, .projects .decor-right{
        top: -60px
    }
    .how-we-work {
        margin-bottom: 96px
    }
    .footer >div:first-of-type {
        padding-right: 0
    }
    .footer{
        grid-template-columns: 1fr 1fr
    }


    /* header mobile styles */
   
    .header .logo img {
        height: 50px
    }
   
    .menu-btns{
        margin-right: 0
    }
    
    
    /* end of header mobile styles */

    .only-desktop{
        display: none
    }

    .about__media >div {
        min-width: 50%
    }

    /* footer */
   

    /* end of footer */

}