@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,400,700|Inter:400|Open+Sans:400|Roboto:400");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0px;
  height: 100%;
  font-family: "DM Sans", Helvetica;
}

/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  max-width: 1440px;
  margin: auto;
}

.hero {
  width: 100%;
  min-height: 675px;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  clip-path: polygon(
    0% -1.259%,
    -0.59% -1.259%,
    -0.59% 0%,
    -0.59% 90.306%,
    -0.59% 91.961%,
    0.157% 91.52%,
    0% 90.306%,
    0% 90.306%,
    0.043% 90.635%,
    0.077% 90.899%,
    0.103% 91.104%,
    0.123% 91.258%,
    0.138% 91.368%,
    0.147% 91.442%,
    0.153% 91.487%,
    0.156% 91.51%,
    0.157% 91.519%,
    0.157% 91.52%,
    0.158% 91.52%,
    0.159% 91.519%,
    0.162% 91.517%,
    0.176% 91.509%,
    0.177% 91.508%,
    0.177% 91.508%,
    0.181% 91.506%,
    0.185% 91.504%,
    0.19% 91.501%,
    0.194% 91.498%,
    0.2% 91.495%,
    0.205% 91.492%,
    0.211% 91.488%,
    0.217% 91.485%,
    0.224% 91.481%,
    0.231% 91.477%,
    0.231% 91.477%,
    0.246% 91.468%,
    0.263% 91.458%,
    0.281% 91.448%,
    0.3% 91.436%,
    0.321% 91.424%,
    0.343% 91.411%,
    0.366% 91.397%,
    0.391% 91.383%,
    0.417% 91.368%,
    0.444% 91.352%,
    0.444% 91.352%,
    0.502% 91.318%,
    0.565% 91.281%,
    0.633% 91.242%,
    0.706% 91.199%,
    0.783% 91.154%,
    0.865% 91.107%,
    0.952% 91.057%,
    1.042% 91.004%,
    1.137% 90.949%,
    1.236% 90.892%,
    1.236% 90.892%,
    1.447% 90.771%,
    1.672% 90.641%,
    1.912% 90.504%,
    2.166% 90.359%,
    2.432% 90.207%,
    2.71% 90.049%,
    3% 89.885%,
    3.3% 89.716%,
    3.609% 89.543%,
    3.927% 89.365%,
    3.927% 89.365%,
    4.587% 88.999%,
    5.271% 88.624%,
    5.972% 88.242%,
    6.685% 87.86%,
    7.403% 87.481%,
    8.119% 87.109%,
    8.826% 86.75%,
    9.519% 86.406%,
    10.189% 86.082%,
    10.832% 85.783%,
    10.832% 85.783%,
    15.29% 84.074%,
    19.58% 83.04%,
    23.721% 82.609%,
    27.734% 82.708%,
    31.637% 83.263%,
    35.449% 84.201%,
    39.191% 85.449%,
    42.882% 86.934%,
    46.541% 88.582%,
    50.189% 90.32%,
    50.189% 90.32%,
    50.247% 90.348%,
    50.306% 90.377%,
    50.365% 90.405%,
    50.424% 90.433%,
    50.483% 90.462%,
    50.542% 90.49%,
    50.601% 90.519%,
    50.66% 90.547%,
    50.719% 90.576%,
    50.778% 90.604%,
    50.778% 90.604%,
    54.375% 92.326%,
    58% 93.982%,
    61.67% 95.499%,
    65.404% 96.805%,
    69.218% 97.828%,
    73.129% 98.497%,
    77.157% 98.74%,
    81.317% 98.485%,
    85.628% 97.66%,
    90.108% 96.192%,
    90.108% 96.192%,
    90.714% 95.947%,
    91.347% 95.682%,
    91.999% 95.401%,
    92.665% 95.107%,
    93.339% 94.804%,
    94.013% 94.496%,
    94.683% 94.185%,
    95.342% 93.876%,
    95.983% 93.572%,
    96.6% 93.276%,
    96.6% 93.276%,
    96.898% 93.132%,
    97.188% 92.991%,
    97.469% 92.855%,
    97.741% 92.722%,
    98.002% 92.594%,
    98.251% 92.472%,
    98.489% 92.354%,
    98.714% 92.243%,
    98.926% 92.138%,
    99.123% 92.04%,
    99.123% 92.04%,
    99.216% 91.994%,
    99.305% 91.95%,
    99.39% 91.907%,
    99.471% 91.866%,
    99.548% 91.828%,
    99.621% 91.792%,
    99.689% 91.757%,
    99.753% 91.725%,
    99.812% 91.695%,
    99.867% 91.668%,
    99.867% 91.668%,
    99.892% 91.655%,
    99.917% 91.643%,
    99.94% 91.631%,
    99.962% 91.62%,
    99.983% 91.609%,
    100.002% 91.6%,
    100.02% 91.59%,
    100.037% 91.582%,
    100.053% 91.574%,
    100.067% 91.567%,
    100.119% 91.54%,
    100.133% 91.533%,
    100.135% 91.532%,
    100.137% 91.531%,
    100.137% 91.531%,
    100.137% 91.531%,
    100.137% 91.53%,
    100.136% 91.521%,
    100.133% 91.498%,
    100.128% 91.453%,
    100.12% 91.378%,
    100.107% 91.267%,
    100.09% 91.111%,
    100.067% 90.904%,
    100.037% 90.638%,
    100% 90.306%,
    100.137% 91.531%,
    100.59% 91.301%,
    100.59% 90.306%,
    100.59% 0%,
    100.59% -1.259%,
    100% -1.259%,
    0% -1.259%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 118px;
  padding: 16px 80px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.logo img {
  width: 116px;
}

ul {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 24px;
}

li {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  font-size: 18px;
  color: #000;
}

li a {
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 18px;
  white-space: nowrap;
}

a.btn {
  background-color: #ff9c1a;
  border-radius: 100px;
  border: 2px solid #efefef;
}

a.btn.btn-download {
  margin-left: 24px;
  margin-right: -24px;
  color: #efefef;
  padding: 16px 28px;
  text-transform: uppercase;
}

.rounded-img {
  border-radius: 100%;
  overflow: hidden;
}

.host-avatar {
  margin-top: 14px;
  height: 220px;
  width: 220px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.host-avatar img {
  height: 220px;
  width: 220px;
}

.travel-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 0;
  line-height: normal;
  margin-top: 20px;
}

.travel-name {
  font-size: 35px;
}

.font-bold {
  font-weight: 700;
}

.detail-section {
  display: flex;
  margin-top: 60px;
  width: 100%;
  max-width: 1248px;
  padding: 0 24px;
}

.detail-card {
  display: flex;
  align-self: flex-start;
  filter: drop-shadow(4px 14px 12px #00000029);
}

.detail-logo {
  background-image: url("/static/images/subtract-2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 249px;
  width: 198px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -2px;
}

.detail-logo img {
  width: 144px;
}

.detail-info {
  background-image: url("/static/images/subtract-3.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 249px;
  width: 413px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 80px;
  gap: 8px;
}

.detail-info p {
  font-size: 20px;
  line-height: 24px;
}

.other-guests {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.other-guests p {
  font-size: 30px;
}

.pictures {
  margin-top: 32px;
  display: flex;
  padding: 0 24px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
}

.pictures .rounded-img {
  margin-right: -16px;
  width: 120px;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.description-section {
  width: 100%;
  max-width: 1248px;
  display: flex;
  flex-direction: column;
  margin-top: 120px;
  padding: 0 48px;
}

.description-section h5 {
  font-size: 30px;
  margin-bottom: 12px;
}

.description-section .description {
  font-size: 25px;
  line-height: 36px;
  white-space: pre-wrap;
}

.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 96px;
}

.cta-section h5 {
  color: #00627f;
  font-size: 50px;
  margin-bottom: 32px;
}

.cta-section a {
  font-size: 48px;
  padding: 10px 24px;
  color: #fff;
  box-shadow: rgba(99, 99, 99, 0.5) 0px 4px 16px 0px;
}

/* Recommended travels section */
.recommended-section {
  width: 100%;
  margin-top: 80px;
  padding: 0 48px;
}

.recommended-section h5 {
  text-transform: uppercase;
  font-size: 36px;
  margin-bottom: 24px;
  color: #00627f;
}

.recommended-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

.recommended-scroll::-webkit-scrollbar {
  display: none;
}
.recommended-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.recommended-card {
  flex: 0 0 390px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  background: #fff;
  text-decoration: none;
  color: #000;
}

.recommended-card-image {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-width: 4px;
  border-style: solid;
  border-image-source: linear-gradient(270deg, #1ed9ff 0.2%, #0071ff 100%);
  border-left: 0;
  border-top: 0;
  border-right: 0;
  border-image-slice: 1;
}

.recommended-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: #f96e47;
  color: #fff;
  padding: 6px 24px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
}

.recommended-host-avatar {
  position: absolute;
  bottom: -65px;
  right: 10px;
  width: 126px;
  height: 126px;
  background-size: cover;
  background-position: center;
  overflow: visible;
}

.recommended-host-avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(270deg, #1ed9ff 0.2%, #0071ff 100%);
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
}

.recommended-card-info {
  padding: 20px 16px 16px;
}

.recommended-card-name {
  font-size: 18px;
  font-weight: 700;
  color: #00627f;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.recommended-card-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #555;
}

.download-section {
  background-image: url("/static/images/rectangle-101.svg");
  width: 100%;
  max-width: 1440px;
  height: 638px;
  min-height: 638px;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  margin-top: 60px;
  color: #fff;
}

.download-section .spacer {
  width: 45%;
  max-width: 653px;
  display: flex;
  justify-content: center;
}

.download-section .content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.download-section .paragraph {
  font-size: 30px;
  line-height: 42px;
  max-width: 674px;
  padding: 0 12px;
}

.download-section h5 {
  font-size: 45px;
}

.cta-row {
  display: flex;
  gap: 24px;
}

.download-ios {
  background-image: url("/static/images/ios-badge.svg");
  width: 162px;
  height: 48px;
  min-height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
}

.download-android {
  background-image: url("/static/images/android-badge.svg");
  width: 162px;
  height: 48px;
  min-height: 48px;
  background-repeat: no-repeat;
  background-size: cover;
}

.footer {
  background: linear-gradient(270deg, #0071ff 0.2%, #1ed9ff 100%);
  padding: 24px 80px;
  width: 100%;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  color: #fff;
  text-wrap: nowrap;
  flex-wrap: wrap;
}

.footer > a {
  color: #fff;
}

.footer > p {
  font-size: 14px;
  align-self: center;
}

.footer .contacts {
  display: flex;
  gap: 16px;
  align-items: center;
}

.contacts a {
  color: #fff;
}

.contacts > a > img {
  height: 24px;
}

.footer .logo {
  margin: 0;
}

:root {
  --breakpoint: "unset";
}

@media screen and (max-width: 1440px) {
  nav {
    padding: 16px 24px;
  }

  .detail-section {
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
  }
}

@media screen and (min-width: 700px) {
  .mobile-only {
    display: none;
  }
}

@media screen and (max-width: 410px) {
  .detail-info {
    background-size: cover;
  }
}

@media screen and (max-width: 700px) {
  .desktop-only {
    display: none;
  }

  body {
    background-color: #faf9f6;
  }

  nav {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 64px;
    padding: 8px 12px;
  }

  a.btn.btn-download {
    color: #00627f;
    padding: 10px 16px;
    font-size: 18px;
    margin-right: 0;
  }

  .recommended-host-avatar {
    bottom: -25px;
    width: 50px;
    height: 50px;
  }

  .hero {
    min-height: 250px !important;
    justify-content: center;
  }

  .travel-info {
    color: #000;
    margin-top: 6px;
  }

  .travel-info p {
    font-size: 15px;
  }

  .travel-info .travel-name {
    font-size: 20px;
  }

  .detail-info {
    height: 145px;
    padding: 0 8px 0 16px;
    width: 100%;
    border-radius: 0 10% 10% 0;
    gap: 4px;
  }

  .detail-info p {
    font-size: 13px;
    line-height: 15px;
  }

  .detail-logo {
    height: 145px;
    width: 115px;
    min-width: 115px;
  }

  .detail-logo img {
    width: 85px;
  }

  .host-avatar {
    width: 124px;
    height: 124px;
    margin: 0;
  }

  .travel-name,
  .travel-date {
    font-size: 20px;
    color: #00627f;
  }

  .other-guests p {
    font-size: 15px;
    margin-top: 12px;
  }

  .pictures {
    margin-top: 12px;
  }

  .pictures .rounded-img {
    width: 32px;
    height: 32px;
    margin-right: -4px;
  }

  .detail-card {
    width: 100%;
    max-width: 370px;
  }

  .detail-section {
    margin-top: 22px;
  }

  .detail-logo {
    border-radius: 45% 0 0 45%;
  }

  .description-section {
    margin-top: 40px;
    padding: 0 22px;
  }

  .description-section h5 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .description-section .description {
    font-size: 17px;
    line-height: 20px;
  }

  .cta-section {
    margin-top: 32px;
  }

  .cta-section h5 {
    color: #00627f;
    font-size: 30px;
    margin-bottom: 12px;
  }

  .cta-section a {
    font-size: 18px;
    padding: 12px 18px;
  }

  .recommended-section {
    margin-top: 32px;
    padding: 0 22px;
  }

  .recommended-section h5 {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .recommended-card {
    flex: 0 0 260px;
  }

  .recommended-card-image {
    height: 160px;
  }

  .recommended-card-name {
    font-size: 15px;
  }

  .recommended-card-meta {
    font-size: 12px;
    gap: 8px;
  }

  .download-section .spacer {
    display: none;
  }

  .download-section {
    justify-content: center;
  }

  .download-section {
    width: 100%;
    height: fit-content;
    min-height: 400px;
    margin: 0;
    margin-top: 20px;
    background-position: center;
    background-size: cover;
    text-align: center;
  }

  .download-section h5 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 24px;
  }

  .download-section .content {
    gap: 18px;
  }

  .download-section .paragraph {
    font-size: 18px;
    line-height: 24px;
    padding: 0 12px;
    font-weight: 500;
  }

  .download-ios {
    width: 130px;
    height: 38px;
    min-height: 38px;
  }

  .download-android {
    width: 130px;
    height: 38px;
    min-height: 38px;
  }

  .cta-row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
  }

  .footer {
    padding: 12px 22px;
    margin-top: 40px;
    gap: 12px;
  }

  .footer > a {
    color: #fff;
  }

  .footer > p {
    font-size: 14px;
    align-self: center;
  }

  .footer .contacts {
    gap: 10px;
  }

  .contacts a {
    color: #fff;
    font-size: 14px;
  }

  .contacts a.icon-link {
    width: 20px;
    height: 20px;
  }

  #tiktok-icon {
    margin-left: 4px;
  }

  .contacts > a > img {
    height: 20px;
  }

  .logo img {
    width: 48px;
  }

  .footer ul {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  nav .logo,
  .footer .logo {
    margin: 0;
  }
}