/* Responsive overrides for MES1 site */

/* Mobile devices (< 768px) */
@media screen and (max-width: 767px) {
  .row { margin: 0; }
  .img1 { max-height: 60px; margin: 5px auto; }
  .circle { width: 45px; height: 45px; font-size: 16px; }
  .about-cont { padding: 10px; margin-top: 130px; font-size: 12px; text-align: justify; }
  .featured-agent { margin-bottom: 20px; }
  .agent-details h4 { font-size: 14px; text-align: center; }
  .fixed-facebook, .fixed-insta, .fixed-youtube { width: 25px; height: 25px; }
  .btn-primary-custom { padding: 8px 10px; font-size: 12px; top: 62%; }
  .footer { text-align: center; }
  .footer-links, .footer-contact { margin-top: 20px; }
  .vision { font-size: 14px; padding: 4px 4px; }
}

/* Tablets (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .img1 { max-height: 70px; }
  .circle { width: 50px; height: 50px; font-size: 18px; }
  .about-cont { padding: 15px; margin-top: 0; font-size: 13px; }
  .agent-details h4 { font-size: 15px; }
  .fixed-facebook, .fixed-insta, .fixed-youtube { width: 28px; height: 28px; }
  .btn-primary-custom { padding: 9px 11px; font-size: 13px; }
  .vision { font-size: 15px; padding: 4px 5px; }
}

/* Small laptops (992px - 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .img1 { max-height: 75px; }
  .circle { width: 55px; height: 55px; }
  .about-cont { padding: 20px; font-size: 13px; }
  .fixed-facebook, .fixed-insta, .fixed-youtube { width: 30px; height: 30px; }
  .btn-primary-custom { padding: 10px 12px; font-size: 14px; }
}

/* Large laptops/desktops (≥ 1200px) */
@media screen and (min-width: 1200px) {
  .img1 { max-height: 80px; }
  .about-cont { padding: 20px; font-size: 13px; line-height: 1.6; }
  .featured-agent .agent-wrapper { transition: transform 0.3s ease; }
  .featured-agent .agent-wrapper:hover { transform: translateY(-5px); }
  .agent-photo img { transition: transform 0.3s ease; }
  .agent-photo:hover img { transform: scale(1.05); }
}

/* Navbar/mobile menu fixes */
@media screen and (max-width: 1199px) {
  .navmenu ul { background-color: #B83058; }
  .navmenu a, .navmenu a:focus { color: white !important; }
  .mobile-nav-toggle { color: white; }
}

/* Ensure mobile toggle is visible and mobile nav overlays other elements */
.mobile-nav-active .navmenu { z-index: 100000 !important; }

/* Hide the mobile toggle by default (desktop/normal view) and only show on smaller screens */
.mobile-nav-toggle {
  display: none !important; /* hidden by default on larger screens */
  z-index: 100000 !important;
}

@media screen and (max-width: 991px) {
  /* show the hamburger on tablets and phones */
  .mobile-nav-toggle {
    display: inline-block !important;
    background: #B83058;
    color: #fff !important;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
}

/* Force-show mobile nav menu when active (high specificity + !important) */
@media screen and (max-width: 1199px) {
  body.mobile-nav-active #navmenu > ul {
    display: block !important;
    position: fixed !important;
    inset: 60px 12px 20px 12px !important; /* top right bottom left */
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    background-color: var(--nav-mobile-background-color, #B83058) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    z-index: 100001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure links inside the mobile menu are legible */
  body.mobile-nav-active #navmenu > ul a,
  body.mobile-nav-active #navmenu > ul a:focus {
    color: var(--nav-dropdown-color, #ffffff) !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
  }

  /* Ensure dropdowns inside mobile menu show when their parent gains .active */
  body.mobile-nav-active .navmenu .dropdown>.dropdown-active {
    display: block !important;
  }
}

/* Grid tweaks for department cards */
@media screen and (max-width: 575px) {
  .col-lg-2 { flex: 0 0 100%; max-width: 100%; }
}
@media screen and (min-width: 576px) and (max-width: 767px) {
  .col-lg-2 { flex: 0 0 50%; max-width: 50%; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .col-lg-2 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}