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


/* ===============================
        LARGE TABLETS
================================ */

@media (max-width:1200px){

    .container{

        width:92%;

    }

    .footer-grid{

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

        gap:40px;

    }

}



/* ===============================
        TABLETS
================================ */

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.3rem;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        max-width:100%;

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .nav-links{

        position:fixed;

        top:85px;

        left:-100%;

        width:100%;

        height:calc(100vh - 85px);

        background:#08111f;

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        gap:30px;

        padding-top:60px;

        transition:.35s;

    }

    .nav-links.active{

        left:0;

    }

    .nav-btn{

        display:none;

    }

    .menu-btn{

        display:block;

    }

}



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

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .navbar{

        height:75px;

    }

    .logo img{

        height:45px;

    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2rem;

    }

    .hero{

        min-height:90vh;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        max-width:280px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

        flex-wrap:wrap;

    }

}



/* ===============================
        SMALL MOBILES
================================ */

@media (max-width:576px){

    .container{

        width:94%;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    p{

        font-size:.95rem;

    }

    .badge{

        font-size:.8rem;

        padding:8px 18px;

    }

    .card{

        padding:25px;

    }

    #backToTop{

        width:48px;

        height:48px;

        right:20px;

        bottom:20px;

    }

}



/* ===============================
        EXTRA SMALL
================================ */

@media (max-width:400px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    .hero-buttons{

        gap:15px;

    }

    .btn-primary,

    .btn-secondary{

        padding:14px 20px;

    }

}

@media(max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

margin-top:70px;

}

.hero-stats{

justify-content:center;

}

.code-window{

width:100%;

max-width:500px;

}

.card-ai{

left:0;

}

.card-cloud{

right:0;

}

}

@media(max-width:768px){

.hero-stats{

flex-direction:column;

gap:20px;

}

.code-window pre{

padding:20px;

}

.floating-card{

    display:flex;

    position:relative;

    top:auto;

    left:auto;

    right:auto;

    bottom:auto;

    margin:10px auto;

    width:fit-content;

}

.hero-right{

    display:flex;

    flex-direction:column;

    align-items:center;

}
}

@media(max-width:992px){

.expertise-grid{

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

}

}

@media(max-width:768px){

.expertise-grid{

grid-template-columns:1fr;

}

.section-title{

margin-bottom:50px;

}

}

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

@media(max-width:991px){

.philosophy-grid{

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

}

.philosophy-item:nth-child(2){

border-right:none;

}

.philosophy-item:nth-child(1),
.philosophy-item:nth-child(2){

border-bottom:1px solid #edf2f7;

}

}

@media(max-width:768px){

.philosophy{

padding:60px 0;

}

.philosophy-grid{

grid-template-columns:1fr;

}

.philosophy-item{

padding:35px 20px;

border-right:none !important;

border-bottom:1px solid #edf2f7;

}

.philosophy-item:last-child{

border-bottom:none;

}

.philosophy-item span{

font-size:58px;

}

.philosophy-item h3{

font-size:22px;

}

}

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

@media(max-width:768px){

.cta{

padding:90px 20px;

}

.cta h2{

font-size:36px;

}

.cta p{

font-size:17px;

margin-bottom:35px;

}

.cta .btn-primary{

padding:16px 30px;

font-size:16px;

}

}

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

@media(max-width:991px){

.story-grid{

grid-template-columns:1fr;

}

.mv-grid{

grid-template-columns:1fr;

}

.values-grid{

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

}

.story-content{

text-align:center;

}

.story-content blockquote{

text-align:left;

}

}

@media(max-width:768px){

.our-story,
.mission-vision,
.values{

padding:80px 0;

}

.story-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

}


.story-content h2{

font-size:34px;

}

.story-timeline{
    
     width:100%;

    max-width:450px;

    margin:0 auto;


padding:30px;

}

.values-grid{

grid-template-columns:1fr;

}

.mv-card{

padding:35px;

}

}

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

@media(max-width:991px){

.services-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.services-grid-section{

padding:80px 0;

}

.service-card{

padding:35px;

}

.service-card h3{

font-size:24px;

}

.service-icon{

width:65px;
height:65px;
font-size:26px;

}

}

/* ==========================================
   OUR APPROACH - MOBILE
========================================== */

@media (max-width:768px){

    .approach{

        padding:80px 0;

    }

    .approach .section-heading{

        margin-bottom:60px;

    }

    .approach .section-heading h2{

        font-size:32px;

    }

    .approach .section-heading p{

        font-size:16px;

    }

    .approach-timeline{

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

        gap:40px 20px;

    }

    /* Remove horizontal line */

    .approach-timeline::before{

        display:none;

    }

    .step-number{

        font-size:70px;

    }

    .step-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .approach-step h3{

        font-size:20px;

    }

    .approach-step p{

        font-size:15px;

    }

}

/* ==========================================
   WHAT YOU CAN EXPECT - MOBILE
========================================== */

@media (max-width:768px){

    .expect{

        padding:80px 0;

    }

    .expect-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .expect-left{

        text-align:center;

    }

    .expect-left h2{

        font-size:34px;

        line-height:1.25;

    }

    .expect-left p{

        font-size:16px;

        margin:0 auto;

    }

    .expect-item{

        gap:18px;

        padding:20px 0;

    }

    .expect-item h3{

        font-size:20px;

    }

    .expect-item p{

        font-size:15px;

    }

    .expect-icon{

        width:55px;

        height:55px;

        min-width:55px;

        font-size:20px;

    }

}



@media (max-width:768px){

.story-grid{
    display:block !important;
}

.story-content,
.story-timeline{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    position:relative !important;
    margin:30px auto 0;
}

.mv-grid{
    display:block !important;
}

.mv-card{
    display:block !important;
    width:100%;
    margin-bottom:25px;
}

}

/* ==========================================
   globe - contact
========================================== */
@media(max-width:768px){

.office-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.office-text p{

margin:auto;

}

#globe{

height:350px;

}

}

@media(max-width:768px){

.hiring-float{

    top:auto;

    bottom:90px;

    left:15px;

    transform:none;

    animation:none;

}

.hiring-float:hover{

    transform:scale(1.03);

}

}

/*...cursor glow ....*/
@media(max-width:768px){

.cursor-glow{

display:none;

}

}


/*=========================================
        LAUNCHPAD HERO MOBILE
=========================================*/

@media(max-width:768px){

    .launchpad-hero{

        min-height:100dvh;

        padding:120px 0 80px;

    }

    .launchpad-hero h1{

        font-size:2.6rem;

    }

    .launchpad-hero p{

        font-size:1rem;

        line-height:1.7;

        padding:0 10px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

}

/*=========================================
    WHO CAN APPLY MOBILE
=========================================*/

@media(max-width:768px){

    .eligibility-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .eligibility-card{

        padding:30px;

    }

}

/*=========================================
    YOUR JOURNEY MOBILE
=========================================*/

@media(max-width:992px){

    .journey-grid{

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

    }

}

@media(max-width:768px){

    .launchpad-journey{

        padding:90px 0;

    }

    .journey-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .journey-step{

        padding:35px 25px;

    }

}

/*=========================================
    LAUNCHPAD FORM MOBILE
=========================================*/

@media(max-width:768px){

    .launchpad-form{

        padding:90px 0;

    }

    .launchpad-form-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .launchpad-apply-hero{

        min-height:45vh;

    }

}