/* ============================================================
   VLC Properties — Custom Responsive & Performance Fixes
   ============================================================ */

/* ===== GLOBAL ===== */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }


/* ============================================================
   1. DESKTOP BANNER — FULL IMAGE DISPLAY (NO LEFT/RIGHT CUT)
   ============================================================ */

/* Large desktops 1600px+ */
@media (min-width: 1600px) {
  .slider-bg {
    background-size: cover !important;
    background-position: center center !important;
  }
  .single-slider {
    min-height: 90vh !important;
  }
}

/* Standard desktops 1200px – 1599px */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .slider-bg {
    background-size: cover !important;
    background-position: center bottom !important;
  }
  .single-slider {
    min-height: 90vh !important;
  }
}

/* Laptop 992px – 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .slider-bg {
    background-size: cover !important;
    background-position: center top !important;
  }
  .single-slider {
    min-height: 90vh !important;
    padding: 110px 0 70px !important;
  }
  .slider-right-bg {
    width: 46% !important;
  }
}


/* ============================================================
   2. HIDE DESKTOP SLIDER ON TABLET / MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
  .slider-area {
    display: none !important;
  }
}


/* ============================================================
   3. MOBILE BANNER SECTION
      - Hidden by default (desktop)
      - Shown on tablet & mobile via media queries
      - Uses <img> tag: full image, ZERO cropping
   ============================================================ */

/* --- Base: hidden on desktop --- */
.mobile-banner-section {
  display: none;
  position: relative;
  width: 100%;
  background-color: #0d1a2a;
}

/* Wrapper resets */
.mobile-banner-section .mobile-banner-img-wrap {
  display: block;
  width: 100%;
  line-height: 0;
  font-size: 0;
}

/* The image — full width, auto height = complete image shown */
.mobile-banner-section .mobile-banner-img-wrap picture {
  display: block;
  width: 100%;
}

.mobile-banner-section .mobile-banner-img-wrap picture img,
.mobile-banner-section .mobile-banner-img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Scroll down arrows on mobile banner */
.mobile-banner-section .banner-scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* --- TABLET (768px – 991px): show with constrained height --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-banner-section {
    display: block !important;
    margin-top: 72px;
  }
  .mobile-banner-section .mobile-banner-img-wrap picture img,
  .mobile-banner-section .mobile-banner-img-wrap img {
    width: 100% !important;
    height: 65vh !important;
    max-height: 65vh !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* --- MOBILE (below 768px): full image, no cropping --- */
@media (max-width: 767.98px) {
  .mobile-banner-section {
    display: block !important;
    margin-top: 68px;
  }
  .mobile-banner-section .mobile-banner-img-wrap picture img,
  .mobile-banner-section .mobile-banner-img-wrap img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
  }
}

/* Small phones 480px and below */
@media (max-width: 479.98px) {
  .mobile-banner-section {
    margin-top: 62px;
  }
}


/* ============================================================
   4. MOBILE HEADER FIX
      - Fixed at top, white background, shadow
      - Logo (left) + hamburger (right) on the SAME line
      - Removes the 55px logo margin that caused misalignment
   ============================================================ */
@media (max-width: 991.98px) {

  /* Fixed solid header */
  #sticky-header.menu-area.transparent-header,
  #sticky-header.menu-area.sticky-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10) !important;
    padding: 6px 0 !important;
    z-index: 999 !important;
    animation: none !important;
  }

  /* Outer col-12: flex row — logo on left, toggler on right */
  #sticky-header .col-12 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
  }

  /* Menu wrap: fills available width */
  #sticky-header .menu-wrap {
    flex: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  /* Remove float on hamburger, place it on the right */
  .menu-area .mobile-nav-toggler {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2;
    font-size: 26px !important;
    color: #218139 !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* Inner nav row */
  #sticky-header .menu-nav > .row {
    margin: 0 !important;
  }

  /* Logo column: auto width (not full-width stacked) */
  #sticky-header .menu-nav > .row > div:first-child {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Hide desktop nav + CTA button columns on mobile */
  #sticky-header .menu-nav > .row > div:nth-child(2),
  #sticky-header .menu-nav > .row > div:nth-child(3) {
    display: none !important;
  }

  /* Logo: remove excessive side margins */
  .logo {
    margin: 0 !important;
    padding: 4px 0 !important;
  }

  /* Logo image size */
  .logo img {
    max-height: 54px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Hide duplicate (sticky-swap) logo on mobile */
  #sticky-header .col-xl-2 .logo.d-none {
    display: none !important;
  }

  /* Hide Get a Quote button */
  .header-action {
    display: none !important;
  }
}

/* Small phones */
@media (max-width: 479.98px) {
  .logo img {
    max-height: 44px !important;
  }
  .menu-area .mobile-nav-toggler {
    font-size: 22px !important;
  }
}

/* Scroll anchor offset so sections don't hide under fixed header */
@media (max-width: 991.98px) {
  #ongoing,
  #about {
    scroll-margin-top: 30px;
  }
}

html body header #sticky-header.sticky-menu .logo:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body header #sticky-header.sticky-menu .logo.d-none {
    display: none !important;
}


/* ============================================================
   5. PARALLAX — SCROLL MODE ON MOBILE (PERFORMANCE FIX)
   ============================================================ */
@media (max-width: 991.98px) {
  .parallax-img,
  [data-jarallax] {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  .parallax-img-two .parallax-img {
    min-height: 260px !important;
    height: 260px !important;
  }
}
@media (max-width: 767.98px) {
  .parallax-img-two .parallax-img {
    min-height: 200px !important;
    height: 200px !important;
  }
}


/* ============================================================
   6. YOUTUBE IFRAMES — ASPECT RATIO RESPONSIVE
   ============================================================ */
.testimonial__item-two iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: block;
}


/* ============================================================
   7. PROJECT CARDS — SINGLE COLUMN ON SMALL PHONES
   ============================================================ */
@media (max-width: 575.98px) {
  .vlc-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


/* ============================================================
   8. BREADCRUMB PAGES — PADDING FOR FIXED MOBILE HEADER
   ============================================================ */
@media (max-width: 991.98px) {
  .breadcrumb-area {
    padding-top: calc(140px + 72px) !important;
  }
}
@media (max-width: 767.98px) {
  .breadcrumb-area {
    padding-top: calc(120px + 68px) !important;
  }
}


/* ============================================================
   9. FOOTER — MOBILE SPACING
   ============================================================ */
@media (max-width: 767.98px) {
  .footer-widget {
    margin-bottom: 28px;
  }
}


/* ============================================================
   10. SCROLL-TOP BUTTON — MOBILE POSITION
   ============================================================ */
@media (max-width: 767.98px) {
  .scroll-top {
    right: 12px !important;
    bottom: 20px !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }
}