/* ==========================================================
   RESPONSIVE.CSS
   Built to work with the current main.css without changing
   the existing HTML template or class structure.
   ========================================================== */


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1400px){

    .container{
        width:min(88%,1320px);
    }

    .hero{
        padding-inline:clamp(90px,8vw,150px);
    }

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

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

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

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

}


/* ==========================================================
   LAPTOP / SMALL DESKTOP
   ========================================================== */

@media (max-width: 1200px){

    .container{
        width:92%;
    }

    /* Header */

    .nav-links{
        gap:14px;
    }

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

    .header-btn{
        padding:10px 15px;
        font-size:13px;
    }

    /* Hero */

    .hero{
        padding:110px 55px 80px;
    }

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

    .hero h1{
        font-size:clamp(50px,5.4vw,64px);
    }

    .hero p{
        max-width:620px;
        font-size:18px;
    }

    .hero-features{
        gap:8px;
    }

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

    /* Section spacing */

    .services-section,
    .why-us-section,
    .portfolio-section,
    .cta-section,
    .map-section,
    .faq-section{
        padding-block:105px;
    }

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

    .section-title h2{
        font-size:clamp(38px,4.7vw,56px);
    }

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

    /* Services */

    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px;
    }

    .service-card{
        padding:34px;
    }

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

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

    /* Why us */

    .features-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .feature-card{
        padding:26px;
    }

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

    .cta-btn{
        min-width:360px;
        font-size:22px;
    }

    /* Portfolio */

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

    .portfolio-content{
        right:22px;
        left:22px;
        bottom:22px;
    }


    /* CTA */

    .cta-phone a{
        min-width:260px;
    }

    .cta-main-btn{
        min-width:250px;
    }

    /* Map */

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

    .map-card{
        padding:25px;
    }

    .map-card i{
        width:66px;
        height:66px;
        min-width:66px;
        font-size:27px;
    }

    /* Footer */

    .footer-grid{
        gap:45px;
    }

}


/* ==========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   ========================================================== */

@media (max-width: 992px){

    html{
        scroll-padding-top:80px;
    }

    .container{
        width:92%;
    }

    /* Header / Mobile navigation */

    .header{
        min-height:74px;
    }

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

    .logo-text .logo-title{
        font-size:16px;
    }

    .header-btn{
        display:none;
    }

    .menu-toggle{
        display:flex;
        flex:0 0 46px;
    }

    .navbar{
        position:fixed;
        top:74px;
        right:-100%;
        width:min(340px,88vw);
        height:calc(100dvh - 74px);
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        box-shadow:-18px 22px 55px rgba(46,16,101,.14);
        border-left:1px solid rgba(124,58,237,.08);
        overflow-y:auto;
        visibility:hidden;
        opacity:0;
        transition:
            right .35s ease,
            opacity .25s ease,
            visibility .35s ease;
        z-index:1100;
    }

    .navbar.active{
        right:0;
        visibility:visible;
        opacity:1;
    }

    .nav-links{
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:28px 24px 45px;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        display:block;
        width:100%;
        padding:13px 15px;
        border-radius:12px;
        font-size:16px;
    }

    .nav-links li a:hover,
    .nav-links li a.active{
        background:var(--light-purple);
    }

    .nav-links li a::before{
        display:none;
    }

    body.menu-open{
        overflow:hidden;
    }

    /* Hero */

    .hero{
        min-height:auto;
        padding:130px 30px 90px;
        background-position:center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.96) 0%,
                rgba(255,255,255,.90) 46%,
                rgba(255,255,255,.72) 70%,
                rgba(255,255,255,.36) 100%
            );
    }

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

    .hero-left{
        max-width:720px;
        margin:0 auto;
        text-align:center;
    }

    .hero h1{
        font-size:clamp(46px,7vw,60px);
    }

    .hero p{
        margin-inline:auto;
    }

    .hero-features{
        grid-template-columns:repeat(4,1fr);
        max-width:720px;
        margin-inline:auto;
        margin-bottom:34px;
    }

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

    /* Titles */

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

    .section-title h2{
        font-size:clamp(36px,5.7vw,50px);
    }

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

    /* Services */

    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    /* Why us */

    .features-grid{
        margin-top:55px;
    }

    /* Portfolio */

    .portfolio-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

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

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

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

    .portfolio-rating{
        flex-wrap:wrap;
    }


    /* CTA */

    .cta-features{
        gap:22px;
    }

    /* Map */

    .map-info{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .map-info .map-card:last-child{
        grid-column:1 / -1;
    }

    /* Footer */

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

    .footer-grid .footer-column:last-child{
        grid-column:1 / -1;
    }

}


/* ==========================================================
   TABLET PORTRAIT / MOBILE
   ========================================================== */

@media (max-width: 768px){

    .container{
        width:90%;
    }

    /* General spacing */

    .services-section,
    .why-us-section,
    .portfolio-section,
    .cta-section,
    .map-section,
    .faq-section{
        padding-block:78px;
    }

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

    .sub-title{
        padding:9px 18px;
        font-size:13px;
        margin-bottom:18px;
    }

    .section-title h2{
        font-size:clamp(30px,8vw,40px);
        line-height:1.35;
        margin-bottom:20px;
    }

    .section-title h2::after{
        width:72px;
        height:4px;
        bottom:-14px;
    }

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

    /* Header */

    .header{
        padding:8px 0;
    }

    .header.scrolled{
        padding:6px 0;
    }

    .logo{
        gap:9px;
    }

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

    .logo-text .logo-title{
        font-size:15px;
    }

    .navbar{
        top:66px;
        height:calc(100dvh - 66px);
    }

    /* Hero */

    .hero{
        padding:110px 18px 72px;
        background-position:64% center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(255,255,255,.88),
                rgba(255,255,255,.94)
            );
    }

    .hero::before{
        width:500px;
        height:500px;
        left:-300px;
        top:-160px;
    }

    .hero::after{
        width:460px;
        height:460px;
        left:-280px;
        bottom:-220px;
    }

    .hero-left{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .hero-badge{
        max-width:100%;
        padding:7px 16px;
        font-size:12px;
        line-height:1.6;
    }

    .hero h1{
        font-size:clamp(38px,11vw,50px);
        line-height:1.12;
        margin-bottom:18px;
    }

    .hero p{
        font-size:16px;
        line-height:1.85;
        margin-bottom:30px;
    }

    .hero-features{
        grid-template-columns:repeat(2,1fr);
        gap:16px 10px;
        margin-bottom:30px;
    }

    .feature{
        padding:10px 6px;
    }

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

    .feature i{
        font-size:22px;
        margin-bottom:7px;
    }

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

    .hero-buttons{
        gap:12px;
    }

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

    /* Services */

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

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

    .service-icon{
        width:70px;
        height:70px;
        border-radius:20px;
        margin-bottom:26px;
    }

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

    .service-card h3{
        font-size:26px;
        margin-bottom:14px;
    }

    .service-card p{
        font-size:16px;
        line-height:1.9;
        margin-bottom:26px;
    }

    .service-footer{
        gap:12px;
        padding-top:18px;
    }

    .service-footer span{
        font-size:14px;
    }

    /* Why us */

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

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

    .feature-icon{
        min-width:58px;
        width:58px;
        height:58px;
        border-radius:16px;
    }

    .feature-icon i{
        font-size:25px;
    }

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

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

    .why-cta{
        margin-top:42px;
    }

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

    /* Portfolio */

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

    .portfolio-card{
        aspect-ratio:4 / 3;
        min-height:310px;
        border-radius:22px;
    }

    .portfolio-tag{
        top:14px;
        right:14px;
        padding:8px 14px;
        font-size:13px;
    }

    .portfolio-content{
        right:18px;
        left:18px;
        bottom:18px;
    }

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

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

    .portfolio-rating{
        margin-top:14px;
    }

    .portfolio-rating small{
        font-size:13px;
    }

    .stars i{
        font-size:13px;
    }

    .portfolio-bottom-text{
        margin-top:32px;
        font-size:16px;
        line-height:1.8;
    }

    /* CTA */

    .cta-icon{
        width:72px;
        height:72px;
        margin-bottom:25px;
    }

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

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

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

    .cta-phone{
        margin-bottom:28px;
    }

    .cta-phone a{
        width:100%;
        min-width:0;
        min-height:58px;
        font-size:27px;
    }

    .cta-phone i{
        font-size:23px;
    }

    .cta-buttons{
        gap:12px;
        margin-bottom:34px;
    }

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

    .cta-features{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .cta-feature{
        justify-content:center;
        text-align:center;
        font-size:14px;
    }

    /* Map */

    .map-wrapper{
        margin-top:38px;
        border-width:5px;
        border-radius:22px;
    }

    .map-wrapper iframe{
        height:380px;
        min-height:380px;
    }

    .map-info{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:32px;
    }

    .map-info .map-card:last-child{
        grid-column:auto;
    }

    .map-card{
        min-height:0;
        padding:22px;
        border-radius:18px;
    }

    .map-card i{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:24px;
        border-radius:16px;
    }

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

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

    /* FAQ */

    .faq-container{
        gap:13px;
    }

    .faq-question{
        min-height:0;
        padding:19px;
        gap:14px;
        font-size:16px;
        line-height:1.7;
    }

    .faq-question i{
        min-width:36px;
        width:36px;
        height:36px;
        font-size:13px;
    }

    .faq-answer p{
        padding:0 19px 20px;
        font-size:15px;
        line-height:1.9;
    }

    .faq-cta{
        margin-top:34px;
        flex-direction:column;
        gap:14px;
    }

    .faq-cta p{
        font-size:15px;
    }

    .faq-cta-btn{
        width:100%;
        min-width:0;
    }

    /* Footer */

    .footer{
        padding-top:65px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:42px;
        padding-bottom:38px;
    }

    .footer-grid .footer-column:last-child{
        grid-column:auto;
    }

    .footer-logo{
        align-items:flex-start;
    }

    .footer-logo img{
        width:58px;
        height:58px;
    }

    .footer-business-name{
        font-size:25px;
    }

    .footer-logo > div > span:not(.footer-business-name){
        font-size:14px;
    }

    .footer-desc{
        font-size:16px;
        line-height:1.9;
        margin-bottom:28px;
    }

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

    .footer-title{
        font-size:27px;
        margin-bottom:25px;
    }

    .footer-links{
        gap:13px;
    }

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

    .areas-text{
        font-size:16px;
    }

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

    .footer-bottom{
        flex-direction:column;
        text-align:center;
        padding:24px 0;
    }

    .footer-bottom p,
    .footer-bottom span{
        font-size:14px;
    }

    .developer-box{
        padding:20px 0 28px;
    }

    .developer-box p{
        font-size:14px;
    }

    /* Floating action */

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

    .float-btn{
        width:52px;
        height:52px;
        font-size:24px;
    }

}


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

@media (max-width: 480px){

    .container{
        width:91%;
    }

    /* Header */

    .logo-text .logo-title{
        font-size:14px;
    }

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

    .menu-toggle{
        width:42px;
        height:42px;
        font-size:23px;
    }

    .navbar{
        top:62px;
        width:88vw;
        height:calc(100dvh - 62px);
    }

    /* Hero */

    .hero{
        padding:100px 14px 62px;
    }

    .hero-badge{
        font-size:11px;
        border-radius:18px;
    }

    .hero h1{
        font-size:clamp(34px,11vw,44px);
    }

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

    .hero-features{
        gap:12px 6px;
    }

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

    /* Titles */

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

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

    /* Services */

    .service-card{
        padding:24px 20px;
    }

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

    .service-footer{
        align-items:flex-start;
    }

    /* Why us */

    .feature-card{
        flex-direction:column;
    }

    .feature-icon{
        min-width:54px;
        width:54px;
        height:54px;
    }

    /* Portfolio */

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

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

    .portfolio-rating{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }


    /* CTA */

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

    .cta-phone a{
        font-size:24px;
    }

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

    /* Map */

    .map-wrapper iframe{
        height:330px;
        min-height:330px;
    }

    /* FAQ */

    .faq-question{
        padding:17px 16px;
        font-size:15px;
    }

    .faq-answer p{
        padding:0 16px 18px;
        font-size:14px;
    }

    /* Footer */

    .footer-logo{
        gap:11px;
    }

    .footer-business-name{
        font-size:22px;
    }

}


/* ==========================================================
   VERY SMALL DEVICES
   ========================================================== */

@media (max-width: 360px){

    .container{
        width:92%;
    }

    .logo-text .logo-title{
        font-size:13px;
    }

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

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

    .btn,
    .cta-btn,
    .cta-main-btn,
    .faq-cta-btn{
        font-size:15px;
    }

    .service-card h3,
    .portfolio-content h3{
        font-size:22px;
    }


    .cta-phone a{
        font-size:22px;
    }

}


/* ==========================================================
   TOUCH DEVICES
   Prevent hover transforms from feeling sticky on touch.
   ========================================================== */

@media (hover: none){

    .service-card:hover,
    .feature-card:hover,
    .portfolio-card:hover,
    .map-card:hover,
    .header-btn:hover,
    .btn:hover,
    .cta-btn:hover,
    .cta-main-btn:hover,
    .footer-whatsapp-btn:hover,
    .float-btn:hover{
        transform:none;
    }

    .portfolio-card:hover img{
        transform:none;
        filter:none;
    }

}


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

@media (max-width: 900px) and (orientation: landscape){

    .hero{
        min-height:auto;
        padding-top:105px;
    }

    .navbar{
        height:calc(100dvh - 66px);
    }

    .nav-links{
        padding-bottom:25px;
    }


}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce){

    .navbar{
        transition:none;
    }


}
 

/* ==========================================================
   UPGRADED GALLERY + VIDEO RESPONSIVE
========================================================== */


/* =========================
   DESKTOP / LAPTOP
========================= */

@media (max-width:1200px){

    .gallery-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .video-gallery-grid{
        gap:22px;
    }

}


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

@media (max-width:992px){

    .gallery-section,
    .video-gallery-section{
        padding-block:100px;
    }

    .gallery-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:13px;
    }

    .gallery-grid .gallery-item{
        height:auto;
        min-height:0;
        aspect-ratio:auto;
    }

    .gallery-image-button{
        border-radius:16px;
    }

    .gallery-lightbox{
        padding:
            55px
            76px
            70px;
    }

    .video-gallery-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

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

}


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

@media (max-width:768px){

    .gallery-section,
    .video-gallery-section{
        padding-block:78px;
    }


    /* Filters */

    .gallery-filters,
    .video-gallery-filters{
        gap:8px;

        margin-bottom:30px;
    }

    .gallery-filter,
    .video-filter{
        min-height:39px;

        padding:7px 15px;

        font-size:13px;
    }


    /* Gallery */

    .gallery-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .gallery-grid .gallery-item{
        height:auto;
        min-height:0;
        aspect-ratio:auto;
        border-radius:0;
    }

    .gallery-image-button{
        aspect-ratio:1 / 1;

        border-radius:14px;
    }

    .gallery-open-icon{
        width:44px;
        height:44px;

        font-size:16px;
    }

    .gallery-open-text{
        font-size:12px;
    }

    .gallery-more-wrapper{
        margin-top:32px;
    }

    .gallery-more-button{
        width:100%;

        min-width:0;
        min-height:54px;

        font-size:15px;
    }


    /* Image lightbox */

    .gallery-lightbox{
        padding:
            70px
            14px
            100px;
    }

    .gallery-lightbox-content{
        width:100%;
    }

    .gallery-lightbox-image-wrapper{
        max-height:
            calc(100dvh - 245px);

        border-radius:14px;
    }

    .gallery-lightbox-image{
        max-height:
            calc(100dvh - 245px);
    }

    .gallery-lightbox-info{
        margin-top:14px;
    }

    .gallery-lightbox-info h3{
        font-size:19px;
    }

    .gallery-lightbox-info p{
        font-size:12px;
        line-height:1.7;
    }

    .gallery-lightbox-close,
    .gallery-lightbox-nav{
        width:44px;
        height:44px;

        font-size:15px;
    }

    .gallery-lightbox-close{
        top:14px;
        right:14px;
    }

    .gallery-lightbox-prev{
        left:10px;

        top:auto;
        bottom:27px;

        transform:none;
    }

    .gallery-lightbox-prev:hover{
        transform:scale(1.06);
    }

    .gallery-lightbox-next{
        right:10px;

        top:auto;
        bottom:27px;

        transform:none;
    }

    .gallery-lightbox-next:hover{
        transform:scale(1.06);
    }


    /* Video */

    .video-gallery-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .video-card-button{
        aspect-ratio:16 / 10;

        border-radius:18px;
    }

    .video-play-button{
        width:58px;
        height:58px;

        font-size:19px;
    }

    .video-card-info{
        right:18px;
        bottom:17px;
        left:18px;
    }

    .video-card-info strong{
        font-size:19px;
    }

    .video-card-info small{
        font-size:12px;
    }

    .video-gallery-features{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;

        margin-top:24px;
    }

    .video-gallery-feature{
        min-height:68px;

        padding:12px;

        flex-direction:column;

        gap:5px;

        text-align:center;

        font-size:12px;
    }


    /* Video lightbox */

    .video-lightbox{
        padding:20px 12px;
    }

    .video-lightbox-panel{
        padding:8px;

        border-radius:16px;
    }

    .video-lightbox-player{
        border-radius:11px;
    }

    .video-lightbox-close{
        top:-15px;
        right:4px;

        width:42px;
        height:42px;
    }

    .video-lightbox-title{
        margin:
            12px 5px
            5px;

        font-size:16px;
    }

}


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

@media (max-width:480px){

    .gallery-grid{
        gap:8px;
    }

    .gallery-filter,
    .video-filter{
        flex:
            1 1
            calc(50% - 8px);

        max-width:
            calc(50% - 4px);
    }

    .gallery-filter:first-child,
    .video-filter:first-child{
        flex-basis:100%;
        max-width:100%;
    }

    .video-gallery-feature{
        font-size:11px;
    }

}