/*==========================================================
1200px
==========================================================*/

@media(max-width:1200px){

    .hero-content h1{

        font-size:4rem;

    }

    .projects-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .contact-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/*==========================================================
992px
==========================================================*/

@media(max-width:992px){

    section{

        padding:90px 0;

    }

    header .container{

        height:80px;

    }

    .hero{

        min-height:auto;

        padding-top:160px;

        padding-bottom:80px;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-content p{

        margin-left:auto;

        margin-right:auto;

    }

    .about-content{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-data{

        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:25px;

    }

    .about-image{

        margin-top:40px;

    }

    .philosophy-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
768px
==========================================================*/

@media(max-width:768px){

    .hero-content h1{

        font-size:3rem;

    }

    .section-header h2{

        font-size:2.3rem;

    }

    nav{

        display:none;

    }

    .menu-toggle{

        display:block;

        font-size:2rem;

        cursor:pointer;

        color:var(--primary);

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .about-data{

        grid-template-columns:1fr;

    }

    footer nav{

        flex-direction:column;

        gap:18px;

    }

}

/*==========================================================
576px
==========================================================*/

@media(max-width:576px){

    .container{

        width:92%;

    }

    .hero{

        padding-top:140px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content span{

        letter-spacing:3px;

        font-size:.8rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn,

    .btn-outline{

        width:100%;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2rem;

    }

    .project-info{

        padding:28px;

    }

    .project-info h3{

        font-size:1.5rem;

    }

    .contact-card{

        padding:35px 20px;

    }

    .footer-logo{

        flex-direction:column;

    }

    .footer-logo span{

        letter-spacing:2px;

        font-size:1.2rem;

    }

    footer{

        text-align:center;

    }

}