@charset "utf-8";
/* CSS Document  Merged & optimised */
 
@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&family=Quicksand:wght@400;700&display=swap');
 
/* ---------------------------------------------------
   ROOT & BASE
--------------------------------------------------- */
:root {
  --cassiopeia-color-primary: #593fd9;
  --cassiopeia-color-hover:   #27E39F;
  --cassiopeia-color-link:    #224faa;
 
  --orange:    #F44F04;
  --orange-lt: #eb6b34;
  --orange-dk: #c03b00;
  --gold:      #f5a623;
 
  --dark:   #46354b;
  --mid:    #593fd9;
  --light:  #f8f5f1;
  --white:  #fafafa;
  --border: #e8ddd4;
}
 
a {
    text-decoration: none !important;
}
 
/* ---------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Play', sans-serif;
  font-weight: 700;
}
h1 { font-size: 3rem;    color: #593fd9; }
h2 { font-size: 2.25rem; color: #eb6b34; }
h3 { font-size: 1.75rem; color: #0b56c7; }
h4 { font-size: 1.375rem;color: #604872; }
h5 { font-size: 1.125rem;color: #7a7780; }
h6 { font-size: 0.9rem;  color: #8c6ec9; } 
.com-content-category-blog__item.blog-item {
    border-bottom: 1px solid lightgray;
}


.bangee {
    position: relative; /* Establish a new stacking context */
    width: 100%;
    height: 28vh; /* Adjust this value as needed */
    display: flex; /* Using Flexbox for alignment */
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    background: 
        url('https://traveler-health.com/images/banners/parisbanner.jpg') center/cover; /* Image with center alignment and cover */
    text-align: center;
    padding: 5px 5px 5px 5px;
    z-index: 1;
}

.bangee::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; /* Positioning to the right side */
    width: 50%; /* Adjust width for desired coverage */
    height: 100%; 
    background: linear-gradient(to left, rgba(99, 0, 143, 0.5), rgba(123, 122, 125, 0.1)); /* Gradient with transparency */
    clip-path: polygon(0 0, 100% 0, 100% 100%); /* Right-side triangle shape */
    z-index: 2; /* Above the .bangee div's background */
}

.bangee h1{
    position: relative;
    z-index: 3;
   color: rgb(238, 247, 247);
   font-size: 2.1rem;

}
.bangee h2 {
    position: relative;
    z-index: 3;
   color: rgb(251, 234, 255);
   font-size: 1.75rem;

}

 #search {
            background-color: lightgray;
            border: none;
            padding: 4px;
            width: 188px;
        }
.search-button {
            background-color: #041821;
            border: none;
            color: white;
            padding: 2px;
        }

 #sppanel {
   
        z-index: 1; 
    }

 
 .question2        {
            cursor: pointer;
            color: #593fd9;
        }

 .answer2 {
            display: none;
            padding-left: 20px;
        }
 
	
figcaption.caption {
  font-size: x-small;
}




/* Center the image inside the figure */
.item-image {
    text-align: center;            /* Centers inline/inline-block content horizontally */
    margin: 1rem auto;             /* Optional: add vertical spacing and center the figure if it has a width */
}

/* Style the image: orange border + rounded corners */
.item-image img {
    display: inline-block;         /* Ensures proper centering with text-align */
    border: 1px solid #ff8c00;     /* Thin orange border (Dark Orange) */
    border-radius: 18px;           /* Rounded corners; adjust value as needed */
    box-sizing: border-box;        /* Ensures border doesnt alter the set width/height */
}
.com-content-category-blog__item .item-image img {
    height: 500px !important;
    width: 100%;
    object-fit: cover;
    object-position: center; /* Keeps the middle of the photo focused */
}
#cse-search-box {
  display: inline-flex;            
  align-items: stretch;           
  max-width: 480px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #d0d7de;
  border-radius: 999px;           
  overflow: hidden;               
  background: #fff;
  gap: 0;                         
}


#cse-search-box #search {
  appearance: none;
  border: 0;
  margin: 0;                       /* prevent theme gaps */
  outline: none;
  padding: 0.7rem 0.9rem 0.7rem 1rem;
  font-size: 0.95rem;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;                    /* avoid overflow in flex */
  background: transparent;
  color: #7B4871;
}

#cse-search-box #search::placeholder {
  color: #9ca3af;
}


#cse-search-box .btnap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  border: 0;
  margin: 0;                       /* prevent theme gaps */
  background: #B88FA6;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
  line-height: 1;                  /* prevents vertical misalignment */
}

#cse-search-box .btnap i {
  font-size: 1rem;
  line-height: 1;
}

/* Nice focus on whole control */
#cse-search-box:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}

/* Hover/active */
#cse-search-box .btnap:hover
 { background: #0b1220;
   color: #f5a623;
}
#cse-search-box .btnap:active { transform: translateY(1px); }

/* Mobile */
@media (max-width: 480px) {
  #cse-search-box #search { font-size: 1rem; padding: 0.85rem 1rem; }
  #cse-search-box .btnap { padding: 0 1rem; }
}


.laliga-wrap
{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

 .laliga-grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .laliga-grid
   {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .laliga-grid
   {
    grid-template-columns: 1fr;
  }
}

 .laliga-grid-2
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .laliga-grid-2
   {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .laliga-grid-2
   {
    grid-template-columns: 1fr;
  }
}

.laliga-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}



@media (max-width: 850px) {
  .laliga-grid-5 {
    grid-template-columns: 1fr;
  }

  
}

.laliga-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100%;
  background: #fff;
  border: 1px solid #ecf1f7;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  padding: 1rem;
  box-sizing: border-box;
}


/* Flex row (KPI strip) */
.laliga-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0;
}
 

.hero {
  overflow: hidden;
}
 .hero h1 {
  color: #dbeafe;
}
 
/* Dark full-width hero */
.hero {
  position: relative;
  background: linear-gradient(135deg, #573d5f 0%, #350455 50%, #46354b 100%);
  color: var(--white);
  padding: 45px 16px 40px;
  text-align: center;
  border-radius: 15px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(244,79,4,.35) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(109, 35, 245, 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.hero-icon {
  font-size: 3.8rem;
  color: var(--orange-lt);
  margin-bottom: 14px;
  display: block;
  filter: drop-shadow(0 0 18px rgba(244,79,4,.6));
  animation: pulse 3s ease-in-out infinite;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-size: .9rem;
  font-weight: 300;
  opacity: .85;
  margin-top: 10px;
}
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-meta i    { color: var(--gold); }
 
/* Card-style image hero */
.laliga-hero {
  border: 1px solid #ecf1f7;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin: .6rem 0 1rem;
}

.laliga-hero img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.laliga-hero .cap {
  padding: .7rem .9rem;
  background: #fff;
}
 

  
/* Subtle info-tile cards (.laliga-kpi / .geo-card) */
.laliga-kpi,
.geo-card {
  border-radius: 12px;
  border: 1px solid #e6e7ea;
}
.laliga-kpi {
  flex: 1 1 220px;
  background: #f7fbff;
  padding: .75rem .9rem;
}
.laliga-kpi b { display: block; font-size: 1.02rem; }
.geo-card {
  background: #f8f9fb;
  padding: 10px 12px;
  margin-top: 10px;
}
 
 select{
    width:100%;
    box-sizing:border-box;
    padding:10px 10px;
    border:1px solid #dcdedc;
    border-radius:10px;
    font-size:16px;
    line-height:1.2;
    outline:none;
    margin:.35rem 0;
	 max-width:520px;
  }
  select:focus{
    border-color:#17A2B8;
  }
input{
      width:100%;padding:.6rem .8rem;
      border:1.5px solid #ecf1f7;border-radius:8px;
      font-size:.97rem;color:#1e293b;
      background:#f7fbff;
      outline:none;
      transition:border-color .2s,box-shadow .2s;
      box-sizing:border-box;
	max-width:520px;
    }
   input:focus{
      border-color:#0b5ed7;
      box-shadow:0 0 0 3px rgba(11,94,215,.1);
      background:#fff;
    }
 
/* Country card sub-elements */
.country-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.country-meta   { margin: .25rem 0 0; font-size: .9rem; color: #555; }
.country-media  { margin: .5rem 0 1rem; }
.country-details{ margin-bottom: 1rem; }
.country-footer { border-top: 1px solid #f1f5f9; padding-top: 1rem; margin-top: .5rem; }
.country-photo-wrapper { margin-top: .5rem; }
 
/* ---------------------------------------------------
   CALLOUT / NOTE BLOCKS
   .laliga-note and .laliga-tip share the same shape;
   only bg/border color differs.
   .fact-note + .fitnote already merged (kept below).
   .highlight and .qa-block are left-accented too
   but differ enough to stay separate.
--------------------------------------------------- */
 
/* Coloured callout pair */
.laliga-note,
.laliga-tip {
  border-radius: 12px;
  padding: .85rem .95rem;
  margin: .9rem 0;
}
.laliga-note { background: #fff7ed; border: 1px solid #fed7aa; }
.laliga-tip  { background: #f0fdf4; border: 1px solid #bbf7d0; }
 
/* Left-border note (white bg) */
.fact-note,
.fitnote {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--orange);
  border-radius: 6px;
  padding: 18px 20px;
  font-size: .97rem;
  color: var(--mid);
  position: relative;
  transition: box-shadow .2s;
}


 
/* Blue left-border highlight */
.highlight {
  background-color: #eaf2f8;
  border-left: 4px solid #0077b6;
  padding: 8px;
  border-radius: 5px;
}
 
 
/* ---------------------------------------------------
   BUTTONS � PILL STYLE
   Shared shape/color/text; bg & padding per-class.
--------------------------------------------------- */
.laliga-btn,
.country-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 99px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.laliga-btn {
  background: #0b5ed7;
  padding: .48rem .95rem;
  border: 1px solid #ecf1f7;
}
.laliga-btn:hover        { color: #f5a623;}

	 .btnap {
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 99px;
  padding: 8px 20px;
  border: 0;
  color: #fff;
  background: #27E39F;
  line-height: 1;
  font-size: 15px;
  text-rendering: auto;
	 margin: 4px;
}
	.btnap:hover {
  background: #593fd9;
  border-bottom: 1px solid #27E39F;
  color: #f5a623;
}
	
.btn  {
   border-radius: 99px;
   color: #f5f2d5;
  background: #593fd9;
 }


.bnti {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:55px;
  height:55px;
  border-radius:50%;
  background-color:#4814C8;
  color:#fff;
 font-size: 3em;
 font-weight: bolder;
 box-shadow: 1px 1px 0 #999;
}

.btn:hover {
   border-bottom: 2px solid #27E39F;
  color: #f5a623 !important;
}
	

/* ---------------------------------------------------
   IMAGES
   .flag-img and .map-img share border + radius.
   .photo-block and .country-photo share orange border.
--------------------------------------------------- */
 
/* Framed thumbnail images */
.flag-img,
.map-img {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
}
.flag-img { width: 110px; height: 80px; box-shadow: 0 4px 8px rgba(15,23,42,.08); }
.map-img  { width: 120px; height: 120px; }
 
/* Orange-bordered image blocks */
.photo-block,
.country-photo {
  border-radius: 12px;
  border-color: var(--orange-lt);
  display: block;
}
.photo-block {
  margin: 16px 0 40px;
  overflow: hidden;
  border: 3px solid var(--orange-lt);
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
}
.photo-block img      { display: block; width: 100%; height: auto; }
.photo-caption        { background: var(--dark); color: rgba(255,255,255,.75); font-size: .8rem; padding: 9px 14px; }
.photo-caption a      { color: var(--gold); text-decoration: none; }
.photo-caption a:hover{ text-decoration: underline; }
.country-photo        { width: 100%; border: 1px solid var(--orange); }
 
/* ---------------------------------------------------
   MAPS
   #container and #map share the orange border +
   radius + shadow pattern; only height differs.
--------------------------------------------------- */
#container,
#map {
  border: 2px solid var(--orange);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(244,79,4,.15);
}
#container {
  height: 600px;
  min-width: 340px;
  max-width: 950px;
  margin: 0 auto;
}
.map-wrap  { margin: 8px 0 40px; }
#map       { width: 100%; height: 500px; margin-bottom: 10px; }
 
/* ---------------------------------------------------
   TABLES � SHARED DARK BASE
  --------------------------------------------------- */

table.terr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  background: #131c2e;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
 
 
/* terr-table � dark grey header */
table.terr-table thead tr { background: #3d3d3d; color: #fff; }
table.terr-table thead th {
  padding: 12px 16px;
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: left;
}
table.terr-table tbody tr        { border-bottom: 1px solid rgba(255,255,255,0.08); }
table.terr-table tbody tr:last-child { border-bottom: none; }
table.terr-table tbody tr:hover  { background: rgba(255,255,255,0.04); }
table.terr-table tbody td        { padding: 10px 16px; color: #94a3b8; vertical-align: middle; }
table.terr-table td a            { color: #F44F04; text-decoration: none; }
table.terr-table td a:hover      { text-decoration: underline; }
 
/* Legacy tablss */
table.tablss {
  width: 100%;
   border-collapse: collapse;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 6px 25px rgba(0,0,0,0.08);
   }
table.tablss th {
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  background: #27E39F;
  padding: 16px;
  font-size: 1.2em;
}
table.tablss a { text-transform: capitalize; }
table.tablss th, table.tablss td { border: 1px solid #ddd; padding: 10px; }
table.tablss tr:nth-child(odd)  td { background: linear-gradient(0deg, rgb(233, 223, 249) 0%, rgb(246, 235, 255) 30%, rgb(244, 235, 251) 98%); }
table.tablss tr:nth-child(even) td { background: linear-gradient(0deg, rgb(254, 254, 242) 0%, rgb(247, 251, 244) 30%, rgb(233, 241, 237) 98%); }
table.tablss td a            { color: #974bca; text-decoration: none; font-weight: 600; }
 
.table-wrap { overflow-x: auto; margin-bottom: 12px; }

.light-table-filter {
    padding: 10px 32px 10px 32px; /* extra left padding for icon */
    font-size: 1rem;
    border: 1px solid #cfdfed;
    border-radius: 18px;
    width: 280px;
    background: #ffffff;
    box-shadow: 0 7px 8px rgba(0,0,0,0.07);
    transition: all 0.2s;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23888' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0C8.01 14 6 11.99 6 9.5S8.01 5 10.5 5 15 7.01 15 9.5 12.99 14 10.5 14z'/></svg>");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 12px center;
}
       .light-table-filter:focus {
            outline: none;
            border-color: #2c6e9e;
            box-shadow: 0 0 0 3px rgba(44,110,158,0.2);
        }
 


/* ---------------------------------------------------
   BADGES
--------------------------------------------------- */
.laliga-badge {
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: #e30613;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border: 2px dotted #187AFF;
  border-radius: 12px;
}
.laliga-badge:hover { background-color: #c90512; border-color: #8e0a0f; color: #f5a623;}
 
.laliga-badges span {
  display: inline-block;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  border-radius: 999px;
  padding: .18rem .55rem;
  margin: .15rem .2rem 0 0;
  font-size: .82rem;
}
 
/* ---------------------------------------------------
   LIST STYLES (inside .laliga wrapper)
--------------------------------------------------- */
.laliga ul,
.laliga ol {
  padding-left: 2rem;
  margin-bottom: 1.2rem;
  line-height: 1.8;
  color: #222;
  font-size: 1.05rem;
}
.laliga ul li,
.laliga ol li { margin-bottom: .6rem; }
.laliga ul li { position: relative; }
.laliga ul li::marker,
.laliga ol li::marker { font-size: 1.4rem; color: #593fd9; }
.laliga ol li::marker { font-weight: 600; }
 
/* ---------------------------------------------------
   SECTION TITLES & DIVIDERS
--------------------------------------------------- */
.section-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title i { color: var(--orange); font-size: 1.1rem; }
.section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--orange-lt), transparent);
  margin-left: 10px;
}
.intro-section            { padding: 48px 0 32px; }
.intro-section p          { font-size: 1.08rem; color: var(--mid); max-width: 980px; }
.intro-section p + p      { margin-top: 14px; }
hr.divider                { border: none; border-top: 1px solid var(--border); margin: 44px 0; }
.laliga-timeline          { margin: .6rem 0 1rem; padding-left: 1.15rem; }
.laliga-timeline li       { margin: .35rem 0; }
.laliga-small {
  font-size: .85rem;
  color: #d4a017; /* darker gold — readable on white, still warm on dark */
  text-shadow: 0 0 1px rgba(0,0,0,.35), 0 0 1px rgba(255,255,255,.15);
}
 
 
/* ---------------------------------------------------
   CITY / GEO INPUT
--------------------------------------------------- */
#cityInput {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dcdedc;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}
 
/* ---------------------------------------------------
   PULSING MAP MARKER
--------------------------------------------------- */
.marker {
  width: 18px;
  height: 18px;
  background: var(--orange);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.marker::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  left: 0; top: 0;
  background: var(--orange);
  animation: pulse 2s infinite;
  opacity: .6;
}
 

/* ---------------------------------------------------
   SOURCE BAR
--------------------------------------------------- */
.source-bar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 18px;
    font-size: .82rem;
    color: #888;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 48px;
  }
  .source-bar a { color: var(--orange); }

  @media (max-width: 600px) {
    .source-bar {
      flex-direction: column;
      gap: 6px;
      padding: 12px 14px;
    }
  }
 
/* ---------------------------------------------------
   ANIMATIONS
--------------------------------------------------- */
@keyframes markerPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(2.5); opacity: 0;  }
}

.marker::after {
  animation: markerPulse 2s infinite;
}
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(244,79,4,.6)); }
  50%       { filter: drop-shadow(0 0 30px rgba(244,79,4,.9)); }
}


/* ---------------------------------------------------
   MAIN MENU
--------------------------------------------------- */

/* Navbar wrapper */
nav.navbar {
  background: transparent;
  border-bottom: none;
  padding: 7px 9px;
  font-family: 'Quicksand', sans-serif;
}

/* The UL list — targets the metismenu class Joomla outputs */
ul.mod-menu,
ul.metismenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each LI pill — targets metismenu-item instead of nav-item */
ul.mod-menu .metismenu-item,
ul.metismenu .metismenu-item {
  border-radius: 68px;
  background: rgba(83, 20, 85, 0.75);
  transition: background .2s, transform .2s;
  margin: 0 !important;
}

ul.mod-menu .metismenu-item:hover,
ul.metismenu .metismenu-item:hover {
  background: var(--orange-dk);
  transform: translateY(-1px);
}

/* Link text */
ul.mod-menu .metismenu-item a,
ul.metismenu .metismenu-item a {
  display: block;
  padding: 5px 8px;
  font-size: .88rem;
  font-weight: 600;
  font-family: 'Quicksand', sans-serif;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  letter-spacing: .02em;
  border-radius: 12px;
  transition: color .2s;
  white-space: nowrap;
  margin: 1px !important;
}

ul.mod-menu .metismenu-item a:hover,
ul.metismenu .metismenu-item a:hover {
  color: var(--white);
}

/* Active / current page — orange pill
   Joomla outputs both 'current' and 'active' on the active item */
ul.mod-menu .metismenu-item.current,
ul.mod-menu .metismenu-item.active,
ul.metismenu .metismenu-item.current,
ul.metismenu .metismenu-item.active {
  background: var(--orange);
}

ul.mod-menu .metismenu-item.current a,
ul.mod-menu .metismenu-item.active a,
ul.metismenu .metismenu-item.current a,
ul.metismenu .metismenu-item.active a {
  color: var(--white);
}

ul.mod-menu .metismenu-item.current:hover,
ul.mod-menu .metismenu-item.active:hover,
ul.metismenu .metismenu-item.current:hover,
ul.metismenu .metismenu-item.active:hover {
  background: var(--orange-dk);
}

/* Mobile hamburger button */
nav.navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 5px 9px;
  background: var(--dark);
  color: var(--white);
  transition: background .2s;
}

nav.navbar .navbar-toggler:hover {
  background: var(--orange-dk);
}

/* Mobile collapsed menu */
@media (max-width: 768px) {

  nav.navbar {
    padding: 8px 20px;
  }

  ul.mod-menu,
  ul.metismenu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 0;
    margin-top: 8px;
    background: transparent;
  }

  ul.mod-menu .metismenu-item,
  ul.metismenu .metismenu-item {
    border-radius: 9px;
    width: 100%;
  }

  ul.mod-menu .metismenu-item a,
  ul.metismenu .metismenu-item a {
    padding: 12px 18px;
    border-radius: 9px;
  }

}


.map-header { position: relative; background: linear-gradient(135deg, #03381B 0%, #024F37 50%, #02291E 100%); color: #fff; padding: 32px 28px 28px; border-radius: 14px 14px 0 0; overflow: hidden; }
  .map-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(244,79,4,.35) 0%, transparent 65%), radial-gradient(ellipse at 15% 80%, rgba(245,166,35,.18) 0%, transparent 55%); pointer-events: none; }
  .map-header h2 { font-size: 1.55rem; font-weight: 700; margin-bottom: 6px; position: relative; z-index: 1; }
  .map-header p  { font-size: .92rem; opacity: .82; font-weight: 300; position: relative; z-index: 1; }
  .legend-bar { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; background: #fff; border: 1px solid var(--border); border-top: none; padding: 12px 20px; font-size: .88rem; color: var(--mid); }
  .legend-item { display: flex; align-items: center; gap: 7px; font-weight: 500; }
  .legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,.15); }
  .map-footer { background: #fff; border: 2px solid var(--orange); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; padding: 10px 20px; font-size: .8rem; color: #888; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
  .mapboxgl-popup-content { padding: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18) !important; min-width: 270px; max-width: 310px; font-family: 'Segoe UI', Arial, sans-serif; border: none !important; }
  .mapboxgl-popup-close-button { font-size: 1.1rem; color: #fff; padding: 4px 8px; z-index: 10; right: 2px; top: 2px; }
  .mapboxgl-popup-close-button:hover { background: rgba(0,0,0,.2); border-radius: 4px; }
  .mapboxgl-popup-tip { display: none; }
  .popup-header { padding: 14px 16px 10px; color: #fff; }
  .popup-header.travel   { background: linear-gradient(135deg, #c93e00, var(--orange)); }
  .popup-header.hospital { background: linear-gradient(135deg, #005a8e, #0077b6); }
  .popup-header .popup-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: 4px; }
  .popup-header h3 { color: #11cf1b; font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0; }
    .popup-body { padding: 12px 16px 14px; background: #fff; }
  .popup-row { display: flex; gap: 8px; align-items: flex-start; font-size: .83rem; color: var(--mid); margin-bottom: 6px; line-height: 1.4; }
  .popup-row i { flex-shrink: 0; margin-top: 2px; width: 14px; text-align: center; }
  .popup-row i.travel-icon   { color: var(--orange); }
  .popup-row i.hospital-icon { color: #0077b6; }
  .popup-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
  .popup-tag { display: inline-block; background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; border-radius: 999px; font-size: .72rem; font-weight: 600; padding: 2px 9px; }
  .popup-tag.travel-tag   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
  .popup-tag.hospital-tag { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
  .popup-directions { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--orange); color: #fff; text-decoration: none; font-size: .84rem; font-weight: 600; padding: 9px 14px; border-radius: 8px; transition: background .2s; margin-top: 4px; }
  .popup-directions.hospital-dir { background: #0077b6; }
  .popup-directions:hover { filter: brightness(1.1); }
  .marker-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); position: relative; transition: transform .15s; }
  .marker-dot:hover { transform: scale(1.25); }
  .marker-dot.travel   { background: var(--orange); color: var(--orange); }
  .marker-dot.hospital { background: #0077b6; color: #0077b6; }
  .marker-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: .35; animation: ring 2.2s ease-out infinite; }
  @keyframes ring { 0% { transform: scale(1); opacity: .4; } 80% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
  .loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
  @media (max-width: 700px) { .loc-grid { grid-template-columns: 1fr; } }
  .loc-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05); display: flex; gap: 12px; align-items: flex-start; }
  .loc-dot { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; margin-top: 2px; }
  .loc-dot.travel   { background: var(--orange); }
  .loc-dot.hospital { background: #0077b6; }
  .loc-card h4 { font-size: .92rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
  .loc-card p  { font-size: .8rem; color: var(--mid); margin: 1px 0; }
  .loc-card a  { font-size: .8rem; color: var(--orange); text-decoration: none; font-weight: 600; }
  .loc-card a.hosp-link { color: #0077b6; }

.th-site-footer {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 48px 20px 0;
  box-sizing: border-box !important;
  background: #593fd9;
  color: #fff;
}

/*
  Break the footer out of Joomla's centered container.
  This matches the method used by the working AhmadLatif footer.
*/
@media (min-width: 768px) {
  .th-site-footer {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
  }
}

/* Remove Joomla module spacing around this footer */
.container-footer,
.container-footer > div,
.container-footer .grid-child,
.footer,
.footer > div,
.footer .grid-child,
.footer .mod-custom,
.footer .custom,
.mod-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Prevent the parent module from clipping the full-width footer */
.container-footer,
.footer,
.footer .grid-child,
.footer .mod-custom,
.footer .custom {
  overflow: visible !important;
}

/* Center the actual footer content */
.th-footer-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Main footer grid */
.th-footer-grid{
    display:grid;
    grid-template-columns:1.45fr repeat(4,1fr);
    column-gap:1.4rem;
    row-gap:2rem;
    align-items:start;
}

/* Social icons */
.th-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Bottom bar */
.th-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Tablet */
@media (max-width: 900px) {
  .th-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .th-site-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 34px 16px 0;
    left: auto !important;
    transform: none !important;
  }

  .th-footer-container {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 560px) {
  .th-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-bottom: 28px;
  }

  .th-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .th-footer-legal {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .th-footer-grid nav a {
    margin-bottom: 6px !important;
  }
}
.navbar-brand .site-description {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ff7c3f;
    font-family: 'Quicksand', sans-serif;
    font-style: italic;
        padding-left: 14px; 
}
.com-contact__container h2 {
    display: none !important;
}