#web-header {
  padding: 20px;
  background-color: #ffffff;
  .logo-brand {
    width: 210px;
  }
  .layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .area-l {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .area-r {
      display: flex;
      gap: 5px;
      align-items: center;
      .btn-header {
        border-radius: 25px;
        background-color: #eff2f9;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        .ico {
          font-size: 16px;
        }
        &.circle {
          width: 46px;
          height: 46px;
        }
      }
      .btn-contact-forms {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 15px;
        > div {
          display: flex;
          flex-direction: column;
          align-items: start;
        }
        .description {
          font-size: 10.5px;
        }
      }
      .box-user .ico {
        color: #acb7d0;
      }
      .box-language img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
    }
  }
}
.navbar-toggle .icon-bar {
  background-color: var(--ct-color-secondary);
}
/* Main menu V2*/
.navbar-nav {
  --dropdown-width: 250px;
  --dropdown-border-color: var(--ct-color-cta);
  --hover-bg-color: #f4f8fc;
  --border-color: #ddd;
  display: flex;
  align-items: center;
  gap: 15px;
}

.navbar-nav > li a,
.navbar-nav li label {
  padding: 0px;
  font-family: var(--ct-font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1em;
  text-transform: none;
  color: var(--ct-body-color);
  margin: 0;
  text-align: left;
}
#web-header .navbar-nav > li a:hover,
.navbar-nav li label:hover {
  background: transparent;
  color: var(--ct-color-secondary);
}

.navbar-nav .dropdown {
  position: relative;
  cursor: pointer;
}

.navbar-nav .dropdown-content {
  display: none;
  position: absolute;
  z-index: 99;
  background-color: #fff;
  margin-top: -1px;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.175);
  border-top: 2px solid var(--dropdown-border-color);
  width: var(--dropdown-width);
}

.navbar-nav .dropdown-content > div {
  display: flex;
  flex-direction: column;
}

.navbar-nav .dropdown-content li a,
.navbar-nav .dropdown-content li label {
  display: inline-block;
  border-top: 1px solid var(--border-color);
  color: #333;
  padding: 15px 10px;
  width: 100%;
  cursor: pointer;
}

.navbar-nav .dropdown-content li a:hover,
.navbar-nav .dropdown-content li label:hover {
  background-color: var(--hover-bg-color);
}

.navbar-nav .dropdown-content div > li:first-child label,
.navbar-nav .dropdown-content div > li:first-child a {
  border: 0;
}

.navbar-nav .dropdown-content-submenu {
  display: none;
  background-color: #f3f3f3;
}

.navbar-nav .dropdown-content-submenu li:first-child a {
  border-top: 1px solid var(--border-color);
}

.navbar-nav
  .dropdown
  input[type="checkbox"]:checked
  ~ .dropdown-content-submenu {
  display: block;
}

.navbar-nav .menu-hover > input[type="checkbox"] ~ label::after,
.navbar-nav .menu-hover > input[type="checkbox"]:hover ~ label::after {
  font-family: "Material Icons";
  -webkit-font-feature-settings: "liga";
  float: right;
}

.navbar-nav .menu-hover > input[type="checkbox"] ~ label::after {
  content: "expand_more";
}

.navbar-nav .menu-hover > input[type="checkbox"]:hover ~ label::after {
  content: "expand_less";
}

.navbar-nav .submenu-list > input[type="checkbox"] ~ label::after,
.navbar-nav .submenu-list > input[type="checkbox"]:checked ~ label::after {
  font-size: 25px;
  float: right;
  font-weight: 400;
}

.navbar-nav .submenu-list > input[type="checkbox"] ~ label::after {
  content: "+";
}

.navbar-nav .submenu-list > input[type="checkbox"]:checked ~ label::after {
  content: "-";
}

@media (min-width: 768px) {
  .navbar-nav .dropdown:hover .dropdown-content {
    display: block;
  }
}

@media (max-width: 767px) {
  .navbar-nav .dropdown input[type="checkbox"]:checked ~ .dropdown-content {
    display: block;
  }
}

#web-footer {
  background-color: #eff2f9;
  padding-top: 100px;
  .links {
    li {
      margin-bottom: 2rem;
    }
    li:first-child {
      font-size: 1.8rem;
      font-weight: 600;

      letter-spacing: -0.09px;
    }
    a {
      font-size: 1.5rem;
      color: #13151b;
      &:hover {
        color: var(--ct-color-cta);
      }
    }
  }
  .social-networks a {
    font-size: 2.8rem;
    color: var(--ct-color-secondary);
  }
  .contact-forms {
    display: flex;
    padding: 15px 20px;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    background: #fff;
    margin: 40px 0px 60px;
    ul {
      display: flex;
      align-items: center;
      gap: 30px;
      li a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        font-size: 1.3rem;
        color: #313432;
      }
    }
    .info {
      display: flex;
      padding-left: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      flex: 1 0 0;
      border-left: 1px dashed #969a9b;
      font-size: 1.3rem;
    }
  }
  .bottom-line {
    position: relative;
    padding: 54px 0px;
    background: #5f2e5b;
    font-size: 1.3rem;
    color: #fff;
    margin-top: 40px;
    .layout-shadow {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 30px;
      background:
        linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%),
        var(--Brand-Brand---aux, #5f2e5b);
      background-blend-mode: soft-light, normal;
    }
  }
}
.fixed-aside-btns {
  position: fixed;
  bottom: 15px;
  right: 12px;
  z-index: 24;
}
.fixed-aside-btns .btnaux {
  display: block;
  width: 44px;
  height: 44px;
  margin-top: 6px;
  padding: 12px;
  border-radius: 22px;
  border: 0;
  color: #fff;
  box-shadow: 0 2px 6px 1px rgba(72, 25, 65, 0.22);
  background: #dd4331;
}
.fixed-aside-btns .btnaux:last-child {
  background: #c90044;
}
.fixed-aside-btns .btnaux img {
  float: left;
}
.fixed-aside-btns .btnaux:hover {
  background: #00dad2;
}
.layout-web {
  padding: 0px 20px;
}
.main-slider {
  position: relative;
  z-index: 0;
  min-height: 530px;
  border-radius: 30px;
  background: var(--ct-color-primary);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
  .item {
    min-height: 530px;
  }
  .position-caption {
    position: absolute;
    bottom: 160px;
    left: 0px;
    right: 0px;
    z-index: 5;
    color: #fff;
    .caption {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .layout-l {
        font-size: 30px;
        font-style: normal;
        font-weight: 500;
        line-height: 34px; /* 113.333% */
        letter-spacing: -0.6px;
        text-align: left;
        b {
          font-weight: 600;
        }
      }
      .layout-r {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px; /* 138.889% */
        letter-spacing: -0.27px;
      }
    }
  }
  .additional-section {
    position: absolute;
    z-index: 3;
    bottom: 50px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .destination-section {
      display: inline-flex;
      padding: 15px 20px 15px 15px;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      border-radius: 40px;
      background: rgba(15, 23, 19, 0.4);
      backdrop-filter: blur(10px);
      .destination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #eff2f9;
        .image {
          position: relative;
          width: 34px;
          height: 34px;
          background-color: #ddd;
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
    .btn-layout {
      display: inline-flex;
      padding: 15px 20px 15px 15px;
      align-items: center;
      gap: 10px;
      border-radius: 40px;
      background: rgba(95, 46, 91, 0.8);
      backdrop-filter: blur(10px);
      color: #eff2f9;
      .circle {
        position: relative;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: var(--ct-color-secondary);
      }
    }
  }
  .layout-gradient {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.07) 25%,
      rgba(0, 0, 0, 0.56) 85%,
      rgba(0, 0, 0, 0.63) 100%
    );
  }
  &.mini-banner {
    min-height: 300px;
    .item {
      min-height: 300px;
    }
    .position-caption {
      bottom: inherit;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .carousel-control {
    bottom: inherit;
    top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: inherit;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(15, 23, 19, 0.4);
    backdrop-filter: blur(10px);
    background-image: none;
    color: #fff;
    opacity: 1;
    .glyphicons {
      position: static;
      margin: 0px;
      top: inherit;
      left: inherit;
      right: inherit;
      width: inherit;
      height: inherit;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-shadow: none;
    }
    &.left {
      right: inherit;
      left: 25px;
    }
    &.right {
      left: inherit;
      right: 25px;
    }
  }
}
.btn-circle {
  display: flex;
  width: 52px;
  height: 52px;
  min-width: 46px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  color: var(--ct-color-cta);

  &:hover {
    transform: scale(1.1);
    transition:
      opacity 0.4s ease,
      visibility 0.4s;
  }
}
.google-reviews {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  .rectangle {
    width: 2px;
    align-self: stretch;
    opacity: 0.3;
    background: #313432;
  }
  .layout-r {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .top-line {
      display: flex;
      align-items: center;
      span {
        font-size: 2rem;
        color: #fbbc05;
      }
    }
    .bottom-line {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      font-size: 1.3rem;
      b {
        font-weight: 500;
      }
      span {
        color: #969a9b;
        font-size: 1.4rem;
      }
    }
  }
}
.position-searcher {
  position: relative;
  z-index: 10;
  margin-top: -29px;
}
.searcher {
  position: relative;
  margin: 0px 16px 16px 16px;
  padding: 15px 15px 25px 15px;
  border-radius: 8px 8px 40px 8px;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -2px;
    left: 0px;
    right: 0px;
    height: 50px;
    border-radius: 8px 8px 40px 8px;
    background: linear-gradient(
      to right,
      rgba(201, 0, 68, 1) 0%,
      rgba(255, 144, 22, 1) 100%
    );
  }
}
md-tabs.tabs-searcher md-tabs-canvas {
  height: inherit;
}

md-tabs.tabs-searcher md-tabs-canvas md-pagination-wrapper {
  padding: 6px 2px 6px 6px;
  align-items: center;
  gap: 4px;
  border-radius: 35px;
  background: var(--ct-color-secondary);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  height: 100%;
  margin: 0 auto !important;
}
md-tabs.tabs-searcher .md-tab {
  display: flex;
  width: 46px;
  height: 46px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  color: #313432;
}

md-tabs.tabs-searcher .md-tab.md-active,
md-tabs.tabs-searcher .md-tab:hover {
  background: rgba(15, 23, 19, 0.3);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);

  color: #fff;
}
.group-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.group-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.group-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.group-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.btn-white {
  display: flex;
  min-width: 46px;
  padding: 11px 20px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-radius: 23px;
  background: #fff;
  color: #313432;
  font-size: 1.8rem;
  font-weight: 600;
  transition: all 0.4s ease;
  &:hover {
    gap: 18px;
    span {
      color: var(--ct-color-cta);
    }
  }
}
.line-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5f2e5b;
}
.title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  .text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ct-color-primary);
    font-size: 33px;
    line-height: 36px; /* 109.091% */
    letter-spacing: -1.32px;
    b {
      font-weight: 600;
    }
  }
  &.text-center {
    justify-content: center;
  }
}
.carousel-section {
  position: relative;
  .carousel-control {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: inherit;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #fff;
    background-image: none;
    color: #111;
    opacity: 1;
    top: -45px;
    left: inherit;
    right: 0px;
    &.left {
      left: inherit;
      right: 55px;
    }
    .glyphicons {
      position: static;
      margin: 0px;
      top: inherit;
      left: inherit;
      right: inherit;
      width: inherit;
      height: inherit;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-shadow: none;
    }
  }
  .title-section {
    padding-right: 120px;
  }
}
.carousel-indicators {
  display: none;
}
.product-recommended {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 15px;
  flex: 1 0 0;
  .image {
    position: relative;
    display: flex;
    height: 300px;
    padding: 20px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 15px;
    background: var(--ct-color-cta);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;

    img {
      transform: scale(1) rotate(0deg);
      transition: all 0.4s ease-out;
    }
    &:hover img {
      transform: scale(1.3) rotate(10deg);
      opacity: 0.85;
    }
    .box-blur {
      position: relative;
      z-index: 5;
      display: flex;
      padding: 10px;
      justify-content: center;
      align-items: center;
      align-self: end;
      gap: 4px;
      border-radius: 10px;
      background: rgba(17, 17, 17, 0.3);
      backdrop-filter: blur(20px);
      font-size: 1.8rem;
      color: #fff;
    }
    .caption {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      align-self: stretch;
      .title {
        color: #fff;
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: -0.5px;
      }
      .subtitle {
        font-size: 1.8rem;
        font-weight: 600;
        color: #eff2f9;
      }
      .box-blur {
        align-self: start;
      }
    }
    .layout-opacity {
      position: absolute;
      z-index: 2;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.08) 49.04%,
        rgba(0, 0, 0, 0.72) 63.46%,
        rgba(0, 0, 0, 0.75) 100%
      );
    }
  }
  .additional-info {
    display: inline-flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    border-radius: 10px;
    background: rgba(18, 18, 18, 0.05);
    backdrop-filter: blur(20px);
    .include {
      display: flex;
      align-items: center;
      gap: 10px;
      .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
      }
    }
  }
  &.tall .image {
    height: 440px;
  }
}
.box-multi {
  display: flex;
  height: 440px;
  padding: 20px 20px 30px 20px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  border-radius: 15px;
  background: #212121;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  .top-line {
    display: flex;
    padding: 15px 0;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 115.385% */
    letter-spacing: -0.52px;
    color: #fff;
  }
  .bottom-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    .frame {
      display: flex;
      padding: 10px 10px 10px 15px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.4s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
      .icon {
        display: flex;
        align-items: center;
        span {
          color: #e9e9ed;
        }
      }
      .tag {
        display: flex;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        color: #fff;
        font-size: 1.8rem;
        b {
          font-weight: 600;
        }
      }
    }
  }
  &:nth-child(1) {
    background: linear-gradient(270deg, #de4830 0%, #e5602a 100%);
  }
  &:nth-child(2) {
    background: linear-gradient(270deg, #d73037 0%, #de4830 100%);
  }
  &:nth-child(3) {
    background: linear-gradient(270deg, #d0183d 0%, #d73037 100%);
  }
  &:nth-child(4) {
    background: linear-gradient(270deg, #c90044 0%, #d0183d 100%);
  }
  &:nth-child(5) {
    background: linear-gradient(0deg, #5f2e5b 0%, #5f2e5b 100%);
  }
}
.inspiration-section {
  display: flex;
  padding: 90px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  align-self: stretch;
  background-color: #e9e9ed;
  .content {
    display: flex;
    max-width: 1300px;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    .col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      flex: 1 0 0;
      .tag {
        display: flex;
        padding: 10px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 10px;
        background: #eff2f9;
        backdrop-filter: blur(20px);
        font-size: 1.8rem;
      }
      ul {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 10px;
        align-self: stretch;
        flex-wrap: wrap;
        .box {
          display: flex;
          padding: 10px 20px 10px 10px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 30px;
          background: #fff;
          transition: all 0.4s ease;
          .image {
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
          }
          .caption {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            color: var(--ct-body-color);
            .top-line {
              font-size: 1.8rem;
              font-weight: 600;
            }
          }
          &:hover {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}
.whyBook-section {
  display: flex;
  padding: 130px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background: url("/cdn/images/bg-reasons.jpg") lightgray 50% / cover no-repeat;
  .content {
    display: flex;
    max-width: 940px;
    margin: 0 auto;
    flex-direction: column;
    gap: 60px;
    align-self: stretch;
    .info-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 40px;
      align-self: stretch;
      .top-line {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
      }
      .bottom-line {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 50px;
        align-self: stretch;
      }
    }
  }
}
.whyBook-recommended {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex: 1 0 0;
  img {
    width: 50px;
  }
  .caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    header {
      font-size: 2.2rem;
      text-align: center;
    }
  }
}
.seo-section {
  display: flex;
  padding: 80px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  font-size: 1.3rem;
  h1,
  h2,
  h3 {
    font-weight: 400;
  }
  h1 {
    color: var(--ct-color-secondary);
  }
  h2 {
    color: var(--ct-color-alternative);
  }
}
.footer-info-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 10px;
  align-self: stretch;
  .title {
    font-weight: 600;
  }
  &.with-btn {
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    a {
      flex-shrink: 0;
    }
  }
}
@media (min-width: 1200px) {
  .container {
    width: 100%;
    max-width: 1370px;
    clear: both;
  }
}
@media (max-width: 991px) {
  .group-6,
  .group-5,
  .group-4,
  .group-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .group-6,
  .group-5,
  .group-4,
  .group-3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .carousel-section .title-section {
    flex-direction: column;
  }
  #web-footer .contact-forms {
    flex-direction: column;
    .info {
      border-left: 0px;
      padding: 0px;
    }
  }
}