/* ======================================================
   SOURCE: /assets/css/flag-menu-final.css
   ====================================================== */

/* =========================================================
   FLAG STATES MEGA MENU — FINAL COMPACT 4 × 4
   ========================================================= */

.mega-menu[data-mega="flags"] {
  overflow: hidden !important;
}


/* main dropdown composition */
.mega-menu[data-mega="flags"] .mega-layout {
  display: grid !important;

  grid-template-columns:
    300px minmax(0, 1fr) !important;

  gap: 26px !important;

  align-items: stretch !important;

  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* ---------------------------------------------------------
   LEFT INTRO
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-intro {
  min-height: 0 !important;
  height: auto !important;

  padding: 25px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  border-radius: 9px !important;
}


.mega-menu[data-mega="flags"] .mega-intro h3 {
  margin-top: 12px !important;

  font-size: 27px !important;
  line-height: 1.02 !important;
}


.mega-menu[data-mega="flags"] .mega-intro p {
  margin-top: 13px !important;

  font-size: 10.5px !important;
  line-height: 1.5 !important;
}


.mega-menu[data-mega="flags"] .mega-intro a {
  margin-top: 16px !important;
}



/* ---------------------------------------------------------
   FORCE TRUE 4 × 4 GRID
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-grid.flags,
.mega-menu[data-mega="flags"] .registry-mega-grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  grid-template-rows:
    repeat(4, 58px) !important;

  grid-auto-flow: row !important;

  gap: 8px !important;

  width: 100% !important;

  align-self: center !important;
}



/* ---------------------------------------------------------
   COUNTRY CARD
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .mega-grid.flags > a,
.mega-menu[data-mega="flags"] .registry-mega-grid > a {
  width: auto !important;
  height: 58px !important;

  min-width: 0 !important;
  min-height: 58px !important;
  max-height: 58px !important;

  padding: 7px 9px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 9px !important;

  border-radius: 6px !important;

  box-sizing: border-box !important;
}



/* ---------------------------------------------------------
   REAL COUNTRY FLAG
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini > i {
  width: 40px !important;
  height: 27px !important;

  min-width: 40px !important;
  min-height: 27px !important;

  flex: 0 0 40px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border:
    1px solid rgba(12, 98, 138, .16) !important;

  border-radius: 3px !important;

  background: #ffffff !important;

  box-shadow:
    0 2px 5px rgba(5, 48, 70, .07) !important;
}


.mega-menu[data-mega="flags"] .flag-mini > i::before {
  display: none !important;
  content: none !important;
}


.mega-menu[data-mega="flags"] .flag-mini > i img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
}



/* ---------------------------------------------------------
   COUNTRY NAME
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini > span {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: center !important;
}


.mega-menu[data-mega="flags"] .flag-mini b {
  margin: 0 !important;

  color: #0a2638 !important;

  font-size: 10.5px !important;
  line-height: 1.13 !important;

  font-weight: 800 !important;

  white-space: normal !important;
}


/* No unnecessary subtitle in compact registry menu */
.mega-menu[data-mega="flags"] .flag-mini small {
  display: none !important;
}



/* ---------------------------------------------------------
   HOVER — INVERT
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] .flag-mini:hover {
  transform: translateY(-2px) !important;

  border-color:
    rgba(70, 205, 239, .46) !important;

  background:
    linear-gradient(
      145deg,
      #073651 0%,
      #07547a 58%,
      #086b91 100%
    ) !important;

  box-shadow:
    0 9px 18px rgba(4, 67, 97, .12) !important;
}


.mega-menu[data-mega="flags"] .flag-mini:hover b {
  color: #ffffff !important;
}


.mega-menu[data-mega="flags"] .flag-mini:hover > i {
  border-color:
    rgba(126, 231, 251, .65) !important;

  box-shadow:
    0 0 0 2px rgba(80, 215, 245, .07) !important;
}



/* ---------------------------------------------------------
   BACKGROUND TEXTURE — KEEP NOTICEABLE
   --------------------------------------------------------- */

.mega-menu[data-mega="flags"] {
  background:

    radial-gradient(
      ellipse at 72% 50%,
      transparent 0%,
      transparent 35%,
      rgba(18,139,190,.06) 35.3%,
      transparent 35.8%,
      transparent 48%,
      rgba(18,139,190,.04) 48.3%,
      transparent 49%
    ),

    repeating-linear-gradient(
      135deg,
      rgba(17,139,190,.027) 0,
      rgba(17,139,190,.027) 1px,
      transparent 1px,
      transparent 44px
    ),

    linear-gradient(
      rgba(12,130,180,.028) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(12,130,180,.023) 1px,
      transparent 1px
    ),

    linear-gradient(
      180deg,
      #f8fcfe,
      #eef7fb
    ) !important;

  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px,
    auto !important;
}



/* ---------------------------------------------------------
   NORMAL DESKTOP FALLBACK
   --------------------------------------------------------- */

@media (max-width: 1300px) {

  .mega-menu[data-mega="flags"] .mega-layout {
    grid-template-columns:
      250px minmax(0,1fr) !important;
  }

  .mega-menu[data-mega="flags"] .mega-grid.flags,
  .mega-menu[data-mega="flags"] .registry-mega-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;
  }

}



/* ======================================================
   SOURCE: /assets/css/services-readable-final.css
   ====================================================== */

/* =========================================================
   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;
}



/* ======================================================
   SOURCE: /assets/css/services-menu-v6.css
   ====================================================== */

/* =========================================================
   SERVICES MEGA MENU V6
   7 services — 4 top + 3 centred below
   ========================================================= */


/* Use an 8-column internal grid so second row can center */
.mega-menu[data-mega="services"] .services-mega-grid {
  display: grid !important;

  grid-template-columns:
    repeat(8, minmax(0, 1fr)) !important;

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

  gap:
    12px !important;

  min-height:
    300px !important;

  align-self:
    stretch !important;
}


/* ---------------------------------------------------------
   TOP ROW — 4 equal cards
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(1) {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(2) {
  grid-column: 3 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(3) {
  grid-column: 5 / span 2 !important;
  grid-row: 1 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(4) {
  grid-column: 7 / span 2 !important;
  grid-row: 1 !important;
}


/* ---------------------------------------------------------
   SECOND ROW — 3 centered cards
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(5) {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(6) {
  grid-column: 4 / span 2 !important;
  grid-row: 2 !important;
}

.mega-menu[data-mega="services"] .services-mega-grid > a:nth-child(7) {
  grid-column: 6 / span 2 !important;
  grid-row: 2 !important;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

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

  padding:
    15px 14px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    12px !important;
}


/* ---------------------------------------------------------
   Vessel registration icon — proper centering
   --------------------------------------------------------- */

.mega-menu[data-mega="services"]
.services-mega-grid
a[href="/vessel-registration.html"]
.mega-icon {
  display:
    grid !important;

  place-items:
    center !important;
}


.mega-menu[data-mega="services"]
.services-mega-grid
a[href="/vessel-registration.html"]
.mega-icon svg {
  width:
    20px !important;

  height:
    20px !important;

  display:
    block !important;

  margin:
    0 !important;

  transform:
    none !important;
}


/* ---------------------------------------------------------
   Typography stays readable but not congested
   --------------------------------------------------------- */

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

  line-height:
    1.2 !important;

  font-weight:
    800 !important;
}


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

  line-height:
    1.4 !important;

  display:
    -webkit-box !important;

  -webkit-line-clamp:
    2 !important;

  -webkit-box-orient:
    vertical !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   Left panel exactly matches right grid height
   --------------------------------------------------------- */

.mega-menu[data-mega="services"] .services-mega-layout {
  align-items:
    stretch !important;
}


.mega-menu[data-mega="services"] .services-mega-intro {
  min-height:
    300px !important;

  height:
    auto !important;

  align-self:
    stretch !important;
}


/* ---------------------------------------------------------
   Medium desktop fallback
   --------------------------------------------------------- */

@media (max-width: 1200px) {

  .mega-menu[data-mega="services"] .services-mega-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      auto !important;

    min-height:
      auto !important;
  }


  .mega-menu[data-mega="services"] .services-mega-grid > a {
    grid-column:
      auto !important;

    grid-row:
      auto !important;

    min-height:
      90px !important;
  }

}


/* ==========================================================
   DESCENDER FIX — REGISTRATION / MANNING / LICENSING / TRAINING
   Prevent letters like g, y, p from being cut at the bottom
   ========================================================== */
@media (min-width: 1101px){

  .services-mega-v2 a,
  .services-mega-v2 a span,
  .services-mega-v2 .mega-card,
  .services-mega-v2 .mega-card span,
  .services-menu-v6 a,
  .services-menu-v6 a span,
  .services-menu-v6 .mega-card,
  .services-menu-v6 .mega-card span,
  .services-rail a,
  .services-rail a span,
  .services-strip a,
  .services-strip a span,
  .services-tabs a,
  .services-tabs a span {
    line-height: 1.35 !important;
    padding-bottom: 2px !important;
    overflow: visible !important;
  }

  .services-mega-v2 a,
  .services-menu-v6 a,
  .services-rail a,
  .services-strip a,
  .services-tabs a {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }

  .services-mega-v2 svg,
  .services-menu-v6 svg,
  .services-rail svg,
  .services-strip svg,
  .services-tabs svg {
    flex-shrink: 0 !important;
  }
}


/* ==========================================================
   SERVICES MEGA MENU — REMOVE HORIZONTAL WHITE SEAM
   ========================================================== */

@media (min-width:1101px){

  /*
     Create one continuous menu surface.
  */
  .mega-menu[data-mega="services"]{
    isolation:isolate !important;
    overflow:hidden !important;

    background-color:#EEF8FC !important;

    background-image:
      linear-gradient(
        135deg,
        rgba(255,255,255,.30) 0%,
        rgba(231,246,252,.22) 45%,
        rgba(219,240,249,.32) 100%
      ),
      repeating-linear-gradient(
        135deg,
        rgba(55,156,202,.055) 0,
        rgba(55,156,202,.055) 1px,
        transparent 1px,
        transparent 34px
      ) !important;
  }


  /*
     Old decorative pseudo layers were producing the
     horizontal white strip across cards.
  */
  .mega-menu[data-mega="services"]::before,
  .mega-menu[data-mega="services"]::after{
    content:none !important;
    display:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }


  /*
     Keep the real mega-menu content above the background.
  */
  .mega-menu[data-mega="services"]
  > .services-mega-layout,

  .mega-menu[data-mega="services"]
  > .shell,

  .mega-menu[data-mega="services"]
  .services-mega-intro,

  .mega-menu[data-mega="services"]
  .services-mega-grid{

    position:relative !important;
    z-index:5 !important;
  }


  /*
     Ensure no inherited white band/background is painted
     across the main layout.
  */
  .mega-menu[data-mega="services"]
  .services-mega-layout{

    background-color:transparent !important;
    background-image:none !important;
  }


  /*
     Preserve individual cards.
  */
  .mega-menu[data-mega="services"]
  .services-mega-grid > a{

    position:relative !important;
    z-index:6 !important;
  }

}