/* =========================================================
   SERVICES MEGA MENU — FINAL READABILITY
   Loaded LAST intentionally
   ========================================================= */


/* Cards */
.mega-menu[data-mega="services"] .services-mega-grid > a {
  padding: 16px 15px !important;

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;
}


/* Icon box slightly stronger */
.mega-menu[data-mega="services"] .services-mega-grid .mega-icon {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;

  flex: 0 0 42px !important;

  display: grid !important;

  place-items: center !important;

  border-radius: 8px !important;
}


.mega-menu[data-mega="services"] .services-mega-grid .mega-icon svg {
  width: 20px !important;
  height: 20px !important;
}


/* Give text the available card width */
.mega-menu[data-mega="services"] .services-mega-grid > a > span:last-child {
  min-width: 0 !important;

  width: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: flex-start !important;

  gap: 6px !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* =========================================================
   TITLE — clearly readable
   ========================================================= */

.mega-menu[data-mega="services"] .services-mega-grid > a b {
  display: block !important;

  margin: 0 !important;

  color: #0a2639 !important;

  font-size: 14.5px !important;

  line-height: 1.22 !important;

  font-weight: 850 !important;

  letter-spacing: -0.015em !important;

  white-space: normal !important;

  opacity: 1 !important;
}


/* =========================================================
   DESCRIPTION — no more tiny text
   ========================================================= */

.mega-menu[data-mega="services"] .services-mega-grid > a small {
  display: block !important;

  margin: 0 !important;

  max-width: 100% !important;

  color: #526c7a !important;

  font-size: 11.25px !important;

  line-height: 1.48 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  white-space: normal !important;

  opacity: 1 !important;
}


/* =========================================================
   HOVER CONTRAST
   ========================================================= */

.mega-menu[data-mega="services"] .services-mega-grid > a:hover b {
  color: #ffffff !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a:hover small {
  color: rgba(242,250,252,.90) !important;
}


/* icon becomes brighter on hover */
.mega-menu[data-mega="services"] .services-mega-grid > a:hover .mega-icon {
  background: rgba(255,255,255,.10) !important;

  border-color: rgba(123,228,250,.55) !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a:hover .mega-icon svg {
  color: #89e9fc !important;
}


/* =========================================================
   A LITTLE LESS EMPTY SPACE
   ========================================================= */

.mega-menu[data-mega="services"] .services-mega-grid {
  grid-template-rows:
    repeat(2, 112px) !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a {
  height: 112px !important;
  min-height: 112px !important;
}


/* keep left panel balanced with cards */
.mega-menu[data-mega="services"] .services-mega-intro {
  min-height: 236px !important;
}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1300px) {

  .mega-menu[data-mega="services"] .services-mega-grid > a b {
    font-size: 13.5px !important;
  }

  .mega-menu[data-mega="services"] .services-mega-grid > a small {
    font-size: 10.5px !important;
  }

}


/* =========================================================
   SERVICES MEGA — BALANCED READABILITY
   Readable without looking congested
   ========================================================= */


/* Slightly tighter card */
.mega-menu[data-mega="services"] .services-mega-grid > a {
  height: 106px !important;
  min-height: 106px !important;

  padding: 14px 14px !important;

  gap: 11px !important;

  align-items: center !important;
}


/* Slightly smaller icon box */
.mega-menu[data-mega="services"] .services-mega-grid .mega-icon {
  width: 38px !important;
  height: 38px !important;

  min-width: 38px !important;

  flex: 0 0 38px !important;

  border-radius: 7px !important;
}


.mega-menu[data-mega="services"] .services-mega-grid .mega-icon svg {
  width: 18px !important;
  height: 18px !important;
}


/* Text block */
.mega-menu[data-mega="services"] .services-mega-grid > a > span:last-child {
  gap: 5px !important;

  min-width: 0 !important;

  width: auto !important;

  flex: 1 1 auto !important;
}


/* Titles — readable but no longer oversized */
.mega-menu[data-mega="services"] .services-mega-grid > a b {
  font-size: 13px !important;

  line-height: 1.20 !important;

  font-weight: 800 !important;

  letter-spacing: -.01em !important;

  color: #0a2639 !important;

  max-width: 100% !important;
}


/* Description — readable but compact */
.mega-menu[data-mega="services"] .services-mega-grid > a small {
  font-size: 10px !important;

  line-height: 1.40 !important;

  font-weight: 500 !important;

  color: #58717f !important;

  margin: 0 !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

  max-width: 100% !important;
}


/* Hover */
.mega-menu[data-mega="services"] .services-mega-grid > a:hover b {
  color: #ffffff !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a:hover small {
  color: rgba(239,249,252,.86) !important;
}


/* Reduce total dropdown height slightly */
.mega-menu[data-mega="services"] .services-mega-grid {
  grid-template-rows:
    repeat(2,106px) !important;

  gap: 12px !important;
}


/* Left panel follows card height */
.mega-menu[data-mega="services"] .services-mega-intro {
  min-height: 224px !important;
}


/* Give cards slightly more horizontal room */
.mega-menu[data-mega="services"] .services-mega-layout {
  grid-template-columns:
    285px minmax(0,1fr) !important;

  gap: 26px !important;
}


/* Medium desktop */
@media (max-width: 1350px) {

  .mega-menu[data-mega="services"] .services-mega-grid > a b {
    font-size: 12px !important;
  }

  .mega-menu[data-mega="services"] .services-mega-grid > a small {
    font-size: 9.5px !important;
  }

}


/* =========================================================
   SERVICES MEGA — ALIGN RIGHT GRID WITH LEFT INTRO CARD
   ========================================================= */

/* Parent: both columns share exactly the same height */
.mega-menu[data-mega="services"] .services-mega-layout {
  align-items: stretch !important;
}


/* Left panel defines the overall visual height */
.mega-menu[data-mega="services"] .services-mega-intro {
  height: auto !important;
  min-height: 300px !important;

  align-self: stretch !important;
}


/* Right grid stretches from same top to same bottom */
.mega-menu[data-mega="services"] .services-mega-grid {
  height: auto !important;
  min-height: 300px !important;

  align-self: stretch !important;

  grid-template-rows:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;
}


/* Remove previous fixed 106px card height */
.mega-menu[data-mega="services"] .services-mega-grid > a {
  height: auto !important;
  min-height: 0 !important;

  align-self: stretch !important;

  padding: 15px 14px !important;
}


/* Keep content vertically centred inside taller cards */
.mega-menu[data-mega="services"] .services-mega-grid > a {
  align-items: center !important;
}


.mega-menu[data-mega="services"] .services-mega-grid > a > span:last-child {
  justify-content: center !important;
}