/* =====================================================
   MIDHUN SURESH PORTFOLIO
   Responsive Styles
===================================================== */


/* =====================================================
   TABLETS / SMALL LAPTOPS
===================================================== */


@media (max-width:1100px) {


    .section {

        padding:80px 5%;

    }



    /* Navigation */

    .navbar {

        padding:20px 5%;

    }


    .nav-links {

        gap:20px;

    }



    /* Hero */


    .hero {

        padding-left:5%;

        padding-right:5%;

    }



    .hero h1 {

        font-size:65px;

    }



    .hero-image img {

        width:350px;

        height:350px;

    }





    /* Statistics */


    .stats {

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

        gap:40px;

    }




    /* Expertise */


    .cards {

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

    }




    /* About */


    .about-grid {

        grid-template-columns:
        300px 1fr;

        gap:40px;

    }




    /* Projects */


    .project-grid {

        gap:25px;

    }



}








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


@media (max-width:768px) {



    body {

        overflow-x:hidden;

    }




    .section {

        padding:70px 6%;

    }




    /* ===============================
       NAVIGATION
    ================================ */


    .navbar {

        padding:20px 6%;

    }



    .logo {

        font-size:18px;

    }



    .nav-links {

        display:none;

    }



    .resume-btn {

        padding:10px 18px;

        font-size:12px;

    }






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


    .hero {

        display:flex;

        flex-direction:column;

        text-align:center;

        padding-top:130px;

    }




    .hero-content {

        width:100%;

    }




    .small-title {

        font-size:12px;

        letter-spacing:3px;

    }





    .hero h1 {

        font-size:42px;

        line-height:1.1;

    }




    .hero-description {

        font-size:16px;

        margin:auto;

        margin-top:25px;

    }





    .hero-buttons {

        justify-content:center;

        flex-wrap:wrap;

    }





    .hero-image {

        margin-top:50px;

    }




    .hero-image img {

        width:280px;

        height:280px;

    }






    /* ===============================
       STATS
    ================================ */


    .stats {

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

        padding:40px 6%;

        gap:35px;

    }




    .stat-box h2 {

        font-size:35px;

    }







    /* ===============================
       SECTION TITLES
    ================================ */


    .section-title h2 {

        font-size:34px;

    }





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


    .about-grid {

        display:flex;

        flex-direction:column;

        text-align:center;

    }



    .about-image {

        width:250px;

        margin:auto;

    }




    .about-text p {

        font-size:16px;

    }






    /* ===============================
       EXPERTISE
    ================================ */


    .cards {

        grid-template-columns:1fr;

    }




    .card {

        padding:30px;

    }






    /* ===============================
       EXPERIENCE
    ================================ */


    .timeline {

        padding-left:25px;

    }



    .timeline-item::before {

        left:-38px;

        width:15px;

        height:15px;

    }




    .timeline-item h3 {

        font-size:22px;

    }






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


    .project-grid {

        grid-template-columns:1fr;

    }



    .project-card img {

        height:220px;

    }








    /* ===============================
       SKILLS
    ================================ */


    .skill-list {

        justify-content:center;

    }



    .skill-list span {

        padding:10px 18px;

        font-size:14px;

    }








    /* ===============================
       CONTACT
    ================================ */


    .contact h2 {

        font-size:38px;

    }




    .contact-details {

        flex-direction:column;

        gap:20px;

    }



}









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


@media (max-width:480px) {



    .hero h1 {

        font-size:34px;

    }




    .hero-description {

        font-size:15px;

    }




    .primary-btn,
    .secondary-btn {

        width:100%;

        text-align:center;

    }




    .stats {

        grid-template-columns:1fr;

    }




    .section-title h2 {

        font-size:28px;

    }




    .timeline-item p {

        font-size:14px;

    }




    .project-card img {

        height:180px;

    }




}