/* =====================================================
   LAPTOP RESPONSIVE (1024px - 1440px)
===================================================== */

@media (max-width: 1400px) {

    .container{
        width:90%;
    }


    .hero-left{
        max-width:60%;
    }

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

    .hero p{
        font-size:16px;
        max-width:100%;
    }

    .hero-features{
        gap:16px;
    }

    .feature span{
        font-size:14px;
    }

    .btn{
        min-width:160px;
        height:40px;
        font-size:14px;
    }

    /* Header */

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

    .nav-links{
        gap:22px;
    }

    .nav-links a{
        font-size:16px;
    }

    /* Services */

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

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

    .section-title h2{
        font-size:46px;
    }

    .section-title p{
        font-size:18px;
    }

    .service-card{
        padding:30px;
    }

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

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

    .service-icon{
        width:75px;
        height:75px;
    }

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

    /* Why us */

    .feature-card{
        padding:24px;
    }

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

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

    /* Portfolio */

    .portfolio-card{
        min-height:360px;
    }

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

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

    /* Gallery */

    .gallery-item{
        height:50vh;
    }

    .gallery-content h3{
        font-size:38px;
    }

    .gallery-content span{
        font-size:18px;
    }

    /* CTA */

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

    .cta-section p{
        font-size:20px;
    }

    .cta-main-btn{
        min-width:230px;
        height:62px;
        font-size:20px;
    }

    .cta-phone a{
        font-size:28px;
        height:65px;
    }

    /* Footer */

    .footer-grid{
        gap:40px;
    }

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

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

    .footer-desc,
    .footer-links li,
    .footer-contact li,
    .areas-text{
        font-size:17px;
    }

    /* Map */

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

    .map-card{
        padding:22px;
    }

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

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

}
/* ==========================================
   LARGE TABLETS
   992px
========================================== */

@media (max-width:992px){

    section{
        padding:90px 0;
    }

    /* Header */

    .header-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .navbar{

        position:fixed;

        top:74px;
        right:-100%;

        width:300px;
        height:100vh;

        background:#fff;

        transition:.4s;

        box-shadow:0 15px 40px rgba(0,0,0,.12);

    }

    .navbar.active{
        right:0;
    }

    .nav-links{

        flex-direction:column;

        padding:40px;

        gap:25px;

    }

    /* Hero */

    .hero{

        padding:140px 40px 80px;

        min-height:auto;

        background-position:70% center;

    }

    .hero-left{

        max-width:70%;

    }

    .hero h1{
        font-size:50px;
    }

    .hero p{
        font-size:17px;
            max-width:100%;

    }

    .hero-features{

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

        gap:25px;

    }

    .feature:not(:last-child)::after{
        display:none;
    }

    /* Services */

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

    /* Why */

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

    /* Portfolio */

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

    /* Map */

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

    /* Footer */

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

}

/* ==========================================
   TABLETS & MOBILE
   768px
========================================== */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    .container{
        width:100%;
        padding:0 18px;
    }

    section{
        padding:80px 0;
    }

    /* Hero */

    .hero{

        padding:130px 20px 70px;

        background-position:75% center;

    }

    .hero-overlay{

        background:linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(255,255,255,.88)
        );

    }

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

    .hero-left{

        max-width:100%;

        text-align:center;

    }

    .hero h1{
        font-size:42px;
    }

    .hero p{
        font-size:16px;
    }

    .hero-features{

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

        gap:18px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{
        width:100%;
    }

    /* Titles */

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

    .section-title p{
        font-size:18px;
    }

    /* Services */

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

    /* Why */

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

    .cta-btn{

        width:100%;

        min-width:100%;

    }

    /* Gallery */

    .gallery-item{
        height:420px;
    }

    .gallery-content h3{
        font-size:34px;
    }

    .gallery-content span{
        font-size:17px;
    }

    /* CTA */

    .cta-phone a,
    .cta-main-btn{

        width:100%;

        min-width:100%;

    }

    .cta-features{

        flex-direction:column;

        gap:15px;

    }

    /* Footer */

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

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

/* ==========================================
   SMALL MOBILE
   576px
========================================== */

@media (max-width:576px){

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

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

    .logo-text p{
        font-size:12px;
    }

    .hero{

        padding:120px 15px 60px;

    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-badge{
        font-size:12px;
        padding:0 18px;
    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .feature i{
        width:48px;
        height:48px;
        font-size:18px;
    }

    .section-title h2{
        font-size:30px;
    }

    .section-title p{
        font-size:16px;
    }

    .service-card{
        padding:25px;
    }

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

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

    .gallery-item{
        height:340px;
    }

    .gallery-content h3{
        font-size:28px;
    }

    .gallery-btn{

        width:50px;
        height:50px;

        font-size:18px;

    }

}

/* ==========================================
   EXTRA SMALL
   400px
========================================== */

@media (max-width:400px){

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:14px;
    }

    .btn{

        height:50px;

        font-size:15px;

        min-width:100%;

    }

    .section-title h2{
        font-size:26px;
    }

    .section-title p{
        font-size:15px;
    }

    .service-card{

        padding:20px;

    }

    .service-icon{

        width:70px;
        height:70px;

    }

    .service-icon i{

        font-size:30px;

    }

    .service-card h3{

        font-size:24px;

    }

    .feature-content h3{

        font-size:22px;

    }

    .feature-content p{

        font-size:15px;

    }

    .gallery-item{

        height:280px;

    }

    .gallery-content{

        text-align:center;

    }

    .gallery-content h3{

        font-size:22px;

    }

    .gallery-content span{

        font-size:14px;

    }

    .float-btn{

        width:50px;
        height:50px;

        font-size:22px;

    }

}

/*=========================================
PAGE HERO RESPONSIVE
=========================================*/

@media (max-width:991px){

    .page-hero{

        height:auto;

        min-height:420px;

        padding:120px 40px 80px;

        background-size:55%;

        background-position:right bottom;

    }

    .page-hero-content{

        width:65%;

    }

    .page-hero h1{

        font-size:46px;

    }

    .page-hero p{

        font-size:18px;

        line-height:1.8;

    }

}

@media (max-width:768px){

    .page-hero{

        min-height:auto;

        padding:110px 20px 60px;

        justify-content:center;

        background-size:280px;

        background-position:center bottom;

    }

    .page-hero::before{

        background:none;

    }

    .page-hero .container{

        justify-content:center;

    }

    .page-hero-content{

        width:100%;

        text-align:center;

        padding-bottom:180px;

    }

    .page-breadcrumb{

        font-size:14px;

        margin-bottom:15px;

    }

    .page-hero h1{

        font-size:36px;

        line-height:1.3;

        margin-bottom:15px;

    }

    .page-hero p{

        font-size:17px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .page-hero{

        padding:100px 15px 40px;

        background-size:220px;

    }

    .page-hero-content{

        padding-bottom:150px;

    }

    .page-hero h1{

        font-size:30px;

    }

    .page-hero p{

        font-size:15px;

        line-height:1.8;

    }

    .page-breadcrumb{

        font-size:13px;

    }

}