/* ---- Topbar (white thin strip) ---- */
.Topbar {
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,0.06);
  color:#6b6b6b;
  font-size:13px;
}
.Topbar__inner {
  max-width:1200px;
  margin:0 auto;
  padding:6px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
  
/* Fix: make Sign In / Sign Up visible in top white bar */
.Topbar__right a,
.Topbar__right button,
.Topbar__right span {
    color:#003e52 !important;   /* dark text */
    font-weight:600;
}

.Topbar__right a:hover,
.Topbar__right button:hover {
    color:#ff671b !important;
}

/* --- Fix top white bar visibility on mobile --- */
@media (max-width: 768px) {
    .Topbar {
        display: block !important;       /* ensure top bar is visible */
        height: auto !important;
        padding: 2px 0 !important;
        position: relative !important;
    }

    .Topbar__inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 2px 12px !important;
    }

    /* Make Sign In / Sign Up text visible */
    .Topbar__right,
    .Topbar__right *,
    .Topbar__right a,
    .Topbar__right button,
    .Topbar__right span {
        color:#003e52 !important;
        font-weight:600 !important;
        opacity:1 !important;
        visibility: visible !important;
    }

    /* increase clickable area */
    .Topbar__right a,
    .Topbar__right button {
        padding: 2px 4px !important;
    }
}



/* ---- Main header ---- */
.Header { background:#003e52; color:#fff; margin-bottom:20px;}
.Header__inner {
  max-width:1200px;
  margin:0 auto;
  padding:6px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:50px; /* short header */
  box-sizing:border-box;
}

/* left: logo + nav (logo smaller) */
.Header__left { display:flex; align-items:center;flex:1; gap:20px;}
.Header__logoImg { height:20px; width:150px; display:block; }

/* main nav inline and left-aligned */
.Header__nav { display:block; }
.Header__tabsList {
  display:flex;
  gap:8 !important;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}
.Header__tabsTab {
  padding:6px 0;
  font-size:15px;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  color:inherit;
}

/* right area: only search shown on header */
.Header__right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.Header__search { min-width:350px; max-width:400px;}
.Header__search input, .Header__search .search { width:100%; box-sizing:border-box; font-size:15px; }

/* hide main auth (sign in/up moved to Topbar) */
.Header__auth { display:none !important; }

/* hamburger (hidden on desktop) */
.nav-toggle { display:none; }
.nav-toggle-label { display:none; cursor:pointer; background:transparent; border:0; padding:8px; }
.hamburger { display:inline-block; width:20px; height:2px; background:#fff; position:relative; }
.hamburger::before, .hamburger::after { content:""; position:absolute; left:0; right:0; height:2px; background:#fff; }
.hamburger::before { top:-6px; } .hamburger::after { bottom:-6px; }

/* Mobile menu (hidden until checkbox checked) */
.MobileMenu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998; }
.MobileMenu__panel {
  position:absolute;
  top:0;
  right:0;
  width:320px;
  max-width:86%;
  height:100%;
  background:#fff;
  color:#222;
  box-shadow:-8px 0 24px rgba(0,0,0,0.18);
  transform:translateX(110%);
  transition:transform .26s ease;
  display:flex;
  flex-direction:column;
  padding:14px;
  overflow:auto;
}
.MobileMenu__backdrop { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); display:block; }
.MobileMenu__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.MobileMenu__logoLink img { height:20px; }
.MobileMenu__nav ul { list-style:none; padding:0; margin:12px 0 0 0; display:flex; flex-direction:column; gap:12px; }
.MobileMenu__nav li { padding:8px 4px; font-size:16px; color:#003e52; }

/* show mobile menu when checkbox is checked (checkbox must be sibling of .MobileMenu) */
.nav-toggle:checked ~ .MobileMenu { display:block; }
.nav-toggle:checked ~ .MobileMenu .MobileMenu__panel { transform:translateX(0); }

/* ----- Responsive rules ----- */
@media (max-width: 1024px) {
  .Header__tabsList { gap:14px; }
  .Header__search { min-width:160px; max-width:300px; }
}

@media (max-width: 768px) {
  /* hide desktop nav/search in header; show hamburger */
  .Header__tabsList, .Header__search { display:none !important; }
  .nav-toggle-label { display:inline-flex; align-items:center; }
  .Header__inner { padding:8px 12px; height:52px; }
  .Topbar__inner { padding:6px 12px; }

  /* show small logo alone left */
  .Header__left { gap:12px; }
  .Header__logoImg { height:34px; }

  /* Mobile panel adjustments */
  .MobileMenu__panel { width:86%; max-width:320px; }
}

/* very small screens */
@media (max-width:420px) {
  .Header__logoImg { height:30px; }
  .MobileMenu__panel { width:86%; max-width:300px; }
}

@media (max-width: 768px) {
  .Header__tabsList, .Header__search { display: none !important; }   /* keep desktop unchanged */
  .nav-toggle-label { display: inline-flex; align-items: center; padding: 8px; }
  .Header__inner { padding: 8px 12px; height: 52px; }

  /* ensure hamburger sits right */
  .nav-toggle-label { margin-left: 8px; margin-right: 4px; }

  /* Mobile panel order: top (logo+close) -> search -> nav -> auth */
  .MobileMenu__top { order: 0; }
  .MobileMenu__search { order: 1; padding: 12px 0; }
  .MobileMenu__nav { order: 2; margin-top: 6px; }
  .MobileMenu__auth { order: 3; margin-top: 12px; }

  /* make panel links easy to tap */
  .MobileMenu__nav ul { padding: 6px 0; }
  .MobileMenu__nav li { padding: 12px 8px; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .MobileMenu__nav li a,
  .MobileMenu__nav li * { display:block; width:100%; color:#003e52; text-decoration:none; }

  /* ensure panel slides in and backdrop works */
  .MobileMenu { display: none; }
  .nav-toggle:checked ~ .MobileMenu { display: block; }
  .nav-toggle:checked ~ .MobileMenu .MobileMenu__panel { transform: translateX(0); }

  /* increase z-index so hamburger and panel sit above any other portal UI */
  .MobileMenu__panel { z-index: 10001; }
  .MobileMenu__backdrop { z-index: 10000; }
}

/* MOBILE: reduce logo size */
@media (max-width: 768px) {
    .Header__logoImg {
        height: 18px !important;   /* smaller height */
        width: auto !important;    /* keep proportions clean */
    }
}

/* EXTRA SMALL (optional) */
@media (max-width: 420px) {
    .Header__logoImg {
        height: 15px !important;
    }
}


/* fonts */
.Header__tabsList .Header__tabsTab,
.Header__tabsList .Header__tabsTab * {
    font-family: "Montserrat", "Open Sans", sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff !important;
}





/* footer */


.Footer {
  background: #003e52;
  color: #ffffff;
  padding: 60px 20px 30px;
  margin-top: 60px;
}

.Footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.Footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 20px;
}

.Footer__column {
  display: flex;
  flex-direction: column;
}

.Footer__heading {
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  color: #ffffff;
  text-transform: uppercase;
}

.Footer__text {
  font-size: 14px;
  line-height: 1.7;
  color: #6f8c98;
  margin: 0;
  opacity: 0.95;
}

.Footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.Footer__links li a {
  color: #6f8c98;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  transition: color 0.3s ease;
  display: inline-block;
}

.Footer__links li a:hover {
  color: #ff671b;
}

.Footer__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.Footer__info p strong {
  font-size: 13px;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}
.Footer__info p {
  color: #6f8c98;
}

.Footer__info strong {
  font-weight: 600;
  display: block;
  margin-bottom: 1px;
}

.Footer__column--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Footer__logo {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.Footer__contact {
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.Footer__contact a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.Footer__contact a:hover {
  color: #ff671b;
}

.Footer__copyright {
  font-size: 13px;
  color: #6f8c98;
  margin: 0;
  opacity: 0.85;
}

/* Tablet */
@media (max-width: 1024px) {
  .Footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .Footer__column--logo {
    grid-column: span 2;
    align-items: center;
    text-align: center;
    margin-top: 20px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .Footer {
    padding: 40px 16px 24px;
  }
  
  .Footer__columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .Footer__column--logo {
    grid-column: span 1;
    align-items: center;
    text-align: center;
    margin-top: 10px;
  }
  
  .Footer__logo {
    width: 180px;
    margin-bottom: 16px;
  }
  
  .Footer__heading {
    font-size: 15px;
    margin-bottom: 16px;
  }
  
  .Footer__text,
  .Footer__links li a,
  .Footer__info p,
  .Footer__contact {
    font-size: 13px;
  }
  
  .Footer__copyright {
    font-size: 12px;
  }
}

/* Very small screens */
@media (max-width: 420px) {
  .Footer {
    padding: 30px 12px 20px;
  }
  
  .Footer__logo {
    width: 160px;
  }
}