/* =========================================
   RESPONSIVE CSS FILE
   FLUID RESPONSIVE SYSTEM
   Everything Scales Smoothly
========================================= */

/* =========================================
   GLOBAL FLUID SYSTEM
========================================= */

.container{
    width:min(90%,1400px);
}

.section-title{
    margin-bottom:clamp(50px,6vw,90px);
}

.section-title h2{
    font-size:clamp(30px,4vw,64px);
    line-height:1.1;
}

.section-title p{
    font-size:clamp(15px,1.3vw,20px);
    line-height:1.8;
}

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

@media (max-width:1400px){

    .hero{
        padding:
        clamp(90px,8vw,120px)
        clamp(30px,6vw,70px);
    }

    .hero-content h1{
        font-size:clamp(40px,6vw,82px);
        line-height:1.1;
    }

    .service-card h3,
    .portfolio-content h3{
        font-size:clamp(22px,2.5vw,30px);
    }

}

/* =========================================
   TABLET + SMALL LAPTOP
========================================= */

@media (max-width:1200px){

    .container{
        width:min(92%,1300px);
    }

    /* HEADER */

    .nav-links{
        gap:clamp(14px,2vw,24px);
    }

    .nav-links li a{
        font-size:clamp(13px,1vw,15px);
    }

    .header-btn{
        height:clamp(46px,4vw,52px);
        padding:0 clamp(14px,2vw,18px);
        font-size:clamp(13px,1vw,15px);
        border-radius:clamp(12px,1.5vw,18px);
    }

    .logo img{
        width:clamp(50px,5vw,60px);
        height:clamp(50px,5vw,60px);
    }

    .logo-text h2{
        font-size:clamp(18px,2vw,22px);
    }

    /* HERO */

    .hero{
        padding:
        clamp(90px,8vw,120px)
        clamp(20px,5vw,60px)
        clamp(60px,6vw,80px);
    }

    .hero-content h1{
        font-size:clamp(34px,5vw,72px);
        line-height:1.15;
    }

    .hero-content p{
        font-size:clamp(16px,1.8vw,24px);
        line-height:1.9;
    }

    .btn{
        min-width:clamp(170px,18vw,220px);
        height:clamp(52px,5vw,66px);
        font-size:clamp(15px,1.3vw,18px);
        border-radius:clamp(14px,1.5vw,20px);
    }

    .stats{
        gap:clamp(12px,2vw,20px);
    }

    .stat-box{
        width:clamp(150px,18vw,200px);
        padding:
        clamp(20px,2vw,28px)
        clamp(14px,1.5vw,18px);
        border-radius:clamp(18px,2vw,26px);
    }

    .stat-box h3{
        font-size:clamp(30px,4vw,46px);
    }

    .stat-box span{
        font-size:clamp(13px,1vw,16px);
    }

    /* SECTIONS */

    .services-section,
    .why-us-section,
    .portfolio-section,
    .cta-section,
    .map-section,
    .gallery-section{
        padding:clamp(80px,8vw,120px) 0;
    }

    /* SERVICES */

    .services-grid{
        gap:clamp(16px,2vw,24px);
    }

    .service-card{
        padding:clamp(22px,2vw,34px);
        border-radius:clamp(20px,2vw,30px);
    }

    .service-card h3{
        font-size:clamp(20px,2vw,28px);
    }

    .service-card p{
        font-size:clamp(14px,1.2vw,17px);
        line-height:1.8;
    }

    /* WHY US */

    .features-grid{
        gap:clamp(16px,2vw,22px);
    }

    .feature-card{
        padding:clamp(20px,2vw,26px);
        border-radius:clamp(18px,2vw,26px);
    }

    .feature-content h3{
        font-size:clamp(18px,2vw,24px);
    }

    .feature-content p{
        font-size:clamp(14px,1vw,16px);
    }

    .cta-btn{
        min-width:clamp(220px,28vw,360px);
        height:clamp(56px,5vw,70px);
        font-size:clamp(16px,2vw,22px);
        border-radius:clamp(16px,2vw,24px);
    }

    /* PORTFOLIO */

    .portfolio-card{
        min-height:clamp(300px,35vw,400px);
        border-radius:clamp(20px,2vw,30px);
    }

    .portfolio-content h3{
        font-size:clamp(22px,2.5vw,34px);
    }

    .portfolio-content span{
        font-size:clamp(13px,1vw,16px);
    }

    /* CTA */

    .cta-section h2{
        font-size:clamp(32px,5vw,66px);
    }

    .cta-section p{
        font-size:clamp(16px,2vw,24px);
    }

    .cta-phone a{
        min-width:clamp(220px,24vw,280px);
        height:clamp(58px,6vw,74px);
        font-size:clamp(22px,3vw,32px);
        border-radius:clamp(16px,2vw,24px);
    }

    .cta-main-btn{
        min-width:clamp(180px,20vw,250px);
        height:clamp(56px,5vw,70px);
        font-size:clamp(16px,2vw,22px);
    }

    /* FOOTER */

    .footer-grid{
        gap:clamp(24px,3vw,45px);
    }

    .footer-logo h3{
        font-size:clamp(22px,2.5vw,30px);
    }

    .footer-desc{
        font-size:clamp(14px,1.2vw,18px);
    }

    .footer-title{
        font-size:clamp(20px,2vw,28px);
    }

    .footer-links li a,
    .footer-contact li{
        font-size:clamp(14px,1.2vw,18px);
    }

    /* MAP */

    .map-card{
        padding:clamp(20px,2vw,28px);
        border-radius:clamp(18px,2vw,26px);
    }

    .map-card h3{
        font-size:clamp(18px,2vw,24px);
    }

    .map-card p{
        font-size:clamp(14px,1vw,16px);
    }

}

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

@media (max-width:960px){

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

    .header{
        padding:clamp(10px,2vw,14px) 0;
    }

    .logo{
        gap:clamp(8px,1vw,10px);
    }

    .logo img{
        width:clamp(44px,5vw,54px);
        height:clamp(44px,5vw,54px);
    }

    .logo-text h2{
        font-size:clamp(16px,2vw,18px);
    }

    .logo-text p{
        font-size:clamp(10px,1vw,12px);
    }

    .nav-links{
        gap:clamp(10px,2vw,18px);
    }

    .nav-links li a{
        font-size:clamp(11px,1vw,12px);
    }

    .header-btn{
        height:clamp(42px,4vw,48px);
        padding:0 clamp(12px,1.5vw,16px);
        font-size:clamp(12px,1vw,14px);
    }

    .hero{
        padding:
        clamp(80px,8vw,110px)
        clamp(16px,4vw,40px)
        clamp(50px,6vw,70px);
    }

    .hero-content h1{
        font-size:clamp(30px,5vw,62px);
    }

    .hero-content p{
        font-size:clamp(15px,1.8vw,18px);
    }

    .hero-buttons{
        gap:clamp(12px,2vw,18px);
    }

    .btn{
        min-width:clamp(160px,20vw,210px);
        height:clamp(50px,5vw,62px);
        font-size:clamp(14px,1.3vw,17px);
    }

    .stats{
        gap:clamp(10px,2vw,16px);
    }

    .stat-box{
        width:clamp(140px,20vw,180px);
        padding:
        clamp(18px,2vw,24px)
        clamp(12px,1.5vw,16px);
    }

    .stat-box h3{
        font-size:clamp(28px,4vw,40px);
    }

    .services-grid,
    .features-grid{
        gap:clamp(14px,2vw,20px);
    }

    .service-icon{
        width:clamp(64px,7vw,84px);
        height:clamp(64px,7vw,84px);
    }

    .service-icon i{
        font-size:clamp(24px,3vw,34px);
    }

    .portfolio-card{
        min-height:clamp(260px,35vw,350px);
    }

    .portfolio-content{
        right:clamp(16px,2vw,24px);
        left:clamp(16px,2vw,24px);
        bottom:clamp(16px,2vw,24px);
    }

    .portfolio-content h3{
        font-size:clamp(20px,2vw,28px);
    }

    .cta-main-btn{
        min-width:clamp(170px,20vw,220px);
        font-size:clamp(15px,2vw,20px);
    }

    .cta-feature{
        font-size:clamp(13px,1vw,16px);
    }

    .footer{
        padding-top:clamp(70px,8vw,90px);
    }

    .footer-grid{
        gap:clamp(20px,2vw,30px);
    }

    .map-wrapper iframe{
        height:clamp(320px,50vw,480px);
    }

    .map-card{
        gap:clamp(12px,2vw,16px);
    }

    .map-card i{
        width:clamp(50px,6vw,64px);
        height:clamp(50px,6vw,64px);
        min-width:clamp(50px,6vw,64px);
        font-size:clamp(18px,2vw,24px);
    }

    .map-card h3{
        font-size:clamp(18px,2vw,22px);
    }

}

/* =========================================
   MOBILE RESPONSIVE
   768px AND BELOW
========================================= */

@media (max-width:768px){

    .container{
        width:95%;
    }

    section{
        overflow:hidden;
    }

    /* HEADER */

    .header{
        padding:12px 0;
    }

    .header .container{
        gap:12px;
    }

    .nav-links{
        position:fixed;
        top:70px;
        right:-100%;
        width:100%;
        height:auto;
        background:#ffffff;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        padding:35px 25px;
        gap:24px;
        transition:.5s ease;
        box-shadow:0 20px 50px rgba(0,0,0,0.08);
        z-index:999;
    }

    .nav-links.active{
        right:0;
    }

    .menu-toggle{
        display:flex;
    }

    .header-btn{
        display:none;
    }

    .logo img{
        width:50px;
        height:50px;
    }

    .logo-text h2{
        font-size:18px;
    }

    /* HERO */

    .hero{
        min-height:auto;
        padding:140px 20px 80px;
    }

    .hero-content h1{
        font-size:38px;
        line-height:1.3;
        margin-bottom:22px;
    }

    .hero-content p{
        font-size:16px;
        line-height:2;
    }

    .hero-buttons{
        flex-direction:column;
        gap:16px;
        margin-top:40px;
    }

    .btn{
        width:100%;
        min-width:100%;
        height:60px;
        font-size:16px;
    }

    .stats{
        margin-top:50px;
        gap:14px;
    }

    .stat-box{
        width:100%;
        max-width:260px;
        border-radius:22px;
    }

    .stat-box h3{
        font-size:36px;
    }

    .stat-box span{
        font-size:15px;
    }

    /* SECTIONS */

    .services-section,
    .why-us-section,
    .portfolio-section,
    .cta-section,
    .map-section,
    .gallery-section{
        padding:90px 0;
    }

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

    .section-title h2{
        font-size:32px;
        line-height:1.4;
    }

    .section-title p{
        margin-top:34px;
        font-size:16px;
        line-height:1.9;
    }

    .sub-title{
        padding:12px 22px;
        font-size:13px;
    }

    /* SERVICES */

    .services-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .service-card{
        padding:28px;
        border-radius:24px;
    }

    .service-icon{
        width:76px;
        height:76px;
        border-radius:22px;
        margin-bottom:24px;
    }

    .service-icon i{
        font-size:30px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:16px;
    }

    /* WHY US */

    .features-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:55px;
    }

    .feature-card{
        padding:24px;
        border-radius:24px;
    }

    .feature-content h3{
        font-size:22px;
    }

    .feature-content p{
        font-size:15px;
    }

    .cta-btn{
        width:100%;
        min-width:100%;
        height:64px;
        font-size:18px;
    }

    /* PORTFOLIO */

    .portfolio-grid{
        grid-template-columns:1fr;
        gap:22px;
        margin-top:55px;
    }

    .portfolio-card{
        min-height:320px;
        border-radius:24px;
    }

    .portfolio-content h3{
        font-size:24px;
    }

    .portfolio-content span{
        font-size:15px;
    }

    .portfolio-tag{
        padding:10px 18px;
        font-size:13px;
    }

    /* CTA */

    .cta-icon{
        width:80px;
        height:80px;
    }

    .cta-icon i{
        font-size:34px;
    }

    .cta-section h2{
        font-size:34px;
    }

    .cta-section p{
        font-size:16px;
        line-height:1.9;
    }

    .cta-phone a{
        width:100%;
        min-width:100%;
        height:68px;
        font-size:24px;
    }

    .cta-buttons{
        flex-direction:column;
        gap:16px;
    }

    .cta-main-btn{
        width:100%;
        min-width:100%;
        height:64px;
        font-size:18px;
    }

    .cta-features{
        gap:18px;
    }

    .cta-feature{
        font-size:15px;
    }

    /* FOOTER */

    .footer{
        padding-top:80px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .footer-title{
        font-size:26px;
        margin-bottom:28px;
    }

    .footer-logo h3{
        font-size:28px;
    }

    .footer-desc{
        font-size:16px;
    }

    .footer-links li a,
    .footer-contact li{
        font-size:16px;
    }

    .footer-whatsapp-btn{
        height:64px;
        font-size:18px;
    }

    .footer-bottom{
        justify-content:center;
        text-align:center;
    }

    /* MAP */

    .map-wrapper{
        border-radius:24px;
        border-width:6px;
    }

    .map-wrapper iframe{
        height:350px;
    }

    .map-info{
        grid-template-columns:1fr;
        gap:20px;
    }

    .map-card{
        padding:24px;
        border-radius:22px;
    }

    .map-card h3{
        font-size:22px;
    }

    .map-card p{
        font-size:15px;
    }

    /* FLOATING */

    .floating-buttons{
        left:14px;
        bottom:18px;
    }

    .float-btn{
        width:58px;
        height:58px;
        border-radius:18px;
        font-size:22px;
    }

}