@import url("../css/reset.css");
html {
  scroll-behavior: smooth;
}

body {
  color: #181003;
  font-size: 16px;
  overflow-x: hidden;
}

body,
input,
select,
textarea {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 150%;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

a {
  text-decoration: none;
}

.lh-normal {
  line-height: normal;
}

.bg-gray {
  background: #f8f9fa;
}

.btn-dark {
  background: #181003;
}

.bg-yellow {
  background: #fca22b;
}

.bg-yellow-100 {
  background: #f7bd64;
}

.bg-yellow-200 {
  background: #FAD091;
}

.bg-gray-corner {
  position: relative;
}
.bg-gray-corner:before, .bg-gray-corner:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 36px;
}
.bg-gray-corner:before {
  background: url(../images/top-gray.svg) no-repeat top center/cover;
  top: 0;
  -webkit-transform: translateY(-99%);
      -ms-transform: translateY(-99%);
          transform: translateY(-99%);
}
.bg-gray-corner:after {
  background: url(../images/bottom-gray.svg) no-repeat bottom center/cover;
  bottom: 0;
  -webkit-transform: translateY(99%);
      -ms-transform: translateY(99%);
          transform: translateY(99%);
}

.text-dark {
  color: #181003 !important;
}

.pt-40 {
  padding-top: 40px;
}

.p-40 {
  padding: 40px;
}

.py-68 {
  padding-top: 68px;
  padding-bottom: 68px;
}

.px-40 {
  padding-right: 40px;
  padding-left: 40px;
}

.pb-6 {
  padding-bottom: 96px;
}

.mt-12 {
  margin-top: 12px;
}

.gap-12 {
  gap: 12px;
}

.h-240 {
  height: 240px;
}

.opacity-80 {
  opacity: 80%;
}

.opacity-90 {
  opacity: 90%;
}

.fs-7 {
  font-size: 14px;
}

.fs-8 {
  font-size: 12px;
}

.navbar-nav a {
  color: #181003;
}

.mask-wrap {
  width: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(#23190c), to(rgba(35, 25, 12, 0)));
  background: -o-linear-gradient(bottom, #23190c 0%, rgba(35, 25, 12, 0) 100%);
  background: linear-gradient(0deg, #23190c 0%, rgba(35, 25, 12, 0) 100%);
  padding: 48px 24px 24px;
}

.btn-favorite {
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.scroll-hidden {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
}

.burger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: transparent;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 32px;
  height: 21px;
  padding: 0;
  gap: 8px;
  cursor: pointer;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.burger:focus-visible {
  outline: none;
  border: 0;
}

.burger span {
  background: #302a21;
  width: 100%;
  height: 1px;
  -webkit-transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -o-transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.burger[aria-expanded=true] span:nth-of-type(1) {
  -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotatez(45deg) translate(6px, 6px);
      -ms-transform: rotate(45deg) translate(6px, 6px);
          transform: rotatez(45deg) translate(6px, 6px);
}

.burger[aria-expanded=true] span:nth-of-type(2) {
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotatez(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotatez(-45deg);
}

.burger[aria-expanded=true] span:nth-of-type(3) {
  opacity: 0;
}

.search-result-hero .nav-tabs .nav-link {
  background: transparent;
  padding: 12px 16px;
  border-radius: 48px;
  border: 1px solid rgba(35, 25, 12, 0.1);
  height: 48px;
  border: 1px solid transparent;
  color: #181003;
  font-weight: 500;
}

.search-result-hero .nav-tabs .nav-link.active {
  background: #fff;
  font-weight: 600;
}

.search-hero input {
  padding: 0 6px 0 40px;
  font-size: 16px;
  border-radius: 30px;
}

.search-hero .search-icon {
  position: absolute;
  top: 9px;
  left: 18px;
}

.search-result-hero {
  border-radius: 12px;
  background: #f4f3f3;
  padding: 40px;
  height: 500px;
}

.search-result-hero.not-found {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
}

.search-result-hero .tab-content > .active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.search-result-hero .tab-content {
  height: 310px;
  overflow-x: auto;
  padding-right: 12px;
}

.search-result-hero .nav-tabs {
  gap: 8px;
  border-bottom: none;
}

.search-result-hero .search-item .poster {
  position: relative;
  height: 100%;
}
.search-result-hero .search-item .poster img {
  height: 100%;
}

.search-item {
  color: #000;
  text-decoration: none;
}

.search-result-hero .search-item .rating {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #fca22b;
  border-radius: 4px;
  padding: 4px 6.5px;
}

.btn-warning {
  background: #fca22b;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: #181003;
  background: rgba(35, 25, 12, 0.05);
  font-weight: 600;
}

.shadow-slide-lite,
.shadow-slide-lite-100 {
  content: "";
  position: absolute;
  right: 0;
  top: 34px;
  width: 48px;
  height: 48px;
  background: -webkit-gradient(linear, right top, left top, from(#fff), to(rgba(255, 255, 255, 0)));
  background: -o-linear-gradient(right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.shadow-slide-lite-100 {
  top: 0;
  background: -webkit-gradient(linear, right top, left top, from(#f2f2f2), to(rgba(242, 242, 242, 0)));
  background: -o-linear-gradient(right, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
  background: linear-gradient(270deg, #f2f2f2 0%, rgba(242, 242, 242, 0) 100%);
}

.underline-title {
  position: relative;
}
.underline-title:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: calc(100% - 16px);
  z-index: -1;
  left: 0;
}
.underline-title.underline-title-1:after {
  background: url(../images/underlines/underline-1.svg) no-repeat top left/contain;
}
.underline-title.underline-title-2:after {
  background: url(../images/underlines/underline-2.svg) no-repeat top left/contain;
}
.underline-title.underline-title-3:after {
  background: url(../images/underlines/underline-3.svg) no-repeat top left/contain;
}
.underline-title.underline-title-4:after {
  background: url(../images/underlines/underline-4.svg) no-repeat top left/contain;
}
.underline-title.underline-title-5:after {
  background: url(../images/underlines/underline-5.svg) no-repeat top left/contain;
}
.underline-title.underline-title-6:after {
  background: url(../images/underlines/underline-6.svg) no-repeat top left/contain;
}

.card-discover {
  height: 192px;
}
.card-discover.card-discover-small {
  height: 144px;
}
.card-discover.card-attraction {
  height: 280px;
}

.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.img-cover img {
  display: block;
  min-width: 100%;
  min-height: 100%;
}

.top-badge {
  top: 24px;
  left: 24px;
  background-color: #fff;
  padding: 2px 8px;
}

.card-marina {
  height: 168px;
}

.badge-rank {
  padding: 7px 8px;
}

.hover-card .hover-zoom {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.hover-card:hover .hover-zoom {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

@media (max-width: 1200px) {
  .small-card {
    min-width: 270px;
  }
  .text-card {
    min-width: 327px;
  }
  .search-result-hero .tab-content > .active {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 992px) {
  .px-lg-c-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .p-lg-c-0 {
    padding: 0;
  }
  .underline-title:after {
    top: calc(100% - 18px);
  }
  .recently-card {
    width: 280px;
  }
  .card-discover.card-attraction {
    width: 210px;
  }
}
@media (max-width: 768px) {
  .py-96 {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .py-md-24 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .p-40 {
    padding: 24px;
  }
  .mt-md-c-0 {
    margin-top: 0;
  }
}