/* @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"); */

/* @import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root {
  --primary-color: #c83333;
  --secondary-color: #c6ac52;
  --yellow-color: #ffdf01;
  --yellow2-color: #fccc00;
  --text-color: #393d47;
}
* {
  padding-bottom: 0;
}
/* Smooth scrolling for the page */
html {
  scroll-behavior: smooth;
}
body {
  /* font-family: "Tajawal", sans-serif; */
  /* font-family: "Almarai", sans-serif; */
  font-family: "IBM Plex Sans Arabic", sans-serif;
  position: relative;
}
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../imgs/shape.svg);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.1;
  z-index: -1;
}
a,
a:hover {
  text-decoration: none;
}
ul {
  padding: 0;
  list-style: none;
}
.text-primary {
  color: var(--primary-color) !important;
}
.btn {
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 10px;
  /* padding-bottom: 6px; */
}
.btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:focus,
.btn-primary:hover {
  background-color: var(--primary-color) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--primary-color), transparent 70%);
  color: #fff;
}
.btn-primary:focus {
  background-color: color-mix(in srgb, var(--primary-color), transparent 20%);
  transform: translateY(-2px);
  box-shadow: none;
  color: #fff;
}
.btn:active,
.btn-primary:active {
  transform: translateY(0) scale(0.92);
}
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.btn-primary svg {
  margin-top: -3px;
}
@media screen and (max-width: 1024px) {
  .btn-primary {
    padding: 8px;
    font-size: 13px;
  }
}
.btn-outline-dark {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-dark:hover {
  color: #fff;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Custom style for positions [top, bottom, end, start] with: 5px, 10px, etc... classes names [top_5, bottom_5, end_5, start_5] */
.top_5 {
  top: 5px;
}
.bottom_5 {
  bottom: 5px;
}
.end_5 {
  inset-inline-end: 5px;
}
.start_5 {
  inset-inline-start: 5px;
}

/* Top Bar */
.top-bar {
  background-color: color-mix(in srgb, var(--primary-color), transparent 96%);
  font-size: 14px;
}
.top-bar .top-bar-item {
  color: #35211f;
}
.top-bar .top-bar-item a {
  color: var(--primary-color);
  text-decoration: none;
}
.top-bar .top-bar-item a:hover {
  text-decoration: underline;
}
.top-bar .top-bar-item .selected-icon {
  color: var(--primary-color);
  opacity: 1;
  width: 16px;
}
.top-bar .announcement-slider {
  color: var(--primary-color);
  font-weight: 500;
  height: 24px;
  overflow: hidden;
}
.top-bar .announcement-slider .swiper-wrapper {
  height: auto !important;
}
.top-bar .announcement-slider .swiper-slide {
  text-align: center;
  height: 24px;
  line-height: 24px;
}
/* End Top Bar */
/* Header */
.logo_brand {
  width: 150px;
  transition: all 0.3s ease;
}
.logo_brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 1024px) {
  .logo_brand {
    width: 100px;
  }
  .nav.gap-3 {
    gap: 0.4rem !important;
  }
}
@media screen and (max-width: 991px) {
  .offcanvas-nav .nav {
    flex-direction: column;
    padding-top: 2rem;
  }
  .offcanvas-nav .nav .nav-link {
    padding: 0.5rem 1.5rem !important;
    border-bottom: 1px dashed #ddd;
  }
}
@media screen and (max-width: 767px) {
  .logo_brand {
    width: 70px;
  }
  .toggle-menu-btn {
    padding: 0.3rem 0.5rem;
  }
  .toggle-menu-btn svg {
    width: 16px;
    height: 16px;
  }
}
.nav-link {
  font-weight: 600;
}
header .nav-link.link-secondary,
header .nav-link:hover {
  color: var(--primary-color) !important;
}
.header-action-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0.5rem;
  color: #35211f;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.header-action-btn:hover {
  color: var(--primary-color);
}
.header-action-btn .badge {
  position: absolute;
  top: -5px;
  left: -5px;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 0.8rem;
  border-radius: 10px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .dropdown-menu {
  background-color: var(--primary-color);
}
header .dropdown-item {
  font-weight: 600;
  color: #fff;
}
header .dropdown-item:focus,
header .dropdown-item:hover {
  color: var(--yellow-color);
  background-color: transparent;
}
@media screen and (max-width: 991px) {
  .offcanvas-nav {
    width: 250px;
  }
}
/* Offcanvas responsive behavior */
@media screen and (min-width: 992px) {
  .offcanvas-nav {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: none !important;
    width: 50% !important;
  }
  .offcanvas-nav .offcanvas-header {
    display: none !important;
  }
}
/* End Header */
/* Home Banner */
.home_banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  position: relative;
  z-index: 1;
}
.home_banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  backdrop-filter: blur(2px);
  /* linear gradient  --primary-color --secondary-color */
  background-image: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--secondary-color)
  );
  opacity: 0.7;
  z-index: -1;
}
.home_banner h1 {
  color: #fff;
}
.home_banner h1 span {
  /* color: var(--primary-color); */
}
.search-form {
  width: 80%;
  position: absolute;
  bottom: -50px;
}
.ts-control {
  padding: 16px;
}
.ts-control,
.ts-control input,
.ts-dropdown {
  font-size: 16px;
}
.ts-dropdown.single,
.ts-wrapper.single .ts-control {
  border-color: #ddd;
}
.ts-wrapper.single .ts-control {
  background-image: none;
  background-color: #fff;
  box-shadow: none;
  border-radius: 8px;
}
.ts-control > * {
  display: inline-block;
  vertical-align: initial;
  line-height: 1.6;
}
.ts-control .item {
  font-weight: 600;
}
.ts-wrapper.single .ts-control:after {
  content: "";
  border: none;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  left: auto;
  inset-inline-end: 10px;

  vertical-align: middle;
  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: all 0.3s ease;
}
.ts-wrapper.single .ts-control:not(.rtl):after {
  right: auto;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border: none;
  margin-top: 0;
  transform: translateY(-50%) rotate(180deg);
}
.search-form .btn-search {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 1rem 0.8rem;
  /* padding-bottom: 8px; */
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.search-form .btn-search:hover {
  background: color-mix(in srgb, var(--primary-color), transparent 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--primary-color), transparent 70%);
}
.search-form .dropdown_search .btn_search_down {
  padding: 0 16px;
  border: 1px solid #d0d0d0;
  background: #fff;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
  line-height: 18px;
  color: #303030;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: none;

  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.search-form .dropdown_search .btn_search_down span[class*="count_"] {
  color: var(--primary-color);
}
.search-form .dropdown_search .btn_search_down span.item_c {
  text-align: start;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.btn_search_down.dropdown-toggle::after {
  content: "";
  margin: 0;
  vertical-align: middle;
  border: 0;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 10px;

  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: all 0.3s ease;
}
.btn_search_down.dropdown-toggle.show::after {
  transform: rotate(180deg);
}

.search-form .dropdown_search .dropdown-menu {
  background-color: #fff;
  border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: #303030;
  /* min-width: 200px; */
  /* transition: all 0.3s ease; */
  width: 100%;
  max-height: 350px;
  overflow-y: scroll;
}
.search-form .dropdown_search .dropdown-menu li {
  padding: 3px 5px;
  border-bottom: 1px dashed #ddd;
}
.search-form .dropdown_search .dropdown-menu li .form-label {
  font-size: 13px;
}
.search-form .dropdown_search .dropdown-menu li .form-control {
  padding-top: 0.4rem;
  min-height: initial;
}

.room_item {
  border: 1px solid var(--text-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.radio_toggle {
  background-color: var(--text-color);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.1s ease;
}
.btn-check[type="radio"]:checked + .radio_toggle {
  background-color: var(--primary-color);
  color: #fff;
}

.h_inp {
  height: 60px;
}

@media screen and (max-width: 767px) {
  .home_banner h1 {
    font-size: 1.2rem;
  }
  .home_banner p {
    font-size: 1rem !important;
  }
  .home_banner {
    height: auto;
    padding: 2rem 0;
  }
  .search-form {
    width: 90%;
    position: static;
  }
  .search-form form {
    flex-direction: column;
  }
}
/* End Home Banner */
/* About */
.about {
  padding-top: 120px;
}
.about .content {
  padding-right: 40px;
}
.about .content h2 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 30px;
  color: #200f0d;
}
.about .content .description {
  margin-bottom: 60px;
}
.about .content .description .lead {
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 40px;
  color: var(--text-color);
  font-weight: 400;
}
.about .content .description p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: var(--text-color);
}
.about .content .stats-row {
  display: flex;
  gap: 60px;
  margin-bottom: 60px;
}
.about .content .stats-row .stat-item {
  text-align: left;
}
.about .content .stats-row .stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 8px;
}
@media screen and (max-width: 992px) {
  .about .content {
    padding-right: 0;
    margin-bottom: 60px;
  }
}
.about .content .stats-row .stat-item .stat-label {
  font-size: 1rem;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.about .content .cta-section {
  display: flex;
  align-items: center;
  gap: 30px;
}
.about .content .cta-section .btn-primary {
  background-color: var(--primary-color);
  color: #fff;
  padding: 14px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 400;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-color);
}
.about .content .cta-section .btn-primary:hover {
  background-color: transparent;
  color: var(--primary-color);
}
.about .content .cta-section .btn-link {
  color: #200f0d;
  text-decoration: none;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
.about .content .cta-section .btn-link:hover {
  color: var(--primary-color);
}
.about .content .cta-section .btn-link:hover i {
  transform: translateX(4px);
}
.about .content .cta-section .btn-link i {
  transition: transform 0.3s ease;
}
.about .image-container {
  position: relative;
}
.about .image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.about .image-container .image-overlay {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 8px 30px
    color-mix(in srgb, var(--primary-color), transparent 85%);
  min-width: 200px;
}
.about .image-container .image-overlay .overlay-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.about .image-container .image-overlay .overlay-content i {
  font-size: 2rem;
  color: var(--primary-color);
}
.about .image-container .image-overlay .overlay-content .overlay-text h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
  color: #200f0d;
  font-weight: 500;
}
.about .image-container .image-overlay .overlay-content .overlay-text p {
  margin: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--primary-color), transparent 30%);
}
@media screen and (max-width: 992px) {
  .about .image-container {
    /* min-height: 400px; */
  }
}
@media screen and (max-width: 767px) {
  .about {
    padding-top: 2rem;
  }
  .about .content h2 {
    font-size: 1.2rem;
    font-weight: 400;
  }
  .about .content .stats-row {
    gap: 40px;
    flex-wrap: wrap;
  }
  .about .content .stats-row .stat-item .stat-number {
    font-size: 2rem;
  }
  .about .content .description .lead {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 40px;
    color: var(--text-color);
    font-weight: 400;
  }
}
@media screen and (max-width: 576px) {
  .about .content .stats-row {
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 30px;
  }
  .about .content .cta-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .about .content .stats-row .stat-item .stat-number {
    font-size: 1.2rem;
  }
  .about .content .stats-row .stat-item .stat-label {
    font-size: 0.7rem;
  }
  .about .image-container .image-overlay {
    bottom: 20px;
    left: 20px;
    padding: 20px;
  }
}
/* End About */
/* Travels */
.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-color);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button svg {
  position: absolute;
  width: 24px;
  fill: var(--primary-color);
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
[dir="rtl"] .animated-button svg {
  transform: rotate(180deg);
}
.animated-button .arr-1 {
  right: 16px;
}
.animated-button .arr-2 {
  left: -25%;
}
.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: white;
  border-radius: 12px;
}
.animated-button:hover .arr-1 {
  right: -25%;
}
.animated-button:hover .arr-2 {
  left: 16px;
}
.animated-button:hover .text {
  transform: translateX(12px);
}
.animated-button:hover svg {
  fill: white;
}
.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px 622BFF;
}
.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}
.travel-item {
  position: relative;
  /* height: 100%; */
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.travel-item .travel-image {
  border-radius: 8px;
  position: relative;
}
.travel-item .flag-badge {
  position: absolute;
  top: 10px;
  background-color: var(--yellow2-color);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  height: 30px;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.travel-item .flag-badge-1 {
  inset-inline-start: 10px;
  color: var(--primary-color);
}
.travel-item .flag-badge-2 {
  inset-inline-end: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 0.9;
  background-color: var(--primary-color);
  color: #fff;
}
.travel-item .flag-badge span {
  font-weight: 700;
  display: inline-block;
  margin-top: 5px;
}
.travel-item .travel-image img {
  object-fit: cover;
  transition: all 0.3s ease;
}
.travel-item .travel-image:hover img {
  transform: scale(1.05);
}
.travel-item .content {
  padding: 20px;
}
.travel-item h4 a {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.3s ease;
}
.travel-item h4 a:hover {
  color: var(--yellow2-color);
}
.travel-item p {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 1rem;
  font-weight: 500;
}
.travel-item .date-range strong {
  color: var(--primary-color);
}
.custom-swiper-buttons .btn_swiper {
  background-color: var(--text-color);
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: auto;
  height: auto;
}
.custom-swiper-buttons .btn_swiper:hover {
  background-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--primary-color), transparent 70%);
}
.custom-swiper-buttons .btn_swiper:active,
.custom-swiper-buttons .btn_swiper:focus {
  background-color: var(--primary-color);
  transform: translateY(0);
  box-shadow: none;
}
.custom-swiper-buttons .btn_swiper:after {
  font-size: 20px;
}
.custom-swiper-buttons .swiper-pagination-bullet {
  width: 10px;
  height: 6px;
  background-color: var(--text-color);
  opacity: 1;
  border-radius: 0;
  transition: all 0.3s ease;
}
.custom-swiper-buttons .swiper-pagination-bullet-active {
  background-color: var(--primary-color);
  width: 24px;
}
/* End Travels */
/* Testimonials */
.shape-circle-1 {
  position: absolute;
  left: -150px;
  bottom: 0;
  width: 300px;
}
.shape-x-1 {
  position: absolute;
  left: 200px;
  top: 150px;
  animation: rotated 20s linear infinite;
}
.testimonials-title strong {
  font-family: var(--TajawalFont);
  font-weight: 700;
}
.testi-img {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: auto;
}
.testi-img img.logo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
}
.testi-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  margin: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  z-index: -1;
}
.icon-star {
  color: #ffaa17;
}
.comma-icon svg {
  width: 80px;
  height: 80px;
  opacity: 0.08;
}
.txt-comment p {
  font-size: 20px;
  line-height: 1.8;
  font-weight: 600;
}
.user-info {
  margin-top: 2rem;
}
.user-info .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.user-info .user-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.user-info .user-name span {
  font-size: 13px;
  font-weight: 600;
  color: #23a815;
}
.img_after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.img_after img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  position: absolute;
  top: 100px;
  inset-inline-end: 0px;
  transform: rotate(-25deg);
}
/* End Testimonials */
/* $ => Blog */
.blog-item {
  position: relative;
  overflow: hidden;
}
.blog-item .img-blog {
  height: 400px;
}
.blog-item .img-blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.blog-item:hover .img-blog img {
  transform: scale(1.1) rotate(3deg);
}
.blog-item .info-blog {
  position: absolute;
  bottom: -140px;
  max-height: 240px;
  background-color: var(--primary-color);
  padding: 1.5rem 2rem;
  width: 100%;
  display: block;
  color: #fff;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-weight: 600;
}
.blog-item .info-blog:hover strong {
  color: var(--yellow-color);
}
.blog-item:hover .info-blog {
  bottom: 0;
}
/* # => Blog */
/* Footer */
footer {
  border-top: 1px solid #eee;
}
footer p {
  font-size: 16px;
}
.footer-description p {
  color: #333;
  font-weight: 500;
  width: 59%;
  padding-top: 20px;
}
.footer-description p {
  color: #999;
  font-size: 16px;
  width: 80%;
}
footer strong.h4 {
  font-size: 24px;
  text-transform: uppercase;
  color: var(--text-color);
  font-weight: bold;
  margin: 0;
  margin-bottom: 30px;
}
ul.footer-menu li {
  padding-bottom: 10px;
}
ul.footer-menu li a {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  text-transform: capitalize;
}
ul.footer-menu li a i {
  padding-left: 20px;
}
.footer-map {
  display: flex;
  align-items: baseline;
}
.footer-contacts i {
  color: var(--primary-color);
  font-size: 18px;
  width: 40px;
  text-align: center;
}
.footer-map p {
  color: #666;
}
.footer-contacts a {
  color: #666;
  font-size: 16px;
  display: block;
  padding-top: 20px;
}
.footer-contacts svg {
  width: 24px;
  height: 24px;
  color: var(--primary-color);
}
ul.footer-menu li a:hover,
.footer-contacts a:hover {
  color: var(--primary-color);
}
footer .social-icons a {
  border: 1px solid #eee;
}
.footer-copyright {
  padding-top: 25px;
  margin-top: 50px;
  border: 1px solid #eee;
  border-bottom: 0;
  border-inline-start: 0;
  border-inline-end: 0;
  padding-bottom: 25px;
}
.footer-copyright a {
  color: #787878;
  font-size: 14px;
  padding-inline-start: 20px;
}
.footer-copyright p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.socials a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--text-color);
  font-size: 24px;
  text-decoration: none;
  transition: 0.25s;
  border-radius: 50px;
}
.socials svg {
  /* position: absolute; */
  display: flex;
  font-size: 80px;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 2;
  cursor: pointer;
  transform: scale(1);
}
.socials a svg,
.socials a:hover svg {
  fill: #fff;
  color: #fff;
}
.socials a:hover {
  animation: bounce_613 0.4s linear;
}
.socials a.instagram:hover {
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
}
.socials a.whatsapp:hover {
  background: linear-gradient(120deg, #02ff2c, #008a12);
}
.socials a.snapchat:hover {
  background: #fffa3a;
  color: #000;
}
.socials a.snapchat:hover svg {
  color: #000;
}
@keyframes bounce_613 {
  40% {
    transform: scale(1.4);
  }
  60% {
    transform: scale(0.8);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* End Footer */
@media screen and (max-width: 767px) {
  .h2,
  h2 {
    font-size: calc(1rem + 0.4vw);
  }
  .animated-button {
    gap: 2px;
    padding: 10px 14px;
    font-size: 12px;
  }
  .animated-button .arr-1 {
    right: 3px;
  }
  .animated-button:hover .arr-2 {
    left: 3px;
  }
  .top-bar .nav-link {
    font-size: 12px;
  }
}
/*
  **************************************
  **************************************
  **************************************
  **************************************
  **************************************
*/
/* Page Header */
.page-header {
  background: linear-gradient(
      0deg,
      rgba(200, 51, 51, 1) 0%,
      rgba(255, 223, 1, 0.7) 100%
    ),
    url(../imgs/bg-pages.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 180px;
  color: var(--primary-color);
}
@media screen and (max-width: 767px) {
  .page-header {
    background: linear-gradient(
        0deg,
        rgba(200, 51, 51, 0.6) 0%,
        rgba(255, 223, 1, 0.8) 100%
      ),
      url(../imgs/bg-pages.jpg);
    background-position: center;
    height: 100px;
  }
  .page-header h1 {
    font-size: 1.2rem;
  }
}
.breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}
@media screen and (max-width: 767px) {
  .breadcrumb-item {
    font-size: 13px;
  }
}
/* End Page Header */

/* travel detail */
/* Slides */
.slides-images .swiperImages {
  margin-bottom: 10px;
}
.slides-images .swiperImages .swiper-slide a {
  height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .slides-images .swiperImages .swiper-slide a {
    height: 300px;
  }
}
@media (max-width: 767.98px) {
  .slides-images .swiperImages .swiper-slide a {
    height: 280px;
  }
}
.slides-images .swiperImages .swiper-slide a img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.slides-images .swiperThumps {
  position: relative;
}
.slides-images .swiperThumps .swiper-slide {
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.slides-images .swiperThumps .swiper-slide.swiper-slide-thumb-active {
  border: 1px solid var(--primary-color);
}
.slides-images .swiperThumps .swiper-button-prev,
.slides-images .swiperThumps .swiper-button-next {
  position: absolute;
  bottom: auto;
  top: 50%;
  height: 40px;
  width: 40px;
  color: #e9e9e9;
  background: var(--primary-color);
  border-radius: 50%;
  display: none;
}
.slides-images .swiperThumps .swiper-button-prev::after,
.slides-images .swiperThumps .swiper-button-next::after {
  font-size: 12px;
}
.slides-images .swiperThumps .swiper-button-next {
  right: auto;
  left: 0;
}
.slides-images .swiperThumps .swiper-button-prev {
  right: 0;
  left: auto;
}
.slides-images .swiperThumps:hover .swiper-button-prev,
.slides-images .swiperThumps:hover .swiper-button-next {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* Thumbnail Left */
.thumbnail-left .gallery-container {
  position: relative;
  overflow: hidden;
}
.thumbnail-left .gallery-main .swiper-slide {
  border: 1px solid #ddd;
}
.thumbnail-left .gallery-main .swiper-slide a {
  height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .thumbnail-left .gallery-main .swiper-slide a {
    height: 300px;
  }
}
@media (max-width: 767.98px) {
  .thumbnail-left .gallery-main .swiper-slide a {
    height: auto;
  }
}
.thumbnail-left .gallery-main .swiper-slide a img {
  -o-object-fit: contain;
  object-fit: contain;
  height: 100%;
}
.thumbnail-left .gallery-thumbs {
  width: 80px;
  height: 430px;
}
@media (max-width: 991.98px) {
  .thumbnail-left .gallery-thumbs {
    height: 300px;
    width: 70px;
  }
}
@media (max-width: 575.98px) {
  .thumbnail-left .gallery-thumbs {
    height: 220px;
    width: 50px;
  }
}
.thumbnail-left .gallery-thumbs .swiper-slide {
  border: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.thumbnail-left .gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
  border: 1px solid var(--primary-color);
}
.thumbnail-left .swiper-button-prev,
.thumbnail-left .swiper-button-next {
  position: absolute;
  bottom: 0;
  top: auto;
  right: auto;
  left: 0;
  height: 50px;
  width: 40px;
  color: #e9e9e9;
  background: var(--primary-color);
}
@media (max-width: 575.98px) {
  .thumbnail-left .swiper-button-prev,
  .thumbnail-left .swiper-button-next {
    height: 30px;
  }
}
.thumbnail-left .swiper-button-prev::after,
.thumbnail-left .swiper-button-next::after {
  font-size: 12px;
}
.thumbnail-left .swiper-button-prev {
  border-inline-end: 1px solid #e9e9e9;
  right: auto;
  left: 40px;
}
.tags-badge span {
  padding: 0.8rem;
}
.quantity button {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quantity .btn:active,
.quantity .btn:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
.quantity .btn:active {
  transform: scale(0.8);
}
.price_cards .card {
  border: 2px solid var(--secondary-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.price_cards .card .card-body {
  padding: 12px 10px;
}
.price_cards .icon {
  margin-top: -5px;
}
.price_cards .icon svg {
  width: 60px;
  height: 60px;
}
.price_cards .one_person {
  border-color: var(--text-color);
}
.price_cards .one_person .icon svg {
  color: var(--text-color);
}
.price_cards .two_person {
  border-color: var(--secondary-color);
}
.price_cards .two_person .icon svg {
  color: var(--secondary-color);
}
.price_cards .three_person {
  border-color: var(--yellow2-color);
}
.price_cards .three_person .icon svg {
  color: var(--yellow2-color);
}
.price_cards .four_person {
  border-color: var(--primary-color);
}
.price_cards .four_person .icon svg {
  color: var(--primary-color);
}
.price_cards .card-title {
  font-size: 1.6rem;
}
.alert-discount {
  color: var(--primary-color);
  background-color: #ffe1e1;
  border: 1px dashed var(--primary-color);
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .price_cards .icon svg {
    width: 20px;
    height: 20px;
  }
  .price_cards h5,
  .price_cards .fs-5 {
    font-size: 1rem !important;
  }
  .price_cards p {
    font-size: 0.8rem !important;
  }
  .tags-badge span {
    padding: 0.4rem 0.2rem;
    font-size: 13px;
  }
  .alert-discount.fs-4 {
    padding: 0.8rem !important;
    font-size: 14px !important;
  }
}
/* end travel detail */

/* travel booking */
.booking-nav {
  margin-bottom: 20px;
}
.booking-nav ul li {
  border: 2px solid var(--text-color);
  border-inline-end: none;
  height: 60px;
  width: 240px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 700;
  text-align: center;
}
.booking-nav ul li:last-child {
  border-inline-end: 2px solid var(--text-color);
}
.booking-nav ul li span {
}
.booking-nav ul li .numOfPage {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--text-color);
  color: var(--text-color);
  font-size: 20px;
  line-height: 1;
}
.booking-nav ul li .step-name {
  font-size: 16px;
}
.booking-nav ul li.ended-step {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.booking-nav ul li.ended-step span.numOfPage {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.booking-nav ul li.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
.booking-nav ul li.active span.numOfPage {
  border-color: #fff;
  color: #fff;
}

/* Form Booking */
.card_form {
  border: 2px solid var(--yellow2-color);
}
.card_title {
  position: absolute;
  top: -20px;
  inset-inline-start: 10px;
  background-color: var(--yellow2-color);
  padding: 0.5rem 1.5rem;
  border-radius: 0.4rem;
}
.form-booking .form-select,
.form-booking .form-control {
  padding: 0.8rem;
  font-weight: 500;
}
/* End Form Booking */

@media screen and (max-width: 1199px) {
  .booking-nav ul li {
    height: 50px;
    width: 180px;
    padding: 0 4px;
  }
  .booking-nav ul li .numOfPage {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
  .booking-nav ul li .step-name {
    font-size: 14px;
  }
}
@media screen and (max-width: 991px) {
  .booking-nav ul li {
    gap: 0px;
    flex-direction: column;
    height: auto;
    width: 140px;
    padding: 6px;
  }
}
@media screen and (max-width: 767px) {
  .booking-nav ul li {
    width: 100px;
  }
  .booking-nav ul li .numOfPage {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
  .booking-nav ul li .step-name {
    font-size: 12px;
  }
  .card_form {
    padding: 1.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.7rem;
  }
  .card_form.template-card {
    padding-top: 3rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .card_title {
    position: absolute;
    top: -20px;
    inset-inline-start: 10px;
    background-color: var(--yellow2-color);
    padding: 0.5rem 1.5rem;
    border-radius: 0.4rem;
    font-size: 1rem;
  }
  .form-label {
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600 !important;
  }
  .card_form .form-select,
  .card_form .form-control {
    padding: 0.8rem;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 600;
  }
  .card_form .btn.btn-danger {
    padding: 0.2rem;
    font-weight: bold;
    font-size: 12px;
  }
  .card_form .btn.btn-danger svg {
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 576px) {
  .h3,
  h3 {
    font-size: calc(1rem + 0.3vw);
  }
  .travelers-count {
    font-size: 0.8rem !important;
  }
  .booking-nav ul li {
    width: auto;
  }
  .booking-nav ul li .numOfPage {
    width: 18px;
    height: 18px;
    font-size: 11px;
    border: 1px solid var(--text-color);
  }
  .booking-nav ul li .step-name {
    font-size: 11px;
  }
}
.card_form {
  scroll-margin-top: 20px;
  transition: all 0.3s ease;
}
.card_form.newly-added {
  box-shadow: 0 0 20px rgba(200, 51, 51, 0.3);
  border: 2px solid var(--primary-color);
}

.price_cards .card.not-active {
  background-color: #f8f9fa;
  opacity: 0.8;
}
.price_cards .card .quantity input.form-control {
  background-color: transparent;
  pointer-events: none;
  user-select: none;
}
/* end travel booking */

/* Start Events */
.event-image {
  height: 500px;
}
.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* end events */

/* Start Contact */
.contact .container {
  max-width: 1280px;
}
.contact .contact-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 992px) {
  .contact .contact-wrapper {
    grid-template-columns: 38% 62%;
    gap: 30px;
  }
}
.contact .contact-info-panel {
  background: linear-gradient(
    145deg,
    var(--primary-color),
    color-mix(in srgb, var(--primary-color), #1a4372 40%)
  );
  color: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.contact .contact-info-panel .contact-info-header {
  margin-bottom: 30px;
}
.contact .contact-info-panel .contact-info-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}
.contact .contact-info-panel .contact-info-header p {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
}
.contact .contact-info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: auto;
}
@media (min-width: 576px) and (max-width: 991px) {
  .contact .contact-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact .info-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}
.contact .info-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}
.contact .info-card .icon-container {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact .info-card .icon-container i {
  font-size: 20px;
  color: #fff;
}
.contact .info-card .card-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
}
.contact .info-card .card-content p {
  font-size: 1rem;
  margin-bottom: 0;
  opacity: 0.8 !important;
  font-weight: 600;
}
.contact .social-links-panel {
  margin-top: 35px;
}
.contact .social-links-panel h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}
.contact .social-links-panel .social-icons {
  display: flex;
  gap: 12px;
}
.contact .social-links-panel .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}
.contact .social-links-panel .social-icons a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
}
.contact .contact-form-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.contact .map-container {
  width: 100%;
  height: 280px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.contact .form-container {
  background-color: #fff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}
.contact .form-container h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--primary-color);
  background: linear-gradient(
    120deg,
    var(--primary-color),
    color-mix(in srgb, var(--primary-color), var(--primary-color) 30%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.contact .form-container .form-floating {
  margin-bottom: 20px;
}
.contact .form-container .form-floating .form-control {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #35211f, transparent 80%);
  padding: 24px 20px 8px 20px;
  height: calc(3.5rem + 3px);
  background-color: #fff;
  color: #35211f;
  transition: all 0.3s ease;
}
.contact .form-container .form-floating .form-control:focus {
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--primary-color), transparent 85%);
  border-color: color-mix(in srgb, var(--primary-color), transparent 40%);
  background-color: #fff;
}
.contact .form-container .form-floating .form-control::placeholder {
  color: transparent;
}
.contact .form-container .form-floating label {
  color: color-mix(in srgb, #35211f, transparent 40%);
  padding: 1rem 1.25rem 2.5rem 1.25rem;
}
.contact .form-container .form-floating label::after {
  background-color: transparent;
}
.contact .form-container .btn-submit {
  background: linear-gradient(
    145deg,
    var(--primary-color),
    color-mix(in srgb, var(--primary-color), #1a4372 30%)
  );
  color: #fff;
  border: none;
  padding: 15px 25px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact .form-container .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px
    color-mix(in srgb, var(--primary-color), transparent 75%);
}
.contact .form-container .btn-submit i {
  transition: transform 0.3s ease;
}
.contact .form-container .btn-submit:hover i {
  transform: translateX(5px);
}
@media (max-width: 768px) {
  .contact .contact-info-panel {
    padding: 30px 25px;
  }
  .contact .form-container {
    padding: 30px 25px;
  }
}
@media (max-width: 576px) {
  .contact .social-links-panel .social-icons {
    flex-wrap: wrap;
  }
}
/* End Contact */

/* Fixed Header Styles */
.header_sticky.fixed-header {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (max-width: 991px) {
  header .offcanvas.offcanvas-start {
    height: 100vh;
  }
}
/* Ensure body doesn't jump when header becomes fixed */
body.has-fixed-header {
  padding-top: 0;
}
/* Adjust header height when fixed */
.header_sticky.fixed-header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.header_sticky.fixed-header .logo_brand {
  width: 100px;
}
/* Smooth transition for header elements */
.header_sticky {
  transition: all 0.3s ease;
}

/* Start Dashboard */
/*--------------------------------------------------------------
# Account Section
--------------------------------------------------------------*/
.account-page .mobile-menu .mobile-menu-toggle {
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  color: #2d465e;
  transition: all 0.3s ease;
}
.account-page .mobile-menu .mobile-menu-toggle:hover {
  background-color: var(--primary-color);
  color: #fff;
}
.account-page .profile-menu {
  background-color: #fff;
  border-radius: 24px;
  padding: 24px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.account-page .profile-menu .user-info {
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.account-page .profile-menu .user-info .user-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
}
.account-page .profile-menu .user-info .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.account-page .profile-menu .user-info .user-avatar .status-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
}
.account-page .profile-menu .user-info .user-avatar .status-badge i {
  color: #fff;
  font-size: 14px;
}
.account-page .profile-menu .user-info h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}
.account-page .profile-menu .user-info .user-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: #212529;
  color: var(--yellow-color);
  font-weight: 600;
  border-radius: 20px;
  font-size: 13px;
}
.account-page .profile-menu .user-info .user-status i {
  font-size: 14px;
}
.account-page .profile-menu .menu-nav .nav-item {
  margin-bottom: 0.5rem;
}
.account-page .profile-menu .menu-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  color: #212529;
  transition: all 0.3s ease;
}
.account-page .profile-menu .menu-nav .nav-link svg {
  color: color-mix(in srgb, #212529, transparent 40%);
  width: 26px;
  height: 26px;
}
.account-page .profile-menu .menu-nav .nav-link span {
  flex: 1;
}
.account-page .profile-menu .menu-nav .nav-link .badge {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex: 0;
}
.account-page .profile-menu .menu-nav .nav-link .badge {
  background-color: var(--primary-color);
  color: #fff;
}
.account-page .profile-menu .menu-nav .nav-link:hover {
  background-color: var(--primary-color);
  color: #fff;
}
.account-page .profile-menu .menu-nav .nav-link:hover svg {
  color: #fff;
}
.account-page .profile-menu .menu-nav .nav-link.active {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 500;
}
.account-page .profile-menu .menu-nav .nav-link.active svg {
  color: #fff;
}
.account-page .profile-menu .menu-nav .nav-link.active .badge {
  background-color: #fff;
  color: var(--primary-color);
}
.account-page .profile-menu .menu-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.account-page .profile-menu .menu-footer a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #212529;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.account-page .profile-menu .menu-footer a i {
  font-size: 20px;
  margin-right: 12px;
  color: color-mix(in srgb, #212529, transparent 40%);
  transition: all 0.3s ease;
}
.account-page .profile-menu .menu-footer a:hover {
  background-color: #212529;
  color: var(--primary-color);
}
.account-page .profile-menu .menu-footer a:hover i {
  color: var(--primary-color);
}
.account-page .profile-menu .menu-footer a.logout-link {
  color: #ef4444;
}
.account-page .profile-menu .menu-footer a.logout-link i {
  color: #ef4444;
}
.account-page .profile-menu .menu-footer a.logout-link:hover {
  background-color: rgba(239, 68, 68, 0.08);
}
.account-page .content-area {
  background-color: #fff;
  border-radius: 24px;
  padding: 24px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
}
.account-page .content-area .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.account-page .content-area .section-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.account-page .content-area .section-header .header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.account-page .content-area .section-header .header-actions .search-box {
  position: relative;
}
.account-page .content-area .section-header .header-actions .search-box svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, #212529, transparent 40%);
  font-size: 16px;
}
.account-page .content-area .section-header .header-actions .search-box input {
  width: 240px;
  height: 44px;
  padding: 0 16px 0 44px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.account-page
  .content-area
  .section-header
  .header-actions
  .search-box
  input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--primary-color), transparent 90%);
}
.account-page .content-area .section-header .header-actions .filter-btn {
  height: 44px;
  padding: 0 20px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #212529;
  transition: all 0.3s ease;
}
.account-page .content-area .section-header .header-actions .filter-btn i {
  font-size: 16px;
}
.account-page .content-area .section-header .header-actions .filter-btn:hover {
  background-color: #212529;
  color: var(--primary-color);
}
.form-label {
  font-weight: 500;
}
.form-control {
  padding: 0.8rem;
  font-weight: 500;
}
@media (max-width: 991.98px) {
  .account-page .profile-menu {
    margin-bottom: 24px;
  }
}
@media (max-width: 767.98px) {
  .account-page .content-area {
    padding: 20px;
  }
  .account-page .content-area .section-header .header-actions {
    width: 100%;
  }
  .account-page .content-area .section-header .header-actions .search-box {
    flex: 1;
  }
  .account-page
    .content-area
    .section-header
    .header-actions
    .search-box
    input {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .account-page .orders-grid .order-card .order-header {
    flex-direction: column;
    gap: 8px;
  }
  .account-page .section-header .header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .account-page .section-header .header-actions .search-box,
  .account-page .section-header .header-actions .dropdown,
  .account-page .section-header .header-actions button {
    width: 100%;
  }
  .account-page .payment-cards-grid,
  .account-page .addresses-grid {
    grid-template-columns: 1fr;
  }
  .account-page .review-card .review-header {
    flex-direction: column;
    text-align: center;
  }
  .account-page .review-card .review-header .product-image {
    margin: 0 auto;
  }
  .account-page .review-card .review-header .rating {
    justify-content: center;
  }
}
/* End Dashboard */

/* Start Register */
.register_logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.register_logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.register_logo img {
  width: 200px;
  height: 100px;
  object-fit: contain;
}
/* End Register */

/* Start Bus Seats */
/* base size - large screens */
.img_bus_seats {
  width: 260px;
  height: auto;
  margin: auto;
  pointer-events: none;
  user-select: none;
}
.img_bus_seats img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}
.bus_seats_list_container {
  position: absolute;
  top: 13.98%;
  left: 6%;
  width: 80%;
  z-index: 1;
}
.bus_seats_list {
  display: grid;
  grid-template-columns: repeat(2, 42px) 43px repeat(2, 42px);
  /* 2 seats left | aisle | 2 seats right */
  grid-auto-rows: 48.5px;
  gap: 2px 1px; /* row gap, column gap */
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.aisle {
  pointer-events: none; /* خانة ممر فقط */
}
/* Seat button */
.seat-button {
  appearance: auto;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  outline: 0;
  padding: 0;
}
.seat-button:not(
    :has(.seat--variant-unavailable, .seat--variant-selected)
  ):hover
  .seat {
  /* background-color: #eeeeee; */
}

.seat-button.seat--variant-booked,
.seat-button:has(.seat--variant-unavailable) {
  cursor: not-allowed !important;
}

.seat-number {
  transition: all 0.3s ease-in-out;
}
.seat-button.seat--variant-unavailable .seat-number,
.seat-button.seat--variant-booked .seat-number,
.seat--variant-selected .seat-number {
  position: relative;
  top: -12px;
  color: #000000;
  background-color: #ffeb3b;
  border: 2px solid #000;
  padding: 0.5px 2px;
  line-height: 1;
  border-radius: 6px;
}

/* button-level states */
.seat-button.seat--variant-selected .seat__base,
.seat-button.seat--variant-selected .seat__base::before,
.seat-button.seat--variant-selected .seat::before,
.seat-button.seat--variant-selected .seat::after {
  background-color: #04cc25 !important;
  border-color: #222 !important;
  color: #fff !important;
}
.seat-button.seat--variant-booked .seat__base,
.seat-button.seat--variant-booked .seat__base::before,
.seat-button.seat--variant-booked .seat::before,
.seat-button.seat--variant-booked .seat::after {
  background-color: #ddd !important;
  border-color: #ddd !important;
  color: #fff !important;
  pointer-events: none;
  cursor: not-allowed;
}
.seat-button.seat--variant-unavailable .seat__base,
.seat-button.seat--variant-unavailable .seat__base::before,
.seat-button.seat--variant-unavailable .seat::before,
.seat-button.seat--variant-unavailable .seat::after {
  background-color: #aaa !important;
  border-color: #000 !important;
  color: #ddd !important;
  pointer-events: none;
  cursor: not-allowed;
}
.seat {
  --seat-size: 2.5em;
  --seat-color: #9e9e9e;
  --seat-element-color-border: #9e9e9e;
  --seat-element-color-background: white;
  --seat-element-color-background-hover: #eeeeee;
  --seat-element-border: 0.125em solid #9e9e9e;
  --seat-armrest-position-block: 0.5em;
  --seat-back-border-radius-top: 0.375em 0.375em;
  --seat-back-border-radius-bottom: 0.75em 0.75em;
  position: relative;
  inline-size: 2.5em;
  block-size: 2.5em;
  color: var(--text-color);
  /* transform: rotate(90deg); */
  font-weight: bold;
}
.seat.seat--size-md {
  font-size: 1rem;
}
.seat::before,
.seat::after {
  content: "";
  z-index: 1;
  position: absolute;
  display: block;
  inline-size: 0.5em;
  block-size: 1.75em;
  border: 0.125em solid transparent;
  background-color: transparent;
  border-radius: 999px;
  pointer-events: none;
}
.seat::before {
  inset-inline-start: 0;
}
.seat::after {
  inset-inline-end: 0;
}
.seat:not(.seat--rotated)::before,
.seat:not(.seat--rotated)::after {
  inset-block-start: 0.5em;
}
.seat__base {
  display: grid;
  place-items: center;
  inline-size: 2.125em;
  block-size: 2.5em;
  margin-inline: auto;
  border: 0.125em solid #9e9e9e;
  border-radius: 0.625em;
  background-color: #ffffff;
}
.seat:not(.seat--rotated) .seat__base {
  padding-block-end: 0.5em;
}
.seat__base::before {
  content: "";
  z-index: 2;
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 0.75em;
  border: 0.125em solid #9e9e9e;
  background-color: #ffffff;
  pointer-events: none;
}
.seat:not(.seat--rotated) .seat__base::before {
  inset-block-end: 0;
  border-radius: 0.375em 0.375em 0.75em 0.75em;
}

.women_seat .seat__base,
.women_seat .seat__base::before,
.women_seat .seat::before,
.women_seat .seat::after {
  background-color: #ff66c4;
  border-color: #222;
  color: #fff;
}
.men_seat .seat__base,
.men_seat .seat__base::before,
.men_seat .seat::before,
.men_seat .seat::after {
  background-color: #2d5bff;
  border-color: #222;
  color: #fff;
}
.staff_seat .seat__base,
.staff_seat .seat__base::before,
.staff_seat .seat::before,
.staff_seat .seat::after {
  background-color: #38b6ff;
  border-color: #222;
  color: #fff;
}
.vip_seat .seat__base,
.vip_seat .seat__base::before,
.vip_seat .seat::before,
.vip_seat .seat::after {
  background-color: #c78303;
  border-color: #222;
  color: #fff;
}

/* visual states */
.seat--variant-unavailable .seat__base,
.seat--variant-unavailable::before,
.seat--variant-unavailable::after {
  background-color: #f2f2f2 !important;
  border-color: #c7c7c7 !important;
  color: #999 !important;
  filter: grayscale(0.3);
}
/* icon position */
.seat-button .seat-state-icon {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #fff;
  line-height: 1;
}
.seat--variant-unavailable .icon-selected::after {
  /* background-color: #04cc25; */
  /* box-shadow: 0 0 0 1px #0a0a0a inset; */
}
.seat-button .seat-state-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}
.seat-button.seat--variant-unavailable
  .seat-state-icon.icon-unavailable::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m5.25 5l14 14"/><path d="M22.25 12c0-5.523-4.477-10-10-10s-10 4.477-10 10s4.477 10 10 10s10-4.477 10-10Z"/></g></svg>');
}
.seat-button.men_seat.seat--variant-booked .seat-state-icon::after,
.seat-button.men_seat .seat-state-icon.icon-selected::after {
  background-image: url('data:image/svg+xml,<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 508.609 508.609" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path style="fill:%23F1F3F7;" d="M254.305,0L254.305,0c-70.527,0-127.83,57.303-127.83,127.83V376.71 c0,70.527,57.303-27.804,127.83-27.804l0,0c70.527,0,127.83,98.331,127.83,27.804V127.83C382.135,57.303,324.832,0,254.305,0z"></path><path style="fill:%23DEDEDF;" d="M335.343,294.315H173.266c-73.918,0-134.273,60.016-134.273,133.934v80.36h430.623v-80.36 C469.616,354.331,409.261,294.315,335.343,294.315z"></path><circle style="fill:%23EEB490;" cx="254.305" cy="278.04" r="60.016"></circle><path style="fill:%23C19D7B;" d="M386.882,456.053H314.66c-3.73,0-6.781-3.052-6.781-6.781s3.052-6.781,6.781-6.781h71.883 c3.73,0,6.781,3.052,6.781,6.781C393.664,453.001,390.612,456.053,386.882,456.053z"></path><path style="fill:%23C19D7B;" d="M260.408,378.066c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,375.015,264.138,378.066,260.408,378.066z"></path><path style="fill:%23C19D7B;" d="M260.408,432.318c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,429.266,264.138,432.318,260.408,432.318z"></path><path style="fill:%23C19D7B;" d="M260.408,486.57c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,483.518,264.138,486.57,260.408,486.57z"></path><path style="fill:%233C3851;" d="M397.393,101.044H111.216c-3.73,0-6.781-3.052-6.781-6.781c0-3.73,3.052-6.781,6.781-6.781h286.517 c3.73,0,6.781,3.052,6.781,6.781C404.514,97.992,401.123,101.044,397.393,101.044z"></path><path style="fill:%233C3851;" d="M397.393,79.682H111.216c-3.73,0-6.781-3.052-6.781-6.781c0-3.73,3.052-6.781,6.781-6.781h286.517 c3.73,0,6.781,3.052,6.781,6.781C404.514,76.63,401.123,79.682,397.393,79.682z"></path><g><path style="fill:%23F1F3F7;" d="M218.024,122.066c0,0-53.913,6.442-53.913,51.878s0,315.677,0,315.677l0,0 c-20.683,0-37.298-16.615-37.298-37.298V127.83l37.298-25.091L218.024,122.066z"></path><path style="fill:%23F1F3F7;" d="M290.585,122.066c0,0,53.913,6.442,53.913,51.878s0,315.677,0,315.677l0,0 c20.683,0,37.298-16.615,37.298-37.298V127.83l-37.298-25.091L290.585,122.066z"></path></g><path style="fill:%23FACCB4;" d="M290.585,122.066L290.585,122.066l-36.281,20.683l-36.281-20.683c0,0-53.913,6.442-53.913,51.878 v37.298c0,49.844,40.35,90.532,90.532,90.532c49.844,0,90.532-40.35,90.532-90.532v-37.298 C344.837,128.509,290.585,122.066,290.585,122.066z"></path></g></svg>');
}
.seat-button.women_seat.seat--variant-booked .seat-state-icon::after,
.seat-button.women_seat .seat-state-icon.icon-selected::after {
  background-image: url('data:image/svg+xml,<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 508.948 508.948" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path style="fill:%23C19D7B;" d="M508.609,508.779H0v-90.872c0-42.384,31.534-77.987,73.579-83.073l112.233-40.35h137.325 l112.233,40.35c42.045,5.086,73.579,40.689,73.579,83.073v90.872H508.609z"></path><path style="fill:%23FF667C;" d="M398.072,349.415l-78.326,108.842H192.254l-81.717-108.842V143.936 c0-79.343,64.424-143.767,143.767-143.767l0,0c79.343,0,143.767,64.424,143.767,143.767V349.415z"></path><path style="fill:%23FACCB4;" d="M320.763,143.258c-30.517,0-56.625-15.258-66.458-36.62c-9.833,21.023-35.603,36.62-66.458,36.62 c-10.85,0-20.683-2.034-29.838-5.086v63.746c0,53.234,43.062,96.297,96.297,96.297l0,0c53.234,0,96.297-43.062,96.297-96.297 v-64.085C341.446,141.224,331.274,143.258,320.763,143.258z"></path></g></svg>');
}
.seat-button.vip_seat.seat--variant-booked .seat-state-icon::after,
.seat-button.vip_seat .seat-state-icon.icon-selected::after {
  background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.99 511.99" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><rect y="106.675" style="fill:%23F6BB42;" width="511.99" height="319.99"></rect><rect y="85.325" style="fill:%23FFCE54;" width="511.99" height="319.99"></rect><path style="fill:%23ED5564;" d="M469.332,330.665V159.997c-17.672,0-32-14.327-32-31.999H74.654 c0,17.672-14.327,31.999-31.999,31.999v170.668c17.672,0,31.999,14.328,31.999,31.998h362.678 C437.332,344.993,451.66,330.665,469.332,330.665z"></path><path style="fill:%23DA4453;" d="M437.332,127.998H74.654c0,17.672-14.327,31.999-31.999,31.999v170.668 c17.672,0,31.999,14.328,31.999,31.998h362.678c0-17.67,14.328-31.998,32-31.998V159.997 C451.66,159.997,437.332,145.67,437.332,127.998z M448.004,313.774c-12.281,5.391-22.155,15.266-27.546,27.547H91.529 c-5.391-12.281-15.266-22.156-27.546-27.547V176.872c12.28-5.375,22.155-15.25,27.546-27.546h328.929 c5.391,12.296,15.265,22.171,27.546,27.546V313.774z"></path><g><polygon style="fill:%23FFCE54;" points="175.823,282.62 144.637,187.981 122.809,187.981 164.996,308.009 185.964,308.009 228.666,187.981 207.323,187.981 "></polygon><rect x="249.113" y="187.985" style="fill:%23FFCE54;" width="20.359" height="120.03"></rect><path style="fill:%23FFCE54;" d="M382.178,197.653c-6.422-6.421-15.891-9.671-28.124-9.671h-52.937v120.027h20.375v-47.014h32.53 h0.641c11.937,0,21.202-3.234,27.515-9.609c6.422-6.469,9.672-15.516,9.672-26.906 C391.849,213.106,388.599,204.075,382.178,197.653z M366.287,238.386c-3.422,3.094-9.016,4.672-16.64,4.672 c-0.234,0-0.469-0.016-0.75-0.016h-27.405v-37.124h27.405c8.015,0,13.874,1.609,17.405,4.75c3.484,3.125,5.188,7.641,5.188,13.812 C371.49,230.667,369.787,235.214,366.287,238.386z"></path></g></g></svg>');
}
.seat-button.staff_seat.seat--variant-booked .seat-state-icon::after,
.seat-button.staff_seat .seat-state-icon.icon-selected::after {
  background-image: url('data:image/svg+xml,<svg height="200px" width="200px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><style type="text/css"> .st0{fill:%23000000;} </style><g><path class="st0" d="M393.811,370.922c-9.21-22.546-21.95-43.573-37.49-61.186c17.264-21.754,27.537-49.298,27.61-79.309 c-0.073-21.608-5.435-41.943-14.9-59.753V46.337c0-7.974-2.088-15.722-6.701-21.826c-4.547-6.183-11.255-10.287-18.625-12.368 c-9.167-2.612-21.608-5.668-36.435-8.047C292.37,1.71,275.091,0,256.015,0c-38.145,0-69.284,6.853-87.763,12.143 c-7.298,2.081-14.006,6.184-18.545,12.368c-4.62,6.105-6.708,13.853-6.708,21.826v124.191c-9.538,17.883-14.9,38.218-14.9,59.899 c0,30.026,10.28,57.577,27.559,79.338c-15.533,17.607-28.266,38.626-37.468,61.157c-10.389,25.478-16.297,52.892-16.312,79.615 c-0.014,5.638,1.681,11.073,4.424,15.752c4.845,8.221,12.47,14.522,21.848,19.993c14.121,8.148,32.688,14.405,54.486,18.836 C204.418,509.519,229.401,512,256,512c40.561-0.022,77.272-5.711,104.795-15.366c13.765-4.867,25.29-10.666,34.071-17.934 c4.372-3.646,8.097-7.705,10.84-12.412c2.736-4.678,4.43-10.113,4.416-15.752C410.116,423.815,404.2,396.401,393.811,370.922z M165.334,92.747c0.073,0,0.153,0.08,0.226,0.08c2.757,0.895,6.184,1.863,10.134,2.757c7.821,1.782,17.578,3.347,27.56,4.612 c19.97,2.539,41.426,3.951,52.746,3.951c14.9,0,47.087-2.386,70.775-6.7c7.902-1.346,14.828-2.983,19.673-4.62 c0.072,0,0.146-0.08,0.218-0.08v23.245c-1.71,0.524-3.572,0.968-5.435,1.346c-8.942,2.008-19.149,3.644-29.655,4.991 c-21.004,2.678-42.685,4.096-55.577,4.169c-16.835-0.073-49.094-2.459-74.718-6.999c-5.74-1.048-11.102-2.16-15.948-3.507V92.747z M256,474.502c-9.978,0-18.065-8.083-18.065-18.065c0-9.982,8.087-18.065,18.065-18.065c9.979,0,18.065,8.083,18.065,18.065 C274.065,466.419,265.979,474.502,256,474.502z M256,414.902c-9.978,0-18.065-8.083-18.065-18.065 c0-9.982,8.087-18.065,18.065-18.065c9.979,0,18.065,8.082,18.065,18.065C274.065,406.819,265.979,414.902,256,414.902z M256.015,335.993c-29.203,0-55.504-11.772-74.645-30.921c-19.077-19.141-30.921-45.442-30.921-74.645 c0-15.497,3.354-30.171,9.312-43.434c6.184,2.088,13.481,3.652,21.528,5.143c25.631,4.54,57.818,6.926,74.726,6.926 c12.892,0,34.565-1.418,55.577-4.096c10.506-1.346,20.713-2.983,29.654-4.991c3.943-0.822,7.596-1.79,10.949-2.983 c6.032,13.263,9.312,27.938,9.386,43.434c-0.073,29.203-11.844,55.504-30.913,74.645 C311.519,324.221,285.218,335.993,256.015,335.993z"></path></g></g></svg>');
}
.seat-button .seat-state-icon.icon-booked-default::after {
  background-image: url('data:image/svg+xml,<svg height="200px" width="200px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 508.609 508.609" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path style="fill:%23F1F3F7;" d="M254.305,0L254.305,0c-70.527,0-127.83,57.303-127.83,127.83V376.71 c0,70.527,57.303-27.804,127.83-27.804l0,0c70.527,0,127.83,98.331,127.83,27.804V127.83C382.135,57.303,324.832,0,254.305,0z"></path><path style="fill:%23DEDEDF;" d="M335.343,294.315H173.266c-73.918,0-134.273,60.016-134.273,133.934v80.36h430.623v-80.36 C469.616,354.331,409.261,294.315,335.343,294.315z"></path><circle style="fill:%23EEB490;" cx="254.305" cy="278.04" r="60.016"></circle><path style="fill:%23C19D7B;" d="M386.882,456.053H314.66c-3.73,0-6.781-3.052-6.781-6.781s3.052-6.781,6.781-6.781h71.883 c3.73,0,6.781,3.052,6.781,6.781C393.664,453.001,390.612,456.053,386.882,456.053z"></path><path style="fill:%23C19D7B;" d="M260.408,378.066c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,375.015,264.138,378.066,260.408,378.066z"></path><path style="fill:%23C19D7B;" d="M260.408,432.318c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,429.266,264.138,432.318,260.408,432.318z"></path><path style="fill:%23C19D7B;" d="M260.408,486.57c-3.73,0-6.781-3.052-6.781-6.781v-2.374c0-3.73,3.052-6.781,6.781-6.781 s6.781,3.052,6.781,6.781v2.374C267.189,483.518,264.138,486.57,260.408,486.57z"></path><path style="fill:%233C3851;" d="M397.393,101.044H111.216c-3.73,0-6.781-3.052-6.781-6.781c0-3.73,3.052-6.781,6.781-6.781h286.517 c3.73,0,6.781,3.052,6.781,6.781C404.514,97.992,401.123,101.044,397.393,101.044z"></path><path style="fill:%233C3851;" d="M397.393,79.682H111.216c-3.73,0-6.781-3.052-6.781-6.781c0-3.73,3.052-6.781,6.781-6.781h286.517 c3.73,0,6.781,3.052,6.781,6.781C404.514,76.63,401.123,79.682,397.393,79.682z"></path><g><path style="fill:%23F1F3F7;" d="M218.024,122.066c0,0-53.913,6.442-53.913,51.878s0,315.677,0,315.677l0,0 c-20.683,0-37.298-16.615-37.298-37.298V127.83l37.298-25.091L218.024,122.066z"></path><path style="fill:%23F1F3F7;" d="M290.585,122.066c0,0,53.913,6.442,53.913,51.878s0,315.677,0,315.677l0,0 c20.683,0,37.298-16.615,37.298-37.298V127.83l-37.298-25.091L290.585,122.066z"></path></g><path style="fill:%23FACCB4;" d="M290.585,122.066L290.585,122.066l-36.281,20.683l-36.281-20.683c0,0-53.913,6.442-53.913,51.878 v37.298c0,49.844,40.35,90.532,90.532,90.532c49.844,0,90.532-40.35,90.532-90.532v-37.298 C344.837,128.509,290.585,122.066,290.585,122.066z"></path></g></svg>');
}
/* End Bus Seats */

.seats_lists_types {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}
.seats_lists_types li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.seats_lists_types strong {
  display: block;
  font-size: 0.8rem;
}
@media screen and (max-width: 768px) {
  /* .seats_lists_types {
    flex-direction: row;
    gap: 10px;
  } */
}

.form_seats_additional table th {
  background-color: #f2f2f2;
  color: #666;
  border: 0;
}
.form_seats_additional table th,
.form_seats_additional table td {
  font-size: 0.9rem;
  font-weight: 600;
}
.form_seats_additional table td {
  color: var(--text-color);
}

.bin-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgb(255, 95, 95);
  cursor: pointer;
  border: 2px solid rgb(255, 201, 201);
  transition-duration: 0.3s;
  position: relative;
  overflow: hidden;
}
.bin-bottom {
  width: 15px;
  z-index: 2;
}
.bin-top {
  width: 17px;
  transform-origin: right;
  transition-duration: 0.3s;
  z-index: 2;
}
.bin-button:hover .bin-top {
  transform: rotate(45deg);
}
.bin-button:hover {
  background-color: rgb(255, 0, 0);
}
.bin-button:active {
  transform: scale(0.9);
}
.garbage {
  position: absolute;
  width: 14px;
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
}
.bin-button:hover .garbage {
  animation: throw 0.4s linear;
}
@keyframes throw {
  from {
    transform: translate(-400%, -700%);
    opacity: 0;
  }
  to {
    transform: translate(0%, 0%);
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .content-booking.p-4 {
    padding: 2rem !important;
  }
  .bus_seats {
    padding-inline-start: 1rem;
  }
}

/* start checkout */
.checkout {
}
.checkout .checkout-container {
  margin-bottom: 2rem;
}
.checkout .checkout-container .checkout-form {
  position: relative;
}
.checkout .checkout-section {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid color-mix(in srgb, #212529, transparent 90%);
  margin-bottom: 24px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.checkout .checkout-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.checkout .checkout-section .section-header {
  padding: 20px 24px;
  background-color: color-mix(in srgb, #fff, #fff 30%);
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, #212529, transparent 90%);
}
.checkout .checkout-section .section-header .section-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.checkout .checkout-section .section-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}
.checkout .checkout-section .section-content {
  padding: 24px;
}
.checkout .checkout-section .section-content .form-group {
  margin-bottom: 20px;
}
.checkout .checkout-section .section-content .form-group:last-child {
  margin-bottom: 0;
}
.checkout .checkout-section .section-content .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
}
.checkout .checkout-section .section-content .form-group .form-control,
.checkout .checkout-section .section-content .form-group .form-select {
  border: 2px solid color-mix(in srgb, #212529, transparent 85%);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
  height: auto;
  background-color: #fff;
  transition: all 0.25s ease;
}
.checkout .checkout-section .section-content .form-group .form-control:hover,
.checkout .checkout-section .section-content .form-group .form-select:hover {
  border-color: color-mix(in srgb, var(--primary-color), transparent 60%);
}
.checkout .checkout-section .section-content .form-group .form-control:focus,
.checkout .checkout-section .section-content .form-group .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--primary-color), transparent 85%);
  outline: none;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-control::placeholder,
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-select::placeholder {
  color: color-mix(in srgb, #212529, transparent 60%);
  font-size: 0.9rem;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-control.is-invalid,
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-select.is-invalid {
  border-color: #dc3545;
  background-image: none;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-control.is-invalid:focus,
.checkout
  .checkout-section
  .section-content
  .form-group
  .form-select.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
}
.checkout .checkout-section .section-content .form-group .form-select {
  background-position: right 16px center;
  padding-right: 40px;
}
.checkout .checkout-section .section-content .form-group .card-number-wrapper {
  position: relative;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .card-number-wrapper
  .card-icons {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .card-number-wrapper
  .card-icons
  svg {
  font-size: 1rem;
  color: color-mix(in srgb, #212529, transparent 40%);
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .card-number-wrapper
  input {
  padding-right: 80px;
}
.checkout .checkout-section .section-content .form-group .cvv-wrapper {
  position: relative;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .cvv-wrapper
  .cvv-hint {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, #212529, transparent 40%);
  cursor: pointer;
  transition: color 0.2s ease;
}
.checkout
  .checkout-section
  .section-content
  .form-group
  .cvv-wrapper
  .cvv-hint:hover {
  color: var(--primary-color);
}
.checkout .checkout-section .section-content .form-check {
  margin-bottom: 12px;
  padding-inline-start: 1.8rem;
}
.checkout .checkout-section .section-content .form-check:last-child {
  margin-bottom: 0;
}
.checkout .checkout-section .section-content .form-check .form-check-input {
  width: 18px;
  height: 18px;
  margin-inline-start: -1.8rem;
  margin-top: 0.2rem;
  border: 2px solid color-mix(in srgb, #212529, transparent 70%);
  background-color: #fff;
  cursor: pointer;
}
.checkout
  .checkout-section
  .section-content
  .form-check
  .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.checkout
  .checkout-section
  .section-content
  .form-check
  .form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color), transparent 85%);
}
.checkout .checkout-section .section-content .form-check .form-check-label {
  font-size: 0.9rem;
  cursor: pointer;
}
.checkout .checkout-section .section-content .form-check .form-check-label a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}
.checkout
  .checkout-section
  .section-content
  .form-check
  .form-check-label
  a:hover {
  text-decoration: underline;
}
.checkout .checkout-section .section-content .form-check.terms-check {
  margin-top: 10px;
  margin-bottom: 20px;
}
.checkout
  .checkout-section
  .section-content
  .form-check.terms-check
  .form-check-label {
  font-size: 0.85rem;
}
.checkout .checkout-section .section-content .payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.checkout .checkout-section .section-content .payment-options .payment-option {
  flex: 1;
  min-width: 120px;
  position: relative;
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  input[type="radio"]:checked
  + label {
  border-color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  input[type="radio"]:checked
  + label
  .payment-icon {
  color: var(--primary-color);
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  input[type="radio"]:focus
  + label {
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color), transparent 85%);
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px solid color-mix(in srgb, #212529, transparent 85%);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  height: 100%;
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  label:hover {
  border-color: color-mix(in srgb, var(--primary-color), transparent 60%);
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  label
  .payment-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: color-mix(in srgb, #212529, transparent 30%);
  transition: color 0.25s ease;
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option
  label
  .payment-label {
  font-size: 0.9rem;
  font-weight: 500;
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option.active
  label {
  border-color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color), transparent 95%);
}
.checkout
  .checkout-section
  .section-content
  .payment-options
  .payment-option.active
  label
  .payment-icon {
  color: var(--primary-color);
}
@media (max-width: 575.98px) {
  .checkout
    .checkout-section
    .section-content
    .payment-options
    .payment-option {
    min-width: 100%;
  }
  .checkout
    .checkout-section
    .section-content
    .payment-options
    .payment-option
    label {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }
  .checkout
    .checkout-section
    .section-content
    .payment-options
    .payment-option
    label
    .payment-icon {
    margin-bottom: 0;
  }
}
.checkout .checkout-section .section-content .payment-details {
  padding-top: 8px;
}
.checkout .checkout-section .section-content .payment-details.d-none {
  display: none;
}
.checkout .checkout-section .section-content .payment-details .payment-info {
  padding: 16px;
  background-color: color-mix(in srgb, #fff, #fff 50%);
  border-radius: 12px;
  font-size: 0.9rem;
  margin-bottom: 0;
}
.checkout .checkout-section .section-content .success-message {
  padding: 16px;
  background-color: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.2);
  border-radius: 12px;
  color: #28a745;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.checkout .checkout-section .section-content .success-message.d-none {
  display: none;
}
.checkout
  .checkout-section
  .section-content
  .place-order-container
  .place-order-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  background-color: var(--primary-color);
  border: none;
  box-shadow: 0 4px 12px rgba(54, 144, 231, 0.2);
  transition: all 0.3s ease;
}
.checkout
  .checkout-section
  .section-content
  .place-order-container
  .place-order-btn:hover {
  background-color: color-mix(in srgb, var(--primary-color), #000 10%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(54, 144, 231, 0.25);
}
.checkout
  .checkout-section
  .section-content
  .place-order-container
  .place-order-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(54, 144, 231, 0.2);
}
.checkout
  .checkout-section
  .section-content
  .place-order-container
  .place-order-btn
  .btn-price {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
}
.checkout .order-summary {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid color-mix(in srgb, #212529, transparent 90%);
  position: sticky;
  top: 100px;
}
.checkout .order-summary .order-summary-header {
  padding: 20px 24px;
  border-bottom: 1px solid color-mix(in srgb, #212529, transparent 90%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkout .order-summary .order-summary-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}
.checkout .order-summary .order-summary-header .item-count {
  font-size: 0.9rem;
  color: color-mix(in srgb, #212529, transparent 30%);
  background-color: color-mix(in srgb, #fff, #fff 50%);
  padding: 4px 10px;
  border-radius: 20px;
}
.checkout .order-summary .order-summary-content {
  padding: 24px;
}
.checkout .order-summary .order-summary-content .order-items {
  margin-bottom: 24px;
}
.checkout .order-summary .order-summary-content .order-items .order-item {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, #212529, transparent 90%);
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-image {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, #212529, transparent 90%);
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-image
  img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details {
  flex: 1;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details
  h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  font-weight: 600;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details
  .order-item-variant {
  font-size: 0.85rem;
  color: color-mix(in srgb, #212529, transparent 40%);
  margin-bottom: 8px;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details
  .order-item-price {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details
  .order-item-price
  .quantity {
  color: color-mix(in srgb, #212529, transparent 30%);
}
.checkout
  .order-summary
  .order-summary-content
  .order-items
  .order-item
  .order-item-details
  .order-item-price
  .price {
  color: var(--text-color);
}
.checkout .order-summary .order-summary-content .order-totals {
  background-color: color-mix(in srgb, #fff, #fff 30%);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}
.checkout .order-summary .order-summary-content .order-totals > div {
  margin-bottom: 12px;
  font-size: 0.95rem;
  font-weight: 600;
}
.checkout .order-summary .order-summary-content .order-totals > div:last-child {
  margin-bottom: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, #212529, transparent 80%);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
}
.checkout .order-summary .order-summary-content .secure-checkout {
  text-align: center;
}
.checkout
  .order-summary
  .order-summary-content
  .secure-checkout
  .secure-checkout-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-color);
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.checkout
  .order-summary
  .order-summary-content
  .secure-checkout
  .secure-checkout-header
  svg {
  color: #28a745;
  font-size: 1.1rem;
}
.checkout
  .order-summary
  .order-summary-content
  .secure-checkout
  .payment-icons span {
    margin: 1rem;
}
@media (max-width: 991.98px) {
  .checkout .order-summary {
    position: relative;
    top: 0;
    margin-top: 2rem;
  }
}
.checkout .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.checkout .modal-content .modal-header {
  border-bottom-color: color-mix(in srgb, #212529, transparent 90%);
}
.checkout .modal-content .modal-header .modal-title {
  font-weight: 600;
}
.checkout .modal-content .modal-footer {
  border-top-color: color-mix(in srgb, #212529, transparent 90%);
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 767.98px) {
  .checkout .checkout-section .section-header h3 {
    font-size: 1.1rem;
  }
  .checkout .order-summary .order-summary-header h3 {
    font-size: 1.1rem;
  }
}
.checkout .swiper-wrapper {
  height: auto !important;
}

.invoice-date,
.checkout .card-body,
.table td,
.table th {
  font-weight: 600;
}
/* end checkout */


/* Print styles */
@media print {
  /* Hide page title and footer */
  @page {
    margin: 0.5cm !important;
    size: A4 !important;
  }

  /* Reset margins and padding for print */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Hide navigation and footer elements */
  .top-bar,
  .no-print,
  header,
  .breadcrumb,
  .booking-nav,
  .socials,
  footer,
  .btn,
  .d-none {
    display: none !important;
  }

  /* Main content adjustments */
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container,
  .container-lg {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Invoice container - compact */
  .content-booking {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    background: white !important;
    page-break-inside: avoid !important;
  }

  /* Invoice header - compact */
  .invoice-header {
    text-align: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #007bff !important;
  }

  .invoice-header h2 {
    font-size: 18px !important;
    margin-bottom: 5px !important;
    color: #007bff !important;
  }

  .invoice-header img {
    max-width: 80px !important;
    height: auto !important;
    margin: 5px 0 !important;
  }

  .invoice-number,
  .invoice-date {
    font-size: 11px !important;
    margin: 2px 0 !important;
  }

  /* Cards and sections - compact */
  .card {
    border: 1px solid #ddd !important;
    margin-bottom: 8px !important;
    break-inside: avoid !important;
  }

  .card-header {
    background-color: #f8f9fa !important;
    color: #000 !important;
    font-weight: bold !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #ddd !important;
    font-size: 11px !important;
  }

  .card-body {
    padding: 8px !important;
  }

  /* Tables - compact */
  .table {
    font-size: 9px !important;
    margin-bottom: 0 !important;
  }

  .table th,
  .table td {
    padding: 4px !important;
    border: 1px solid #ddd !important;
    vertical-align: middle !important;
  }

  .table th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 9px !important;
  }

  /* Payment summary - compact */
  .bg-success,
  .bg-warning,
  .bg-primary {
    background-color: #f8f9fa !important;
    color: #000 !important;
  }

  .text-primary {
    color: #007bff !important;
  }

  .text-white {
    color: #000 !important;
  }

  /* Badges - compact */
  .badge {
    background-color: #28a745 !important;
    color: #fff !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    font-size: 8px !important;
  }

  /* Alerts - compact */
  .alert {
    border: 1px solid #ddd !important;
    background-color: #f8f9fa !important;
    color: #000 !important;
    padding: 8px !important;
    margin: 8px 0 !important;
    font-size: 9px !important;
  }

  .alert-info {
    background-color: #e7f3ff !important;
    border-color: #b3d9ff !important;
  }

  /* Responsive adjustments for print - compact */
  .row {
    margin: 0 !important;
  }

  .col-md-6,
  .col-md-8,
  .col-md-4 {
    width: 50% !important;
    float: left !important;
    padding: 0 5px !important;
  }

  .col-md-8 {
    width: 66.666% !important;
  }

  .col-md-4 {
    width: 33.333% !important;
  }

  .col-12 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* Clear floats */
  .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Ensure content fits on single page */
  .invoice-content {
    max-width: 100% !important;
    overflow: visible !important;
    page-break-inside: avoid !important;
  }

  /* Compact spacing */
  .mb-4, .mb-5 {
    margin-bottom: 10px !important;
  }

  .mt-4 {
    margin-top: 10px !important;
  }

  .p-4 {
    padding: 8px !important;
  }

  /* Hide hr in print */
  hr {
    display: none !important;
  }

  /* Compact text */
  p {
    margin-bottom: 2px !important;
    font-size: 9px !important;
  }

  .fw-bold {
    font-weight: bold !important;
  }

  /* Ensure single page */
  .travel-booking-section {
    padding: 0 !important;
  }
}

/* Screen styles for better responsiveness */
@media screen and (max-width: 768px) {
  .invoice-header img {
    max-width: 80px !important;
  }

  .table-responsive {
    font-size: 12px !important;
  }

  .card-body {
    padding: 10px !important;
  }

  .btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
  }
}

@media screen and (max-width: 576px) {
  .invoice-header h2 {
    font-size: 20px !important;
  }

  .invoice-header img {
    max-width: 60px !important;
  }

  .table {
    font-size: 10px !important;
  }

  .table th,
  .table td {
    padding: 4px !important;
  }

  .card-header h5 {
    font-size: 14px !important;
  }
}