/*==================================================
        RESPONSIVE DESIGN SYSTEM
        Naman Sharma Portfolio
==================================================*/

/*=========================================
        EXTRA LARGE DESKTOP
        1600px+
=========================================*/

@media (min-width:1600px){

    .container{

        max-width:1500px;

    }

    section{

        padding:160px 0;

    }

    .hero-grid{

        gap:140px;

    }

    .image-card{

        width:620px;

    }

    .image-card img{

        height:820px;

    }

}

/*=========================================
        LARGE DESKTOP
        1400px
=========================================*/

@media (max-width:1400px){

    .container{

        width:min(92%,1320px);

    }

    .hero-grid{

        gap:80px;

    }

}

/*=========================================
        LAPTOP
        1200px
=========================================*/

@media (max-width:1200px){

    section{

        padding:110px 0;

    }

    .hero{

        padding-top:120px;

    }

    .hero-grid{

        gap:70px;

    }

    .work-grid{

        gap:22px;

    }


}

/*=========================================
        SMALL LAPTOP
=========================================*/

@media (max-width:1100px){

    h1{

        font-size:clamp(4rem,8vw,7rem);

    }

    h2{

        font-size:clamp(2rem,4vw,3.5rem);

    }

    .hero-grid,

    .about-grid{

        grid-template-columns:1fr;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

        justify-content:center;

    }

    .hero p{

        max-width:100%;

    }

    .image-card{

        width:500px;

    
    }

    testimonial-container{

    grid-template-columns:1fr;

    }

    .contact-wrapper{

    grid-template-columns:1fr;

    }


}

/*=========================================
        TABLET
        992px
=========================================*/

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .navbar{

        height:80px;

    }

    .hero{

        min-height:auto;

        padding-top:130px;

    }

    .work-grid,

    .services-grid,

    .skill-list,

    .contact-info,

    .stats-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        flex-direction:column;

        text-align:center;

    }

    .testimonials{

    padding:60px 30px;

}

.contact{

    padding:60px 30px;

}

}

/*=========================================
        LARGE MOBILE
        768px
=========================================*/

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    .hero{

        padding-top:110px;

    }

    .hero-grid{

        gap:50px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

        width:100%;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

    }

    .image-card{

        width:100%;

    }

    .image-card img{

        height:500px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:2.5rem;

    }

}

/*=========================================
        MOBILE
        576px
=========================================*/

@media (max-width:576px){

    html{

        font-size:15px;

    }

    .navbar{

        height:74px;

    }

    .logo{

        font-size:2rem;

    }

    .hero{

        padding-top:100px;

    }

    .hero h1{

        font-size:3.3rem;

    }

    .hero-tag{

        font-size:.7rem;

        letter-spacing:2px;

    }

    .hero p{

        font-size:.95rem;

    }

    .image-card img{

        height:420px;

    }

    .contact h2{

        font-size:2.7rem;

    }

    .contact-btn{

        width:100%;

    }

    .scroll-top{

        right:20px;

        bottom:20px;

    }

}

/*=========================================
        SMALL PHONES
        420px
=========================================*/

@media (max-width:420px){

    html{

        font-size:14px;

    }

    .container{

        width:94%;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .service-card{

        padding:25px;

    }

    .skill-list span{

        padding:20px;

    }

    .contact h2{

        font-size:2.2rem;

    }

    .socials{

        gap:16px;

    }

}

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

@media (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:700px;

    }

}

/*=========================================
        HIGH DPI
=========================================*/

@media (-webkit-min-device-pixel-ratio:2),
       (min-resolution:192dpi){

    img{

        image-rendering:auto;

    }

}

/*=========================================
        REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*=========================================
        PRINT
=========================================*/

@media print{

    .header,

    .scroll-top,

    .preloader{

        display:none !important;

    }

    body{

        background:#f5f2ed;

        color:#000000;

    }

    section{

        padding:40px 0;

        page-break-inside:avoid;

    }

}

/* ====================================
   Large Laptop
==================================== */

@media(max-width:1400px){

.hero-left{

    padding:70px;

}

.hero-left h1{

    font-size:58px;

}

}

/* ====================================
   Laptop
==================================== */

@media(max-width:1200px){

.sidebar{

    width:220px;

}

main{

    margin-left:220px;

}

.hero{

    grid-template-columns:1fr;

}

.hero-right{

    min-height:600px;

}

.about-container,

.resume-wrapper{

    grid-template-columns:1fr;

}

.portfolio-grid{

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

}

.services{

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

}

.testimonial-container{

    grid-template-columns:1fr;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

}

/* ====================================
   Tablet
==================================== */

@media(max-width:992px){

.sidebar{

    position:fixed;

    left:-260px;

    transition:.4s;

}

.sidebar.active{

    left:0;

}

main{

    margin-left:0;

    width:100%;

}

.hero-left{

    padding:50px;

}

.hero-left h1{

    font-size:52px;

}

.about{

    padding:60px 30px;

}

.resume{

    padding:60px 30px;

}

.portfolio{

    padding:60px 30px;

}

.testimonials{

    padding:60px 30px;

}

.contact{

    padding:60px 30px;

}

.portfolio-grid{

    grid-template-columns:1fr;

}

.services{

    grid-template-columns:1fr;

}

.about-right{

    grid-template-columns:1fr 1fr;

}

}

/* ====================================
   Mobile
==================================== */

@media(max-width:768px){

.hero-left{

    padding:35px;

}

.hero-left h1{

    font-size:40px;

}

.hero-left h4{

    font-size:24px;

}

.section-title h2{

    font-size:38px;

}

.about-right{

    grid-template-columns:1fr;

}

.resume-wrapper{

    gap:40px;

}

.portfolio-filter{

    gap:10px;

}

.portfolio-filter button{

    width:100%;

}

.btn{

    width:100%;

}

}

/* ====================================
   Small Mobile
==================================== */

@media(max-width:480px){

.hero-left{

    padding:25px;

}

.hero-left h1{

    font-size:34px;

}

.hero-left p{

    font-size:15px;

}

.section-title h2{

    font-size:30px;

}

.timeline{

    padding-left:25px;

}

.timeline-item{

    padding:20px;

}

}
@media(max-width:992px){

.contact-grid{

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

}

}

@media(max-width:600px){

.contact-grid{

grid-template-columns:1fr;

}

}