/* ==========================================================
   DANISH FIXPRO SERVICES
   RESPONSIVE STYLESHEET
   Tablet + Mobile
   Load AFTER style.css
   ========================================================== */

@media (max-width: 1200px){
    .container{width:min(92%,1120px);}
    .header .container{gap:16px;}
    .nav-links{gap:16px;}
    .nav-links li a{font-size:13px;}
    .header-btn{padding-inline:14px;font-size:12px;}

    .hero{padding-inline:28px;}
    .hero-left{width:min(60%,620px);}
    .hero h1{font-size:clamp(38px,4vw,52px);}
    .hero p{max-width:560px;font-size:16px;}
    .hero-features{grid-template-columns:repeat(4,minmax(0,1fr));}

    .services-section,
    .portfolio-section,
    .map-section,
    .gallery-section,
    .video-gallery-section,
    .faq-section,
    .why-us-section{padding-block:84px;}

    .features-grid{gap:16px;}
    .feature-card{padding:20px;}
    .service-links-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .contact-layout{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);}
    .footer-grid{gap:34px;}
}

@media (max-width: 1024px){
    :root{--header-height:72px;}
    html{scroll-padding-top:82px;}
    section[id]{scroll-margin-top:82px;}

    .header{padding:7px 0;}
    .header.scrolled{padding:5px 0;}
    .header .container{position:relative;}
    .logo{position:relative;z-index:2101;}
    .logo img{width:auto;max-width:190px;height:46px;object-fit:contain;}
    .header-btn{display:none;}
     /* Header must stay above page overlay */
    .header {
        z-index: 5000;
        background: #ffffff;
    }

    .header .container {
        position: relative;
        z-index: 5002;
    }

    .menu-toggle{
        position:relative;
        z-index:2101;
        display:flex;
        flex:0 0 44px;
    }

    .navbar{
        position:fixed;
        z-index:2050;
        top:0;
        right:-100%;
        width:min(390px,88vw);
        height:100vh;
        height:100dvh;
        margin:0;
        padding:94px 22px 34px;
        overflow-y:auto;
        border-left:1px solid var(--border);
        background:rgba(255,255,255,.985);
        box-shadow:-18px 0 55px rgba(0,0,0,.12);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        transition:right .35s cubic-bezier(.2,.7,.2,1);
    }

    .navbar.active{right:0;}

    body.menu-open::before{
        content:"";
        position:fixed;
        z-index:2001;
        inset:0;
        background:rgba(0, 0, 0, 0.247);
        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }

    .nav-links{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

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

    .nav-links li a{
        width:100%;
        justify-content:space-between;
        padding:13px 14px;
        border-radius:12px;
        color:var(--ink);
        font-size:14px;
    }

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

    .nav-links>li>a:hover,
    .nav-links>li>a.active{background:var(--surface-tint);}

    .nav-dropdown{width:100%;}

    .dropdown-menu{
        position:static;
        width:100%;
        max-height:0;
        margin:0;
        padding:0 7px;
        overflow:hidden;
        border:0;
        border-radius:12px;
        background:var(--surface-soft);
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        pointer-events:none;
        transition:max-height .35s ease,margin .35s ease,padding .35s ease;
    }

    .nav-dropdown:hover>.dropdown-menu,
    .nav-dropdown:focus-within>.dropdown-menu{
        max-height:0;
        margin:0;
        padding-block:0;
        pointer-events:none;
    }

    .nav-dropdown.dropdown-open>.dropdown-menu{
        max-height:620px;
        margin-top:5px;
        padding-block:7px;
        pointer-events:auto;
    }

    .dropdown-menu li a{padding:10px 12px;font-size:13px;}

    .hero{
        min-height:780px;
        align-items:center;
        padding:110px 24px 62px;
    }


    .hero-overlay{
        background:linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.096) 0%,
            rgba(255, 255, 255, 0.671) 42%,
            rgba(255, 255, 255, 0.527) 67%,
            rgba(255, 255, 255, 0.075) 100%
        );
    }

.hero-slide{
        background-position:right top;

}

    .hero-left{width:min(68%,620px);}
    .hero h1{font-size:clamp(37px,5vw,50px);}
    .hero p{max-width:550px;font-size:16px;}

    .hero-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:500px;
    }

    .feature{min-height:68px;}

    .page-hero{
        min-height:500px;
        padding:120px 0 68px;
    }

    .page-hero-content{max-width:760px;}
    .page-hero h1{font-size:clamp(36px,5vw,50px);}
    .page-hero p{font-size:16px;}

    .section-title{
        max-width:760px;
        margin-bottom:46px;
    }

    .section-title h2{font-size:clamp(30px,4vw,42px);}
    .section-title p{font-size:16px;}

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

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

    .about-content-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .about-image,
    .about-image img{min-height:430px;}

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

    .portfolio-card,
    .portfolio-card img{min-height:320px;}

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

    .contact-layout{grid-template-columns:1fr;}
    .contact-side-card{position:relative;top:auto;}

    .gallery-section{padding-block:84px;}

    .gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .gallery-lightbox{padding:44px 70px 65px;}

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

    .gallery-lightbox-prev{left:14px;}
    .gallery-lightbox-next{right:14px;}

    .video-gallery-section{padding-block:84px;}
    .video-gallery-grid{gap:18px;}

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

    .video-lightbox{padding:38px;}

    .faq-section{padding-block:84px;}

    .faq-container,
    .faq-list{max-width:850px;}

    .faq-question{
        padding:21px 24px;
        font-size:18px;
    }

    .faq-answer p{
        padding:0 24px 22px;
        font-size:16px;
    }

    .footer{padding-top:60px;}

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

    .footer-about{grid-column:1/-1;}
}

@media (max-width: 900px){
    .container{width:min(91%,760px);}
    .hero{min-height:760px;}
    .hero-left{width:min(76%,610px);}
    .page-hero-content{width:91%;}
    .portfolio-grid{gap:18px;}

    .video-gallery-grid{
        grid-template-columns:1fr;
        max-width:720px;
    }

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

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

@media (max-width: 768px){
    :root{
        --radius-lg:22px;
        --radius-xl:26px;
    }

    html{scroll-padding-top:76px;}
    body{font-size:15px;}
    .container{width:90%;}

    .header{padding:6px 0;}
    .logo img{width:auto;max-width:165px;height:42px;}

    .menu-toggle{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:20px;
    }

    .navbar{
        width:min(360px,91vw);
        padding:82px 18px 30px;
    }

    .hero{
        min-height:100svh;
        padding:104px 0 54px;
        text-align:center;
    }


    .hero::before{
        width:400px;
        height:400px;
        left:-230px;
        top:-170px;
    }

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

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

    .hero-badge{
        margin-inline:auto;
        font-size:11px;
    }

    .hero h1{
        margin-bottom:15px;
        font-size:clamp(31px,8.5vw,43px);
        line-height:1.18;
        letter-spacing:-.25px;
    }

    .hero h1 span{margin-top:5px;}

    .hero p{
        max-width:540px;
        margin:0 auto 20px;
        font-size:15px;
        line-height:1.8;
    }

    .hero-features{
        width:100%;
        max-width:480px;
        margin:0 auto 22px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .feature{
        min-height:64px;
        padding:8px;
    }

    .feature i{
        margin-bottom:5px;
        font-size:17px;
    }

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

    .hero-buttons{
        justify-content:center;
        gap:9px;
    }

    .btn{
        min-width:150px;
        height:43px;
        padding-inline:17px;
        font-size:13px;
    }

    .page-hero{
        min-height:auto;
        padding:104px 0 60px;
        text-align:center;
    }

    .page-hero .hero-overlay{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.48),
            rgba(0,0,0,.70)
        );
    }

    .page-hero-content{
        width:90%;
        max-width:620px;
        margin-inline:auto;
    }

    .breadcrumbs{
        justify-content:center;
        margin-bottom:17px;
    }

    .page-hero .hero-badge{margin-inline:auto;}

    .page-hero h1{
        font-size:clamp(31px,8vw,42px);
        line-height:1.28;
    }

    .page-hero h1 span{font-size:.60em;}

    .page-hero p{
        margin:0 auto 24px;
        font-size:15px;
        line-height:1.85;
    }

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

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

    .section-title{
        width:100%;
        margin-bottom:38px;
    }

    .sub-title{
        min-height:32px;
        padding:5px 14px;
        margin-bottom:14px;
        font-size:11px;
    }

    .section-title h2{
        margin-bottom:20px;
        font-size:clamp(27px,7vw,36px);
        line-height:1.38;
    }

    .section-title h2::after{
        bottom:-10px;
        width:50px;
    }

    .section-title p{
        margin-top:24px;
        font-size:14px;
        line-height:1.85;
    }

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

    .service-card{
        padding:22px;
        border-radius:20px;
    }

    .service-icon{
        width:58px;
        height:58px;
        margin-bottom:17px;
        border-radius:16px;
    }

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

    .service-card h3{
        margin-bottom:9px;
        font-size:20px;
    }

    .service-card p{
        margin-bottom:18px;
        font-size:14px;
        line-height:1.8;
    }

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

    .feature-card{
        gap:13px;
        padding:18px;
        border-radius:17px;
    }

    .feature-icon{
        flex-basis:48px;
        width:48px;
        height:48px;
        border-radius:14px;
    }

    .feature-icon i{font-size:19px;}
    .feature-content h3{font-size:17px;}
    .feature-content p{font-size:13px;}
    .why-cta{margin-top:32px;}

    .cta-btn{
        min-width:190px;
        min-height:45px;
        font-size:13px;
    }

    .about-content-grid{gap:28px;}

    .about-image,
    .about-image img{min-height:330px;}

    .about-image{border-radius:22px;}
    .about-text{text-align:center;}

    .about-text h2{
        margin-bottom:14px;
        font-size:clamp(27px,7vw,35px);
    }

    .about-text>p{
        font-size:14px;
        line-height:1.85;
    }

    .about-check-list{
        grid-template-columns:1fr;
        gap:9px;
        margin:21px 0 24px;
        text-align:right;
    }

    .about-check-item{
        padding:11px 12px;
        font-size:12px;
    }

    .about-text .cta-btn{margin-inline:auto;}

    .service-links-grid{
        grid-template-columns:1fr;
        gap:11px;
    }

    .service-link-card{
        min-height:84px;
        padding:14px;
        border-radius:16px;
        font-size:13px;
    }

    .service-link-card i{
        flex-basis:42px;
        width:42px;
        height:42px;
        font-size:17px;
    }

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

    .portfolio-card,
    .portfolio-card img{min-height:290px;}

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

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

    .portfolio-tag{
        top:13px;
        right:13px;
        padding:6px 11px;
        font-size:11px;
    }

    .cta-content{width:92%;}

    .cta-icon{
        width:58px;
        height:58px;
        margin-bottom:17px;
        border-radius:17px;
        font-size:23px;
    }

    .cta-section h2{font-size:clamp(28px,7.5vw,38px);}

    .cta-section p{
        margin-bottom:20px;
        font-size:14px;
        line-height:1.85;
    }

    .cta-phone a{
        min-height:47px;
        font-size:17px;
    }

    .cta-buttons{gap:9px;}

    .cta-main-btn{
        min-width:165px;
        min-height:45px;
        padding-inline:17px;
        font-size:13px;
    }

    .cta-features{gap:10px 16px;}
    .cta-feature{font-size:12px;}

    .map-wrapper{
        margin-top:30px;
        border-width:4px;
        border-radius:20px;
    }

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

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

    .map-card{padding:16px;}

    .contact-form,
    .contact-side-card{
        padding:22px;
        border-radius:20px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .form-group-full{grid-column:auto;}

    .form-group input,
    .form-group select{min-height:47px;}

    .form-group textarea{min-height:145px;}
    .form-submit-btn{width:100%;}
    .contact-side-card{text-align:center;}
    .contact-side-icon{margin-inline:auto;}
    .contact-side-list{text-align:right;}

    .gallery-heading{margin-bottom:30px;}

    .gallery-filters{
        gap:7px;
        margin-bottom:26px;
    }

    .gallery-filter{
        min-height:38px;
        padding:7px 14px;
        font-size:12px;
    }

    .gallery-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .gallery-image-button{border-radius:18px !important;}
    .gallery-more-wrapper{margin-top:30px;}

    .gallery-more-button{
        min-width:210px;
        min-height:49px;
        padding-inline:20px;
        font-size:14px;
    }

    .gallery-lightbox{
        align-items:center;
        padding:58px 12px 80px;
    }

    .gallery-lightbox-content{
        width:100%;
        max-height:calc(100dvh - 100px);
    }

    .gallery-lightbox-image-wrapper{
        max-height:calc(100dvh - 240px);
        border-radius:14px;
    }

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

    .gallery-lightbox-info{
        margin-top:12px;
        padding-inline:8px;
    }

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

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

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

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

    .gallery-lightbox-prev{
        top:auto;
        left:calc(50% - 52px);
        bottom:18px;
        transform:none;
    }

    .gallery-lightbox-next{
        top:auto;
        right:calc(50% - 52px);
        bottom:18px;
        transform:none;
    }

    .gallery-lightbox-prev:hover,
    .gallery-lightbox-next:hover{transform:scale(1.05);}

    .video-gallery-heading{margin-bottom:30px;}

    .video-gallery-filters{
        gap:7px;
        margin-bottom:26px;
    }

    .video-filter{
        min-height:38px;
        padding:7px 14px;
        font-size:12px;
    }

    .video-gallery-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .video-card-button{
        aspect-ratio:16/10;
        border-radius:18px;
    }

    .video-play-button{
        width:56px;
        height:56px;
        font-size:19px;
    }

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

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

    .video-gallery-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin-top:23px;
    }

    .video-gallery-feature{
        min-height:56px;
        padding:10px;
        font-size:12px;
    }

    .video-lightbox{padding:18px;}

    .video-lightbox-panel{
        padding:8px;
        border-radius:16px;
    }

    .video-lightbox-player{
        max-height:70dvh;
        border-radius:11px;
    }

    .video-lightbox-title{
        margin:10px 7px 2px;
        font-size:16px;
    }

    .video-lightbox-close{
        top:-14px;
        right:-8px;
        width:40px;
        height:40px;
    }

    .faq-container,
    .faq-list{gap:11px;}

    .faq-item{border-radius:16px;}

    .faq-question{
        gap:12px;
        padding:17px 18px;
        font-size:15px;
        line-height:1.7;
    }

    .faq-question i{
        flex-basis:34px;
        width:34px;
        height:34px;
        font-size:13px;
    }

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

    .faq-cta{
        flex-direction:column;
        gap:12px;
        margin-top:32px;
    }

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

    .faq-cta-btn{
        min-width:200px;
        height:48px;
        font-size:14px;
    }

    .footer{padding-top:50px;}

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

    .footer-about{grid-column:auto;}
    .footer-logo{justify-content:flex-start;}

    .footer-logo>span,
    .footer-logo h3{font-size:18px;}

    .footer-about p,
    .footer-desc{font-size:13px;}

    .footer-column>h3,
    .footer-title{
        margin-bottom:16px;
        font-size:17px;
    }

    .footer-bottom{
        min-height:auto;
        flex-direction:column;
        justify-content:center;
        padding-block:18px;
        text-align:center;
    }

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

    .floating-buttons{
        right:12px;
        bottom:16px;
        gap:8px;
    }

    .float-btn{
        width:45px;
        height:45px;
        font-size:18px;
    }

    .preloader-content{width:90%;}

    .preloader-logo{
        width:min(420px,82vw);
        margin-bottom:34px;
    }

    .preloader-progress{width:185px;}
}

@media (max-width: 576px){
    .container{width:91%;}

    .hero{padding:96px 0 46px;}
    .hero h1{font-size:clamp(29px,8.8vw,38px);}
    .hero p{font-size:14px;}
    .hero-features{max-width:420px;}
    .hero-buttons{width:100%;}

    .btn{
        flex:1 1 155px;
        min-width:0;
    }

    .page-hero{padding:96px 0 52px;}
    .page-hero h1{font-size:clamp(28px,8.7vw,37px);}

    .portfolio-card,
    .portfolio-card img{min-height:250px;}

    .cta-buttons{
        width:100%;
        flex-direction:column;
    }

    .cta-main-btn{width:min(100%,330px);}
    .map-wrapper iframe{height:300px;}

    .gallery-open-icon{
        width:44px;
        height:44px;
        font-size:16px;
    }

    .gallery-open-text{font-size:12px;}
    .video-gallery-features{grid-template-columns:1fr;}
    .video-gallery-feature{justify-content:flex-start;}

    .contact-form,
    .contact-side-card{padding:19px 16px;}
}

@media (max-width: 480px){
    body{font-size:14px;}

    .logo img{
        max-width:145px;
        height:38px;
    }

    .menu-toggle{
        width:39px;
        height:39px;
        font-size:18px;
    }

    .navbar{
        width:94vw;
        padding:76px 15px 26px;
    }

    .hero{
        min-height:100svh;
        padding:88px 0 42px;
    }

    .hero h1{font-size:clamp(27px,9vw,35px);}

    .hero p{
        max-width:390px;
        font-size:13px;
        line-height:1.75;
    }

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

    .feature{
        min-height:60px;
        border-radius:12px;
    }

    .feature span{font-size:11px;}
    .hero-buttons{flex-direction:column;}

    .btn{
        width:min(100%,300px);
        flex:none;
        min-height:43px;
    }

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

    .section-title{margin-bottom:32px;}
    .section-title h2{font-size:clamp(25px,7.4vw,32px);}

    .page-hero{padding:90px 0 48px;}

    .breadcrumbs{
        gap:6px;
        font-size:10px;
    }

    .page-hero h1{font-size:clamp(26px,8.8vw,34px);}
    .page-hero p{font-size:13px;}

    .service-card{padding:19px;}
    .service-card h3{font-size:18px;}

    .about-image,
    .about-image img{min-height:270px;}

    .about-text h2{font-size:clamp(24px,7.5vw,31px);}

    .portfolio-card,
    .portfolio-card img{min-height:230px;}

    .portfolio-content h3{font-size:20px;}
    .map-wrapper iframe{height:270px;}

    .gallery-more-button{
        width:100%;
        min-width:0;
    }

    .gallery-lightbox{padding:54px 8px 74px;}

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

    .gallery-lightbox-close,
    .gallery-lightbox-nav{
        width:38px;
        height:38px;
        font-size:13px;
    }

    .video-card-button{aspect-ratio:4/3;}

    .video-play-button{
        width:50px;
        height:50px;
        font-size:17px;
    }

    .video-lightbox{padding:12px;}

    .video-lightbox-close{
        top:-11px;
        right:-3px;
        width:36px;
        height:36px;
    }

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

    .faq-question i{
        flex-basis:31px;
        width:31px;
        height:31px;
    }

    .faq-answer p{
        padding:0 15px 16px;
        font-size:13px;
    }

    .floating-buttons{
        right:9px;
        bottom:12px;
    }

    .float-btn{
        width:42px;
        height:42px;
        font-size:17px;
    }

    .preloader-logo{
        width:84vw;
        margin-bottom:30px;
    }

    .preloader-progress{width:160px;}

    .preloader-text{
        font-size:10px;
        letter-spacing:4px;
    }
}

@media (max-width: 360px){
    .container{width:92%;}
    .hero h1{font-size:26px;}
    .hero-features{grid-template-columns:1fr 1fr;}
    .feature{min-height:56px;}
    .feature i{font-size:15px;}
    .feature span{font-size:10.5px;}
    .page-hero h1{font-size:25px;}

    .service-link-card{
        gap:10px;
        padding:12px;
    }

    .service-link-card i{
        flex-basis:38px;
        width:38px;
        height:38px;
    }

    .faq-question{font-size:13px;}
}

@media (max-width: 900px) and (max-height: 600px){
    .hero{
        min-height:650px;
        padding-top:90px;
    }

    .hero h1{font-size:34px;}
    .hero-features{margin-bottom:16px;}
    .navbar{padding-top:72px;}
    .page-hero{padding-top:92px;}
}

@media (hover: none){
    .service-card:hover,
    .feature-card:hover,
    .portfolio-card:hover,
    .service-link-card:hover,
    .map-card:hover,
    .video-card-button:hover,
    .gallery-image-button:hover{
        transform:none;
    }

    .gallery-image-overlay{
        opacity:1;
        background:linear-gradient(to top,rgba(0,0,0,.52),transparent 55%);
    }

    .gallery-open-icon{transform:scale(.9);}
    .gallery-open-text{transform:none;}
}

@supports (padding-bottom: env(safe-area-inset-bottom)){
    .navbar{
        padding-bottom:calc(30px + env(safe-area-inset-bottom));
    }

    .floating-buttons{
        bottom:calc(14px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce){
    .navbar,
    .dropdown-menu,
    .hero-slide{
        transition:none !important;
    }
}


/* ==========================================================
   MOBILE HERO - VERTICAL / PORTRAIT IMAGES
   ========================================================== */

@media (max-width: 768px) {

    .hero {
        width: 100%;
        min-height: 100svh;
        height: 100svh;

        padding: 90px 0 40px;

        overflow: hidden;
    }

    .hero-slider {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    .hero-slide {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;

        opacity: 0;

        transform: scale(1.04);

        transition:
            opacity 1s ease,
            transform 6s ease;
    }

    .hero-slide.active {
        opacity: 1;
        transform: scale(1);
    }


    /* =========================================
       PORTRAIT MOBILE HERO IMAGES
       ========================================= */

    .hero-slide:nth-child(1) {
        background-image:
            url("../images/hero-mobile\ \(1\).png") !important;
    }

    .hero-slide:nth-child(2) {
        background-image:
            url("../images/hero-mobile\ \(2\).png") !important;
    }

    .hero-slide:nth-child(3) {
        background-image:
            url("../images/hero-mobile\ \(3\).png") !important;
    }

    .hero-slide:nth-child(4) {
        background-image:
            url("../images/hero-mobile\ \(4\).png") !important;
    }

    .hero-slide:nth-child(5) {
        background-image:
            url("../images/hero-mobile\ \(5\).png") !important;
    }

    .hero-slide:nth-child(6) {
        background-image:
            url("../images/hero-mobile\ \(6\).png") !important;
    }

    .hero-slide:nth-child(7) {
        background-image:
            url("../images/hero-mobile\ \(7\).png") !important;
    }

    .hero-slide:nth-child(8) {
        background-image:
            url("../images/hero-mobile\ \(8\).png") !important;
    }


    /* =========================================
       MOBILE IMAGE OVERLAY
       Keeps text readable
       ========================================= */

    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.05) 0%,
                rgba(255, 255, 255, 0.20) 22%,
                rgba(255, 255, 255, 0.72) 52%,
                rgba(255, 255, 255, 0.94) 100%
            );
    }


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

    .hero-content {
        position: relative;
        z-index: 3;

        width: 90%;
        height: 100%;

        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .hero-left {
        width: 100%;
        max-width: 560px;

        margin: 0 auto;

        text-align: center;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 480px) {

    .hero {
        min-height: 100svh;
        height: 100svh;

        padding-top: 80px;
        padding-bottom: 28px;
    }

    .hero-slide {
        background-position: center top;
    }

    .hero-content {
        width: 92%;
    }
}