/*==========================================================
TABLET
==========================================================*/

@media (max-width: 1024px){

    .container{

        width:88%;

    }


    /*======================================================
    HEADER
    ======================================================*/

    header .container{

        height:80px;

    }

    .logo img{

        width:100px;

    }

    .logo span{

        font-size:1.1rem;

    }


    /*======================================================
    HERO
    ======================================================*/

    .hero{

        min-height:90vh;

        padding-top:80px;

    }

    .hero-content{

        max-width:620px;

    }

    .hero-content h1{

        font-size:4rem;

    }

    .hero-content p{

        font-size:1rem;

    }


    /*======================================================
    ABOUT
    ======================================================*/

    .about-content{

        grid-template-columns:1fr;

        gap:45px;

    }

    .about-data{

        max-width:800px;

    }

    .about-image{

        margin-top:20px;

    }

    .about-image img{

        width:420px;

        max-width:80%;

    }


    /*======================================================
    PHILOSOPHY
    ======================================================*/

    .philosophy-grid{

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

    }

    .philosophy-card{

        padding:40px 25px;

    }


    /*======================================================
    PROJECTS
    ======================================================*/

    .projects-grid{

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

    }

}

/*==========================================================
MOBILE
==========================================================*/

@media (max-width: 768px){

    /*======================================================
    GENERAL
    ======================================================*/

    section{

        padding:75px 0;

    }

    .container{

        width:90%;

    }

    .section-header{

        margin-bottom:45px;

    }

    .section-header h2{

        font-size:2.1rem;

    }

    .section-header p{

        font-size:.9rem;

    }


    /*======================================================
    HEADER
    ======================================================*/

    header{

        height:72px;

    }

    header .container{

        height:72px;

    }

    .logo img{

        width: 100px;

    }

    .logo span{

        font-size:1rem;

        letter-spacing:2px;

    }

    .menu-toggle{

        display:flex;

    }


    /*======================================================
    HERO
    ======================================================*/

    .hero{

        min-height:100vh;

        padding-top:72px;

        padding-bottom:70px;

    }

    .hero::before{

        right:15%;

    }

    .hero::after{

        width:100px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content .subtitle{

        font-size:.7rem;

        letter-spacing:3px;

        margin-bottom:18px;

    }

    .hero-content h1{

        font-size:3.2rem;

        letter-spacing:1px;

        margin-bottom:22px;

    }

    .hero-content p{

        font-size:.95rem;

        line-height:1.8;

        margin-bottom:30px;

    }


    /*======================================================
    HERO BUTTONS
    ======================================================*/

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        gap:12px;

    }

    .hero-buttons .btn,

    .hero-buttons .btn-outline{

        width:100%;

    }


    /*======================================================
    ABOUT
    ======================================================*/

    .about-content{

        grid-template-columns:1fr;

        gap:35px;

    }

    .about-text{

        gap:20px;

    }

    .about-text p{

        font-size:.92rem;

        line-height:1.9;

    }


    /*======================================================
    ABOUT DATA
    ======================================================*/

    .about-data{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:10px;

    }

    .about-data > div{

        padding-left:16px;

    }

    .about-data h3{

        font-size:1.05rem;

    }

    .about-data p{

        font-size:.88rem;

    }


    /*======================================================
    ABOUT IMAGE
    ======================================================*/

    .about-image{

        margin-top:10px;

    }

    .about-image img{

        width:350px;

        max-width:85%;

        max-height:none;

    }


    /*======================================================
    PHILOSOPHY
    ======================================================*/

    .philosophy-grid{

        grid-template-columns:1fr;

    }

    .philosophy-card{

        padding:40px 25px;

        border-right:none;

        border-bottom:1px solid var(--border);

    }

    .philosophy-card:last-child{

        border-bottom:none;

    }

    .philosophy-card p{

        max-width:500px;

        margin:auto;

    }


    /*======================================================
    PROJECTS
    ======================================================*/

    .projects-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .project-card > img{

        height:250px;

    }

    .project-info{

        padding:25px;

    }

}

/*==========================================================
SMALL MOBILE
==========================================================*/

@media (max-width: 480px){

    .container{

        width:92%;

    }


    /*======================================================
    HEADER
    ======================================================*/

    .logo img{

        width:100px;

    }

    .logo span{

        font-size:.9rem;

        letter-spacing:2px;

    }


    /*======================================================
    HERO
    ======================================================*/

    .hero-content h1{

        font-size:2.7rem;

    }

    .hero-content p{

        font-size:.9rem;

    }


    /*======================================================
    SECTIONS
    ======================================================*/

    section{

        padding:65px 0;

    }

    .section-header h2{

        font-size:1.85rem;

    }


    /*======================================================
    ABOUT IMAGE
    ======================================================*/

    .about-image img{

        width:300px;

        max-width:85%;

    }


    /*======================================================
    PROJECTS
    ======================================================*/

    .project-card > img{

        height:220px;

    }

    .project-info h3{

        font-size:1.3rem;

    }

    .project-info p{

        font-size:.86rem;

    }


    /*======================================================
    FOOTER
    ======================================================*/

    footer{

        padding:55px 0 30px;

    }

    footer p{

        font-size:.85rem;

    }

}