/* 
===================================================================
  MBEYA ANTENNAS & DIGITAL SOLUTIONS - RESPONSIVE STYLESHEET
  Media queries and layout adjustments for Desktop, Laptop, Tablet, Mobile
===================================================================
*/

/* ----------------------------------------------------------------
   1. LARGE DESKTOPS & LAPTOPS (Max-Width: 1199px)
------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .hero-section {
    min-height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .about-img-main img {
    height: 400px;
  }

  .service-card {
    padding: 1.5rem !important;
  }
}

/* ----------------------------------------------------------------
   2. TABLETS & SMALL LAPTOPS (Max-Width: 991px)
------------------------------------------------------------------ */
@media (max-width: 991px) {
  .py-6 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Header & Mobile Nav */
  .navbar-brand {
    font-size: 0.95rem;
  }

  .brand-icon-box {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  .mobile-nav-list .nav-link {
    color: var(--dark-text);
    font-weight: 600;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--light-gray);
  }

  .mobile-nav-list .nav-link.active {
    color: var(--primary-blue);
    padding-left: 0.5rem;
  }

  /* Hero Section Mobile */
  .hero-section h1 {
    font-size: 2.25rem;
  }

  .hero-section p.lead {
    font-size: 1rem !important;
  }

  .about-img-box {
    padding-right: 0;
    padding-bottom: 1.5rem;
  }

  .about-img-main img {
    height: 340px;
  }

  .about-badge-card {
    position: relative !important;
    bottom: auto !important;
    start: auto !important;
    margin: 1rem 0 0 0 !important;
    width: 100%;
  }

  /* Gallery Cards */
  .gallery-card {
    height: 240px;
  }
}

/* ----------------------------------------------------------------
   3. PHONES & SMALL TABLETS (Max-Width: 767px)
------------------------------------------------------------------ */
@media (max-width: 767px) {
  .top-bar {
    display: none !important;
  }

  .hero-section {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .hero-section h1 {
    font-size: 1.85rem;
  }

  .counter-card {
    padding: 1rem !important;
  }

  .counter-number {
    font-size: 1.8rem !important;
  }

  /* Floating Action Buttons Mobile Adjustments */
  .floating-call-btn {
    bottom: 20px;
    left: 15px;
    width: 50px;
    height: 50px;
  }

  .floating-whatsapp-btn {
    bottom: 20px;
    right: 15px;
    width: 50px;
    height: 50px;
  }

  .back-to-top-btn {
    bottom: 80px;
    right: 15px;
    width: 42px;
    height: 42px;
  }

  /* Testimonial Carousel Mobile */
  .carousel-control-prev,
  .carousel-control-next {
    position: relative;
    display: inline-flex;
    margin: 1rem 0.5rem 0 0.5rem;
  }

  .testimonial-slider-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .testimonial-card {
    padding: 1.5rem !important;
  }
}

/* ----------------------------------------------------------------
   4. EXTRA SMALL MOBILE PHONES (Max-Width: 575px)
------------------------------------------------------------------ */
@media (max-width: 575px) {
  .hero-section h1 {
    font-size: 1.6rem;
  }

  .btn-lg {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
  }

  .service-card {
    padding: 1.25rem !important;
  }

  .gallery-filters .btn-filter {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem !important;
  }

  .modal-dialog {
    margin: 0.5rem;
  }
}