/* ==========================================================
   RESPONSIVE.CSS
   Darpan Mishra Website
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1400px){

    .container{

        width:min(100% - 60px,1180px);

    }

}


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

@media (max-width:1200px){

    h1{

        font-size:4.3rem;

    }

    .hero-grid{

        gap:60px;

    }

    .about-grid{

        grid-template-columns:360px 1fr;

        gap:60px;

    }

    .metrics-grid{

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

    }

    .expertise-grid{

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

    }

    .insights-grid{

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

    }

    .footer-grid{

        grid-template-columns:1.5fr 1fr 1fr;

    }

}


/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (max-width:992px){

    /* Navigation */

    .nav-menu{

        display:none;

    }

    .menu-btn{

        display:flex;

    }

    .nav-actions .primary-btn{

        display:none;

    }

    /* Hero */

    .hero{

        padding-top:140px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-left{

        order:2;

    }

    .hero-right{

        order:1;

        justify-content:center;

    }

    .hero-left p{

        margin-inline:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-highlights{

        justify-content:center;

    }

    .experience-card{

        right:20px;

        top:20px;

    }

    /* Metrics */

    .metrics-grid{

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

    }

    /* About */

    .about-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-left{

        display:flex;

        justify-content:center;

    }

    .about-image{

        max-width:420px;

    }

    .about-right{

        text-align:center;

    }

    .about-points{

        grid-template-columns:1fr;

    }

    /* Expertise */

    .expertise-grid{

        grid-template-columns:1fr;

    }

    /* Timeline */

    .timeline{

        padding-left:40px;

    }

    /* Insights */

    .insights-grid{

        grid-template-columns:1fr;

    }

    /* CTA */

    .mini-cta-wrapper{

        flex-direction:column;

        text-align:center;

    }

    .contact-box{

        padding:60px 40px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

}

/* ==========================================================
   TABLET PORTRAIT
========================================================== */

@media (max-width:768px){

    html{
        font-size:15px;
    }

    .container{
        width:min(100% - 32px,100%);
    }

    .section{
        padding:90px 0;
    }

    .section-heading{
        margin-bottom:50px;
    }

    .section-heading h2{
        font-size:2.5rem;
    }

    /* Header */

    .navbar{
        height:78px;
    }

    .logo{
        height:52px;
    }

    /* Hero */

    .hero{
        padding-top:120px;
        padding-bottom:80px;
    }

    .hero-left h1{
        font-size:3.2rem;
    }

    .hero-left p{
        font-size:1rem;
    }

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

    .primary-btn,
    .secondary-btn{
        width:240px;
    }

    .hero-image{
        max-width:380px;
    }

    .experience-card{
        width:145px;
        padding:18px;
        right:0;
        top:15px;
    }

    .hero-highlights{
        gap:10px;
    }

    .hero-highlights span{
        font-size:.82rem;
        padding:10px 16px;
    }

    /* Metrics */

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

    /* Timeline */

    .timeline{
        padding-left:30px;
    }

    .timeline::before{
        left:12px;
    }

    .timeline-item::before{
        left:-38px;
    }

    .timeline-card{
        padding:24px;
    }

    /* Footer */

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}


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

@media (max-width:576px){

    html{
        font-size:14px;
    }

    .container{
        width:min(100% - 24px,100%);
    }

    .section{
        padding:75px 0;
    }

    .section-heading h2{
        font-size:2rem;
    }

    .hero-left h1{
        font-size:2.6rem;
        line-height:1.05;
    }

    .hero-image{
        max-width:300px;
    }

    .experience-card{
        position:relative;
        top:auto;
        right:auto;
        margin:20px auto 0;
    }

    .about-image{
        max-width:300px;
    }

    .point{
        padding:22px;
    }

    .expertise-card{
        min-height:auto;
        padding:28px;
    }

    .contact-box{
        padding:40px 24px;
    }

    .contact-box h2{
        font-size:2rem;
    }

    .mini-cta-wrapper{
        padding:36px 24px;
    }

    .footer{
        padding:70px 0 25px;
    }

    .footer-logo{
        height:55px;
    }

    .back-to-top{
        width:46px;
        height:46px;
        right:18px;
        bottom:18px;
    }

}


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

@media (max-width:420px){

    .hero-left h1{
        font-size:2.2rem;
    }

    .section-heading h2{
        font-size:1.8rem;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }

    .hero-highlights{
        justify-content:center;
    }

    .hero-highlights span{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .metric-card,
    .timeline-card,
    .point,
    .expertise-card,
    .insight-card{
        border-radius:18px;
    }

    .contact-box{
        border-radius:24px;
    }

}


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

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

    .hero{
        padding-top:100px;
    }

    .hero-grid{
        gap:40px;
    }

}

/* ==========================================================
   HERO V2 — RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .hero-v2{
        padding-top:125px;
    }

    .hero-v2-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(420px,.9fr);

        gap:15px;
    }

    .hero-v2-title{
        font-size:4.4rem;
    }

    .hero-v2-portrait{
        width:510px;
        height:570px;
        right:-25px;
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        width:420px;
        height:420px;
        right:20px;
    }

    .hero-v2-experience{
        right:-5px;
    }

}


@media (max-width:992px){

    .hero-v2{
        min-height:auto;
        padding:125px 0 80px;
    }

    .hero-v2-grid{
        grid-template-columns:1fr;
        gap:35px;
        text-align:center;
    }

    .hero-v2-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        padding-bottom:0;
    }

    .hero-v2-title{
        max-width:760px;
        font-size:4rem;
    }

    .hero-v2-description{
        max-width:650px;
    }

    .hero-v2-actions{
        justify-content:center;
    }

    .hero-v2-highlights{
        justify-content:center;
    }

    .hero-v2-visual{
        min-height:560px;
    }

    .hero-v2-portrait-wrap{
        height:560px;
        max-width:600px;
        margin:auto;
    }

    .hero-v2-portrait{
        right:0;
        width:540px;
        height:560px;
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        right:50%;
        transform:translateX(50%);
    }

    .hero-v2-growth{
        right:15%;
    }

    .hero-v2-experience{
        right:7%;
        bottom:60px;
    }

}


@media (max-width:768px){

    .hero-v2{
        padding-top:110px;
        padding-bottom:65px;
    }

    .hero-v2-title{
        font-size:3.25rem;
        line-height:1;
    }

    .hero-v2-description{
        font-size:1rem;
        line-height:1.65;
    }

    .hero-v2-actions{
        flex-direction:row;
    }

    .hero-v2-visual{
        min-height:470px;
    }

    .hero-v2-portrait-wrap{
        height:470px;
    }

    .hero-v2-portrait{
        width:460px;
        height:480px;
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        width:360px;
        height:360px;
        bottom:20px;
    }

    .hero-v2-growth{
        right:7%;
        top:60px;
        transform:scale(.8) rotate(-8deg);
    }

    .hero-v2-experience{
        width:130px;
        min-height:130px;
        padding:18px;
        right:3%;
        bottom:45px;
    }

    .hero-v2-experience strong{
        font-size:2.5rem;
    }

}


@media (max-width:576px){

    .hero-v2{
        padding-top:100px;
    }

    .hero-v2-label{
        font-size:.65rem;
        letter-spacing:2px;
    }

    .hero-v2-title{
        font-size:2.65rem;
        letter-spacing:-.045em;
    }

    .hero-v2-description{
        max-width:390px;
    }

    .hero-v2-actions{
        width:100%;
        flex-direction:column;
    }

    .hero-v2-primary,
    .hero-v2-secondary{
        width:100%;
        max-width:280px;
    }

    .hero-v2-highlights{
        width:100%;
        justify-content:center;
    }

    .hero-v2-highlights span{
        font-size:.72rem;
        padding:9px 13px;
    }

    .hero-v2-visual{
        min-height:400px;
    }

    .hero-v2-portrait-wrap{
        height:410px;
    }

    .hero-v2-portrait{
        width:390px;
        height:420px;
        right:50%;
        transform:translateX(50%);
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        width:300px;
        height:300px;
    }

    .hero-v2-growth{
        right:0;
        top:55px;
        transform:scale(.65) rotate(-8deg);
    }

    .hero-v2-experience{
        right:0;
        bottom:35px;

        width:112px;
        min-height:112px;

        padding:15px;

        border-radius:18px;
    }

    .hero-v2-experience strong{
        font-size:2.2rem;
    }

    .hero-v2-experience-text{
        font-size:.7rem;
    }

}


@media (max-width:420px){

    .hero-v2-title{
        font-size:2.3rem;
    }

    .hero-v2-highlights span{
        width:calc(50% - 6px);
        justify-content:center;
    }

    .hero-v2-visual{
        min-height:350px;
    }

    .hero-v2-portrait-wrap{
        height:360px;
    }

    .hero-v2-portrait{
        width:330px;
        height:360px;
    }

    .hero-v2-ring,
    .hero-v2-glow-back{
        width:260px;
        height:260px;
    }

    .hero-v2-experience{
        right:-2px;
        bottom:25px;

        width:100px;
        min-height:100px;

        padding:13px;
    }

    .hero-v2-experience strong{
        font-size:2rem;
    }

}

/* ==========================================================
   ABOUT V2 — RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .about-v2-heading{
        grid-template-columns:1fr 260px;
        gap:40px;
    }

    .about-v2-grid{
        gap:55px;
    }

    .about-v2-image-wrap{
        max-width:420px;
    }

    .about-v2-image{
        width:380px;
        height:480px;
    }

    .about-v2-image-ring,
    .about-v2-image-glow{
        width:350px;
        height:350px;
    }

    .about-v2-marker{
        right:-5px;
    }

}


@media (max-width:992px){

    .about-v2{
        padding:100px 0;
    }

    .about-v2-heading{
        grid-template-columns:1fr;
        gap:20px;
    }

    .about-v2-heading-right{
        max-width:600px;
    }

    .about-v2-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .about-v2-visual{
        min-height:520px;
        align-items:center;
    }

    .about-v2-image-wrap{
        margin:auto;
    }

    .about-v2-content{
        max-width:720px;
        margin:auto;
    }

}


@media (max-width:768px){

    .about-v2{
        padding:85px 0;
    }

    .about-v2-heading{
        margin-bottom:55px;
        padding-bottom:25px;
    }

    .about-v2-heading h2{
        font-size:3.1rem;
    }

    .about-v2-grid{
        gap:45px;
    }

    .about-v2-visual{
        min-height:450px;
    }

    .about-v2-image-wrap{
        height:450px;
    }

    .about-v2-image{
        width:350px;
        height:440px;
    }

    .about-v2-image-ring,
    .about-v2-image-glow{
        width:320px;
        height:320px;
    }

    .about-v2-marker{
        right:5%;
        bottom:55px;

        width:120px;
        min-height:110px;
    }

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

}


@media (max-width:576px){

    .about-v2{
        padding:70px 0;
    }

    .about-v2-heading h2{
        font-size:2.55rem;
    }

    .about-v2-heading-right{
        gap:12px;
    }

    .about-v2-heading-right p{
        font-size:.78rem;
    }

    .about-v2-visual{
        min-height:390px;
    }

    .about-v2-image-wrap{
        height:390px;
    }

    .about-v2-image{
        width:310px;
        height:390px;
    }

    .about-v2-image-ring,
    .about-v2-image-glow{
        width:270px;
        height:270px;
    }

    .about-v2-marker{
        right:0;
        bottom:35px;

        width:105px;
        min-height:98px;

        padding:14px;
    }

    .about-v2-marker span{
        font-size:2rem;
    }

    .about-v2-marker small{
        font-size:.65rem;
    }

    .about-v2-caption{
        padding-left:10px;
    }

    .about-v2-content h3{
        font-size:2rem;
    }

    .about-v2-content p{
        font-size:.88rem;
    }

    .about-v2-point{
        padding:17px;
    }

}


@media (max-width:420px){

    .about-v2-heading h2{
        font-size:2.25rem;
    }

    .about-v2-image{
        width:285px;
        height:365px;
    }

    .about-v2-image-wrap{
        height:365px;
    }

    .about-v2-image-ring,
    .about-v2-image-glow{
        width:245px;
        height:245px;
    }

    .about-v2-marker{
        right:-2px;
    }

}

/* ==========================================================
   EXPERTISE V2 — RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .expertise-v2-header{
        grid-template-columns:minmax(0,1fr) 270px;
        gap:40px;
    }

    .expertise-v2-grid{
        gap:12px;
    }

    .expertise-v2-card{
        padding:24px;
    }

}


@media (max-width:992px){

    .expertise-v2{
        padding:100px 0;
    }

    .expertise-v2-header{
        grid-template-columns:1fr;
        gap:20px;

        margin-bottom:45px;
    }

    .expertise-v2-intro{
        max-width:650px;
    }

    .expertise-v2-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .expertise-v2-card:nth-child(4){
        grid-column:span 1;
    }

    .expertise-v2-card:nth-child(5){
        grid-column:span 1;
    }

}


@media (max-width:768px){

    .expertise-v2{
        padding:85px 0;
    }

    .expertise-v2-heading h2{
        font-size:3.1rem;
    }

    .expertise-v2-grid{
        grid-template-columns:1fr;
    }

    .expertise-v2-card{
        min-height:280px;
    }

    .expertise-v2-footer{
        flex-wrap:wrap;
    }

    .expertise-v2-footer a{
        margin-left:0;
        width:100%;
    }

}


@media (max-width:576px){

    .expertise-v2{
        padding:70px 0;
    }

    .expertise-v2-heading h2{
        font-size:2.55rem;
    }

    .expertise-v2-intro{
        gap:12px;
    }

    .expertise-v2-intro p{
        font-size:.78rem;
    }

    .expertise-v2-card{
        min-height:255px;

        padding:22px;

        border-radius:17px;
    }

    .expertise-v2-content{
        margin-top:25px;
    }

    .expertise-v2-content h3{
        font-size:1.15rem;
    }

    .expertise-v2-content p{
        font-size:.76rem;
    }

    .expertise-v2-footer{
        gap:12px;
    }

}


@media (max-width:420px){

    .expertise-v2-heading h2{
        font-size:2.25rem;
    }

    .expertise-v2-card{
        min-height:240px;
    }

}

/* ==========================================================
   JOURNEY V2 — RESPONSIVE
========================================================== */

@media (max-width:992px){

    .journey-v2{
        padding:100px 0;
    }

    .journey-v2-header{
        grid-template-columns:1fr;

        gap:20px;

        margin-bottom:55px;
    }

    .journey-v2-intro{
        max-width:650px;
    }

    .journey-v2-timeline{
        width:100%;
    }

}


@media (max-width:768px){

    .journey-v2{
        padding:85px 0;
    }

    .journey-v2-heading h2{
        font-size:3.1rem;
    }

    .journey-v2-timeline::before{
        left:13px;
    }

    .journey-v2-item{
        grid-template-columns:35px 1fr;

        column-gap:20px;

        padding-bottom:25px;
    }

    .journey-v2-marker{
        left:8px;
        top:22px;
    }

    .journey-v2-item.current .journey-v2-marker{
        left:6px;
    }

    .journey-v2-year{
        position:absolute;

        left:35px;
        top:5px;

        padding:0;

        text-align:left;

        z-index:2;

        font-size:.60rem;
    }

    .journey-v2-card{
        grid-column:2;

        padding:24px;

        margin-top:25px;
    }

    .journey-v2-footer{
        margin-top:40px;
    }

}


@media (max-width:576px){

    .journey-v2{
        padding:70px 0;
    }

    .journey-v2-heading h2{
        font-size:2.55rem;
    }

    .journey-v2-intro{
        gap:12px;
    }

    .journey-v2-intro p{
        font-size:.78rem;
    }

    .journey-v2-card{
        padding:20px;

        border-radius:16px;
    }

    .journey-v2-card h3{
        font-size:1rem;
    }

    .journey-v2-card > p{
        font-size:.74rem;
    }

    .journey-v2-scope span{
        font-size:.55rem;
    }

    .journey-v2-footer{
        padding:22px 20px;

        gap:18px;
    }

    .journey-v2-footer-number{
        font-size:2.1rem;
    }

    .journey-v2-footer strong{
        font-size:.82rem;
    }

}


@media (max-width:420px){

    .journey-v2-heading h2{
        font-size:2.25rem;
    }

    .journey-v2-card{
        padding:18px;
    }

    .journey-v2-footer{
        align-items:flex-start;
    }

}

/* ==========================================================
   INSIGHTS V2 — RESPONSIVE
========================================================== */

@media (max-width:992px){

    .insights-v2{
        padding:100px 0;
    }

    .insights-v2-grid{
        gap:12px;
    }

    .insights-v2-image{
        height:200px;
    }

    .insights-v2-body{
        padding:23px;
    }

}


@media (max-width:768px){

    .insights-v2{
        padding:85px 0;
    }

    .insights-v2-header{
        align-items:flex-start;

        flex-direction:column;

        gap:22px;

        margin-bottom:40px;
    }

    .insights-v2-heading h2{
        font-size:3.1rem;
    }

    .insights-v2-header-right{
        width:100%;

        justify-content:space-between;
    }

    .insights-v2-grid{
        grid-template-columns:1fr;
    }

    .insights-v2-card{
        min-height:460px;
    }

    .insights-v2-image{
        height:240px;
    }

}


@media (max-width:576px){

    .insights-v2{
        padding:70px 0;
    }

    .insights-v2-heading h2{
        font-size:2.55rem;
    }

    .insights-v2-header-right{
        gap:20px;
    }

    .insights-v2-card{
        min-height:430px;

        border-radius:17px;
    }

    .insights-v2-image{
        height:210px;
    }

    .insights-v2-body{
        padding:22px;
    }

    .insights-v2-body h3{
        font-size:1.15rem;
    }

    .insights-v2-body p{
        font-size:.75rem;
    }

    .insights-v2-footer{
        align-items:flex-start;

        flex-wrap:wrap;

        gap:12px;
    }

    .insights-v2-footer a{
        width:100%;

        margin-left:0;
    }

}


@media (max-width:420px){

    .insights-v2-heading h2{
        font-size:2.25rem;
    }

    .insights-v2-image{
        height:190px;
    }

}

/* ==========================================================
   CTA V2 — RESPONSIVE
========================================================== */

@media (max-width:768px){

    .mini-cta-v2{
        padding:25px 0;
    }

    .mini-cta-v2-wrapper{
        padding:30px;

        gap:25px;
    }

    .mini-cta-v2-content h2{
        font-size:1.2rem;
    }

    .contact-cta-v2{
        padding:55px 0 90px;
    }

    .contact-v2-inner{
        padding:70px 35px;
    }

    .contact-v2-inner h2{
        font-size:3rem;
    }

}


@media (max-width:576px){

    .mini-cta-v2-wrapper{
        flex-direction:column;

        align-items:flex-start;

        padding:28px 25px;
    }

    .mini-cta-v2-button{
        width:100%;
    }

    .contact-cta-v2{
        padding:45px 0 70px;
    }

    .contact-v2-box{
        border-radius:19px;
    }

    .contact-v2-inner{
        padding:60px 22px;
    }

    .contact-v2-index{
        top:25px;
        right:25px;
    }

    .contact-v2-inner h2{
        font-size:2.45rem;
    }

    .contact-v2-inner > p{
        font-size:.78rem;
    }

    .contact-v2-actions{
        flex-direction:column;

        width:100%;
    }

    .contact-v2-primary,
    .contact-v2-secondary{
        width:100%;
    }

    .contact-v2-note{
        align-items:flex-start;

        text-align:left;

        font-size:.60rem;
    }

}


@media (max-width:420px){

    .contact-v2-inner{
        padding:55px 18px;
    }

    .contact-v2-inner h2{
        font-size:2.2rem;
    }

}

/* ==========================================================
   FOOTER V2 — RESPONSIVE
========================================================== */

@media (max-width:992px){

    .footer-v2-main{
        grid-template-columns:
            minmax(0,1.5fr)
            130px
            130px;

        gap:45px;
    }

}


@media (max-width:768px){

    .footer-v2{
        padding:65px 0 25px;
    }

    .footer-v2-main{
        grid-template-columns:1fr 1fr;

        gap:45px 35px;

        padding-bottom:45px;
    }

    .footer-v2-brand{
        grid-column:1 / -1;

        max-width:600px;
    }

    .footer-v2-statement{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }

}


@media (max-width:576px){

    .footer-v2{
        padding:55px 0 22px;
    }

    .footer-v2-main{
        grid-template-columns:1fr 1fr;

        gap:35px 25px;
    }

    .footer-v2-brand{
        grid-column:1 / -1;
    }

    .footer-v2-logo img{
        max-width:180px;
    }

    .footer-v2-brand p{
        font-size:.72rem;
    }

    .footer-v2-statement{
        padding:22px 0;
    }

    .footer-v2-statement span{
        font-size:.55rem;
    }

    .footer-v2-statement p{
        font-size:.62rem;
    }

    .footer-v2-bottom{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;

        padding-top:20px;
    }

    .footer-v2-bottom p{
        font-size:.56rem;
    }

}


@media (max-width:380px){

    .footer-v2-main{
        grid-template-columns:1fr;
    }

    .footer-v2-column{
        width:100%;
    }

}
/* ==========================================================
   END OF RESPONSIVE.CSS
========================================================== */