/* ================= MOBILE (max 576px) ================= */
@media (max-width: 576px) {

  /* NAVBAR */
  .logo {
    height: 60px;
  }

  .navbar-nav {
    gap: 0px;
    /* text-align: center; */
  }

  /* HERO */
  .hero,
  .cctv,
  .event,
  .construction,
  .industrial,
  .retail,
  .corporate,
  .residential,
  .resort,
  .commercial,
  .contact-hero {
    height: 60vh;
    text-align: center;
    padding-top: 80px;
  }

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

  /* Banner heading sizing for all hero variants */
  .cctv h1,
  .event h1,
  .construction h1,
  .industrial h1,
  .retail h1,
  .corporate h1,
  .residential h1,
  .resort h1,
  .commercial h1 {
    font-size: 28px;
  }

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

  .cctv p,
  .event p,
  .construction p,
  .industrial p,
  .retail p,
  .corporate p,
  .residential p,
  .resort p,
  .commercial p {
    font-size: 14px;
  }

  /* FEATURE BAR */
  .feature-bar {
    margin-top: 0;
  }

  /* Keep "Our Services" section fully visible under banner */
  .feature-bar {
    position: relative;
    z-index: 2;
  }

  .feature-bar .col-md-3 {
    height: auto;
    padding: 20px 0;
  }

  /* SERVICES */
  .service-card {
    text-align: center;
  }

  /* WHY US */
  .why-us {
    text-align: center;
  }

  .image-box {
    margin-top: 20px;
  }

  /* CLIENTS */
  .client-box img {
    max-height: 60px;
  }

  /* FIRE */
  .fire-box {
    padding: 20px;
  }

  .fire-box h2 {
    font-size: 22px;
  }

  /* GALLERY */
  .gallery-item img {
    height: 200px;
  }

  /* MODAL */
  .img-modal img {
    max-width: 95%;
  }

  /* FOOTER */
  .footer .col-md-3 {
    margin-bottom: 20px;
    text-align: center;
  }

  /* CHAT BTN */
  .chat-btn {
    padding: 8px 15px;
    font-size: 14px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
  }

  /* Social bar hides on mobile to avoid overlap */
  .social-bar {
    display: none;
  }

  /* Security/service two-column sections -> stack on mobile */
  .security-section {
    padding: 60px 15px 40px;
  }

  .security-section .row {
    flex-direction: column;
  }

  .security-section .col-left,
  .security-section .col-right {
    width: 100%;
    flex: 0 0 100%;
  }

  .security-section .col-left img {
    height: auto;
    max-height: 320px;
    object-fit: cover;
    margin-bottom: 20px;
  }

  .security-section .col-right h2 {
    font-size: 26px;
  }

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

  /* Quick response section spacing */
  .quick_resp .container {
    padding: 20px;
  }

  .quick_resp h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  /* About page: show image first, then content */
  .who-we-are .row {
    flex-direction: column;
  }

  .who-we-are .who-content {
    order: 2;
    text-align: center;
    margin-top: 20px;
  }

  .who-we-are .position-relative {
    order: 1;
    justify-content: center !important;
  }

  .who-we-are .small-img {
    display: none;
  }

  .who-we-are .big-img {
    border-width: 3px;
    padding: 8px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .who-we-are .big-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Common tall images -> mobile friendly */
  .why-us img.img-fluid,
  .Who_we_are img.img-fluid,
  .white_back_security img,
  .reg-img-box img,
  .col-left img {
    height: auto;
    max-height: 320px;
  }

  /* Regulatory compliance */
  .regulatory_compliance {
    padding: 80px 15px 40px;
    text-align: center;
  }

  .regulatory_compliance h2 {
    font-size: 24px;
  }

  .feature {
    text-align: left;
  }

  /* COMPANY */
  .company-section .row-item {
    flex-direction: column;
  }

  .company-section .label,
  .company-section .value {
    width: 100%;
  }

  .company-section .label {
    margin-bottom: 5px;
  }

  .company-section .company-title {
    font-size: 22px;
  }

  /* CTA */
  .regulatory_CTA h2 {
    font-size: 18px;
  }
}

/* ================= GLOBAL FIXES ================= */
/* Prevent homepage "Our Services" bar from sliding under banner */
.feature-bar {
  margin-top: 0 !important;
  position: relative;
  z-index: 0;
}


/* ================= TABLET (577px - 991px) ================= */
@media (min-width: 577px) and (max-width: 991px) {

  /* HERO */
  .hero {
    height: 65vh;
  }

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

  /* FEATURE */
  .feature-bar .col-md-3 {
    height: 150px;
  }

  /* SERVICES */
  .service-card h5 {
    font-size: 16px;
  }

  /* WHY */
  .why-us .row {
    text-align: center;
  }

  /* CLIENT */
  .client-box img {
    max-height: 70px;
  }

  /* GALLERY */
  .gallery-item img {
    height: 220px;
  }

  /* Home: prevent feature bar from hiding under banner on tablets */
  .feature-bar {
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  /* About page: keep image above content on tablet */
  .who-we-are .row {
    flex-direction: column;
  }

  .who-we-are .who-content {
    order: 2;
    text-align: center;
    margin-top: 25px;
  }

  .who-we-are .position-relative {
    order: 1;
    justify-content: center !important;
  }

  .who-we-are .small-img {
    display: none;
  }

  .who-we-are .big-img img {
    width: 100%;
    max-width: 720px;
    height: auto;
  }
}

/* ================= LAPTOP / SMALL DESKTOP (max 1200px) ================= */
@media (max-width: 1200px) {
  /* Home: avoid banner covering "Our Services" bar */
  .feature-bar {
    margin-top: 0;
    position: relative;
    z-index: 2;
  }
}

/* ================= TABLET & BELOW (max 991px) ================= */
@media (max-width: 991px) {
  /* Contact page hero */
  .hero-content {
    margin-bottom: 30px;
    text-align: center;
  }

  /* Regulatory compliance */
  .features {
    grid-template-columns: 1fr;
  }

  .regulatory_compliance {
    padding: 100px 15px 40px;
  }

  .company-section .company-card {
    padding: 15px;
  }
}

/* ================= SMALL TABLET (max 768px) ================= */
@media (max-width: 768px) {
  .cta-section .cta-wrapper {
    flex-direction: column;
  }

  .cta-section .cta-right {
    width: 100%;
  }
}


/* ================= LARGE DEVICES (992px+) ================= */
@media (min-width: 992px) {
  /* Navbar hover dropdown (desktop) */
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

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

  .feature-bar .col-md-3 {
    height: 200px;
  }
}