/* =======================================
   LARGE LAPTOPS
======================================= */

@media (max-width:1200px){

    section{
        padding:100px 6%;
    }

    .hero-image img{
        width:350px;
        height:350px;
    }

    #home h1{
        font-size:60px;
    }

}


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

@media (max-width:992px){

    .hero-content{
        flex-direction:column-reverse;
        text-align:center;
        gap:40px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .social-icons{
        justify-content:center;
    }

    .hero-image img{
        width:320px;
        height:320px;
    }

    #home h1{
        font-size:50px;
    }

    #home h2{
        font-size:28px;
    }

    .about-highlights{
        grid-template-columns:1fr;
    }

    .skills-container{
        grid-template-columns:1fr;
    }

    .projects-container{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-container{
        grid-template-columns:1fr;
    }

    .experience-card{
        flex-direction:column;
    }

    .education-card{
        flex-direction:column;
    }

    .info-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media (max-width:768px){

    #home{
        padding-top:110px;
    }

    section{
        padding:80px 5%;
        overflow:hidden;
    }

    .hero-content,
    .hero-text,
    .hero-image,
    .contact-container{
        width:100%;
    }

    .hero-image img{
        width:260px;
        height:260px;
    }

    #home h1{
        font-size:40px;
    }

    #home h2{
        font-size:24px;
    }

    .hero-tagline{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-buttons button{
        width:100%;
        max-width:260px;
    }

    .projects-container{
        grid-template-columns:1fr;
    }

    .certifications-container{
        grid-template-columns:1fr;
    }

    .about-card{
        padding:25px;
    }

    .skill-card{
        padding:25px;
    }

    .experience-card{

        flex-direction:column;

        gap:15px;

    }

    .experience-year{

        width:100%;

        min-width:100%;

        margin-bottom:10px;

    }

    .experience-content{

        width:100%;

    }

    .contact-info,
    .contact-form{
        padding:25px;
    }

    .info-grid{
        grid-template-columns:1fr;
    }

    .action-buttons{
        flex-direction:column;
    }

    .action-buttons a{
        justify-content:center;
    }

    .footer-icons,
    .social-icons{
        flex-wrap:wrap;
    }

    .modal-content{
        width:90%;
        padding:20px;
        margin:30px auto;
    }

    *{
        max-width:100%;
    }

    body{
        overflow-x:hidden;
    }

    footer{
        width:100%;
    }

}


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

@media (max-width:480px){

    .logo{
        font-size:22px;
    }

    nav ul li a{
        font-size:15px;
    }

    .hero-image img{
        width:220px;
        height:220px;
    }

    #home h1{
        font-size:34px;
    }

    #home h2{
        font-size:20px;
    }

    section h2{
        font-size:32px;
    }

    .hero-buttons button{
        font-size:15px;
    }

    .project-card img{
        height:180px;
    }

    .about-card h3{
        font-size:24px;
    }

    .about-card p{
        font-size:16px;
    }

    .contact-item{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .modal-content{
        width:92%;
        padding:18px;
    }

    #topBtn{
        width:45px;
        height:45px;
        font-size:18px;
        bottom:20px;
        right:20px;
    }

}

@media (max-width:768px){

.experience-content h3{

    font-size:34px;

}

.experience-content h4{

    font-size:18px;

}

}

@media (max-width:768px){

.experience-card{

    padding:25px;

}

}