/*  Google Icon anf inter font style sheet */
/* @import url("https://fonts.googleapis.com/css?family=Inter:wght@100;900"); */
@import url("https://fonts.googleapis.com");
@import url("https://fonts.gstatic.com");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Rounded");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

html {
  font-size: 100%;
}

:root {
  /* Colors */
  --color-primary: #0077ff;
  --color-primary-hover: #005fcc;
  --color-primary-active: #004799;

  --color-primary-dark: #1c2b3d;

  --color-white: #ffffff;
  --color-border: #e7ebf0;
  --color-border-secondary: #d6dde6;

  --color-background-hover: #f5f7f9;

  /* Fonts */
  --font-inter: "Inter";

  /* Box shadows */
  --box-shadow-1c2b3d29: 0px 8px 16px 0px #1c2b3d29;
  --box-shadow-252A3129: 0px 4px 8px 0px #252a3129;
  --box-shadow-1c2b3d66: 0px 4px 16px 0px #1c2b3d66;
  --box-shadow-1c2b3d1f: 0px 1px 2px 0px #1c2b3d1f;

  /* rest of variables */
  --mobile-width: 700px;
  --page-padding-10: 10%;
  --page-padding-8: 8%;

  /* width */
  --mobile-menu-width: 440px;
}

* {
  box-sizing: border-box;

  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body {
  padding: 0;
  margin: 0;
  color: var(--color-primary-dark);
}

/* Global styles */
.filled {
  font-variation-settings: "FILL" 1;
}

button,
input,
p,
a {
  font-family: var(--font-inter);
}

.noborder {
  border: none !important;
}

.noBottonBorder {
  border-bottom: 1px solid transparent !important;
}

.hide {
  display: none;
}

.redcolor {
  color: #d21c1c;
}

.H52 {
  height: 52px;
}

.rotate90 {
  transform: rotate(90deg);
}

.textIndent {
  text-indent: 60px;
}

.font20 {
  font-size: 20px;
}

.no-scroll {
  overflow: hidden;
  height: 100vh; /* optional: prevents extra space on some devices */
}

/* Custome Styles */
.button-white-normal {
  background-color: var(--color-white);
  border: solid 1px var(--color-border);
  padding: 8px 16px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 8px;
}
.button-white-normal:hover {
  cursor: pointer;
  background-color: #f1f4f7;
}
.button-white-normal:active {
  background-color: #e7ecf1;
}

.button-primary-normal,
.button-primary-large {
  background-color: var(--color-primary);
  border: none;
  border-radius: 100px;
  padding: 12px 16px;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}
.button-primary-large {
  padding: 15px 24px;
  gap: 12px;
  line-height: 22px;
}

.button-primary-normal:hover,
.button-primary-large:hover {
  background-color: var(--color-primary-hover);
  cursor: pointer;
}
.button-primary-normal:active,
.button-primary-large:active {
  background-color: var(--color-primary-active);
}

.button-primary-subtle {
  background-color: #e3f0ff;
  border: none;
  border-radius: 100px;
  padding: 12px 16px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 8px;
}
.button-primary-subtle:hover {
  background-color: #cce4ff;
  color: #005fcc;
  cursor: pointer;
}
.button-primary-subtle:active {
  background-color: #99c9ff;
  color: #004799;
}

.button-secondary-normal,
.button-secondary-large {
  background-color: #e8edf1;
  border: none;
  border-radius: 100px;
  padding: 12px 16px;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}
.button-secondary-large {
  line-height: 22px;
  padding: 15px 24px;
  gap: 12px;
}
.button-secondary-normal:hover,
.button-secondary-large:hover {
  background-color: #dce3e9;
  cursor: pointer;
}
.button-secondary-normal:active,
.button-secondary-large:active {
  background-color: #cad4de;
}

.button-white-blue {
  background-color: var(--color-white);
  border: solid 1px #e7ebf0;
  border-radius: 100px;
  padding: 12px 16px;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.button-white-blue:hover {
  background-color: #f1f4f7;
  cursor: pointer;
}
.button-white-blue:active {
  background-color: #e7ebf0;
}

.button-critical-subtle {
  background-color: #faeaea;
  border: none;
  border-radius: 100px;
  padding: 12px 16px;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  color: #d21c1c;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.button-critical-subtle:hover {
  background: #b91919;
  background: #f4d2d2;
  cursor: pointer;
}
.button-critical-subtle:active {
  background: #9d1515;
  background: #eeb9b9;
}

/* Gradient */

.gradient-abs {
  position: relative;
  display: inline-block;
}
.gradient-abs::after {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 15px;

  /* transition: opacity 1s ease-in; */
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 0, 0, 0.65)),
    color-stop(100%, rgba(0, 0, 0, 0))
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* IE10+ */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  /* transform: scale(1.1); */

  /* background-color: red; */
  /* transition: opacity 1s ease-out; */
  /* transition: all 0.5s ease-in;
  opacity: 0.5; */

  opacity: 1;
  transition: opacity 0.9s linear;
}

.gradient-abs::after {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 15px;

  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );

  opacity: 0.4;
  transition: all 1s ease-in;
}

.gradient-abs:hover::after {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );

  opacity: 1;
  transition: all 1s ease-in;
}

.desktop-modal-overlay {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #1c2b3d66;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  z-index: 21;
}

/* Switch toggle */

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 1px #d1d5db;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #d1d5db;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch input:checked + .slider {
  border: solid 1px var(--color-primary);
  background-color: var(--color-primary);
}

.switch input:focus + .slider {
  /* box-shadow: 0 0 1px green; */
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
  background-color: var(--color-white);
}

.switch .slider.round {
  border-radius: 34px;
}

.switch .slider.round:before {
  border-radius: 50%;
}

/* Radio button */
/* The container */
.radioBtn {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioBtn input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radioBtn .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 33px;
  width: 33px;
  border-radius: 50%;
  border: solid 1.67px #bac7d5;
}

/* On mouse-over, add a grey background color */
.radioBtn:hover input ~ .checkmark {
  border: solid 1.67px #666;
}

/* When the radio button is checked, add a green background */
.radioBtn input:checked ~ .checkmark {
  background-color: #28a138;
  border: none;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioBtn .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioBtn input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radioBtn .checkmark:after {
  top: 10px;
  left: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
}

/*  */
.radioBtn28 .checkmark {
  height: 28px;
  width: 28px;
  background-color: var(--color-white);
}
.radioBtn28 .checkmark:after {
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
}
.radioBtn28 input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border: none;
}

.radioBtn24 {
  padding-left: 24px;
  margin-bottom: 12px;
}
.radioBtn24 .checkmark {
  height: 24px;
  width: 24px;
  background-color: var(--color-white);
}
.radioBtn24 .checkmark:after {
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
}
.radioBtn24 input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border: none;
}
/* CHeck box  */

/* The container */
.checkBox {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: center;
  padding-left: 32px;
  margin-bottom: 0px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkBox .checkmark {
  position: absolute;
  top: 1;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: solid 1px #bac7d5;
  border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.checkBox:hover input ~ .checkmark {
  /* background-color: #ccc; */
}

.checkBox input:focus ~ .checkmark {
  border: solid 1px var(--color-primary);
}

.checkBox input:disabled ~ .checkmark {
  border: solid 1px #bac7d5;
  background-color: #eff2f5;
}

/* When the checkbox is checked, add a blue background */
.checkBox input:checked ~ .checkmark {
  background-color: var(--color-primary);
  border: solid 1px var(--color-primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkBox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkBox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkBox .checkmark:after {
  left: 1px;
  top: 1px;
  width: 16px;
  height: 16px;
  background-image: url("../assets/main/Glyph.svg");
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: 50%;
}

/* Global review box */
.G-reviewBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.G-reviewBox .rateBox {
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.G-reviewBox .rateBox .rateDis {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}
.G-reviewBox .rateBox .rate {
  color: #0172cb;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;

  padding: 0px 6px;
  background-color: #e8f4fd;
  border: solid 1px #0172cb;
  border-radius: 4px;
  height: 28px;
  min-width: 40px;
  text-align: center;
}
.G-reviewBox .reviewNo {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: #67778a;
}

/* global nights */
.G-nights {
  display: flex;
  flex-direction: row;
}
.G-nights span {
  color: #e99b05;
  font-size: 20px;
}

/* all involved */
.allInvolved {
  font-weight: 600;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background-color: #e96405;
  color: var(--color-white);
  align-self: flex-start;
}

/* free cancel */
.freeCancelContainer {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 5px;
}
.freeCancel {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #28a138;
}

/* ToolTip */
.tooltipContainer {
  border: none;
  background-color: transparent;
  color: #67778a;
  position: relative;

  cursor: pointer;
  padding: 0px;
  margin: 0px;
}
.blackToolTip {
  position: absolute;
  bottom: 40px;
  right: -110px;
  max-width: 600px;
  min-width: 351px;
  box-shadow: var(--box-shadow-252A3129);
  background-color: var(--color-primary-dark);
  border: solid 1px var(--color-primary-dark);
  border-radius: 4px;
  padding: 10px;
  display: none;
  z-index: 3;
}
.blackToolTip p {
  font-size: 13px;
  font-weight: 400px;
  line-height: 20px;
  text-align: left;
  color: var(--color-white);
  margin: 0px;
}
.blackToolTip .toolTipHang {
  transform: rotate(225deg);
  position: absolute;
  border-radius: 2px;
  bottom: -8px;
  right: 180px;
  width: 14px;
  height: 14px;
  background-color: var(--color-primary-dark);
  border: solid 1px var(--color-primary-dark);
  border-right: none;
  border-bottom: none;
}
/* --------------------------------------------------------------------------------------------- */

/* Navbar */
.navbar {
  /* background-color: cadetblue; */
  height: 70px;
  padding: 0px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  /* background-color: red; */
}

.nav-center {
  /* background-color: beige; */
  height: 40;
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.nav-left-menu {
  display: flex;
  gap: 35px;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-header-m-menu {
  display: none;
}

.logo {
  height: 107;
  width: 40;
}

.nav-menu-btn {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: solid 1px var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-primary-dark);
}
.nav-menu-btn:hover {
  background-color: #f1f4f7;
}
.nav-menu-icon {
  color: var(--color-primary-dark);
}

/* link otions */
.nav-link-wrap {
  /* position: relative; */
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-link {
  text-decoration: none;
  padding: 0px 16px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  height: 40px;

  display: flex;
  align-items: center;

  /* border: solid 1px transparent; */
  /* border: solid 1px var(--color-border-secondary); */
  border: solid 1px transparent;

  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  background-color: transparent;

  position: relative;
}
.nav-link:hover {
  cursor: pointer;
  background-color: #f1f4f7;
}
.nav-link:active {
  border: solid 1px var(--color-primary);
  color: var(--color-primary);
}
.nav-link-active {
  border: solid 1px var(--color-primary);
  color: var(--color-primary);
}
.nav-link-lable-acent {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  /* color: #e99b05; */
  color: var(--color-primary-dark);
}

#nav-link-btn-otel-wrap:focus {
  /* border: solid 1px red; */
}

/* Navbar otions */
.nav-options {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-option-btn {
  background-color: #ffffff;
  /* border: solid 1px var(--color-border-secondary); */
  border: solid 1px transparent;
  /* border: none; */
  border-radius: 100px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;

  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  font-family: "inter";
  text-decoration: none;
}
.nav-option-btn:hover {
  cursor: pointer;
  background-color: #f1f4f7;
}
.nav-option-btn:active {
  background-color: #e7ecf1;
  text-decoration: none;
}
.nav-option-icon {
  color: var(--color-primary);
}
.nav-option-lable {
  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.nav-option-wrap {
  position: relative;
}

.nav-option-language-box {
  position: absolute;
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
  width: 150px;
  box-shadow: var(--box-shadow-1c2b3d29);
  right: 0px;
  display: none;
  z-index: 1;
}
.nav-option-language-item {
  padding: 8px 2px;
  display: flex;
  flex-direction: row;
  border-bottom: solid 1px #eef1f4;
  height: 40px;
  gap: 8px;
}
.nav-option-language-item .label {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
  flex: 1;
}
/* .nav-option-language-item input {
  width: 24px;
} */
#nav-option-btn-language:focus {
  background-color: #e7ecf1;
}

.nav-option-btn-user {
  background-color: #ffffff;
  border: none;
  border-radius: 100px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;

  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.nav-option-user-image {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: #eef1f4;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-primary-dark);
}
.nav-option-user-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}
.nav-option-user-box {
  position: absolute;
  background-color: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--box-shadow-1c2b3d29);
  right: 0px;
  display: none;
  flex-direction: column;
  width: 235px;
  z-index: 1;
}
.nav-option-user-box-item {
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  text-decoration: none;
  border-bottom: solid 1px #eef1f4;
  height: 48px;
  color: var(--color-primary-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  align-items: center;
}
/* End of navbar */

/* Search head  --------------------------------------------------*/
.searchhead {
  display: flex;
  flex-direction: column;
  padding: 24px var(--page-padding-8);
  gap: 16px;
}
.searchhead .nav {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.searchhead .nav a {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  color: var(--color-primary-dark);
}
.searchhead .nav .chevron {
  font-size: 18px;
}
.searchhead .nav .mainNav {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.otel-menu-wrap {
  display: none;
}
/* .nav-link-btn-otel:hover + .otel-menu-wrap {
  display: block;
  background-color: red;
} */
.otel-menu {
  position: absolute;
  background-color: #f7f8fa;
  box-shadow: var(--box-shadow-1c2b3d29);
  border-radius: 8px;
  /* left: 0px;
  top: 40px; */
  left: 165px;
  top: 55px;
  color: var(--color-primary-dark);
  z-index: 21;
}
.otel-menu-header {
  height: 56px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-white);
  justify-content: space-between;
  align-items: center;
  padding: 8px;

  /* display: none; */
}
.otel-menu-header-title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.otel-menu-header-btn {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: solid 1px var(--color-border);
  border-radius: 100px;
  cursor: pointer;
}
.otel-menu-header-btn:hover {
  cursor: pointer;
  background-color: #f1f4f7;
}
.otel-menu-header-btn:active {
  background-color: #e7ecf1;
}
.otel-menu-header-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 26.68px;
}

.otel-menu-content {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  /* border: solid 1px yellow; */
}
.otel-menu-sidebar {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 12px;
  background-color: var(--color-white);
  border-radius: 8px 0px 0px 8px;
}
.otel-menu-sidebar-item {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}
.otel-menu-sidebar-item-active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.otel-menu-details {
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding: 20px;
  flex-wrap: wrap;
  /* background-color: #0077ff; */
}
.otel-menu-otels-container {
  display: flex;
  overflow: auto;
}
.otel-menu-otels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 267px;
  flex: 1;
  display: none;
  /* background-color: green; */
}
.otel-menu-otels-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--color-primary-dark);
  height: 44px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.otel-menu-otels-item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}
.otel-menu-otels-item-number {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.otel-menu-plans {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* background-color: yellow; */
}
.otel-menu-plan {
  display: flex;
  flex-direction: column;
  width: 290px;
  background-color: gree;
  border: solid 1px #e7ebf0;
  border-radius: 16px;
  gap: 12px;
  padding: 16px;
  justify-content: center;
  align-items: center;
}
.otel-menu-plan-icon {
  display: flex;
  background-color: red;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  color: #ffa939;
}
.otel-menu-plan-title {
  color: var(--color-white);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}
.otel-menu-plan-btn {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  border: none;
  background-color: #ffffff66;
  padding: 12px 16px;
  text-align: center;
  border-radius: 100px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}

/* End of mobile menu */

/* Mobile menu */
.modal-overlay {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #1c2b3d66;
  display: flex;
  justify-content: end;
  /* justify-content: center; */
  /* align-items: center; */
  flex: 1;
  z-index: 20;
}
.modal-overlay-submenu {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  /* background-color: var(--color-white); */
  display: flex;
  justify-content: end;
  /* justify-content: center; */
  /* align-items: center; */
  flex: 1;
  z-index: 21;
}
.m-menu-wrap {
  display: none;
}
.m-menu {
  background-color: var(--color-white);
  width: var(--mobile-menu-width);
  /* width: 100%; */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 8px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.m-menu-sections {
  gap: 24px;
  display: flex;
  flex-direction: column;
  padding: 0px 16px 16px 16px;
}
.m-menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 8px 16px;
  height: 56px;
}
.m-menu-section {
  border: solid 1px #d6dde6;
  border-radius: 12px;
  color: var(--color-primary-dark);
}
.m-menu-login-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.m-menu-login-title-box {
  display: flex;
  flex-direction: column;
  color: var(--color-primary-dark);
}
.m-menu-login-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}
.m-menu-login-dis {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.m-menu-login-section {
  display: none;
}
#m-menu-user-section {
  /* display: none; */
}
.m-menu-user-box {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.m-menu-user-image {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background-color: #b6bfcb;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-white);
}
.m-menu-user-name-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.m-menu-user-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.m-menu-user-mail {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.5px;
  color: #637489;
}

.m-menu-link-box {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-menu-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  border: none;
  background-color: transparent;
  border-bottom: solid 1px #eef1f4;
  height: 48px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-primary-dark);
}
.m-menu-link-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}
.m-menu-link-subMenu {
  width: 40px;
  height: 46px;
  border: none;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding: 0px;
  background-color: transparent;
}
.m-menu-link-arrow {
  border: solid 1px #e7ebf0;
  border-radius: 100px;
}

.m-menu-language-box {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-menu-language-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-primary-dark);
}
.m-menu-language-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.m-menu-language-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 0px;
  border-bottom: solid 1px #eef1f4;
  height: 46px;
}
.m-menu-language-item .label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-primary-dark);
  flex: 1;
}

.m-menu-acent-box {
  padding: 0px 16px;
  display: flex;
  flex-direction: column;
}
.m-menu-link-title-acent {
  color: #e99b05;
}

#m-menu-logout-section {
  display: none;
}

/* Mobile related css */
.mobile-head {
  padding: 8px 8px 8px 16px;
  box-shadow: var(--box-shadow-1c2b3d1f);
  display: flex;
  align-items: center;
  gap: 8px;
  display: none;
}
.mobile-head .title {
  font-size: 20px;
  font-weight: 700;
  size: 20px;
}
.mobile-head .back {
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  border: solid 1px var(--color-border);
  border-radius: 100px;
  cursor: pointer;
}
.mobile-head .back:hover {
  background-color: #f1f4f7;
}
.mobile-head .back:active {
  background-color: #e7ecf1;
}

/* Login box */

.modal {
  background-color: var(--color-white);
  width: 390px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-1c2b3d66);
  border-radius: 12px;
  color: var(--color-primary-dark);
  overflow-y: hidden;
  overflow-x: hidden;
}
.modal-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  padding-bottom: 0px;
}
.modal-header-btn-box {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
}
.modal-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-header-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.modal-header-title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.modal-header-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}
.modal-header-dis {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.modal-header-btn {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  background-color: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}
.modal-header-btn-desktop-back {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: solid 1px #d6dde6;
  background-color: transparent;
  cursor: pointer;
}
.modal-header-mobile-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: solid 1px var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  display: none;
  padding-top: 4px;
  color: var(--color-primary-dark);
}
.modal-header-mobile-btn:hover {
  cursor: pointer;
  background-color: #f1f4f7;
}
.modal-header-mobile-btn:active {
  background-color: #e7ecf1;
}

.modal-input-pass-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.modal-input-pass-box {
  border: solid 1px #d6dde6;
  background-color: #fbfcfc;
  height: 44px;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px;
  align-items: center;
}
.modal-input-pass-box input {
  border: none;
  height: 42px;
  flex: 1;
  border-radius: 6px;
  padding-left: 12px;
  line-height: 24px;
  background-color: #fbfcfc;
}
.modal-input-pass-box input:focus {
  outline: none;
}
.modal-input-pass-box span {
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.modal-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  justify-content: center;
  position: relative;
}
.modal-input-wrap span,
.modal-input-wrap label {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
}
.modal-input-wrap input,
.modal-input-wrap textarea {
  border: solid 1px #d6dde6;
  background-color: #fbfcfc;
  height: 44px;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
}

.modal-input-wrap .iconBtn {
  border: none;
  background-color: transparent;
  height: 20px;
  width: 20px;
  padding: 0px;
  position: absolute;
  right: 15px;
  bottom: 12px;
}

.modal-input-wrap .iconBtn span {
  font-size: 22px !important;
  color: #67778a;
}

.modal-input-wrap .error-Box,
.modal-input-pass-wrap .error-Box {
  display: flex;
  flex-direction: row;
  color: #d21c1c;
  gap: 4px;
  display: none;
}
.modal-input-wrap .error-Box .error-icon,
.modal-input-pass-wrap .error-Box .error-icon {
  display: flex;
  flex-direction: row;
  font-size: 18px;
}
.modal-input-wrap .error-Box .error-text,
.modal-input-pass-wrap .error-Box .error-text {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}

.modal-input-error .error-Box {
  display: flex;
}
.modal-input-error input {
  border: 1px solid #d21c1c;
  box-shadow: 2px 2px 0px 0px #faeaea;
  box-shadow: 2px -2px 0px 0px #faeaea;
  box-shadow: -2px 2px 0px 0px #faeaea;
  box-shadow: -2px -2px 0px 0px #faeaea;
}

.modal-input-lable {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
}

.modal-input-checkbox-wrap {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.modal-input-checkbox-wrap input {
  width: 24px;
  height: 24px;
  display: flex;
  border: solid 1px #bac7d5;
}
.modal-input-checkbox-wrap input:focus {
  border: solid 1px var(--color-primary);
}
.modal-input-checkbox-wrap span,
.modal-input-checkbox-wrap label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.modal-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.modal-select-wrap select {
  border: solid 1px #d6dde6;

  height: 44px;
  border-radius: 6px;
  padding: 10px;

  color: var(--color-primary-dark);
  font-size: 16px;

  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("../assets/main/keyboard_arrow_down.svg");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
  background-color: #fbfcfc;
}
.modal-select-wrap span,
.modal-select-wrap label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.modal-mobile-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
.modal-mobile-wrap span {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.modal-mobile-wrap .mobileInputBox {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.modal-mobile-wrap .codeSelect {
  flex-direction: row;
  width: 65px;
}
.modal-mobile-wrap .codeSelect select {
  border-radius: 6px 0px 0px 6px;
  width: 100%;
  border: solid 1px #d6dde6;
  height: 44px;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("../assets/main/keyboard_arrow_down.svg");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
  background-color: #fbfcfc;
}

.modal-mobile-wrap .mobileInput {
  flex-direction: row;
  width: 60px;
}
.modal-mobile-wrap .mobileInput input {
  border-radius: 0px 6px 6px 0px;
  border-left: none;
  width: 100%;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}

/* login modal */
.login-wrap {
  display: none;
}
.login-modal {
  /* display: none; */
}
.login-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  /* margin-top: 32px; */
}
.login-content-seprator {
  position: relative;
  border-top: solid 1px #d6dde6;
  margin-top: 6px;
  margin-bottom: 6px;
}
.login-content-seprator span {
  position: absolute;
  top: -10px;
  left: 40%;
  padding-left: 12px;
  padding-right: 12px;

  font-size: 14px;
  font-weight: 700;
  line-height: 20px;

  background-color: var(--color-white);
}
.login-content-auth-login {
  background-color: #f7f8fa;
  border: solid 1px #d6dde6;
  padding: 8px 30px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}
.login-content-auth-login img {
  width: 30px;
}
.login-term {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  /* display: flex; */
  /* justify-content: center; */
}
.login-term a {
  color: #0172cb;
  text-decoration: none;
}

/* login pass  */
.pass-modal {
  display: none;
}
.pass-content-forget {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* Forget password */
.forget-modal {
  display: none;
}

/* new account */
.account-modal {
  display: none;
}
.account-term {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4a4a49;
  text-decoration: none;
  text-align: center;
}

/* reach you  ------------------------------------------*/
.reachyou-modal-wrap {
  display: none;
  position: relative;
  z-index: 22;
}
.reachyou-modal {
  width: 660px;
  display: flex;
}
.reachyou-content {
  flex: 1;
  display: flex;
  overflow-x: scroll;
}
.reach-inputs {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.reach-inputs-row {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
#reach-message {
  height: 100px;
}
.reach-message-info {
  color: #788aa0;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.reach-terms {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reach-footer {
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
  padding: 0px 24px 24px 24px;
}

/* news letter */
.newsletter-modal-wrap {
  display: none;
}
.newsletter-modal {
  padding: 0px;
  width: 776px;
}
.newsletter-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  border-radius: 12px;
  position: relative;
}
.newsletter-sideimage {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
    url("../assets/main/newsletter/1.jpeg");
  width: 312px;
  /* height: 567px; */
  background-size: cover;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.newsletter-discount-box {
  background-color: #e96805;
  /* border-top-right-radius: 12px;
  border-bottom-right-radius: 12px; */
  border-radius: 0px 12px 12px 0px;
  color: var(--color-white);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 106px;
  margin-top: 32px;
}
.newsletter-discount-box-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}
.newsletter-discount-box-lable {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
}
.newsletter-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* position: relative; */
}
.newsletter-header {
  position: absolute;
  top: 16px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newsletter-close {
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.newsletter-details-content {
  padding: 32px 44px;
  display: flex;
  flex-direction: column;
  gap: 63px;
}
.newsletter-details-title-box {
  gap: 12px;
  display: flex;
  flex-direction: column;
}
.newsletter-details-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}
.newsletter-details-dis {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.newsletter-details-inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.newsletter-footer {
  display: flex;
  flex-direction: row-reverse;
}
.newsletter-footer button {
  padding-left: 36px;
  padding-right: 36px;
}

/* End of Login box */

/* Sales Agreement*/

.saleAgreement-modal-wrap {
  display: none;
  position: relative;
  z-index: 22;
}

.saleAgreement-modal {
  width: 800px;
  height: 90dvh;
  display: flex;
}
.saleAgreement-header {
  padding: 20px 24px 16px 24px;
}

.saleAgreement-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 24px;
}
.saleAgreement-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saleAgreement-content .headerBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.saleAgreement-content .headerBox span {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.saleAgreement-content p {
  font-weight: 400;
  font-size: 14px;
  margin: 0px;
}
.saleAgreement-content .cancelRule,
.saleAgreement-content .colored {
  font-weight: 400;
  font-size: 14px;
  margin: 0px;
  color: #ff0000;
}

.saleAgreement-content .section {
  border: solid 1px #e0e6ec;
  border-radius: 4px;
  padding: 8px;
  gap: 8px;
}
.saleAgreement-content .multiTableSection {
  display: flex;
  flex-direction: column;
}
.saleAgreement-content .multiTableSection .sectionTitle {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.saleAgreement-content .sectionTitle {
  font-weight: 600;
  font-size: 14px;
}
.saleAgreement-content .sectionTable td:nth-child(1) {
  font-weight: 400;
  font-size: 14px;
  width: 180px;
}
.saleAgreement-content .sectionTable td:nth-child(2) {
  font-weight: 400;
  font-size: 14px;
  color: #ff0000;
  width: 10px;
}
.saleAgreement-content .sectionTable td:nth-child(3) {
  font-weight: 400;
  font-size: 14px;
  color: #ff0000;
}

.saleAgreement-footer {
  display: flex;
  flex-direction: row;
  padding: 16px 24px 24px 24px;
}

.DHSIB-modal-wrap {
  display: none;
  position: relative;
  z-index: 22;
}

/* end of Sales Agreement*/

/* Header */
.header {
  padding-left: 32px;
  padding-right: 32px;
  /* display: none; */
}
.hero {
  /* height: 568px; */
  border-radius: 16px;
  background-size: cover;
  /* padding-top: 48px;
  padding-bottom: 48px; */
  padding: 48px 0px;

  display: flex;
  flex-direction: column;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)),
    url("../assets/home/hero.jpeg");
  background-repeat: no-repeat, repeat;
}
.hero-title-wrap {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 16px;
}
.hero-title-box {
  max-width: 610px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  /* background-color: #e99b05; */
}
.hero-title-text {
  font-size: 40px;
  font-weight: 800;
  color: var(--color-white);
}
.hero-title-dis {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-white);
}

/* Hero Frame */
.hero-frame-wrap {
  display: flex;
  padding: 0px 7%;
  justify-content: center;
  align-items: center;
  /* background-color: #005fcc; */
}
.hero-frame {
  width: 100%;
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--box-shadow-1c2b3d29);

  /* background-color: red; */
}
.hero-tabs {
  display: flex;
  gap: 8px;
}
.hero-tab-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  display: none;
  gap: 20px;
  /* background-color: red; */
}

/* General tabs */
.tab-btn {
  background-color: transparent;
  border: solid 2px transparent;
  border-radius: 100px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  color: var(--color-primary-dark);
  font-size: 18px;
  font-weight: 600px;
  text-decoration: none;
  white-space: nowrap;
}
.tab-btn:hover {
  background-color: #e5eaef;
  cursor: pointer;
}
.tab-btn:active {
  color: var(--color-primary);
  border: solid 2px var(--color-primary);
  background-color: transparent;
}
.tab-btn-active {
  color: var(--color-primary);
  border: solid 2px var(--color-primary);
  background-color: transparent;
}
.tab-content {
  display: none;
}

/* Here search */
.hero-search {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  /* background-color: #005fcc; */
  flex: 1;
}
.hero-search-item-wrap {
  position: relative;
  flex: 1;
}
.hero-search-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  border: solid 1px var(--color-border-secondary);
  border-radius: 100px;
  padding: 11px 16px;
  min-width: 210px;
  max-height: 58px;
  height: 58px;
  position: relative;
}
.hero-search-item:hover {
  cursor: pointer;
  background-color: var(--color-background-hover);
}
.hero-search-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  color: var(--color-primary-dark);
  font-variation-settings: "wght" 700;
}
.hero-search-item input {
  border: none;
  background-color: transparent;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  outline: none;
}
.hero-search-item-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  /* background-color: blue; */
  color: var(--color-primary-dark);
  /* font-variation-settings: 'wght' 400; */
}
.hero-search-btn {
  width: 140px;
}
.hero-search-btn-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-white);
}
.hero-search-item-calender {
  min-width: 260px;
}
.hero-search-item-calender {
}

/* Hero where to go prefeered suggestion */
.hero-whereto-list-box {
  position: absolute;
  top: 68px;
  left: 0px;
  z-index: 1;
  background-color: transparent;
  display: none;
  z-index: 3;
}
.hero-whereto-list-header {
  /* background-color: var(--color-white); */
  /* background-color: #b6bfcb; */
  height: 56px;
  padding: 8px;
  display: flex;
  flex: 1;
  flex-direction: row;
  display: none;
}
.hero-whereto-list-headee-close {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: solid 1px var(--color-border);
  border-radius: 100px;
  cursor: pointer;
}

.hero-whereto-suggestion-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 16px;
  border-radius: 16px;
  cursor: default;
  display: none;
}
.hero-otel-whereto-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0px;
}
.hero-otel-whereto-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.hero-otel-whereto-locations {
  flex: 1;
  display: flex;
  gap: 11px;
}
.hero-otel-whereto-location {
  border: solid 1px var(--color-border-secondary);
  width: 98px;
  height: 94px;
  border-radius: 6px;
  padding: 4px 4px 8px 4px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}
.hero-otel-whereto-location img {
  width: 90px;
  height: 58px;
}
.hero-otel-whereto-name {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-primary-dark);
}
.hero-otel-whereto-utilities {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-otel-whereto-utility {
  border: solid 1px var(--color-border-secondary);
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  white-space: nowrap;
  cursor: pointer;
  /* background-color: red; */
}

.hero-whereto-search-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  /* height: 314px; */
  width: 366px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 16px;
  /* position: absolute;
  top: 68px;
  left: 0px; */
  z-index: 1;
  cursor: default;
  display: none;
}
.otel-whereto-search-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}
.otel-whereto-search-list {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}
.otel-whereto-search-item {
  padding: 6px;
  padding-left: 4px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;

  align-items: center;
  text-decoration: none;
  height: 36px;
  cursor: pointer;
}
.otel-whereto-search-item:hover {
  background-color: #f5f7f9;
}
.otel-whereto-search-item-name-box {
  display: flex;
  align-items: center;

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-primary-dark);
  gap: 8px;
  height: 36px;
}
.tel-whereto-search-item-poular {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #67778a;
}

.guest-selector-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  width: 304px;
  /* height: 308px; */

  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  padding: 16px;
  border-radius: 16px;
  position: absolute;
  top: 68px;
  left: 0px;
  z-index: 16;
  cursor: default;
  display: none;
  flex: 1;
  z-index: 3;
}
.guest-selector-interbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  /* display: none; */
}
.guest-selector-header {
  display: none;
}
.otel-guest-selector-rooms-html {
  display: none;
}
.otel-guest-selector-rooms-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.otel-guest-selector-rooms {
  display: flex;
  flex-direction: column;
}

.otel-guest-selector-room-header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  background-color: #f1f4f7;
  align-items: center;
  padding: 4px 8px;

  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.otel-guest-selector-room-title {
  display: flex;
  gap: 0px;
}
.otel-guest-selector-room-header-operation {
  display: flex;
  justify-content: center;
}
.otel-guest-selector-room-remove {
  background-color: transparent;
  border: none;
  color: #d21c1c;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
}
.otel-guest-selector-room-unfold {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  color: var(--color-primary-dark);
}
.otel-guest-selector-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 44px;

  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  padding: 8px 0px;
  border-bottom: solid 1px #eef1f4;
}

.otel-guest-selector-operations {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.otel-guest-selector-operator-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.otel-guest-selector-operator-btn span {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary-dark);
}
.otel-guest-selector-operator-value {
  /* background-color: green; */
  width: 30px;
  text-align: center;
  width: 30px;
}

.otel-guest-selector-childage-container {
  /* background-color: green; */
  padding-left: 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
}
.otel-guest-selector-childage-title-box {
  display: flex;
  gap: 0px;
}
.otel-guest-selector-childage-option-box {
  /* background-color: red; */
  position: relative;
}
.otel-guest-selector-childage-option-btn {
  /* background-color: red; */
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  background-color: transparent;

  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  cursor: pointer;
  gap: 5px;
}
#otel-guest-selector-childage-option-value-age,
#otel-guest-selector-childage-option-value-select {
  display: none;
}

.guest-selector-add-room {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 10px 0px;

  color: var(--color-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.guest-selector-footer {
  display: flex;
  flex-direction: column;
  /* flex: 1; */
  gap: 16px;
  justify-content: space-between;
  /* background-color: red; */
}

.otel-guest-selector-agelist-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  width: 112px;

  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 8px;
  position: absolute;
  top: 34px;
  left: -24px;
  z-index: 1;
  cursor: default;
  display: none;
}
.otel-guest-selector-agelist-innerbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.otel-guest-selector-agelist-box span {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  cursor: pointer;
  height: 24px;
}
.otel-guest-selector-agelist-box span:hover {
  background-color: #f5f7f9;
}

.guest-selector-confirm-container {
  display: flex;
  flex: 1;
}
.guest-selector-confirm-btn {
  flex: 1;
  height: 44px;
}

/* ------------------------- Tour Trip -------------------------- */
.turtrip-selctor-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  width: 300px;
  display: flex;
  flex-direction: column;

  border-radius: 16px;
  position: absolute;
  top: 68px;
  left: 0px;
  cursor: default;
  display: none;
  z-index: 3;
}
.turtrip-selctor-box .head {
  padding: 8px 8px 8px 16px;
  box-shadow: var(--box-shadow-1c2b3d1f);
  display: flex;
  align-items: center;
  gap: 8px;
  display: none;
}
.turtrip-selctor-box .head .title {
  font-size: 20px;
  font-weight: 700;
  size: 20px;
}
.turtrip-selctor-box .items {
  /* background-color: blue; */
  padding: 12px;
}
.turtrip-selctor-item {
  padding: 6px;
  border-radius: 6px;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.turtrip-selctor-item:hover {
  background-color: #f5f7f9;
}

/* ------------------------- Tur period  -------------------*/
.turperiod-selctor-box {
  background-color: var(--color-white);
  box-shadow: var(--box-shadow-1c2b3d29);
  width: 248px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  position: absolute;
  top: 68px;
  left: 0px;
  z-index: 1;
  cursor: default;
  display: none;
  z-index: 3;
}
.turperiod-selctor-box .items {
  padding: 12px;
}
.turperiod-selctor-items {
  display: flex;
  flex-direction: column;
}
.turperiod-selctor-box .items .section {
  border-top: solid 1px #d6dde6;
  margin-top: 12px;
  padding-top: 12px;
}
.turperiod-selctor-box .items .section .label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.turperiod-selctor-item {
  padding: 6px;
  border-radius: 6px;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.turperiod-selctor-item:hover {
  background-color: #f5f7f9;
}
/* ------------------- Hero suggestion -----------------------*/
.hero-suggestions {
  display: flex;
  flex: 1;

  flex-wrap: wrap;
  gap: 24px;
  width: auto;
  padding: 20px 0px 0px 0px;
  min-width: 160px;

  width: 100%;
}
.hero-suggestions span:hover {
  color: var(--color-primary-hover);
  cursor: pointer;
}
.hero-suggestions span:active {
  color: var(--color-primary-active);
}
.hero-suggestions a {
  text-decoration: none;
  white-space: nowrap;
}
.hero-suggestions span {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

/* ----------------- Hero last searches -----------------------*/
.hero-last-searches {
  display: flex;
  border-top: solid 1px var(--color-border-secondary);
  padding-top: 20px;
  margin-top: 20px;
  gap: 16px;
}
.hero-last-searches-box {
  display: flex;
  background-color: #f7f8fa;
  border-radius: 10px;
  padding: 8px;
  border: solid 1px var(--color-border);
  gap: 14px;
  justify-content: space-between;
  align-items: start;
  text-decoration: none;
}
.hero-last-searches-box:hover {
  background-color: #eef1f4;
}
.hero-last-searches-box:active {
  background-color: #e0e6ec;
}
.hero-last-searches-details {
  display: flex;
  flex-direction: column;
}
.hero-last-searches-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.hero-last-searches-close-btn {
  border: none;
  background-color: transparent;
  display: flex;
  padding: 0px;
}
.hero-last-searches-close-btn span {
  color: var(--color-primary-dark);
  font-size: 20px;
  cursor: pointer;
}
.hero-last-searches-time,
.hero-last-searches-features {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-dark);
}

/*  ----------------------------- offer section -------------------- */
.offers-wrap {
  padding: 32px var(--page-padding-8) 64px var(--page-padding-8);
}
.offers {
  position: relative;
  display: flex;
  flex: 1;
}
.offers-float {
  /* background-color: green; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1;
  gap: 16px;
}
.offer {
  border: solid 1px var(--color-border);
  border-radius: 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px;
  flex: 1;
  height: 80px;
  min-width: 380px;
  box-sizing: border-box;
  /* background-color: #e99b05; */
}
.offer:hover {
  background-color: #f5f7f9;
}
.offer-disc-box {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}
.offer-discription {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-primary-dark);
}
.offer-iconContainer {
  display: flex;
  min-width: 56px;
  min-height: 56px;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
}
.offer-iconContainer-date {
  background-color: #fcf3e1;
}
.offer-iconContainer-dairwave {
  background-color: #e8f4fd;
}
.offer-iconContainer-skiing {
  background-color: #faeaea;
}
.offer-iconContainer-call {
  background-color: #1ca86524;
}

.offer-icon-date {
  color: #e99b05;
}
.offer-icon-dairwave {
  color: #0172cb;
}
.offer-icon-skiing {
  color: #d21c1c;
}
.offer-icon-call {
  color: #28a138;
}
.offer-iconContainer span {
  font-size: 24px;
}
.offer-btn {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}
.offers-ellipse-bar {
  display: none;
}

/*--------------------------- main Slider -----------------------------*/
.main-slider-wrap {
  padding: 0px var(--page-padding-8);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.main-slider-container {
  display: flex;
  flex-direction: column;
  padding: 48px 44px;
  gap: 20px;
  border-radius: 16px;
  background-color: #f7f8fa;
  border: solid 1px #e7ebf0;
}
.main-slider-title-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.main-slider-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 21.78px;
  text-align: center;
  letter-spacing: 0.15px;
  text-decoration: none;
  color: var(--color-primary-dark);
}

.main-slider-title-box .main-slider-title:not(:first-child) {
  display: none;
}

.home-slider-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 306px;
  gap: 18px;
  perspective: 1000px;
}
.home-slider-container div {
  transform-style: preserve-3d;
}
.main-slider-carouselWrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.main-slider-carousel {
  display: flex;
  flex: 1;
  height: 100%;
}
.main-slider {
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
  transform-style: preserve-3d;
  height: 100%;
  position: relative;
}

.main-slider .ms-item {
  position: absolute;
  display: block;
  border-radius: 16px;
  transition: transform 1.2s;
  width: 82.5%;
  height: 100%;
  box-shadow: var(--box-shadow-1c2b3d29);
}
.main-slider .ms-item .ms-img {
  height: 100%;
  width: 100%;
}
.main-slider .ms-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.ms-item[data-position="1"] {
  z-index: 10;
  transform: rotateY(0deg) translateX(0%) scale(1);
}
.ms-item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(-8%) scale(0.9);
}
.ms-item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(-16%) scale(0.8);
}
.ms-item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-24%) scale(0.7);
}
.ms-item[data-position="5"] {
  z-index: 6;
  transform: rotateY(0deg) translateX(-32%) scale(0.6);
}
.ms-item[data-position="6"] {
  z-index: 5;
  transform: rotateY(0deg) translateX(-40%) scale(0.5);
}
.ms-item[data-position="7"] {
  z-index: 4;
  transform: rotateY(0deg) translateX(-48%) scale(0.4);
}
.ms-item[data-position="8"] {
  z-index: 3;
  transform: rotateY(0deg) translateX(-56%) scale(0.3);
}
.ms-item[data-position="9"] {
  z-index: 2;
  transform: rotateY(0deg) translateX(-64%) scale(0.3);
}
.ms-item[data-position="10"] {
  z-index: 1;
  transform: rotateY(0deg) translateX(-72%) scale(0.3);
}

/* .ms-item[data-position="1"] {
  z-index: 10;
  transform: rotateY(0deg) translateX(0%) scale(1);
}
.ms-item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(-12%) scale(0.9);
}
.ms-item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(-24%) scale(0.8);
}
.ms-item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(-36%) scale(0.7);
}
.ms-item[data-position="5"] {
  z-index: 6;
  transform: rotateY(0deg) translateX(-48%) scale(0.6);
}
.ms-item[data-position="6"] {
  z-index: 5;
  transform: rotateY(0deg) translateX(-60%) scale(0.5);
} */

.ms-item:not([data-position="1"])::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 15px;
  background-color: #fff;
  opacity: 0.6;
}

.main-slider-prev,
.main-slider-next {
  width: 44px;
  height: 44px;
  border-radius: 100px;
}
/* .main-slider-prev {
  background-color: #ffffff;
  color: #99c9ff;
} */

.main-slider-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
/* ------------------------- Tur theme -------------------------------- */
.tur-theme-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ----------------------------- Otel theme -------------------------- */

.tur-card {
  /* background-color: cadetblue; */
  padding: 0px;
  border-radius: 16px;
  position: relative;
}

/* .tur-card::after {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  border-radius: 15px;

  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );

  opacity: 0.5;
  transition: all 1s ease-in;
}

.tur-card:hover::after {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );

  opacity: 1;
  transition: all 0.9s ease-in;
} */

.tur-card:hover .tur-card-line {
  width: 181px;
}

.tur-card-title-box {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
}
.tur-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
}
.tur-card-line {
  height: 3px;
  width: 29px;
  background-color: var(--color-white);
  margin-top: 7px;
}

.otel-theme-wrap {
  padding: 48px calc(var(--page-padding-8) - 64px);
  background-color: #e3f0ff;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.otel-slider-container {
  flex: 1;
}
.otel-slider {
  position: relative;
  display: flex;
  flex: 1;
  /* gap: 24px; */
  height: 162px;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  border: solid 1px transparent;
}
.otel-slider-float {
  position: absolute;
  display: flex;
  flex: 1;
  gap: 24px;
  top: 0px;
  left: 0px;
  /* height: 168px; */
  /* margin-top: 20px; */
  /* margin-bottom: 20px; */
  /* background-color: red; */

  /* overflow: hidden; */
}
.otel-slider-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 100px;
}

.otel-slider-nav-btn:disabled {
  background-color: var(--color-white);
  color: #99c9ff;
}

.otel-card {
  width: 220px;
  height: 160px;
  border-radius: 16px;
  position: relative;
  /* flex: 1; */
  /* background-color: red; */
}
.otel-card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* width: 220px;
  height: 160px; */
  border-radius: 16px;
  /* position: relative; */
}
.otel-buttons {
  display: flex;
  flex: 1;
  justify-content: center;
}
.otel-buttons a {
  text-decoration: none;
}
.otel-buttons span {
  font-weight: 500;
}

/*-------------------------------- Elci tur ----------------------------*/

.elci-tur-wrap {
  padding: 64px calc(var(--page-padding-8) - 64px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}
.elci-tur-slider-container {
  flex: 1;
}
.elci-tur-slider {
  position: relative;
  display: flex;
  flex: 1;
  height: 320px;
  margin-bottom: 0px;
  margin-top: 20px;
  overflow: hidden;
}
.elci-tur-slider-float {
  position: absolute;
  display: flex;
  flex: 1;
  gap: 24px;
  top: 0px;
  left: 0px;
  /* background-color: #99c9ff; */
  /* height: 300px; */
}
.elci-tur-slider-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 100px;
}
.elci-tur-slider-nav-btn:disabled {
  color: #99c9ff;
  background-color: #e3f0ff;
}
.elci-tur-card {
  width: 220px;
  height: 300px;
  border: solid 1px var(--color-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.elci-tur-card:hover {
  box-shadow: var(--box-shadow-1c2b3d29);
}
.elci-tur-card:hover .elci-tur-title {
  color: var(--color-primary);
  text-decoration: underline;
}
.elci-tur-card-img-box {
  padding: 12px;
}
.elci-tur-card-img {
  object-fit: cover;
  width: 100%;
  /* width: 196px; */
  height: 112px;
  border-radius: 12px;
  position: relative;
  /* margin: 12px; */
  /* background-color: red; */
}
.elci-tur-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 0px 20px 20px 20px;
}
.elci-tur-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 24px;
}
.elci-tur-dis {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-primary-dark);
  line-height: 20px;
}
.elci-tur-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary-dark);
}
.elci-tur-context {
  margin-bottom: 64px;
  padding: 0px var(--page-padding-8);
}
.elci-tur-context p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary-dark);
  line-height: 24px;
}

/* ------------------------- Footer -------------------------*/

/* Contact form */
.contact-wrap {
  display: flex;
  position: relative;
  background-color: #005fcc;
  padding: 60px var(--page-padding-8) 36px var(--page-padding-8);
  border-radius: 16px 16px 0px 0px;
}
.contact-img-wrap {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: space-between;
  /* background-color: #3ba346; */
  flex-wrap: wrap;
}
.contact-img {
  width: 600px;
  /* height: 382px; */
  border-radius: 16px;
}
.contact-formback {
  /* background-color: #bac7d5; */
  width: 500px;
  height: 380px;
}
.contact-form-wrap {
  position: absolute;
  padding-right: 16px;
  /* height: 304px; */
  left: var(--page-padding-8);
  top: 99px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
  /* background-color: red; */
}
.contact-title-box {
  display: flex;
  flex-direction: column;
  width: 550px;
  gap: 8px;
}
.contact-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 46.68px;
  background-image: linear-gradient(#ffffff, #d6dde6);
  color: transparent;
  background-clip: text;
}
.contact-dis {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 26.68px;
}
.contact-form {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--box-shadow-1c2b3d29);
}
.contact-tabs {
  display: flex;
  flex-direction: row;
  /* background-color: red; */

  gap: 8px;
}
.contact-inputs {
  display: flex;
  flex-direction: row;
  gap: 12px;
  /* align-items: center; */
  /* background-color: red; */
  flex: 1;
  /* flex-wrap: wrap; */
}
.contact-textFiled {
  color: #67778a;
  border: solid 1px #d6dde6;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background-color: #fbfcfc;
}

.contact-textFiled input {
  border: none;
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  outline: none;
  background-color: transparent;
}

/* Contact bar wrap */
.contact-bar-wrap {
  padding: 20px var(--page-padding-8);
  display: flex;
  flex-direction: row;
  background-color: #26384f;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-bar-social-container {
  display: flex;
  gap: 16px;
}
.contact-bar-social-container a {
  padding: 0px;
  margin: 0px;
}
.contact-bar-tel-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
}
.contact-bar-tel {
  font-size: 26px;
  width: 700;
  line-height: 31px;
}

/* Footer links */
.footer-links-wrap {
  display: flex;
  position: relative;
  padding: 36px var(--page-padding-8);
  background-image: linear-gradient(#1c2b3d, #070d1d);
  gap: 24px;
}
.footer-links-address {
  display: flex;
  flex-direction: column;
  /* background-color: blue; */
  width: 202px;
  gap: 30px;
}
.footer-links-logo {
  width: 132px;
}
.footer-links-address-box {
  /* background-color: green; */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links-address-box span {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-white);
}

.footer-links-certificates {
  display: flex;
  flex-direction: row;
  gap: 13px;
  align-items: center;
  flex-wrap: wrap;

  position: absolute;
  bottom: 36px;
}
.footer-links-tursab {
  height: 89px;
}
.footer-links-etbis {
  height: 87px;
}

.footer-links-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 24px;

  flex-wrap: wrap;
  padding-bottom: 110px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* background-color: #005fcc; */
  flex: 1;
  white-space: nowrap;
}
.footer-links-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 28px;
}
.footer-links a {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-white);
  line-height: 24px;
  text-decoration: none;
}

/* Footer bottom */
.footer-bottom {
  padding: 24px var(--page-padding-8) 10px var(--page-padding-8);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: solid 1px #67778a66;
  background-color: #070d1d;
  gap: 10px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;

  flex-wrap: wrap;
}
.footer-bottom section {
  display: flex;
  gap: 20px;
}

/* Footer reach you */
.footer-reachyou {
  position: fixed;
  display: flex;
  flex-direction: row;
  gap: 16px;
  bottom: 40px;
  right: 40px;
  z-index: 14;
}
.footer-reachyou-desktop {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.footer-reachyou-whatsapp {
  display: flex;
  justify-content: space-between;
  background-color: #4fce5d;
  gap: 14px;
  padding: 10px 24px 10px 24px;
  border-radius: 100px;
  align-items: center;
  border: none;
  box-shadow: var(--box-shadow-1c2b3d29);
  cursor: pointer;
}
.footer-reachyou-whatsapp img {
  width: 24px;
  height: 24px;
}
.footer-reachyou-whatsapp span {
  font: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-white);
}
.footer-reachyou-whatsapp:hover {
  background-color: #45bb52;
}
.footer-reachyou-whatsapp:active {
  background-color: #3ba346;
}
.footer-reachyou-btn {
  /* box-shadow: var(--box-shadow-1c2b3d29); */
  /* display: flex;
  justify-content: space-between;
  background-color: var(--color-primary);
  gap: 12px;
  padding-left: 14px;
  padding-right: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 100px;
  align-items: center;
  border: none;
  box-shadow: var(--box-shadow-1c2b3d29);
  cursor: pointer; */
}
.footer-reachyou-btn span {
  font: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-white);
}
.footer-reachyou-contactmenu-btn {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background-color: #e99b05;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  box-shadow: var(--box-shadow-1c2b3d66);
  display: none;
}

.contact-modal-wrap {
  display: none;
}
.contact-modal {
  /* background-color: #505358; */
  background-color: transparent;
}
.contact-modal-content {
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: absolute;
  right: 18px;
  bottom: 23px;
  align-items: end;
}
.contact-modal-items {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 20px;
}
.contact-modal-items a {
  padding-right: 6px;
}
.contact-modal-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: none;
  background-color: transparent;

  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-white);
  cursor: pointer;
}

.contact-modal-item-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  text-align: center;
  vertical-align: center;
  align-items: center;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  box-shadow: var(--box-shadow-1c2b3d66);
  cursor: pointer;
}
.contact-modal-item-close {
  width: 56px;
  height: 56px;
  background-color: #e99b05;
  align-items: center;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  box-shadow: var(--box-shadow-1c2b3d66);
  font-size: 30px;
}

.footer-scrollup-wrap {
  position: fixed;
  display: flex;
  flex-direction: row;
  gap: 16px;
  bottom: 40px;
  left: 40px;
  z-index: 14;
}
.footer-scrollup-btn {
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background-color: var(--color-white);
  border: none;
  color: var(--color-primary-dark);
  cursor: pointer;
  box-shadow: var(--box-shadow-1c2b3d66);
}

/*  */
.carousel-counter {
  display: none;
}

/* -------------------------- Cookies CSS --------------------------*/
.cookies-modal-wrap {
  /* display: none; */
  position: relative;
  z-index: 22;
}
.cookies-modal {
  position: fixed;
  bottom: 10px;
  width: calc(100vw - (2 * var(--page-padding-8)));
  margin: 30px var(--page-padding-8);
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--box-shadow-1c2b3d29);
  flex-direction: row;
  gap: 40px;
  align-items: center;
  /* flex-wrap: wrap; */
}

.cookies-modal .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cookies-modal .ck-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-primary-dark);
}
.cookies-modal .ck-description {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-primary-dark);
  margin: 0px;
}

.cookies-modal .actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  text-wrap: nowrap;
}
.cookies-modal .otherActions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  text-wrap: nowrap;
}
.cookies-modal .acceptCookies {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  height: 40px;
}

.cookies-modal .rejectCookies,
.cookies-modal .cookiesPreferences {
  height: 40px;
}

/* cookies preferences  */

.cookiesPref-modal-wrap {
  display: none;
  position: relative;
  z-index: 22;
}
.cookiesPref-modal {
  background-color: transparent;
  width: 648px;
  display: flex;
  border-radius: 8px;
  height: calc(100dvh - 60px);
  flex-direction: column;
}

.cookiesPref-modal .container {
  background-color: var(--color-white);
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  padding: 24px 24px 24px 24px;
  gap: 20px;
}

.cookiesPref-modal .contentScroll {
  display: flex;
  flex: 1;
  /* height: 100%; */
  flex-direction: column;
  gap: 20px;

  overflow-y: scroll;
}

.cookiesPref-modal .content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
}
.cookiesPref-modal .content .logo {
  width: 85px;
  height: 32px;
}
.cookiesPref-modal .content .title {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-primary-dark);
}
.cookiesPref-modal .content .description {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-primary-dark);
  padding: 0px;
  margin: 0px;
}

.cookiesPref-modal .optionsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cookiesPref-modal .optionsContainer .cookieOption {
  display: flex;
  flex-direction: column;
  border: solid 1px #e0e6ec;
  background-color: var(--color-white);
  border-radius: 8px;
  gap: 8px;
  padding: 12px;
}
.cookiesPref-modal .optionsContainer .cookieOption .cookieOpHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.cookiesPref-modal .optionsContainer .cookieOption .alwaysActive {
  font-weight: 500;
  font-size: 16px;
}
.cookiesPref-modal .optionsContainer .cookieOption .cookieOpTitleBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  flex: 1;
  cursor: pointer;
}
.cookiesPref-modal .optionsContainer .cookieOption .cookieOpTitle {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-primary-dark);
}
.cookiesPref-modal .optionsContainer .cookieOption .cookieOpExpand {
  background-color: transparent;
  width: 28px;
  padding-right: 10px;
  border: none;
  color: var(--color-primary-dark);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cookiesPref-modal
  .optionsContainer
  .cookieOption
  .cookieOpContent
  .cookieOpDescription {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-primary-dark);
  margin: 0px;
}

.cookiesPref-modal .footer {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  align-items: center;
  /* padding: 24px; */
}
.cookiesPref-modal .footer .saveIt {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  height: 40px;
}
.cookiesPref-modal .footer .closeCookiesPref {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  height: 40px;
  color: var(--color-primary-dark);
}

/* ---------------------- End of Cookies CSS -----------------------*/

/*------------------------- 404 page styles ------------------------*/
.p404-wrap {
  padding: 50px var(--page-padding-8) 75px var(--page-padding-8);
}

.p404-wrap .content {
  display: flex;
  flex-direction: row;
  gap: 70px;
  align-items: center;
}
.p404-wrap .detailsWrap {
  display: flex;
  flex-direction: column;
  flex: 3;
  align-items: start;
  gap: 32px;
}

.p404-wrap .details {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}

.p404-wrap .details .p404Text {
  background-color: #67778a;
  width: 90;
  height: 60;
  gap: 4px;
  border-radius: 4px;
  padding: 8px;
  font-weight: 700;
  font-size: 36px;
  color: var(--color-white);
  margin-bottom: 8px;
}
.p404-wrap .details .p404Title {
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--color-primary-dark);
}
.p404-wrap .details .p404Desc {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-primary-dark);
}
.returnBtn {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.p404-wrap .imageContainer {
  flex: 5;
}
.p404-wrap .imageContainer img {
  width: 100%;
  height: 100%;
}
/*----------------------- end 404 page styles ----------------------*/

/* ---------------------- Toastr CSS -----------------------*/
.toast-title {
  font-weight: bold;
}
.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #ffffff;
}
.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}
#toast-container {
  position: fixed;
  z-index: 999999;
  /*overrides*/
}
#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#toast-container > div {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#toast-container > div:hover {
  -moz-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}
.toast {
  background-color: #030303;
}
.toast-success {
  background-color: #51a351;
}
.toast-error {
  background-color: #bd362f;
}
.toast-info {
  background-color: #2f96b4;
}
.toast-warning {
  background-color: #f89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

/* ---------------------- End of Toastr CSS --------------- */

@media screen and (max-width: 1024px) {
  .navbar {
    height: 56px;
  }
  .nav-left-menu {
    flex: 1;
  }
  .nav-header {
    flex: 1;
  }
  .nav-header-m-menu {
    display: flex;
    gap: 12px;
  }
  .nav-links {
    display: none;
  }
  .nav-options {
    display: none;
  }

  /* Mobile css */
  .mobile-head {
    display: flex;
  }

  /* otel menu  */
  .otel-menu-container {
    background-color: var(--color-white);
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    width: var(--mobile-menu-width);
    height: 100vh;

    /* display: block; */
  }

  .otel-menu-wrap {
    display: none;
  }

  .otel-menu {
    position: relative;
    left: auto;
    top: auto;
    box-shadow: none;
  }

  .otel-menu-content {
    flex-direction: column;
  }

  .otel-menu-sidebar {
    display: flex;
    flex-direction: row;
    padding: 16px;
    gap: 12px;

    overflow-y: hidden;
    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .otel-menu-sidebar::-webkit-scrollbar {
    display: none;
  }

  .otel-menu-details {
    /* background-color: red; */
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    flex-wrap: nowrap;
  }
  .otel-menu-otels-container {
    overflow: auto;
    /* padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px; */

    padding: 20px 20px 0px 20px;
  }
  .otel-menu-plans {
    display: flex;
    flex-direction: row;
    /* background-color: yellow; */
    /* padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px; */
    padding: 0px 20px 20px 20px;

    overflow-y: hidden;
    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .otel-menu-plans::-webkit-scrollbar {
    display: none;
  }
  .otel-menu-plan {
    /* flex-wrap: nowrap; */
    white-space: nowrap;
  }
}

@media screen and (max-width: 720px) {
  .contact-img {
    width: 100%;
  }

  .cookies-modal {
    flex-wrap: wrap;
  }
}

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
  .hideU600 {
    display: none;
  }
  .desktop-modal-overlay {
    align-items: normal;
  }
  .modal {
    width: 100%;
    border-radius: 0px;
    overflow-y: hidden;
  }
  .modal-header {
    padding: 8px;
    padding-left: 16px;
    border: solid 1px var(--color-border-secondary);
  }
  .modal-header-btn-box {
    display: none;
  }
  .modal-header-title-wrap {
    gap: 12px;
  }
  .modal-header-mobile-btn {
    display: flex;
  }
  .modal-header-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
  }
  .modal-header-dis {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }
  .modal-header-btn {
    display: none;
  }

  /* Tooltip */
  .blackToolTip {
    left: -100px;
  }
  .blackToolTip .toolTipHang {
    left: 40px;
  }

  /* Sale Agreement */
  .saleAgreement-modal {
    margin-top: 20px;
    width: 100%;
    height: 98dvh;
    border-radius: 16px 16px 0px 0px;
  }
  .saleAgreement-header {
    border: none;
    padding: 16px;
  }
  .saleAgreement-content {
    padding: 16px;
  }
  .saleAgreement-footer {
    padding: 24px 16px;
  }
  .saleAgreement-footer button {
    width: 100%;
  }

  /* ------- Header --------- */
  .navbar {
    padding-left: 16px;
    padding-right: 8px;
    height: 56px;
  }
  .header {
    padding-left: 0px;
    padding-right: 0px;
  }
  .nav-left-menu {
    flex: 1;
  }
  .nav-header {
    flex: 1;
    /* background-color: green; */
  }
  .nav-header-m-menu {
    display: flex;
    gap: 12px;
  }
  .nav-links {
    display: none;
  }
  .nav-options {
    display: none;
  }

  .m-menu {
    width: 100%;
  }

  /* ----------------------- Otel menu ------------------------ */
  .otel-menu-wrap {
    display: none;
  }
  .otel-menu-container {
    width: 100%;
  }
  .otel-menu {
    /* display: flex; */
    position: relative;
    left: auto;
    top: auto;
    box-shadow: none;

    /* overflow-y: scroll;
    overflow-x: hidden; */
  }
  .otel-menu-content {
    flex-direction: column;
  }
  .otel-menu-sidebar {
    display: flex;
    flex-direction: row;
    padding: 16px;
    gap: 12px;

    overflow-y: hidden;
    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .otel-menu-sidebar::-webkit-scrollbar {
    display: none;
  }
  .otel-menu-details {
    /* background-color: red; */
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    flex-wrap: nowrap;
  }
  .otel-menu-otels-container {
    overflow: auto;
    /* background-color: green; */
    /* padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px; */

    padding: 20px 20px 0px 20px;
  }
  .otel-menu-plans {
    display: flex;
    flex-direction: row;
    /* background-color: yellow; */
    /* padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px; */
    padding: 0px 20px 20px 20px;

    overflow-y: hidden;
    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .otel-menu-plans::-webkit-scrollbar {
    display: none;
  }
  .otel-menu-plan {
    /* flex-wrap: nowrap; */
    white-space: nowrap;
  }

  /* --------------------------- Hero ----------------------  */
  .hero-frame-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .hero-title-wrap {
    margin-bottom: 24px;
  }
  .hero-title-text {
    font-size: 28px;
  }
  .hero-title-dis {
    display: none;
  }
  .hero-tabs {
    /* white-space: nowrap; */
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    min-width: 100px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-tabs::-webkit-scrollbar {
    display: none;
  }
  .hero-search {
    flex-direction: column;
  }
  .hero-search-btn {
    width: auto;
  }
  .hero-last-searches {
    display: none;
  }
  .hero-suggestions {
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    /* -webkit-overflow-scrolling: touch; */
    width: 100%;
    flex: 1;
    /* width: 400px; */

    /* Hide scrollbar for firefox */
    scrollbar-width: none;
    /* Hide scrollbar for Edge- IE */
    -ms-overflow-style: none;
  }
  .hero-suggestions::-webkit-scrollbar {
    display: none;
  }
  .hero-whereto-list-box {
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-1c2b3d29);
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 15;
  }
  .hero-whereto-list-header {
    display: flex;
    box-shadow: var(--box-shadow-1c2b3d1f);
    margin-bottom: 8px;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
  .hero-otel-wheretogo-input-box {
    display: flex;
    border: solid 1px #d6dde6;
    border-radius: 6px;
    /* padding: 12px; */
    flex: 1;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 0px 5px 0px 12px;
    /* background-color: red; */
  }
  .hero-otel-wheretogo-input {
    border: none;
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary-dark);
    outline: none;
    /* background-color: green; */
    flex: 1;
  }
  .hero-otel-wheretogo-input-clear {
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-otel-wheretogo-input-clear span {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-dark);
  }
  .hero-whereto-suggestion-box {
    width: 100%;
    box-shadow: none;
    border-radius: 0px;
  }
  .hero-otel-whereto-locations {
    /* flex-wrap: wrap; */

    overflow-y: hidden;
    overflow-x: scroll;
    /* Hide scrollbar for firefox */
    scrollbar-width: none;
    /* Hide scrollbar for Edge- IE */
    -ms-overflow-style: none;

    /* background-color: blue */
  }
  .hero-otel-whereto-locations::-webkit-scrollbar {
    display: none;
  }
  .hero-whereto-search-box {
    width: 100%;
    box-shadow: none;
    border-radius: 0px;
  }

  /* -------------------------- Guest selector ----------------------- */
  .guest-selector-box {
    width: 100%;
    height: 100vh;
    height: 100dvh;

    border-radius: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 16;
    /* overflow-x: hidden;
    overflow-y: scroll; */
    padding: 0px;
  }
  .guest-selector-interbox {
    /* background-color: #0077ff; */
    height: 100%;
    gap: 0px;
  }
  .guest-selector-header {
    height: 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
  }
  .guest-selector-header-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
  }
  .otel-guest-selector-rooms-wrap {
    padding: 16px;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hide;
  }
  .guest-selector-confirm-container {
    padding: 16px;
    box-shadow: var(--box-shadow-1c2b3d29);
  }

  /* --------------------------- offer section ------------------------ */
  .offers-wrap {
    padding: 48px 16px;
  }
  .offers {
    position: relative;
    overflow: hidden;
    overflow-x: scroll;
    height: 120px;
    display: flex;
    flex: 1;

    /* Hide scrollbar for firefox */
    scrollbar-width: none;
    /* Hide scrollbar for Edge- IE */
    -ms-overflow-style: none;

    /* background-color: blue */
  }
  .offers-float {
    position: absolute;
    display: flex;
    flex: 1;
    left: 0px;
    top: 0px;
    flex-wrap: nowrap;
    /* background-color: yellow; */
  }
  .offer {
    /* flex-wrap: wrap; */
    height: 120px;
    min-width: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 0px;
    flex-direction: column;
    align-items: end;
  }
  .offer-disc-box {
    width: 100%;
  }

  /*--------------------------- main Slider -----------------------------*/
  .main-slider-wrap {
    padding: 0px;
  }
  .main-slider-container {
    padding: 36px 0px;
    gap: 20px;
    border-radius: 0px;
    background-color: #f7f8fa;
    border: solid 1px #e7ebf0;
  }

  .main-slider-title {
    padding: 0px 16px;
  }
  .home-slider-container {
    height: 380px;
    /* padding: 10px; */
    /* flex: 1; */
  }

  .main-slider-carouselWrap {
    width: 100%;
    /* background-color: yellow; */
    /* padding: 10px; */
  }

  .main-slider-carousel {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .main-slider-carousel::-webkit-scrollbar {
    display: none;
  }
  .main-slider {
    flex-direction: row;
    /* position: absolute; */
    gap: 8px;
    padding: 0px 16px;
    /* background-color: #0077ff; */
  }
  .main-slider .ms-item {
    position: static;
    width: calc(80vw);
    transition: transform 0.3s;
    border-radius: 8px;
  }
  .main-slider .ms-img img {
    border-radius: 8px;
  }
  .ms-item[data-position] {
    z-index: 1;
    transform: none;
  }
  .ms-item[data-position]::after {
    content: "";
    position: relative;
    background-color: transparent;
    opacity: 1;
  }

  .ms-item[data-active="1"] {
    transform: rotateY(0deg) scale(1);
  }
  .ms-item[data-active="0"] {
    transform: rotateY(0deg) scale(0.9);
  }

  .main-slider-prev,
  .main-slider-next {
    display: none;
  }

  /* -------------------------------------------------- */
  .theme-title-container {
    text-align: center;
  }

  /* ---------------------------- tur trip -------------------------*/
  .turtrip-selctor-box {
    width: 100%;
    height: 100vh;
    border-radius: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 15;
    /* background-color: red; */
  }
  .turtrip-selctor-box .head {
    display: flex;
  }
  .turtrip-selctor-box .items {
    padding: 16px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .turtrip-selctor-item {
    height: 48px;
  }

  /* ---------------------------- tur period -------------------------- */
  .turperiod-selctor-box {
    width: 100%;
    height: 100vh;
    border-radius: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 15;
  }
  .turperiod-selctor-box .items {
    padding: 16px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .turperiod-selctor-item {
    height: 48px;
  }

  /* ---------------------------- Otel theme ---------------------------- */
  .otel-theme-wrap {
    padding: 32px 0px;
  }

  .otel-slider {
    overflow-y: hidden;
    overflow-x: scroll;

    height: 302px;

    /* Hide scrollbar for firefox */
    scrollbar-width: none;
    /* Hide scrollbar for Edge- IE */
    -ms-overflow-style: none;
  }
  /* Hide scrollbar for chrome, safari and opera */
  .otel-slider::-webkit-scrollbar {
    display: none;
  }
  .otel-slider-float {
    padding-left: 16px;
    padding-right: 16px;
  }
  .otel-slider-nav-btn {
    display: none;
  }

  .otel-card {
    width: 320px;
    height: 300px;
    /* width: 393px;
    height: 300px; */
    /* background-color: red; */
  }
  .otel-card-img {
    /* width: 320px;
    height: 300px; */
  }

  /* ---------------------------- Elci tur theme --------------------- */
  .elci-tur-wrap {
    padding: 48px 0px;
  }
  .elci-tur-slider {
    overflow-y: hidden;
    overflow-x: scroll;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .elci-tur-slider::-webkit-scrollbar {
    display: none;
  }
  .elci-tur-slider-float {
    padding-left: 16px;
    padding-right: 16px;
  }
  .elci-tur-slider-nav-btn {
    display: none;
  }
  .elci-tur-card {
    width: 320px;
    /* background-color: red; */
  }
  .elci-tur-card-img {
    /* width: 296px; */
    height: 132px;
  }
  .elci-tur-context {
    padding: 0px 16px 48px 16px;
  }

  /* -------------------------- Footer links  -------------------------*/
  .contact-wrap {
    padding-left: 0px;
    padding-right: 0px;
    /* padding-top: 380px; */
    padding-bottom: 0px;
  }
  .contact-img-wrap {
    width: 100%;
  }
  .contact-img {
    width: 100%;
    border-radius: 0px;
  }
  .contact-form-wrap {
    left: 0px;
    top: 0px;
    padding: 24px;
    /* background-color: yellow; */
    /* width: calc(100% - 48); */
    width: 100%;
  }
  .contact-title-box {
    width: auto;
    text-align: center;
  }
  .contact-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 32px;
  }
  .contact-dis {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }
  .contact-tabs {
    /* white-space: nowrap; */
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* width: 100px; */
    /* background-color: blue; */

    /* Hide scrollbar for firefox */
    scrollbar-width: none;
    /* Hide scrollbar for Edge- IE */
    -ms-overflow-style: none;
  }
  /* Hide scrollbar for chrome, safari and opera */
  .contact-tabs::-webkit-scrollbar {
    display: none;
  }
  .contact-inputs {
    flex-direction: column;
    /* background-color: blue; */
  }
  .footer-links-wrap {
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
  }
  .footer-links-address {
    width: auto;
  }
  .footer-links-container {
    padding-bottom: 0px;
  }
  .footer-links-certificates {
    position: relative;
    bottom: auto;
  }

  /* ---------------------- Footer bottom ------------------------*/
  .footer-bottom,
  .footer-bottom section {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .footer-reachyou {
    right: 24px;
    bottom: 24px;
  }
  .footer-reachyou-desktop {
    display: none;
  }
  .footer-reachyou-contactmenu-btn {
    display: block;
  }

  /* Reach you */
  .reachyou-modal {
    height: 100dvh;
  }
  .reach-inputs {
    gap: 24px;
  }
  .reach-inputs-row {
    flex-direction: column;
    gap: 24px;
  }
  .reach-footer {
    justify-content: center;
    padding: 24px;
  }
  .reach-footer button {
    width: 100%;
  }

  /* ---------- */
  .newsletter-content {
    flex-direction: column;
  }
  .newsletter-sideimage {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-position: center bottom;
  }
  .newsletter-details-content {
    padding: 16px;
    gap: 20px;
  }
  .newsletter-footer button {
    flex: 1;
  }
  .footer-scrollup-wrap {
    left: 24px;
    bottom: 24px;
  }

  /*---------------- carousel -------------------*/

  .carousel-ellipse-bar {
    /* background-color: yellow; */
    padding-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .carousel-ellipse {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #e3f0ff;
  }
  .carousel-ellipse-active {
    background-color: #0077ff;
  }
  .carousel-counter {
    display: flex;
    position: absolute;
    left: 24px;
    bottom: 8px;
    background-color: #00000080;
    padding: 4px 8px;
    border-radius: 8px;
  }
  .carousel-counter span {
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
  }

  /* -------------------------- Cookies CSS --------------------------*/
  .cookies-modal {
    bottom: 10px;
    width: calc(100vw - (2 * 16px));
    margin: 30px 16px;
    flex-direction: column;
    gap: 16px;
    border-radius: 8px;
    padding: 16px;
  }
  .cookies-modal .actions {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }
  .cookies-modal .ck-title {
    font-size: 14px;
  }
  .cookies-modal .ck-description {
    font-size: 12px;
  }
  .cookies-modal .otherActions {
    flex-direction: row;
    flex: 1;
    gap: 16px;
    justify-content: space-between;
  }

  .cookies-modal .rejectCookies,
  .cookies-modal .cookiesPreferences,
  .cookies-modal .acceptCookies {
    display: flex;
    flex: 1;
    height: 36px;
    font-size: 14px;
    font-weight: 400;
  }

  /* cookies preferences */
  .cookiesPref-modal {
    width: 100%;
    height: calc(100dvh - 60px);
    margin: 30px 16px;
    border-radius: 8px;
  }
  .cookiesPref-modal .container {
    padding: 16px;
  }
  .cookiesPref-modal .content .logo {
    width: 75px;
    height: 28px;
  }
  .cookiesPref-modal .content .title {
    font-size: 14px;
  }
  .cookiesPref-modal .content .description {
    font-size: 12px;
  }
  .cookiesPref-modal .optionsContainer .cookieOption .cookieOpTitle {
    font-size: 14px;
  }
  .cookiesPref-modal
    .optionsContainer
    .cookieOption
    .cookieOpContent
    .cookieOpDescription {
    font-size: 12px;
  }
  .cookiesPref-modal .optionsContainer .cookieOption .alwaysActive {
    color: #0077ff;
    font-size: 14px;
  }
  .cookiesPref-modal .footer .saveIt {
    height: 36px;
  }
  .cookiesPref-modal .footer .closeCookiesPref {
    height: 36px;
  }
  /* End of cookies */

  /* --------- 404 page ---------- */
  .p404-wrap {
    padding: 24px 16px 60px 16px;
  }
  .p404-wrap .content {
    display: flex;
    flex-direction: column-reverse;
    gap: 17px;
  }

  .p404-wrap .detailsWrap {
    flex: 1;
    align-items: center;
  }

  .p404-wrap .details {
    align-items: center;
  }
  .p404-wrap .details .p404Title {
    text-align: center;
  }
  .p404-wrap .details .p404Desc {
    text-align: center;
  }

  .p404-wrap .imageContainer {
    flex: 1;
    width: 100%;
  }
  /* ------ End of 404 page ------ */
}