:root {
  --mapnbag-main: #00B5AD;
  --mapnbag-dark: #009c95;
  --mapnbag-darker: #008b82;
  --mapnbag-darkest: #007067;
  --mapnbag-light: #00c7c1;
  --mapnbag-lighter: #00B5AD80;
  --mapnbag-disabled: #b3c8c7;
  --mapnbag-darkgrey: #505050;
}

body {
  margin: 0;
  padding: 0;
  /* background: url('../img/backgrounds/landing.webp') no-repeat center center fixed;
  background-size: cover;
  backdrop-filter: blur(7px); */
  /* background-color: var(--mapnbag-darkest); */
  background-color: white;
  /* Allow body to grow with content so backgrounds don't cut off on mobile */
  min-height: 100%;
  /* font-family: 'Source Sans Pro', sans-serif; */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
  min-height: 100%;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.37); */
  z-index: -1;
}

.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  background-color: rgba(177, 177, 177, 0.23);
  /* backdrop-filter: blur(7px); */
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  /* color: white; */
  width: 80%;
  max-width: 800px;
}

.btn.btn-primary,
a.btn.btn-primary {
  /* Force primary buttons to use the site color instead of Bootstrap default blue */
  background-color: var(--mapnbag-main) !important;
  border-color: var(--mapnbag-main) !important;
  color: #fff !important;
}

.btn.btn-primary:hover,
a.btn.btn-primary:hover {
  background-color: var(--mapnbag-dark) !important;
  border-color: var(--mapnbag-dark) !important;
}

.btn.btn-primary:active,
a.btn.btn-primary:active {
  background-color: var(--mapnbag-darker) !important;
  border-color: var(--mapnbag-darker) !important;
}

.btn.btn-primary:focus,
a.btn.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 173, 0.5) !important;
}

.footer {
  color: var(--mapnbag-main);
  text-align: center;
  padding: 8px 0;
  margin-top: auto;
}

.footer-compact .footer-inner {
  padding: 4px 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .overlay {
    width: 90%;
  }
}

.text-mapnbag-main {
  color: var(--mapnbag-main);
}

ol,
ul {
  padding-left: 0px;
}

.rounded {
  border-radius: 15px !important;
}

.color-darkgrey {
  color: var(--mapnbag-darkgrey);
}

.login-icon {
  /* position: absolute;
  top: 15px;
  right: 15px; */
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  /* background: rgba(0, 181, 173, 0.8); */
  border-radius: 10px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.login-icon:hover {
  /* background: rgba(0, 181, 173, 1); */
  transform: scale(1.1);
}

.tooltip-inner {
  background-color: var(--mapnbag-main);
  color: white;
  font-size: 14px;
  border-radius: 5px;
}

.tooltip .tooltip-arrow {
  display: none;
}

.mb-7 {
  padding-bottom: 10rem;
}

.navbar {
  /* background-color: rgba(255, 255, 255, 0.9); */
  backdrop-filter: blur(7px);
  /* background-color: var(--mapnbag-main); */
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar .container {
  max-width: 1320px;
  padding-left: 0;
  padding-right: 0;
}

.navbar .navbar-brand img {
  height: 35px;
}

.navbar .login-icon {
  color: white;
  font-size: 1.5rem;
}

/* Align nav icons + language toggle on a common center line (desktop + mobile) */
.navbar-nav {
  align-items: center;
  gap: 12px;
}

.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.navbar .login-icon {
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
  border-radius: 10px;
}

.lang-toggle {
  min-height: 36px;
}

/* Language switcher */
.lang-switcher {
  position: relative;
}

.lang-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.lang-abbrev {
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lang-menu {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 6px 0;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  display: none;
  z-index: 1200;
}

.lang-switcher.open .lang-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: var(--mapnbag-darkgrey);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.lang-option:hover {
  background: rgba(0, 181, 173, 0.12);
  color: var(--mapnbag-main);
}

.lang-option.active {
  background: rgba(0, 181, 173, 0.18);
  color: var(--mapnbag-main);
}

@media (max-width: 576px) {
  .lang-toggle {
    padding: 6px 8px;
    min-width: 40px;
  }

  .lang-menu {
    min-width: 150px;
  }
}

.maincontent {
  padding: 20px;
  /* Base top offset for the landing area (desktop/tablet) */
  padding-top: 10rem;
  border-radius: 15px;
  /* margin-top: 50px; */
}

.tab-content {
  /* background-color: rgba(177, 177, 177, 0.23);
  backdrop-filter: blur(7px); */
  /* background: white; */
  padding: 20px;
  border-radius: 8px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .tab-content {
    padding: 15px;
  }
}

.nav-tabs {
  justify-content: center;
  --bs-nav-tabs-border-width: none;
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

.nav-tabs .nav-link {
  background-color: var(--mapnbag-lighter);
  color: white;
  border-radius: 20px;
}

.nav-tabs .nav-link:hover {
  background-color: var(--mapnbag-main);
  color: white;
}

.nav-tabs .nav-link.active {
  background-color: var(--mapnbag-main);
  color: white;
}

.list-unstyled li {
  list-style-type: none;
}

.bg-w {
  background-color: white;
}

.inherit-top100 {
  position: relative;
  padding-top: 6rem;
  /* padding-bottom: 30px; */
  color: white;
}

.color-main {
  color: var(--mapnbag-main);
}

.color-darker {
  color: var(--mapnbag-darker);
}

.color-darkest {
  color: var(--mapnbag-darkest);
}

.w-85 {
  width: 88%;
}

.text-justify {
  text-align: justify;
}

.landing-hr-autowidth {
  width: 90%;
}

@media (min-width: 769px) {
  .landing-hr-autowidth {
    width: 60%;
  }
}

.container-fluid {
  background-color: var(--mapnbag-main);
  padding-bottom: 20px;
}

.display-6 {
  font-size: calc(1.5rem + 1.5vw);
  font-weight: 600;
  line-height: 1.2;
}

.fs-5 {
  font-size: 1.15rem !important;
}

.btn-whatsapp {
  background-color: #25d366 !important;
  color: white !important;
  border-color: #25d366 !important;
}

.btn-whatsapp:hover {
  background-color: #1aa74d !important;
  color: white !important;
  border-color: #1aa74d !important;
}

.btn-whatsapp:active {
  background-color: #42a867 !important;
  color: white !important;
  border-color: #42a867 !important;
}

.link-contact-mapnbagmain {
  color: black;
}

.link-contact-mapnbagmain:hover {
  color: var(--mapnbag-main) !important;
}

/* Full-bleed helper: allows background sections to extend full viewport width
   even inside a centered container */
.full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.booking-bg {
  background-image: url('/dist/img/landing/landing_booking_background.jpg');
  /* Use min-height to ensure the background spans the entire dynamic section height */
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {

  /* On mobile, allow additional vertical growth while keeping background attached */
  .booking-bg {
    background-attachment: scroll;
    background-size: cover;
    min-height: 100vh;
    /* ensures at least viewport height, rest will auto-extend */
  }
}

@media (max-width: 768px) {
  .mobile-margin8rem {
    margin-top: 8rem;
  }
}

@media (min-width: 769px) {
  .desktop-padding-top-7rem {
    padding-top: 7rem !important;
  }
}

/* When booking background is active, make sure the html/body backgrounds are transparent
   and the image covers the full viewport. This avoids the white background from the
   default body rule showing below the image. */
html.booking-bg, body.booking-bg {
  background-color: transparent !important;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Hide body pseudo-element (if present) when using booking-bg to avoid stacking issues */
body.booking-bg::before {
  display: none;
}

.mainfont {
  font-size: 5.1rem;
}

@media (max-width: 768px) {
  .mainfont {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .fontsize1-1rem {
    font-size: 1.1rem !important;
  }
}