:root {
  --color-site-red: #ff0000;
  --color-site-red-1: #ff4d00;
  --color-site-red-2: #c6431a;
  --color-site-red-3: #ff7b52;
  --color-site-black: #000;
  --color-site-black-1: #232323;
  --color-site-black-2: #2f2f2f;
  --color-site-grey: #ededed;

  --font-montserrat: "Montserrat", sans-serif;
  --font-lato: "Lato", sans-serif;
}

body {
  font-family: var(--font-montserrat);
}

.font-montserrat {
  font-family: var(--font-montserrat);
}
.font-lato {
  font-family: var(--font-lato);
}

.container-sm {
  max-width: 1150px;
}

.container-xs {
  max-width: 900px;
}

/* Line Height */
.lh-20 {
  line-height: 20px;
}
.lh-21 {
  line-height: 21px;
}
.lh-22 {
  line-height: 22px;
}
.lh-23 {
  line-height: 23px;
}
.lh-24 {
  line-height: 24px;
}
.lh-25 {
  line-height: 25px;
}
.lh-26 {
  line-height: 26px;
}
.lh-27 {
  line-height: 27px;
}
.lh-28 {
  line-height: 28px;
}
.lh-29 {
  line-height: 29px;
}
.lh-30 {
  line-height: 30px;
}
.lh-31 {
  line-height: 31px;
}
.lh-32 {
  line-height: 32px;
}
.lh-33 {
  line-height: 33px;
}
.lh-34 {
  line-height: 34px;
}
.lh-35 {
  line-height: 35px;
}
.lh-36 {
  line-height: 36px;
}
.lh-37 {
  line-height: 37px;
}
.lh-38 {
  line-height: 38px;
}
.lh-39 {
  line-height: 39px;
}
.lh-40 {
  line-height: 40px;
}
.lh-41 {
  line-height: 41px;
}
.lh-42 {
  line-height: 42px;
}
.lh-43 {
  line-height: 43px;
}
.lh-44 {
  line-height: 44px;
}
.lh-45 {
  line-height: 45px;
}
.lh-46 {
  line-height: 46px;
}
.lh-47 {
  line-height: 47px;
}
.lh-48 {
  line-height: 48px;
}
.lh-49 {
  line-height: 49px;
}
.lh-50 {
  line-height: 50px;
} /* Height */
.h-100px {
  height: 100px !important;
}
.h-110px {
  height: 110px !important;
}
.h-120px {
  height: 120px !important;
}
.h-130px {
  height: 130px !important;
}
.h-140px {
  height: 140px !important;
}
.h-150px {
  height: 150px !important;
}
.h-160px {
  height: 160px !important;
}
.h-170px {
  height: 170px !important;
}
.h-180px {
  height: 180px !important;
}
.h-190px {
  height: 190px !important;
}
.h-200px {
  height: 200px !important;
}
.h-210px {
  height: 210px !important;
}
.h-220px {
  height: 220px !important;
}
.h-230px {
  height: 230px !important;
}
.h-240px {
  height: 240px !important;
}
.h-250px {
  height: 250px !important;
}
.h-260px {
  height: 260px !important;
}
.h-270px {
  height: 270px !important;
}
.h-280px {
  height: 280px !important;
}
.h-290px {
  height: 290px !important;
}
.h-300px {
  height: 300px !important;
} /* Font Size */
.fs-10 {
  font-size: 10px;
}
.fs-11 {
  font-size: 11px;
}
.fs-12 {
  font-size: 12px;
}
.fs-13 {
  font-size: 13px;
}
.fs-14 {
  font-size: 14px;
}
.fs-15 {
  font-size: 15px;
}
.fs-16 {
  font-size: 16px;
}
.fs-17 {
  font-size: 17px;
}
.fs-18 {
  font-size: 18px;
}
.fs-19 {
  font-size: 19px;
}
.fs-20 {
  font-size: 20px;
}
.fs-21 {
  font-size: 21px;
}
.fs-22 {
  font-size: 22px;
}
.fs-23 {
  font-size: 23px;
}
.fs-24 {
  font-size: 24px;
}
.fs-25 {
  font-size: 25px;
}
.fs-26 {
  font-size: 26px;
}
.fs-27 {
  font-size: 27px;
}
.fs-28 {
  font-size: 28px;
}
.fs-29 {
  font-size: 29px;
}
.fs-30 {
  font-size: 30px;
}
.fs-31 {
  font-size: 31px;
}
.fs-32 {
  font-size: 32px;
}
.fs-33 {
  font-size: 33px;
}
.fs-34 {
  font-size: 34px;
}
.fs-35 {
  font-size: 35px;
}
.fs-36 {
  font-size: 36px;
}
.fs-37 {
  font-size: 37px;
}
.fs-38 {
  font-size: 38px;
}
.fs-39 {
  font-size: 39px;
}
.fs-40 {
  font-size: 40px;
}
.fs-41 {
  font-size: 41px;
}
.fs-42 {
  font-size: 42px;
}
.fs-43 {
  font-size: 43px;
}
.fs-44 {
  font-size: 44px;
}
.fs-45 {
  font-size: 45px;
}
.fs-46 {
  font-size: 46px;
}
.fs-47 {
  font-size: 47px;
}
.fs-48 {
  font-size: 48px;
}
.fs-49 {
  font-size: 49px;
}
.fs-50 {
  font-size: 50px;
} /* Margin */
.mt-6 {
  margin-top: 6rem !important;
}
.mt-7 {
  margin-top: 7rem !important;
}
.mt-8 {
  margin-top: 8rem !important;
}
.mt-9 {
  margin-top: 9rem !important;
}
.mt-10 {
  margin-top: 10rem !important;
}
.mb-6 {
  margin-bottom: 6rem !important;
}
.mb-7 {
  margin-bottom: 7rem !important;
}
.mb-8 {
  margin-bottom: 8rem !important;
}
.mb-9 {
  margin-bottom: 9rem !important;
}
.mb-10 {
  margin-bottom: 10rem !important;
}
.ms-6,
.mx-6 {
  margin-left: 6rem !important;
}
.ms-7,
.mx-7 {
  margin-left: 7rem !important;
}
.ms-8,
.mx-8 {
  margin-left: 8rem !important;
}
.ms-9,
.mx-9 {
  margin-left: 9rem !important;
}
.ms-10,
.mx-10 {
  margin-left: 10rem !important;
}
.me-6,
.mx-6 {
  margin-right: 6rem !important;
}
.me-7,
.mx-7 {
  margin-right: 7rem !important;
}
.me-8,
.mx-8 {
  margin-right: 8rem !important;
}
.me-9,
.mx-9 {
  margin-right: 9rem !important;
}
.me-10,
.mx-10 {
  margin-right: 10rem !important;
}
.my-6 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}
.my-7 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}
.my-8 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}
.my-9 {
  margin-top: 9rem !important;
  margin-bottom: 9rem !important;
}
.my-10 {
  margin-top: 10rem !important;
  margin-bottom: 10rem !important;
} /* Padding */
.pt-6 {
  padding-top: 6rem !important;
}
.pt-7 {
  padding-top: 7rem !important;
}
.pt-8 {
  padding-top: 8rem !important;
}
.pt-9 {
  padding-top: 9rem !important;
}
.pt-10 {
  padding-top: 10rem !important;
}
.pb-6 {
  padding-bottom: 6rem !important;
}
.pb-7 {
  padding-bottom: 7rem !important;
}
.pb-8 {
  padding-bottom: 8rem !important;
}
.pb-9 {
  padding-bottom: 9rem !important;
}
.pb-10 {
  padding-bottom: 10rem !important;
}
.ps-6,
.px-6 {
  padding-left: 6rem !important;
}
.ps-7,
.px-7 {
  padding-left: 7rem !important;
}
.ps-8,
.px-8 {
  padding-left: 8rem !important;
}
.ps-9,
.px-9 {
  padding-left: 9rem !important;
}
.ps-10,
.px-10 {
  padding-left: 10rem !important;
}
.pe-6,
.px-6 {
  padding-right: 6rem !important;
}
.pe-7,
.px-7 {
  padding-right: 7rem !important;
}
.pe-8,
.px-8 {
  padding-right: 8rem !important;
}
.pe-9,
.px-9 {
  padding-right: 9rem !important;
}
.pe-10,
.px-10 {
  padding-right: 10rem !important;
}
.py-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-8 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}
.py-9 {
  padding-top: 9rem !important;
  padding-bottom: 9rem !important;
}
.py-10 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

/* HIGHLIGHT */
.text-highlight {
  color: var(--color-site-red-2);
  font-weight: 600;
  text-decoration: none;
}

.bg-site-red,
.btn.bg-site-red:hover {
  background: var(--color-site-red);
}

.text-site-red {
  color: var(--color-site-red);
}

.bg-site-grey,
.btn.bg-site-grey:hover {
  background: var(--color-site-grey);
}

.text-site-grey {
  color: var(--color-site-grey);
}

.navbar-custom .nav-link {
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
}

/* ===== TOP BAR ===== */
.topbar {
  background: #000;
  color: #fff;
  font-size: 14px;
}

.topbar .icon {
  color: #ff4d00;
  margin-right: 6px;
}

.topbar a {
  color: #fff;
  text-decoration: none;
}

.topbar .btn-book {
  background: #ff1a1a;
  border-radius: 30px;
  padding: 8px 20px;
  color: #fff;
  font-weight: 600;
}

.topbar .btn-book:hover {
  background: #e60000;
}

.topnav-fb-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ===== NAVBAR ===== */
.navbar-custom {
  background: #1f3b57;
}

.navbar-custom .nav-link {
  color: #fff;
  font-weight: 500;
  padding: 15px 12px;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:active,
.navbar-custom .nav-link:focus {
  color: #aeaeae !important;
}

/* ===== HERO HEADER MODE ===== */
.navbar-transparent {
  position: absolute;
  width: 100%;
  top: 55px;
  left: 0;
  z-index: 999;
}

.menu-fallback {
  height: 75px;
}

/* HERO SECTION */
.hero {
  height: 100vh;
  background: url("assets/hero.jpg") center/cover no-repeat;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.hero-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 340px;
}

.hero-banner-title {
  position: absolute;
  bottom: 30px;
  color: white;
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 600;
}

/* LOGO */
.logo {
  height: 50px;
}

/* DROPDOWN */
.dropdown-menu {
  border-radius: 0;
  padding: 10px 0;
}

.dropdown-menu a {
  padding: 4px 16px;
  color: #c6431a;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-menu a:hover {
  background: #f5f5f5;
  color: #ff4d00;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-site-black-1);
  color: #fff;
  padding: 60px 0 0;
}

.footer h5 {
  font-size: 20px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.footer p,
.footer li {
  font-size: 14px;
  color: #ddd;
  line-height: 1.8;
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-site-red-1);
}

/* SOCIAL ICONS */
.footer-social {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.footer-social a {
  width: 45px;
  height: 45px;
  background: var(--color-site-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* BOTTOM BAR */
.footer-bottom {
  border-top: 1px solid #444;
  margin-top: 40px;
  padding: 15px 0;
  font-size: 14px;
  color: #ccc;
}

/* BACK TO TOP */
.back-to-top {
  position: fixed;
  /* change from absolute */
  left: 20px;
  bottom: 20px;
  background: var(--color-site-red-1);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 9999;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-site-red-1);
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--color-site-red-3);
}

/* Section */
/* TITLE */
.section-title {
    font-size: 44px;
    font-weight: 400;
    margin-bottom: 25px;
}

/* SUB TITLE */
.section-subtitle {
    font-size: 28px;
    font-weight: 400;
    margin-top: 35px;
    margin-bottom: 15px;
}

/* PARAGRAPH */
.section-text {
    font-family: var(--font-lato);
    font-size: 18px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 18px;
}

/* ===== CTA BANNER ===== */
.cta-banner {
  background: url("../images/bg-enjoy-ride.jpg") center/cover no-repeat;
  position: relative;
  height: 420px;
}

.cta-direction-banner {
  background: url("../images/bg-direction.jpg") center/cover no-repeat;
}

/* DARK OVERLAY */
.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-direction-banner .cta-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* TITLE */
.cta-title {
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 15px;
}

/* DESC */
.cta-desc {
  color: #ddd;
  font-size: 18px;
  margin-bottom: 25px;
}

/* BUTTON */
.cta-btn {
  display: inline-block;
  background: var(--color-site-red);
  color: #fff;
  padding: 12px 28px;
  border-radius: 40px;
  font-weight: 500;
  text-decoration: none;
}

.cta-btn:hover {
  background: #e60000;
  color: #fff;
}

.custom-check {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.custom-check li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.custom-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #e74c3c;
  font-size: 18px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.check-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-size: 18px;
}

.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color-site-red-2);
}

.site-section{
  padding: 80px 0;
}


/* Blog */
.blog-content {
  font-size:16px; 
  line-height:1.8;
}

.blog-content p {
  margin-bottom: 18px;
}

.blog-content h5 {
  margin-top: 20px;
  font-weight: 600;
}

.blog-card img {
  height: 180px;
  object-fit: cover;
  width: 100%;
}

/* GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

/* CARD */
.blog-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  margin-bottom: 10px;
  box-shadow: 1px 1px 2px #f2f2f2;
  transition: 0.2s linear all;
}

.blog-card img:hover {
  transform: scale(1.06);
}

.recent-blog .blog-card img{
  height: 180px;
}

.blog-date {
  font-size: 13px;
  color: #888;
}

.blog-card h3 {
  font-size: 18px;
  margin: 10px 0;
}

.blog-card p {
  font-size: 15px;
  color: #555;
}

@media (min-width: 1100px) {
  .navbar-transparent {
    background: #0000002b !important;
  }
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* MOBILE FIX */
@media (max-width: 991px) {
  .logo {
    height: 40px;
  }
  .menu-fallback {
    display: none;
  }
  .footer-social {
    justify-content: center;
  }
  .topbar .right-items {
    margin-top: 10px;
    text-align: center;
  }
  .topbar-left-section{
    width: 100%;
    justify-content: center;
  }
  .topbar-right-section{
    width: 100%;
    justify-content: center;
  }

  .navbar-transparent {
    top: 86px;
  }

  .menu-fallback {
    height: 86px;
  }

  .cta-banner {
    height: 300px;
  }

  .cta-title {
    font-size: 24px;
  }

  .cta-desc {
    font-size: 16px;
  }
}