/* ==========================================
   Responsive Stylesheet
   Developer Portfolio Website
   Author : Shaik Mahaboob Basha
   Description : Responsive Layouts
========================================== */


/* ==========================================
   Breakpoints

   Large Desktop : 1400px
   Desktop       : 1200px
   Small Laptop  : 992px
   Tablet        : 768px
   Mobile        : 576px
   Small Mobile  : 400px

========================================== */

/* ==========================================
   Large Desktop (1400px)
========================================== */

@media (max-width:1400px){

    .container{

        max-width:1100px;

    }

    .hero{

        gap:50px;

    }

    .hero-content h1{

        font-size:3.2rem;

    }

    .hero-image img{

        width:340px;

        height:340px;

    }

}

/* ==========================================
   Desktop / Laptop (1200px)
========================================== */

@media (max-width:1200px){

    section{

        padding:90px 6%;

    }

    nav{

        padding:18px 25px;

    }

    .hero{

        gap:40px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-content h2{

        font-size:1.8rem;

    }

    .hero-image img{

        width:320px;

        height:320px;

    }

    .about-container{

        grid-template-columns:320px 1fr;

    }

    .resume-container{

        grid-template-columns:1fr 1fr;

    }

}

/* ==========================================
   Small Laptop (992px)
========================================== */

@media (max-width:992px){

    section{

        padding:80px 5%;

    }

    nav{

        padding:16px 20px;

    }

    nav ul{

        gap:20px;

    }

    .hero{

        flex-direction:column-reverse;

        text-align:center;

        gap:50px;

    }

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-content h1{

        font-size:2.8rem;

    }

    .hero-content h2{

        font-size:1.6rem;

    }

    .hero-description{

        max-width:700px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .social-icons{

        justify-content:center;

    }

    .hero-image img{

        width:300px;

        height:300px;

    }

    .about-container{

        grid-template-columns:1fr;

    }

    .profile-card{

        max-width:600px;

        margin:0 auto;

    }

    .resume-container{

        grid-template-columns:1fr;

    }

    .resume-preview{

        margin-top:20px;

    }

}

/* ==========================================
   Tablet (768px)
========================================== */

@media (max-width:768px){

    section{

        padding:70px 5%;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:2rem;

    }

    .hero{

        min-height:auto;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content h2{

        font-size:1.4rem;

    }

    .hero-image img{

        width:260px;

        height:260px;

    }

    .strengths{

        grid-template-columns:1fr;

    }

    .projects-container{

        grid-template-columns:1fr;

    }

    .skills-container{

        grid-template-columns:1fr;

    }

    .education-container{

        grid-template-columns:1fr;

    }

    .certifications-container{

        grid-template-columns:1fr;

    }

    .resume-buttons{

        flex-direction:column;

    }

    .resume-buttons a{

        width:100%;

    }

    .contact-info{

        padding:40px 30px;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-contact p{

        justify-content:center;

    }

    .footer-social .social-icons{

        justify-content:center;

    }

}

/* ==========================================
   Mobile (576px)
========================================== */

@media (max-width:576px){

    section{

        padding:60px 20px;

    }

    nav{

        padding:15px;

    }

    .logo-text{

        display:none;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-content h2{

        font-size:1.2rem;

    }

    .hero-greeting{

        font-size:1rem;

    }

    .hero-description{

        font-size:.95rem;

    }

    .hero-image img{

        width:220px;

        height:220px;

        border-width:6px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

    }

    .social-icons{

        gap:15px;

    }

    .social-icons a{

        width:45px;

        height:45px;

        font-size:1rem;

    }

    .profile-card,
    .about-content,
    .resume-content,
    .resume-preview,
    .contact-info{

        padding:25px;

    }

    .education-card,
    .skill-card,
    .certificate-card{

        padding:30px 20px;

    }

    .project-content{

        padding:20px;

    }

    .project-buttons{

        flex-direction:column;

    }

    .project-buttons a{

        width:100%;

    }

    .contact-item{

        flex-direction:column;

        text-align:center;

    }

    .contact-item i{

        margin-bottom:10px;

    }

}

/* ==========================================
   Small Mobile (400px)
========================================== */

@media (max-width:400px){

    section{

        padding:50px 15px;

    }

    .section-title h5{

        font-size:.8rem;

        letter-spacing:1px;

    }

    .section-title h2{

        font-size:1.7rem;

    }

    .hero-content h1{

        font-size:1.8rem;

    }

    .hero-content h2{

        font-size:1.1rem;

    }

    .hero-status{

        font-size:.85rem;

        padding:7px 14px;

    }

    .hero-image img{

        width:180px;

        height:180px;

    }

    .logo-box{

        width:40px;

        height:40px;

        font-size:1rem;

    }

    .education-icon,
    .skill-icon,
    .certificate-icon{

        width:70px;

        height:70px;

        font-size:1.7rem;

    }

    .resume-content h3{

        font-size:1.6rem;

    }

    .contact-info h3{

        font-size:1.6rem;

    }

    .contact-item{

        padding:15px;

    }

    .contact-item i{

        width:50px;

        height:50px;

        font-size:1.2rem;

    }

    .footer-container{

        gap:35px;

    }

    .footer-bottom p{

        font-size:.85rem;

    }

}