/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .hero-wrapper{

        grid-template-columns:minmax(0,1fr);

        text-align:center;

        gap:70px;

    }

    .hero-left{

        max-width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero-info{

        justify-content:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-socials{

        justify-content:center;

    }

    .tech-stack{

        justify-content:center;

    }

    .floating-card{

        right:50%;

        transform:translateX(50%);

        bottom:-20px;

    }

    .about-grid{

        grid-template-columns:minmax(0,1fr);

        gap:50px;

    }

    .about-content{

        text-align:center;

    }

}

@media (max-width:992px){

    h1{

        font-size:3.8rem;

    }

    h2{

        font-size:2.5rem;

    }

    section{

        padding:100px 0;

    }

    .navbar{

        height:75px;

    }

    .nav-links{

        gap:22px;

    }

    .about-cards{

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

    }

    .skills-grid{

        grid-template-columns:minmax(0,1fr);

    }

    .project-card{

        grid-template-columns:minmax(0,1fr);

    }

    .contact-grid{

        grid-template-columns:minmax(0,1fr);

    }

    .highlights-grid{

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

    }

    .project-image{

        max-height:320px;

    }

}

@media (max-width:768px){

    h1{

        font-size:3rem;

        line-height:1.15;

    }

    h2{

        font-size:2.2rem;

    }

    .section-header{

        margin-bottom:55px;

    }

    .hero{

        padding-top:140px;

    }

    .profile-image{

        width:320px;

        height:320px;

    }

    .profile-glow{

        width:420px;

        height:420px;

    }

    .hero-info{

        flex-direction:column;

        width:100%;

    }

    .hero-info-card{

        width:100%;

    }

    .hero-right{

        flex-direction:column;

    }

    .about-cards{

        grid-template-columns:minmax(0,1fr);

    }

    .timeline{

        padding-left:28px;

    }

    .timeline-dot{

        left:-26px;

    }

    .floating-card{

        position:relative;

        right:auto;

        bottom:auto;

        transform:none;

        margin-top:30px;

    }

}

@media (max-width:576px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:2.35rem;

        line-height:1.2;

    }

    h2{

        font-size:1.9rem;

    }

    p{

        font-size:.98rem;

    }

    .navbar{

        height:70px;

    }

    .nav-links{

        display:none;

    }

    .btn-nav{

        display:none;

    }

    .hero{

        min-height:auto;

        padding-top:120px;

    }

    .hero-wrapper{

        gap:50px;

    }

    .hero-badges{

        justify-content:center;

    }

    .hero-description{

        font-size:1rem;

        margin-bottom:30px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-info{

        gap:15px;

    }

    .hero-info-card{

        min-width:100%;

    }

    .profile-image{

        width:260px;

        height:260px;

    }

    .profile-glow{

        width:330px;

        height:330px;

    }

    .floating-card{

        width:100%;

    }

    .tech-stack{

        justify-content:center;

    }

    .tech-stack span{

        font-size:.85rem;

    }

    .about-card{

        padding:25px;

    }

    .timeline-content{

        padding:25px;

    }

    .highlight-card{

        padding:30px 20px;

    }

    .highlights-grid{

        grid-template-columns:1fr;

    }

    .skill-card{

        padding:28px;

    }

    .project-card{

        padding:22px;

        gap:25px;

    }

    .project-content h3{

        font-size:1.5rem;

    }

    .project-stack{

        gap:10px;

    }

    .project-buttons{

        flex-direction:column;

    }

    .project-buttons .btn{

        width:100%;

    }

    .contact-card{

        padding:28px;

    }

    .footer-content{

        padding:50px 0;

    }

    #backToTop{

        right:20px;

        bottom:20px;

        width:48px;

        height:48px;

        font-size:1rem;

    }

    .page-hero{

        padding:130px 0 50px;

    }

    .contact-form-wrapper{

        padding:28px;

        margin-top:40px;

    }

}