@media(max-width:992px){

.hero h1{

font-size:3rem;

}

.hero h2{

font-size:1.5rem;

}

}

@media(max-width:768px){

nav{

width:95%;
padding:15px;

}

nav ul{

gap:15px;

}

.hero h1{

font-size:2.5rem;

}

.hero p{

font-size:.95rem;

}

}

@media(max-width:500px){

nav{

flex-direction:column;
gap:10px;

}

.hero h1{

font-size:2rem;

}

.hero h2{

font-size:1.1rem;

}

.socials{

gap:12px;

}

.socials a{

width:45px;
height:45px;

}

}



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

/* Tablet */

@media (max-width: 1024px){

    .about-container{

        padding:140px 50px;

        gap:40px;

    }

    .about-left h1{

        font-size:5rem;

    }

}

/* Mobile */

@media (max-width: 768px){

    .about-container{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        padding:120px 25px;

        gap:30px;

    }

    .about-left{

        width:100%;

    }

    .about-left h1{

        font-size:3.5rem;

        line-height:1.1;

    }

    .about-divider{

        width:100%;

        height:1px;

        min-height:1px;

        background:rgba(255,255,255,.15);

    }

    .about-right{

        width:100%;

        max-width:700px;

    }

    .about-right p{

        font-size:1rem;

        line-height:1.9;

        margin-bottom:20px;

    }

}

/* Small Phones */

@media (max-width: 480px){

    .about-container{

        padding:110px 20px;

    }

    .about-left h1{

        font-size:2.8rem;

    }

    .about-right p{

        font-size:.95rem;

        line-height:1.8;

    }

}

@media(max-width:768px){

.contact-left h1{

    font-size:3rem;

}

.resume-buttons{

    flex-direction:column;
    align-items:center;

}

}

@media(max-width:768px){

.contact-page h1{

    font-size:3rem;

}

.contact-page p{

    font-size:1rem;

}

}


@media(max-width:992px){

.project-card{

    flex-direction:column;

    text-align:center;

}

.preview-box{

    height:200px;

}

}


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

/* Tablet */

@media (max-width: 1024px){

    .featured-projects{

        padding:140px 6%;

    }

    .featured-projects h1{

        font-size:5rem;

    }

    .featured-project{

        gap:50px;

    }

    .project-content h2{

        font-size:2.3rem;

    }

}

/* Mobile */

@media (max-width: 768px){

    .featured-projects{

        padding:120px 25px;

    }

    .featured-projects h1{

        font-size:3.5rem;

        line-height:1.1;

        margin-bottom:20px;

    }

    .section-subtitle{

        font-size:.95rem;

        margin-bottom:60px;

    }

    .featured-project,
    .reverse{

        flex-direction:column;

        gap:35px;

    }

    /* Ensure reversed projects stack with content before image on mobile */
    .featured-project.reverse .project-content{
        order:1;
    }

    .featured-project.reverse .project-image{
        order:2;
    }

    .featured-project .project-content{
        order:1;
    }

    .featured-project .project-image{
        order:2;
    }

    .project-content{

        width:100%;

    }

    .project-content h2{

        font-size:2rem;

    }

    .project-tags{

        gap:8px;

    }

    .project-tags span{

        font-size:.75rem;

        padding:6px 10px;

    }

    .project-description{

        font-size:.95rem;

        line-height:1.8;

    }

    .project-points li{

        font-size:.9rem;

    }

    .project-image{

        width:100%;

    }

    .project-preview{

        width:100%;

    }

    .view-images{

        bottom:12px;
        right:12px;

        font-size:.75rem;

        padding:10px 14px;

    }

}

/* Small Phones */

@media (max-width: 480px){

    .featured-projects{

        padding:110px 20px;

    }

    .featured-projects h1{

        font-size:2.8rem;

    }

    .section-subtitle{

        font-size:.9rem;

    }

    .module{

        font-size:.7rem;

        letter-spacing:2px;

    }

    .project-content h2{

        font-size:1.6rem;

    }

    .live-link{

        font-size:.85rem;

        word-break:break-word;

    }

    .project-tags{

        gap:6px;

    }

    .project-tags span{

        font-size:.7rem;

        padding:5px 8px;

    }

    .project-description{

        font-size:.9rem;

    }

    .project-points li{

        font-size:.85rem;

        line-height:1.6;

    }

    .view-images{

        width:calc(100% - 24px);

        left:12px;
        right:12px;
        bottom:12px;

        justify-content:center;
        text-align:center;

    }

}

/* Gallery Responsive */

@media (max-width: 768px){

    .gallery-modal-content{

        width:95%;

    }

    .gallery-stage{

        min-height:auto;

    }

    .gallery-stage img{

        max-height:65vh;

    }

    .gallery-nav{

        width:42px;
        height:42px;

        font-size:14px;

    }

    .gallery-close{

        top:10px;
        right:10px;

        width:40px;
        height:40px;

        font-size:1.6rem;

    }

    .gallery-counter{

        left:50%;

        transform:translateX(-50%);

        bottom:15px;

    }

}