/*==================================================
        RESPONSIVE.CSS
        PART 1
==================================================*/

/*=========================================
        1400px
=========================================*/

@media (max-width:1400px){

    .container{
        width:min(94%,1200px);
    }

    .hero-left h1{
        font-size:58px;
    }

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

}

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

@media (max-width:1200px){

    .container{
        width:94%;
    }

    .hero-content{
        gap:40px;
    }

    .hero-left h1{
        font-size:52px;
    }

    .about-grid{
        gap:50px;
    }

    .project-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .investment-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .category-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats .container{
        grid-template-columns:repeat(2,1fr);
    }

}

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

@media (max-width:992px){

    section{
        overflow:hidden;
    }

    .section-padding{
        padding:90px 0;
    }

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

    .section-heading h2{
        font-size:38px;
    }

    /* HEADER */

    .menu-btn{
        display:flex;
    }

    nav{
        position:fixed;
        top:82px;
        right:-100%;
        width:300px;
        height:calc(100vh - 82px);
        background:#0B0F19;
        padding:35px;
        transition:.40s;
        z-index:999;
    }

    nav.active{
        right:0;
    }

    nav ul{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .header-btn{
        display:none;
    }

    /* HERO */

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

    .hero-left p{
        margin:auto;
        margin-bottom:35px;
    }

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

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

    .hero-search{
        max-width:700px;
        margin:auto;
    }

    /* ABOUT */

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

    /* CONTACT */

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

    /* TESTIMONIAL */

    .testimonial-slider{
        grid-template-columns:repeat(2,1fr);
    }

    /* FOOTER */

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

}



/*==================================================
        RESPONSIVE.CSS
        PART 2
        TABLET (768px)
==================================================*/

@media (max-width:768px){

    html{

        font-size:15px;

    }

    .container{

        width:92%;

    }

    .section-padding{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:32px;

        line-height:1.3;

    }

    .section-heading p{

        font-size:15px;

    }

    /*=========================
            HEADER
    =========================*/

    header{

        padding:15px 0;

    }

    .logo h2{

        font-size:28px;

    }

    nav{

        width:280px;

        top:72px;

        height:calc(100vh - 72px);

    }

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

    .hero{

        min-height:auto;

        padding:130px 0 80px;

    }

    .hero-content{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-left h1{

        font-size:42px;

        line-height:1.25;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

        gap:15px;

    }

    .hero-counter{

        justify-content:center;

        gap:30px;

    }

    .hero-counter h2{

        font-size:34px;

    }

    .hero-search{

        padding:30px;

    }

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

    .about-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .about-content{

        text-align:center;

    }

    .about-content h2{

        font-size:34px;

    }

    .about-list{

        grid-template-columns:1fr;

    }

    .about-buttons{

        justify-content:center;

    }

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

    .service-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .investment-grid{

        grid-template-columns:1fr;

    }

    .category-grid{

        grid-template-columns:1fr;

    }

    .project-grid{

        grid-template-columns:1fr;

    }

    /*=========================
            STATS
    =========================*/

    .stats .container{

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

        gap:20px;

    }

    .stat-box{

        padding:35px 20px;

    }

    .stat-box h2{

        font-size:42px;

    }

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

    .cta{

        padding:90px 0;

    }

    .cta h2{

        font-size:36px;

    }

    .cta p{

        font-size:16px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons a{

        width:100%;

    }

    /*=========================
            TESTIMONIAL
    =========================*/

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    /*=========================
            CONTACT
    =========================*/

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .contact-info h2{

        font-size:34px;

    }

    .contact-form{

        padding:30px;

    }

    /*=========================
            MAP
    =========================*/

    .map{

        height:350px;

    }

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

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .social-links{

        justify-content:center;

    }

}


/*==================================================
        RESPONSIVE.CSS
        PART 3
        MOBILE (576px)
==================================================*/

@media (max-width:576px){

    html{

        font-size:14px;

    }

    body{

        overflow-x:hidden;

    }

    .container{

        width:92%;

    }

    .section-padding{

        padding:60px 0;

    }

    .section-heading{

        margin-bottom:35px;

    }

    .section-heading span{

        font-size:12px;

        letter-spacing:2px;

    }

    .section-heading h2{

        font-size:28px;

        line-height:1.3;

    }

    .section-heading p{

        font-size:14px;

    }

    /*================================
            HEADER
    ================================*/

    header{

        padding:12px 0;

    }

    .logo h2{

        font-size:24px;

    }

    .menu-btn{

        width:45px;

        height:45px;

        font-size:18px;

    }

    nav{

        width:100%;

        right:-100%;

        top:68px;

        height:calc(100vh - 68px);

        padding:30px;

    }

    nav ul{

        gap:20px;

    }

    nav ul li a{

        font-size:17px;

    }

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

    .hero{

        padding:110px 0 60px;

        min-height:auto;

    }

    .hero-left h1{

        font-size:32px;

        line-height:1.3;

    }

    .hero-left p{

        font-size:15px;

    }

    .hero-tag{

        font-size:12px;

        padding:8px 16px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

        justify-content:center;

    }

    .hero-counter{

        gap:20px;

    }

    .hero-counter h2{

        font-size:28px;

    }

    .hero-counter p{

        font-size:13px;

    }

    .hero-search{

        padding:25px;

    }

    .hero-search h3{

        font-size:24px;

    }

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

    .about-content h2{

        font-size:30px;

    }

    .about-buttons{

        flex-direction:column;

    }

    .about-buttons a{

        width:100%;

        justify-content:center;

    }

    /*================================
            CARDS
    ================================*/

    .service-card,

    .why-card,

    .investment-card,

    .project-card,

    .category-card,

    .testimonial-card{

        padding:25px;

    }

    .category-card{

        height:260px;

    }

    .project-card img{

        height:240px;

    }

    /*================================
            STATS
    ================================*/

    .stats .container{

        grid-template-columns:1fr;

    }

    .stat-box{

        padding:30px 20px;

    }

    .stat-box h2{

        font-size:36px;

    }

    /*================================
            CONTACT
    ================================*/

    .contact-info h2{

        font-size:30px;

    }

    .contact-form{

        padding:22px;

    }

    .contact-form input,

    .contact-form select,

    .contact-form textarea{

        padding:14px 16px;

    }

    .contact-form button{

        width:100%;

    }

    /*================================
            MAP
    ================================*/

    .map{

        height:280px;

    }

    /*================================
            FLOATING BUTTONS
    ================================*/

    .call-float,

    .whatsapp-float{

        width:52px;

        height:52px;

        right:15px;

        font-size:20px;

    }

    .call-float{

        bottom:140px;

    }

    .whatsapp-float{

        bottom:75px;

    }

    #backToTop{

        left:15px;

        width:50px;

        height:50px;

        font-size:18px;

    }

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

    footer{

        text-align:center;

    }

    .footer-grid{

        gap:30px;

    }

    .footer-grid h3{

        font-size:26px;

    }

    .footer-grid h4{

        font-size:18px;

    }

    .social-links{

        justify-content:center;

    }

}


/*==================================================
        RESPONSIVE.CSS
        PART 4
        SMALL MOBILE (480px & FINAL FIXES)
==================================================*/

@media (max-width:480px){

    html{

        font-size:13.5px;

    }

    .container{

        width:94%;

    }

    /*================================
            HERO FINAL FIX
    ================================*/

    .hero-left h1{

        font-size:28px;

        line-height:1.25;

    }

    .hero-left p{

        font-size:14px;

    }

    .hero-counter{

        flex-direction:column;

        gap:15px;

    }

    .hero-counter h2{

        font-size:26px;

    }

    .hero-search h3{

        font-size:20px;

    }

    /*================================
            SECTION HEADINGS
    ================================*/

    .section-heading h2{

        font-size:24px;

    }

    /*================================
            CARDS HEIGHT FIX
    ================================*/

    .project-card img{

        height:200px;

    }

    .category-card{

        height:220px;

    }

    .service-card i,
    .why-card i,
    .investment-card i{

        font-size:36px;

    }

    /*================================
            CONTACT FIX
    ================================*/

    .contact-info h2{

        font-size:26px;

    }

    .info-box{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .info-box i{

        margin-bottom:10px;

    }

    /*================================
            TESTIMONIAL FIX
    ================================*/

    .testimonial-card{

        padding:20px;

    }

    .client{

        flex-direction:column;

        text-align:center;

    }

    .client img{

        width:55px;

        height:55px;

    }

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

    .footer-grid h3{

        font-size:22px;

    }

    .footer-grid h4{

        font-size:16px;

    }

    .social-links a{

        width:42px;

        height:42px;

        font-size:16px;

    }

    /*================================
            FLOATING BUTTONS FIX
    ================================*/

    .whatsapp-float,
    .call-float{

        width:48px;

        height:48px;

        font-size:18px;

        right:12px;

    }

    .call-float{

        bottom:130px;

    }

    .whatsapp-float{

        bottom:70px;

    }

    #backToTop{

        width:45px;

        height:45px;

        font-size:16px;

        left:12px;

    }

}

/*==================================================
        VERY SMALL DEVICES (360px)
==================================================*/

@media (max-width:360px){

    .hero-left h1{

        font-size:24px;

    }

    .section-heading h2{

        font-size:22px;

    }

    .hero-search{

        padding:18px;

    }

    .hero-search h3{

        font-size:18px;

    }

    .contact-form{

        padding:18px;

    }

}