/* =======================================================
   Portfolio Engine
   responsive.css
======================================================= */

/* ===========================
   LARGE TABLETS
=========================== */

@media (max-width: 1100px){

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-text{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-image{

        order:-1;

    }

    .hero-image img{

        width:300px;

        height:300px;

    }

}

/* ===========================
   TABLETS
=========================== */

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .navbar{

        height:auto;

        padding:18px 0;

        flex-wrap:wrap;

    }

    .menu-toggle{

        display:block;

    }

    .nav-links{

        display:none;

        width:100%;

        margin-top:20px;

        flex-direction:column;

        gap:18px;

    }

    .nav-links.open{

        display:flex;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image img{

        width:250px;

        height:250px;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .stats-grid{

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

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-links,

    .footer-social{

        align-items:center;

    }

}

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

@media (max-width:600px){

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:1.8rem;

    }

    .hero-image img{

        width:200px;

        height:200px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .project-top{

        flex-direction:column;

        align-items:flex-start;

    }

    .project-buttons{

        flex-direction:column;

    }

    .project-buttons .btn{

        width:100%;

    }

    .contact-links{

        flex-direction:column;

    }

    #backToTop{

        right:20px;

        bottom:20px;

    }

}

/* ===========================
   SMALL PHONES
=========================== */

@media (max-width:400px){

    .container{

        width:95%;

    }

    .hero-image img{

        width:170px;

        height:170px;

    }

    .stat-card{

        padding:25px;

    }

    .project-content{

        padding:18px;

    }

}