.gallery-hero{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    padding:85px 0;
    background:url("../../img/hero/gallery-hero.webp") center center/cover no-repeat;
}

.gallery-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        rgba(7,24,45,.90) 0%,
        rgba(7,24,45,.76) 18%,
        rgba(7,24,45,.52) 35%,
        rgba(7,24,45,.26) 50%,
        rgba(7,24,45,.08) 62%,
        rgba(7,24,45,0) 72%
    );
}

.gallery-hero .container{
    position:relative;
    z-index:2;
}

.gallery-hero h1 {
    color:#fff;
    font-size:clamp(42px,6vw,70px);
    line-height:1.05;
    text-shadow:0 4px 18px rgba(0,0,0,.45);
}

.gallery-hero p {
    color:rgba(255,255,255,.92);
    max-width:700px;
    font-size:18px;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.gallery-section {
    padding: 56px 0 34px;
    background: #fff;
    overflow: hidden;
}

.gallery-intro {
    max-width: 760px;
    margin: 0 auto 18px;
}

.gallery-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gallery-card {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #f5f8fb;
    box-shadow: 0 16px 42px rgba(9, 31, 57, 0.08);
}

.gallery-card img {
    width: 100%;
    max-width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gallery-card:hover img {
    transform: scale(1.04);
}

.gallery-note {
    margin-top: 45px;
    padding: 28px;
    border-radius: 18px;
    background: #f5f8fb;
    text-align: center;
    color: #617083;
}

.gallery-cta {
    padding: 30px 0 44px;
    background: #f5f8fb;
}

.gallery-cta-box {
    padding: 58px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0b2644, #123f6b);
    text-align: center;
    color: #fff;
}

.gallery-cta-box h2 {
    color: #fff;
}

.gallery-cta-box p {
    color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 991px) {.gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }.gallery-section {
        padding: 52px 0 34px;
    }}

@media (max-width: 575px) {.gallery-hero {
        min-height: 430px;
        padding: 65px 0;
    }.gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }.gallery-card img {
        height: 280px;
    }.gallery-cta-box {
        padding: 40px 20px;
    }}

.gallery-intro .sec-title{
    white-space:nowrap;
}


.gallery-hero .crumb,
.gallery-hero .crumb a{
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}




/* =========================================================
   GALLERY PAGE — APPROVED MOBILE MENU
   Matches the approved About-page menu.
   Desktop and the regular page header remain unchanged.
========================================================= */




/* =========================================================
   GALLERY PAGE — FINAL APPROVED NAVIGATION
   Desktop content remains unchanged.
========================================================= */
@media(max-width:991px){/* Approved mobile header behavior *//* Approved open mobile menu */.scroll-top{
        display:none !important;
    }}
/* ========================================================= */



/* =========================================================
   GALLERY PAGE — APPROVED MOBILE HERO, LOAD MORE, CTA & FOOTER
   Top-right header/menu remains untouched.
========================================================= */

.gallery-mobile-hero-copy,
.gallery-mobile-hero-actions{
    display:none;
}

.gallery-load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:12px;
}

.gallery-load-more-btn{
    min-width:240px;
}

/* Desktop: show first 12 projects */
@media(min-width:992px){.gallery-project:nth-child(n/**/+13){
        display:none;
    }.gallery-grid.gallery-show-all .gallery-project{
        display:block;
    }}

/* Tablet/mobile: show first 6 projects */
@media(max-width:991px){.gallery-project:nth-child(n/**/+7){
        display:none;
    }/* Approved mobile hero */.gallery-hero{
        
        padding:44px 0 30px !important;
        display:flex !important;
        
        background-position:center center !important;
    }.gallery-hero::before{
        background:linear-gradient(
            90deg,
            rgba(7,24,45,.90) 0%,
            rgba(7,24,45,.74) 44%,
            rgba(7,24,45,.34) 74%,
            rgba(7,24,45,.12) 100%
        ) !important;
    }.gallery-hero .hero-label{
        display:block !important;
        margin-bottom:12px !important;
        font-family:"Inter",sans-serif !important;
        font-size:14px !important;
        font-weight:800 !important;
        letter-spacing:.14em !important;
        text-transform:uppercase !important;
    }.gallery-hero h1{
        max-width:340px !important;
        margin:0 0 16px !important;
        font-size:42px !important;
        line-height:1.04 !important;
        text-align:left !important;
    }.gallery-desktop-hero-copy,
    .gallery-hero .crumb{
        display:none !important;
    }.gallery-mobile-hero-copy{
        display:block !important;
        max-width:330px !important;
        margin:0 0 22px !important;
        color:rgba(255,255,255,.92) !important;
        font-size:16px !important;
        line-height:1.55 !important;
        text-align:left !important;
    }.gallery-mobile-hero-actions{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        width:100% !important;
    }.gallery-mobile-hero-quote,
    .gallery-mobile-hero-call{
        width:100% !important;
        min-height:58px !important;
        margin:0 !important;
    }.gallery-mobile-hero-call{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:10px !important;
        padding:0 22px !important;
        border:1px solid rgba(255,255,255,.72) !important;
        border-radius:12px !important;
        background:rgba(8,29,52,.28) !important;
        color:#fff !important;
        font-family:"Outfit",sans-serif !important;
        font-size:17px !important;
        font-weight:700 !important;
        line-height:1.2 !important;
        text-decoration:none !important;
        text-shadow:0 2px 5px rgba(0,0,0,.4) !important;
        backdrop-filter:blur(3px) !important;
        -webkit-backdrop-filter:blur(3px) !important;
    }.gallery-mobile-hero-call:hover,
    .gallery-mobile-hero-call:focus{
        color:#fff !important;
        background:#ae2349 !important;
        border-color:#ae2349 !important;
    }/* Gallery */.gallery-section{
        padding:26px 0 14px !important;
    }.gallery-intro{
        margin-bottom:10px !important;
    }.gallery-intro .sub-title3{
        font-size:18px !important;
    }.gallery-intro .sec-title{
        white-space:normal !important;
        font-size:32px !important;
        line-height:1.15 !important;
    }.gallery-load-more-wrap{
        margin-top:10px !important;
    }.gallery-load-more-btn{
        width:100% !important;
        max-width:360px !important;
        min-height:54px !important;
    }/* Approved mobile CTA */.gallery-cta{
        padding:6px 0 20px !important;
        background:#fff !important;
    }.gallery-cta-box{
        padding:28px 24px !important;
        border:1px solid #dfe4ea !important;
        border-radius:16px !important;
        background:#f7f9fb !important;
        color:#111827 !important;
        box-shadow:none !important;
    }.gallery-cta-box .sub-title3,
    .gallery-cta-box p{
        display:none !important;
    }.gallery-cta-box h2{
        margin:0 0 20px !important;
        color:#111827 !important;
        font-size:27px !important;
        line-height:1.15 !important;
    }.gallery-cta-box .th-btn{
        width:100% !important;
        min-height:54px !important;
        margin:0 !important;
    }/* Approved short mobile footer */}

@media(max-width:575px){.gallery-card img{
        height:320px !important;
    }}
/* ========================================================= */



/* Bold gallery heading */
.gallery-main-heading{
    font-weight:800 !important;
}

/* Desktop: show all gallery projects and hide the View More button */
@media(min-width:992px){.gallery-grid .gallery-project{
        display:block !important;
    }.gallery-load-more-wrap{
        display:none !important;
    }}

/* Trust badges remain hidden on desktop */
.gallery-hero-badges{
    display:none;
}

@media(max-width:991px){/* Mobile: show only the first 3 projects until View More is selected */.gallery-grid .gallery-project:nth-child(n/**/+4){
        display:none !important;
    }.gallery-grid.gallery-show-all .gallery-project{
        display:block !important;
    }.gallery-load-more-wrap{
        display:flex !important;
    }/* Make room for the trust badges and keep hero content positioned properly *//* Approved service-page trust badge design */.gallery-hero .gallery-hero-badges{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:9px !important;
        
    }.gallery-hero .hero-badge{
        width:auto !important;
        min-height:38px !important;
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        margin:0 !important;
        padding:8px 16px !important;
        border:1px solid rgba(255,255,255,.38) !important;
        border-radius:22px !important;
        background:rgba(255,255,255,.16) !important;
        color:#fff !important;
        font-family:"Outfit",sans-serif !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1.2 !important;
        backdrop-filter:blur(5px) !important;
        -webkit-backdrop-filter:blur(5px) !important;
    }.gallery-hero .hero-emoji{
        font-size:16px !important;
        line-height:1 !important;
    }}

@media(max-width:575px){.gallery-hero .hero-badge{
        font-size:13px !important;
    }}



@media (max-width:991px){/* Match service page hero height */.gallery-hero{
        min-height:700px !important;
        padding-top:44px !important;
        padding-bottom:34px !important;
        align-items:flex-end !important;
    }.gallery-hero .gallery-hero-badges{
        margin-top:18px !important;
    }}

@media (max-width:575px){.gallery-hero{
        min-height:680px !important;
        padding-bottom:30px !important;
    }.gallery-hero .gallery-hero-badges{
        margin-top:10px !important;
    }}


/* 2026-07-29 MOBILE GALLERY HERO FIX */
@media (max-width: 991px) {
  body[data-current-page="gallery.html"] .gallery-hero {
    min-height: 680px !important;
    height: auto !important;
    padding: 40px 0 28px !important;
    align-items: center !important;
    background-position: center 35% !important;
    background-size: cover !important;
  }
  body[data-current-page="gallery.html"] .gallery-hero .container {
    display:flex !important;
    min-height:612px !important;
    flex-direction:column !important;
    justify-content:center !important;
  }
  body[data-current-page="gallery.html"] .gallery-hero h1 {
    margin:0 0 18px !important;
    font-size:clamp(44px,11.5vw,62px) !important;
    line-height:1.03 !important;
  }
  body[data-current-page="gallery.html"] .gallery-mobile-hero-copy {
    margin:0 0 24px !important;
    font-size:20px !important;
    line-height:1.48 !important;
  }
  body[data-current-page="gallery.html"] .gallery-mobile-hero-actions { margin:0 !important; gap:12px !important; }
  body[data-current-page="gallery.html"] .gallery-hero .gallery-hero-badges { margin-top:18px !important; gap:8px !important; }
  body[data-current-page="gallery.html"] .gallery-hero .crumb { display:none !important; }
}
@media (max-width: 575px) {
  body[data-current-page="gallery.html"] .gallery-hero { min-height:700px !important; background-position:center 30% !important; }
  body[data-current-page="gallery.html"] .gallery-hero .container { min-height:632px !important; }
}