/* ==========================================================================
   Belvan Landing Page - Responsive Stylesheet
   Breakpoints: 1600, 1400, 1366, 1200, 1100, 992, 768, 600, 500, 430, 375
   ========================================================================== */

/* ==========================================================================
   1600px
   ========================================================================== */
@media (max-width: 1600px) {
  h1 {
    font-size: 54px;
  }

  /* Header: give the navbar row more breathing room once section-padding starts crowding out the nav links */
  .section-padding {
    padding: 0px 80px;
  }

  .main-nav {
    gap: 20px;
  }
}

/* ==========================================================================
   1400px
   ========================================================================== */
@media (max-width: 1400px) {
  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 38px;
  }
}

/* ==========================================================================
   1366px
   ========================================================================== */
@media (max-width: 1366px) {
  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 36px;
  }

  .home-banner .content-area br{
    display: none;
  }
}

/* ==========================================================================
   1200px
   ========================================================================== */
@media (max-width: 1200px) {
  .section {
    padding-top: 70px;
  }

  .mt-8 {
    margin-top: 70px;
  }

  .section-padding {
    padding: 0px 60px;
  }

  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 22px;
  }
}

/* Header: between 992-1200 the full nav + logo + call button no longer fit
   in one row (logo/call button were getting squeezed off-screen). Bootstrap
   doesn't collapse to the hamburger menu until below 992px, so shrink the
   nav and reduce the call button to an icon here to keep everything on-screen. */
@media (max-width: 1200px) and (min-width: 992px) {
  .navbar-brand img {
    max-height: 32px;
    width: auto;
  }

  .main-nav {
    gap: 8px;
  }

  .main-nav .nav-link {
    font-size: 13px;
  }

  .navbar-main .call-btn {
    padding: 8px;
  }

  .navbar-main .call-btn .call-text {
    display: none;
  }
}

/* ==========================================================================
   1100px
   ========================================================================== */
@media (max-width: 1100px) {
  h1 {
    font-size: 37px;
  }

  h2 {
    font-size: 30px;
  }
}

/* ==========================================================================
   992px (tablets)
   ========================================================================== */
@media (max-width: 991.98px) {
  .section {
    padding-top: 60px;
  }

  .mt-8 {
    margin-top: 60px;
  }

  .section-padding {
    padding: 0px 40px;
  }

  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 20px;
  }

  /* Header: tighten the navbar */
  .navbar-main {
    padding: 10px 0;
  }

  /* Header: give the collapsed mobile menu a solid dropdown panel instead of floating transparently over the page */
  .navbar-collapse {
    background: #000;
    border-radius: 12px;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.35);
    margin-top: 12px;
    padding: 16px 20px;
  }

  .main-nav {
    gap: 4px;
  }

  .main-nav .nav-link {
    padding: 8px 0;
  }

  /* Header: Bootstrap's dropdown stays position:absolute even inside the collapsed
     mobile menu, so its 260px min-width can overflow the ~300px panel. Make it a
     static inline block instead so it flows naturally under its toggle link. */
  .main-nav .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
  }

  .main-nav .dropdown-item {
    font-size: 13px;
  }

  /* Banner: reduce the padding reserved for clearing the fixed header, and swap the full-bleed photo for the contained image card below the text */
  .home-banner {
    padding-top: 130px;
    background: none;
    aspect-ratio: unset;
    min-height: 0;
  }

  /* Banner: the usps/logos strip is positioned to sit over the full-bleed photo, which is gone below this breakpoint.
     !important is required because the element also carries Bootstrap's .d-flex utility (display: flex !important). */
  .home-banner .banner-bottom {
    display: none !important;
  }

  /* Banner: content-area's huge bottom padding exists to clear the absolutely-positioned
     photo/badges above the fold on desktop. With the photo gone, drop it back down and let
     the badges strip flow in normally instead of floating in the empty space it leaves behind. */
  .home-banner .content-area {
    padding: 50px 0px 30px;
  }

  .home-banner .image-bottom img {
    position: static;
    margin: 0 auto 30px;
  }

  .home-cta .image-area {
    position: static;
  }

  .home-cta .image-area img {
    position: static;
    width: 60%;
    margin: 0 auto;
  }

  .home-cta .cta-card {
    padding: 60px 20px 0px;
  }

  .services-banner .content-area{
    padding: 50px 0px 30px;
  }
}

/* ==========================================================================
   768px (large phones / small tablets)
   ========================================================================== */
@media (max-width: 767.98px) {

  body{
    font-size: 18px;
  }
  .section {
    padding-top: 50px;
  }

  .mt-8 {
    margin-top: 50px;
  }

  .section-padding {
    padding: 0px 24px;
  }

  h1 {
    font-size: 29px;
  }

  h2 {
    font-size: 26px;
  }

  /* Header: drop the call button on smaller screens, keep just the logo + toggler */
  .navbar-main .call-btn {
    display: none !important;
  }

  /* Banner: swap in the dedicated portrait mobile photo (guards/drone/vehicle sit in its
     bottom half, its top half is empty for the heading/buttons to sit over) instead of the
     desktop full-bleed photo, and reserve room below the text for it to show through. */
  .home-banner {
    padding-top: 90px;
    background: url('../img/mobile-banner-bg.webp');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

  /* padding-bottom uses vw, not a fixed px value: background-size:cover scales the photo
     itself off the viewport WIDTH, so the space needed to clear the guards' faces scales
     with width too. A fixed px reservation looks right at one width and overlaps at another. */
  .home-banner .content-area {
    text-align: center;
    padding: 24px 0px 80vw;
  }

  .home-banner .content-area .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .home-banner .content-area .d-flex .btn-navy,
  .home-banner .content-area .d-flex .call-btn {
    width: 100%;
    justify-content: center;
  }

  .home-banner .content-area p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Banner: the usps text bar isn't part of this design, only the badge carousel below is. */
  .home-banner .image-bottom {
    display: none;
  }

  /* Banner: bring the trust-badge strip back, overlaid on the bottom of the photo
     (it's hidden at the tablet breakpoint above since there's no photo there to sit on). */
  .home-banner .banner-bottom {
    display: flex !important;
    margin-top: -40px;
  }

  .main-footer .footer-bottom {
    justify-content: center !important;
    text-align: center;
  }

  br{
    display: none;
  }

  .home-services .service-btn{
    margin-top: unset;
  }
}

/* ==========================================================================
   600px
   ========================================================================== */
@media (max-width: 600px) {
  .section {
    padding-top: 40px;
  }

  .mt-8 {
    margin-top: 40px;
  }


  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 19px;
  }

  body {
    font-size: 19px;
  }

  .btn-navy {
    padding: 11px 24px;
    font-size: 15px;
  }

  .home-services .service-image {
    max-height: 60%;
  }
}

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

  .navbar-brand img {
    max-height: 36px;
  }

  .home-banner {
    padding-top: 80px;
  }

  /* Services: the card's title wraps to 2 lines below ~460px, and with the button's
     desktop margin-top:80px plus the fixed 260px card height + overflow:hidden, the
     "View Details" button was getting clipped almost entirely out of view. */
  .home-services .service-btn {
    margin-top: 10px;
  }
}

/* ==========================================================================
   430px
   ========================================================================== */
@media (max-width: 430px) {
  .section {
    padding-top: 32px;
  }

  .mt-8 {
    margin-top: 32px;
  }

  .section-padding {
    padding: 0px 16px;
  }


  h3 {
    font-size: 18px;
  }
}

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

  .btn-navy {
    padding: 10px 20px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }

  .home-banner .banner-bottom{
    display: none !important;
  }
}