/** ADD YOUR AWESOME CODES HERE **/
/* =========================================================
   RESPONSIVE DESIGN REFINEMENT
   Existing content, colors and animation effects preserved.
   ========================================================= */

/* Global responsive media handling */
html,
body {
    width: 100%;
    max-width: 100%;
    /* overflow-x: hidden; */
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
}

figure {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure img,
.brochure-visual img,
.right-box-pro img,
.gallery-single img,
.post-box img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Bootstrap rows should never create horizontal scroll */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Keep the existing navigation/animation system intact */
.header,
.menu,
.burger {
    max-width: 100vw;
}

.menu__brand img,
.navbar-brand img {
    max-width: 100%;
    height: auto;
}

/* Home banner slider: starts AFTER the navigation bar in normal document flow. */
.home-page #mainNav {
    /* Keep the original header/navbar appearance and fixed positioning.
       The slider is offset below it so the two never overlap. */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100%;
    z-index: 1000;
}

.home-page .home-banner-slider {
    position: relative;
    display: block;
    width: 100%;
    margin: 155px 0 0 !important;
    padding: 0;
    overflow: hidden;
    clear: both;
}

.home-page .home-banner-slider .page-view {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1738 / 905;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.home-page .home-banner-slider .page-view .project {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    overflow: hidden;
}

.home-page .home-banner-slider .page-view .project img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center center;
}

.home-page .home-banner-slider .page-view .arrows {
    z-index: 120;
}

@media (max-width: 991px) {
    .home-page .home-banner-slider .page-view {
        aspect-ratio: 1738 / 905;
    }
}

@media (max-width: 767px) {
    .home-page .home-banner-slider .page-view {
        aspect-ratio: 1738 / 905;
    }

    .home-page .home-banner-slider .page-view .arrows {
        bottom: 12px;
    }
}


/* Preserve the original fixed header on smaller screens while keeping the
   independent slider completely below it. */
@media (max-width: 991px) {
    .home-page .home-banner-slider {
        margin-top: 155px !important;
    }
}

@media (max-width: 767px) {
    .home-page .home-banner-slider {
        margin-top: 155px !important;
    }
}

/* FINAL HOME HEADER + SLIDER STACK FIX
   Keep the original fixed header/navbar. Reserve exactly the navbar's
   visual height before the independent home slider so no banner is hidden. */
.home-page #mainNav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    min-height: 155px;
    box-sizing: border-box;
}

.home-page .home-banner-slider {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 155px !important;
    width: 100% !important;
    clear: both !important;
    z-index: 1 !important;
}

.home-page .home-banner-slider .page-view {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1738 / 905 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.home-page .home-banner-slider .page-view .project {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.home-page .home-banner-slider .page-view .project img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 991px) {
    .home-page #mainNav {
        min-height: 155px;
    }
    .home-page .home-banner-slider {
        margin-top: 155px !important;
    }
}

@media (max-width: 767px) {
    .home-page #mainNav {
        min-height: 155px;
    }
    .home-page .home-banner-slider {
        margin-top: 155px !important;
    }
}


/* FINAL LAYERING FIX: keep original fixed header and ensure the Bootstrap
   navbar is always visible above the header layer. The slider remains below both. */
.home-page .header {
    z-index: 100 !important;
}
.home-page .header .burger {
    z-index: 10001 !important;
}
.home-page .header .menu {
    z-index: 10000 !important;
}
.home-page #mainNav {
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.home-page .home-banner-slider {
    z-index: 1 !important;
}

/* FINAL BURGER / HEADER STACKING FIX
   The burger lives inside .header. Because #mainNav is fixed, the header
   itself must sit above it; otherwise the navbar paints over the burger. */
.home-page .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 20000 !important;
    pointer-events: none;
}
.home-page .header .burger {
    position: absolute !important;
    z-index: 20002 !important;
    pointer-events: auto !important;
}
.home-page .header .menu {
    position: fixed !important;
    z-index: 20001 !important;
    pointer-events: auto !important;
}
.home-page #mainNav {
    z-index: 19900 !important;
}
.home-page .home-banner-slider {
    z-index: 1 !important;
}