/* Projects */
/*================ PROJECTS =================*/
/* 1200px (Small Laptops) */

@media (max-width:1200px){

    .projects{

        padding:140px 6%;

    }

    .projects-heading h2{

        font-size:58px;

    }

    .slider{

        height:70vh;

    }

    .slide-overlay{

        left:45px;
        bottom:45px;

    }

    .slide-overlay h2{

        font-size:56px;

    }

}

/* 992px (Tablets) */

@media (max-width:992px){

    .projects{

        padding:120px 5%;

    }

    .projects-heading h2{

        font-size:46px;

    }

    .slider{

        height:60vh;

    }

    .slide-overlay{

        left:35px;
        bottom:35px;
        max-width:450px;

    }

    .slide-overlay h2{

        font-size:46px;

    }

    .slide-overlay h4{

        font-size:18px;

    }

    .slide-overlay p{

        font-size:17px;
        line-height:28px;

    }

}

/* 768px (Large Phones) */

@media (max-width:768px){

    .projects{

        padding:100px 5%;

    }

    .projects-heading{

        margin-bottom:50px;

    }

    .projects-heading h2{

        font-size:38px;

    }

    .slider{

        height:55vh;
        border-radius:20px;

    }

    .slide-overlay{

        left:25px;
        right:25px;
        bottom:25px;

        max-width:100%;

    }

    .slide-overlay h2{

        font-size:34px;

    }

    .slide-overlay h4{

        font-size:16px;

        margin:10px 0;

    }

    .slide-overlay p{

        font-size:15px;

        line-height:24px;

        margin-bottom:20px;

    }

    .slider-nav{

        gap:15px;

    }

    .slider-nav button{

        width:45px;
        height:45px;
        font-size:18px;

    }

}

/* 576px (Small Phones) */

@media (max-width:576px){

    .projects{

        padding:80px 20px;

    }

    .projects-heading h2{

        font-size:30px;

    }

    .slider{

        height:420px;

        border-radius:16px;

    }

    .slide-overlay{

        left:20px;
        right:20px;
        bottom:20px;

    }

    .slide-overlay h2{

        font-size:28px;

    }

    .slide-overlay h4{

        font-size:15px;

    }

    .slide-overlay p{

        display:none;

    }

    .slide-overlay a{

        font-size:15px;

    }

    .slider-nav{

        margin-top:25px;

    }

    .slider-nav button{

        width:42px;
        height:42px;

    }

    .projects-btn{

        margin-top:45px;

    }

}
/* numbers responsive */

/*==================== NUMBERS ====================*/

@media(max-width:992px){

    .numbers-grid{

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

    }

}

@media(max-width:768px){

    .numbers{

        padding:100px 5%;

    }

    .numbers-heading h2{

        font-size:42px;

    }

    .numbers-grid{

        grid-template-columns:1fr;

    }

    .number-card{

        padding:35px;

    }

    .number-card h3{

        font-size:60px;

    }

}

/*==================== NUMBERS ====================*/

@media(max-width:992px){

    .numbers-grid{

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

    }

}

@media(max-width:768px){

    .numbers{

        padding:100px 5%;

    }

    .numbers-heading h2{

        font-size:42px;

    }

    .numbers-grid{

        grid-template-columns:1fr;

    }

    .number-card{

        padding:35px;

    }

    .number-card h3{

        font-size:60px;

    }

}

/* CTA respnsive */
@media(max-width:768px){

    .cta{

        min-height:65vh;

        padding:90px 6%;

    }

    .cta h2{

        font-size:46px;

    }

    .cta p{

        font-size:17px;

        line-height:30px;

    }

}

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

@media(max-width:992px){

    .cta{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media(max-width:768px){

    .cta{

        padding:100px 6%;

    }

    .cta-title{

        font-size:48px;

    }

    .cta-text{

        font-size:17px;

        line-height:30px;

    }

    .contact-box{

        padding:40px 30px;

    }

}

/*==================== FOOTER ====================*/

@media(max-width:992px){

    .footer-top{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

}

@media(max-width:768px){

    .footer{

        padding:70px 6% 30px;

    }

    .footer-top{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

}

/*================ NAVBAR ================*/

@media(max-width:992px){

header{

    padding:20px 5%;

}

.logo img{

    width:140px;

}

.menu-toggle{

    display:flex;

}

.nav-btn{

    display:none;

}

.nav-links{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:white;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:.45s ease;

    box-shadow:-10px 0 30px rgba(0,0,0,.1);

}

.nav-links.active{

    right:0;

}

.nav-links a{

    color:#222;

    font-size:18px;

}

}

/* Hero */
/*==================== HERO ====================*/

@media (max-width: 992px) {

    .hero{

        padding:0 6%;

    }

    .hero h1{

        font-size:68px;

        line-height:72px;

    }

    .hero-text{

        font-size:17px;

        line-height:30px;

        max-width:520px;

    }

    .primary-btn,
    .secondary-btn{

        padding:16px 30px;

    }

}

@media (max-width: 768px){

    .hero{

        padding:0 5%;

        text-align:center;

        justify-content:center;

    }

    .hero-content{

        max-width:100%;

    }

    .subtitle{

        font-size:12px;

        letter-spacing:3px;

    }

    .hero h1{

        font-size:52px;

        line-height:56px;

        margin-bottom:20px;

    }

    .hero-text{

        font-size:16px;

        line-height:28px;

        margin:0 auto 35px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

        gap:15px;

    }

    .primary-btn,
    .secondary-btn{

        width:220px;

        text-align:center;

        padding:15px 25px;

    }

    .scroll{

        display:none;

    }

}

@media (max-width: 480px){

    .hero{

        padding:0 20px;

    }

    .hero h1{

        font-size:40px;

        line-height:46px;

    }

    .hero-text{

        font-size:15px;

        line-height:26px;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

}

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

@media (max-width: 992px){

    .services{

        grid-template-columns:1fr;

        gap:50px;

        padding:100px 6%;

    }

    .services-right{

        order:-1;

    }

    .services-right img{

        height:500px;

    }

    .service h3{

        font-size:32px;

    }

}

@media (max-width:768px){

    .services{

        padding:80px 5%;

        gap:40px;

    }

    .services-right img{

        height:350px;

        border-radius:20px;

    }

    .service{

        padding:22px 0;

    }

    .service h3{

        font-size:26px;

    }

    .service span{

        font-size:12px;

        letter-spacing:2px;

    }

}

@media (max-width:480px){

    .services{

        padding:70px 20px;

    }

    .services-right img{

        height:260px;

    }

    .service h3{

        font-size:22px;

    }

}

/* =========================================================
   FINAL MOBILE FIX — INDEX PAGE
   ========================================================= */

/* ---------- GENERAL MOBILE FIX ---------- */

@media (max-width: 768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    section{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    /* Prevent long text from forcing page wider */
    h1,
    h2,
    h3,
    h4,
    p,
    a{
        max-width:100%;
        overflow-wrap:break-word;
    }

    /* ---------- NAVBAR ---------- */

    header{
        width:100%;
        padding:18px 20px;
    }

    .navbar{
        width:100%;
        min-width:0;
    }

    .logo{
        min-width:0;
    }

    .logo img{
        width:135px;
        max-width:100%;
    }

    .menu-toggle{
        flex-shrink:0;
        margin-left:auto;
    }


    /* ---------- HERO ---------- */

    .hero{
        width:100%;
        min-height:100svh;
        height:100svh;
        padding:0 20px;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .subtitle{
        font-size:10px;
        letter-spacing:2.5px;
        line-height:18px;
        margin-bottom:20px;
    }

    .hero h1{
        width:100%;
        max-width:100%;
        font-size:40px;
        line-height:44px;
        letter-spacing:-.5px;
    }

    .hero-text{
        width:100%;
        max-width:100%;
        font-size:15px;
        line-height:25px;
        margin-bottom:30px;
    }

    .hero-buttons{
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .hero-buttons .btn-nav{
        width:100%;
        max-width:280px;
        text-align:center;
        padding:14px 20px;
    }


    /* ---------- STATEMENT ---------- */

    .statement{
        width:100%;
        min-height:auto;
        padding:80px 20px;
    }

    .statement-content{
        width:100%;
        max-width:100%;
    }

    .section-tag{
        font-size:11px;
        letter-spacing:3px;
        margin-bottom:25px;
    }

    .statement-title{
        width:100%;
        font-size:48px;
        line-height:.98;
        letter-spacing:-1px;
        gap:5px;
    }


    /* ---------- ABOUT ---------- */

    .about{
        width:100%;
        padding:80px 20px;
    }

    .about-container{
        width:100%;
        max-width:100%;
        gap:45px;
    }

    .about-image{
        width:100%;
        max-width:100%;
        height:420px;
        flex:none;
        border-radius:20px;
    }

    .about-content{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .about-title{
        width:100%;
        font-size:48px;
        line-height:1;
        margin:20px 0;
        letter-spacing:-1px;
    }

    .about-content p{
        width:100%;
        max-width:100%;
        font-size:16px;
        line-height:28px;
        margin-bottom:30px;
    }

    .about-content .primary-btn{
        display:inline-block;
        max-width:100%;
        padding:15px 25px;
    }


    /* ---------- SERVICES ---------- */

    .services{
        width:100%;
        grid-template-columns:1fr;
        padding:80px 20px;
        gap:40px;
    }

    .services-left,
    .services-right{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .services-right{
        order:-1;
    }

    .services-right img{
        width:100%;
        max-width:100%;
        height:280px;
        object-fit:cover;
        border-radius:20px;
    }

    .service{
        width:100%;
        padding:20px 0;
    }

    .service h3{
        font-size:26px;
        line-height:1.1;
    }


    /* ---------- FEATURED PROJECTS ---------- */

    .projects{
        width:100%;
        padding:80px 20px;
    }

    .projects-heading{
        width:100%;
        max-width:100%;
        margin-bottom:35px;
    }

    .projects-heading h2{
        width:100%;
        max-width:100%;
        font-size:36px;
        line-height:1.05;
        letter-spacing:-.5px;
    }

    .slider{
        width:100%;
        max-width:100%;
        height:390px;
        aspect-ratio:auto;
        border-radius:18px;
    }

    .slide{
        width:100%;
        max-width:100%;
    }

    .slide img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .slide-overlay{
        left:18px;
        right:18px;
        bottom:18px;
        width:auto;
        max-width:none;
    }

    .slide-overlay h2{
        font-size:30px;
        line-height:1;
    }

    .slide-overlay h4{
        font-size:13px;
        line-height:20px;
        margin:8px 0;
    }

    .slide-overlay p{
        display:none;
    }

    .slider-nav{
        width:100%;
        gap:15px;
        margin-top:20px;
    }

    .slider-nav button{
        flex-shrink:0;
        width:42px;
        height:42px;
    }

    .progress{
        min-width:0;
    }

    .projects-btn{
        margin-top:45px;
    }


    /* ---------- NUMBERS ---------- */

    .numbers{
        width:100%;
        padding:80px 20px;
    }

    .numbers-heading{
        width:100%;
        max-width:100%;
        margin-bottom:45px;
    }

    .numbers-heading h2{
        width:100%;
        font-size:46px;
        line-height:1;
        letter-spacing:-1px;
    }

    .numbers-grid{
        width:100%;
        grid-template-columns:1fr;
        gap:18px;
    }

    .number-card{
        width:100%;
        min-width:0;
        padding:30px;
        border-radius:18px;
    }

    .number-card h3{
        font-size:60px;
    }

    .number-card h4{
        font-size:20px;
    }

    .number-card p{
        font-size:15px;
        line-height:25px;
    }


    /* ---------- CTA ---------- */

    .cta{
        width:100%;
        grid-template-columns:1fr;
        padding:80px 20px;
        gap:45px;
    }

    .cta-left,
    .cta-right{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .cta-title{
        width:100%;
        max-width:100%;
        font-size:48px;
        line-height:1;
        letter-spacing:-1px;
    }

    .cta-text{
        width:100%;
        max-width:100%;
        font-size:16px;
        line-height:28px;
    }

    .contact-box{
        width:100%;
        max-width:100%;
        padding:35px 25px;
        border-radius:20px;
    }

    .contact-box h3{
        font-size:30px;
    }

    .contact-box p{
        font-size:15px;
        line-height:25px;
    }

    .contact-box .primary-btn{
        display:block;
        width:100%;
        text-align:center;
        padding:15px 20px;
    }

    .contact-info{
        width:100%;
        max-width:100%;
        gap:20px;
    }

    .contact-info h4{
        font-size:17px;
        overflow-wrap:anywhere;
    }


    /* ---------- FOOTER ---------- */

    .footer{
        width:100%;
        padding:70px 20px 25px;
        overflow:hidden;
    }

    .footer-top{
        width:100%;
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-brand,
    .footer-links{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .footer-brand img{
        width:150px;
    }

    .footer-brand p{
        max-width:100%;
        font-size:15px;
        line-height:26px;
    }

    .footer-links p{
        overflow-wrap:anywhere;
    }

    .footer-bottom{
        width:100%;
        flex-direction:column;
        gap:12px;
        text-align:center;
        line-height:22px;
    }

}


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

@media (max-width: 400px){

    .logo img{
        width:125px;
    }

    .hero{
        padding:0 18px;
    }

    .hero h1{
        font-size:36px;
        line-height:40px;
    }

    .subtitle{
        font-size:9px;
        letter-spacing:2px;
    }

    .hero-text{
        font-size:14px;
        line-height:24px;
    }

    .statement{
        padding:70px 18px;
    }

    .statement-title{
        font-size:42px;
    }

    .about,
    .services,
    .projects,
    .numbers,
    .cta{
        padding-left:18px;
        padding-right:18px;
    }

    .about-title,
    .cta-title{
        font-size:42px;
    }

    .about-image{
        height:360px;
    }

    .projects-heading h2{
        font-size:32px;
    }

    .slider{
        height:360px;
    }

    .slide-overlay h2{
        font-size:27px;
    }

    .numbers-heading h2{
        font-size:42px;
    }

}