@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap");

:root {
  --white: #fff;
  --black: #080101;
  --transition: 0.3s linear;
  --a-1: #d52349;
  --a-2: #234cd5;
  --a-3: #23d55e;
  --a-4: #d59423;
  --a-5: #23d5cc;
  --hover: var(--a-4);
  --b-1: #1f1e22fa;
  --b-2: #1f1e24fa;
  --b-3: #191c15fa;
  --b-4: #2c2320fa;
  --b-5: #161314fa;
  --bg-dark: var(--b-4);
  --c-1: #827a7c;
  --c-2: #7a7d82;
  --c-3: #7b827a;
  --c-4: #81827a;
  --c-5: #7c7a82;
  --grey: var(--c-4);
}

body {
  box-sizing: border-box;
  font-family: "Inter", sans-serif !important;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  direction: ltr;
}

a {
  text-decoration: none;
}

p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

ul,
ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

img {
  width: 100%;
  display: block;
}

.section-padd {
  padding: 77px 0;
}

.container {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-title {
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 1.2px;
  color: var(--black);
  transition: var(--transition);
}

.logo-title:hover,
.logo-title:focus {
  color: var(--hover);
}

.menu-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 13px 0;
  gap: 5px;
}

.drop,
.menu-link {
  border-radius: 20px;
  padding: 7px 13px;
  color: var(--black);
  transition: var(--transition);
  display: inline-block;
}

.drop:hover,
.drop:focus,
.menu-link:hover,
.menu-link:focus {
  background-color: var(--hover);
  color: var(--white);
}

.drop {
  position: relative;
  transition: var(--transition);
}

.drop-menu {
  display: none;
}

.drop:hover > .drop-menu,
.drop:focus > .drop-menu {
  position: absolute;
  top: 101%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--hover);
  border-radius: 20px;
  padding: 13px;
}

.drop-link {
  display: inline-block;
  color: var(--white);
  transition: var(--transition);
  width: 100%;
  height: 100%;
}

.drop-link:hover,
.drop-link:focus {
  transform: translateX(2px);
  -webkit-transform: translateX(2px);
}

.hero {
  background: url("pic/renders_header_6968c2e06f91c0.85025817.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 80px 0;
}

.section-menu {
  padding-bottom: 0;
  padding-top: 30px;
}

.hero > .container {
  background-color: var(--bg-dark);
  color: var(--white);
  padding: 49px;
}

.hero-text {
  text-align: center;
}

.hero-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

.reasons-row {
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
}

.reasons-col {
  width: 100%;
  box-sizing: border-box;
  padding: 41px 19px;
  flex: 1;
}

.reasons-box {
  display: flex;
  flex-direction: column;
  gap: 19px;
  align-items: center;
  height: 100%;
}

.reasons-icon {
  clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reasons-icon-hover {
  background-color: var(--hover);
}
.reasons-icon-black {
  background-color: var(--black);
}
.reasons-icon-grey {
  background-color: var(--grey);
}

.reasons-icon > svg {
  width: 72px;
  height: 72px;
  color: var(--white);
}

.reasons-text {
  text-align: center;
}

.img-section {
  background: url("pic/renders_header_6968c2e06f91c0.85025817.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 19px;
}

.au-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 19px;
}

.au-col {
  flex: 1;
  box-sizing: border-box;
  padding: 19px;
  width: 100%;
}

.video-player {
  width: 100%;
  height: 300px;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-sizing: border-box;
}

.au-video-player {
  width: 100%;
  height: 300px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  float: none;
  margin: 0 auto;
  padding: 19px;
  display: block;
  box-sizing: border-box;
}

.au-video-player,
.video-player {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.title {
  font-weight: 700;
  font-size: 18px;
  position: relative;
  text-align: center;
  padding-bottom: 13px;
}

.title::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--grey);
  transform: translate(0, -50%);
}

.title > span {
  background: var(--white);
  position: relative;
  padding: 0 13px;
}

.au-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  gap: 13px;
}

.main-img {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
}

.main-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-box {
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
}

.price {
  color: var(--hover);
  font-size: 28px;
  font-weight: 700;
  margin-top: 30px;
}

.hotels-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 19px;
}

.hotels-col {
  width: 100%;
  box-sizing: border-box;
  padding: 19px;
  flex-grow: 1;
}

.hotels-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: var(--transition);
  gap: 13px;
}

.contact-page-img,
.hw-img,
.hotels-img {
  clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.hw-img-hover,
.hotels-img-hover {
  background-color: var(--hover);
}

.hw-img-black,
.hotels-img-black {
  background-color: var(--black);
}

.hw-img-grey,
.hotels-img-grey {
  background-color: var(--grey);
}

.contact-page-img > svg,
.hw-img > svg,
.hotels-img > svg {
  width: 72px;
  height: 72px;
  color: var(--white);
  transition: var(--transition);
}

.hotels-img:hover,
.hotels-img:focus {
  background-color: var(--white);
}

.hotels-img-hover:hover > svg,
.hotels-img-hover:focus > svg {
  color: var(--hover);
}
.hotels-img-black:hover > svg,
.hotels-img-black:focus > svg {
  color: var(--black);
}
.hotels-img-grey:hover > svg,
.hotels-img-grey:focus > svg {
  color: var(--grey);
}

.hotels-title {
  color: var(--black);
  transition: var(--transition);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.hotels-title:hover,
.hotels-title:focus {
  color: var(--hover);
}

.hotels-content {
  text-align: center;
}

.articles-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 19px;
}

.articles-col {
  width: 100%;
  box-sizing: border-box;
  padding: 19px;
  flex-grow: 1;
  box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
    -30px 0 21px -21px rgba(0, 0, 0, 0.45);
}

.articles-img {
  width: 100%;
  height: 300px;
  display: inline-block;
  overflow: hidden;
}

.articles-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.articles-img:hover > img,
.articles-img:focus > img {
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
}

.articles-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.articles-descr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.articles-content {
  text-align: center;
}

.articles-title {
  color: var(--hover);
  transition: var(--transition);
  font-size: 18px;
  text-align: center;
}

.articles-title:hover,
.articles-title:focus {
  color: var(--grey);
}

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
}

.div1 {
  grid-area: 1 / 1 / 3 / 2;
}
.div2 {
  grid-area: 3 / 1 / 6 / 2;
}
.div3 {
  grid-area: 2 / 2 / 6 / 3;
}
.div4 {
  grid-area: 1 / 2 / 2 / 3;
}
.div5 {
  grid-area: 1 / 3 / 6 / 4;
}
.div6 {
  grid-area: 1 / 4 / 4 / 5;
}
.div7 {
  grid-area: 4 / 4 / 5 / 5;
}
.div8 {
  grid-area: 1 / 5 / 3 / 6;
}
.div9 {
  grid-area: 3 / 5 / 5 / 6;
}

.gallery-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.gallery-img:hover > img,
.gallery-img:focus > img {
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 19px;
}

.form-col {
  width: 100%;
  box-sizing: border-box;
  padding: 19px;
  flex-grow: 1;
}

.form-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 19px;
}

.form-img {
  width: 100%;
  height: 300px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.form-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  gap: 19px;
  height: 100%;
  justify-content: center;
}

.contact-page-form {
  width: 100%;
}

.contact-page-form > input,
.contact-page-form > textarea,
.input-mainrow-item,
.textarea-mainrow-item {
  width: 100%;
  padding: 13px 19px;
  border: 1px solid var(--grey);
  box-sizing: border-box;
}

.privacy {
  color: var(--grey);
  transition: var(--transition);
  display: inline-block;
}

.privacy:hover,
.privacy:focus {
  color: var(--hover);
}

.hw-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 19px;
}

.hw-col {
  width: 100%;
  box-sizing: border-box;
  padding: 19px;
  flex-grow: 1;
}

.hw-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 19px;
  padding: 19px;
}

.hw-text {
  text-align: center;
}

.footer-nizBlock {
  background-color: var(--black);
  color: var(--white);
  padding: 80px 0;
}

.hw-o {
  padding-bottom: 0;
}

.footer-privacy-box {
  display: flex;
  flex-direction: column-reverse;
  gap: 19px;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.footer-privacy > a {
  color: var(--white);
  transition: var(--transition);
}

.footer-privacy:hover > a,
.footer-privacy:focus > a {
  color: var(--hover);
}

.footer-logo-box > .logo-box > .logo-title {
  color: var(--white);
  transition: var(--transition);
  margin-bottom: 30px;
}

.footer-logo-box > .logo-box:hover > .logo-title,
.footer-logo-box > .logo-box:focus > .logo-title {
  color: var(--hover);
}

.copyright {
  color: var(--grey);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.copyright > p {
  margin: 0;
}

.contact-page-row {
  display: flex;
  box-sizing: border-box;
  flex-direction: column-reverse;
  gap: 19px;
}

.contact-page-col {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 49px 19px;
  width: 100%;
}

.contact-page-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.contact-page-box > a {
  color: var(--grey);
  transition: var(--transition);
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}

.contact-page-box > a:hover,
.contact-page-box > a:focus {
  color: var(--hover);
}

.map-row {
  display: flex;
  box-sizing: border-box;
  flex-direction: column-reverse;
  gap: 19px;
}

.map-col {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 49px 19px;
  width: 100%;
}

.map {
  width: 100%;
  height: 350px;
  overflow: hidden;
  box-sizing: border-box;
}

.map > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
  border: 0;
}

.adres-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 19px;
}

.contact-text {
  text-align: center;
}

.page-img {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  padding: 19px;
  box-sizing: border-box;
}

.page-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.comment-row {
  display: flex;
  box-sizing: border-box;
  flex-direction: column-reverse;
  gap: 19px;
}

.comment-col {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 49px 19px;
  width: 100%;
  box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
    -30px 0 21px -21px rgba(0, 0, 0, 0.45);
}

.comment-box {
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  gap: 19px;
}

.comment-img {
  width: 140px;
  height: 140px;
  overflow: hidden;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.comment-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-text {
  text-align: center;
}

.comment-author {
  text-align: center;
  font-weight: 700;
  color: var(--grey);
}

.privacy-content {
  overflow: hidden;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }

  .copyright {
    flex-direction: row;
  }
  .section-menu {
    padding-top: 80px;
  }
}

@media (max-width: 767px) {
  .gallery-section {
    display: none;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  .menu-nav {
    flex-direction: row;
    gap: 13px;
  }

  .drop:hover > .drop-menu,
  .drop:focus > .drop-menu {
    width: 300px;
  }

  .drop,
  .menu-link {
    border-radius: 20px;
    padding: 13px;
  }

  .hero {
    padding: 77px;
  }

  .reasons-row {
    flex-direction: row-reverse;
  }

  .reasons-col {
    width: calc((100% / 3) - 19px);
  }
  .reasons-col:nth-child(2) {
    box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
      -30px 0 21px -21px rgba(0, 0, 0, 0.45);
  }

  .au-row {
    flex-direction: row-reverse;
  }

  .au-col {
    width: calc(50% - 19px);
  }

  .price {
    font-size: 40px;
  }

  .hotels-row {
    flex-direction: row-reverse;
  }

  .hotels-col {
    width: calc(50% - 19px);
  }

  .articles-row {
    flex-direction: row-reverse;
  }

  .articles-col {
    width: calc(50% - 19px);
  }

  .hw-row,
  .form-row {
    flex-direction: row-reverse;
  }

  .form-col {
    width: calc(50% - 19px);
  }

  .hw-col {
    width: calc((100% / 3) - 19px);
  }

  .hw-col:nth-child(2) {
    box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
      -30px 0 21px -21px rgba(0, 0, 0, 0.45);
  }

  .au-video-player {
    width: 300px;
    float: left;
  }

  .contact-page-row {
    flex-direction: row-reverse;
  }

  .contact-page-col {
    width: calc((100% / 3) - 19px);
  }

  .contact-page-col:nth-child(2) {
    box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
      -30px 0 21px -21px rgba(0, 0, 0, 0.45);
  }

  .comment-row,
  .map-row {
    flex-direction: row-reverse;
  }

  .comment-col,
  .map-col {
    width: calc(50% - 19px);
  }

  .page-img {
    width: 300px;
    float: left;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }

  .hero {
    padding: 77px 170px;
  }

  .hotels-col {
    width: calc(25% - 19px);
  }

  .hotels-col:nth-child(4),
  .hotels-col:nth-child(2) {
    box-shadow: 30px 0 21px -21px rgba(0, 0, 0, 0.45),
      -30px 0 21px -21px rgba(0, 0, 0, 0.45);
  }

  .articles-col {
    width: calc(25% - 19px);
  }

  .footer-privacy-box {
    flex-direction: row-reverse;
  }

  .au-video-player {
    width: 400px;
  }

  .page-img {
    width: 400px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.button-1 {
  text-align: center;
  position: relative;
  padding: 13px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  font-size: 16px;
  font-weight: 600;
  font-family: sans-serif;
  letter-spacing: 2px;
  transition: all 0.2s;
  display: inline-block;
  color: var(--bg-dark);
}

.button-1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 15px;
  width: 100%;
  height: 100%;
  padding: 2px;
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  z-index: -1;
}

.button-1:hover {
  background: #315cfd;
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  color: white;
  font-size: 16px;
}

.button-2 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 13px 30px;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 21px 0px rgba(0, 0, 0, 0.1), 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
  font-size: 15px;
}

.button-2 {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #03c8a8 0%, #004dff 74%);
  border: none;
}

.button-2:hover {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #004dff 0%, #03c8a8 74%);
}

.button-2 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.button-2:before,
.button-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 5px 5px 6px 0 rgba(255, 255, 255, 0.9),
    -5px -5px 6px 0 rgba(116, 125, 136, 0.2),
    inset -5px -5px 6px 0 rgba(255, 255, 255, 0.9),
    inset 5px 5px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 0.2s ease;
}

.button-2:before {
  height: 0%;
  width: 0.1px;
}

.button-2:after {
  width: 0%;
  height: 0.1px;
}

.button-2:hover:before {
  height: 100%;
}

.button-2:hover:after {
  width: 100%;
}

.button-2 span:before,
.button-2 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 5px 5px 6px 0 rgba(255, 255, 255, 0.9),
    -5px -5px 6px 0 rgba(116, 125, 136, 0.2),
    inset -5px -5px 6px 0 rgba(255, 255, 255, 0.9),
    inset 5px 5px 6px 0 rgba(116, 125, 136, 0.3);
  transition: all 0.2s ease;
}

.button-2 span:before {
  width: 0.1px;
  height: 0%;
}

.button-2 span:after {
  width: 0%;
  height: 0.1px;
}

.button-2 span:hover:before {
  height: 100%;
}

.button-2 span:hover:after {
  width: 100%;
}

.button-3 {
  text-align: center;
  position: relative;
  padding: 19px;
  border-radius: 15px;
  border: none;
  background-color: rgb(255, 136, 0);
  color: white;
  box-shadow: 0px 13px 13px rgb(255, 198, 146) inset,
    0px 5px 13px rgba(5, 5, 5, 0.212), 0px -13px 13px rgb(255, 102, 0) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-3::before {
  width: 80%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.678);
  content: "";
  filter: blur(1px);
  top: 7px;
  border-radius: 50%;
}

.button-3::after {
  width: 80%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.137);
  content: "";
  filter: blur(1px);
  bottom: 7px;
  border-radius: 50%;
}

.button-3:hover {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.button-4 {
  text-align: center;
  background: linear-gradient(to right, gold, var(--hover));
  color: white;
  padding: 13px 19px;
  width: var(--width);
  height: var(--height);
  text-align: center;
  line-height: var(--height);
  font-size: calc(var(--height) / 2.5);
  font-family: sans-serif;
  letter-spacing: 0.2em;
  border: 2px solid darkgoldenrod;
  border-radius: 15px;
  transform: perspective(500px) rotateY(-15deg);
  text-shadow: 6px 2px 2px rgba(0, 0, 0, 0.2);
  button-4-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
}

.button-4:hover {
  transform: perspective(500px) rotateY(15deg);
  text-shadow: -6px 2px 2px rgba(0, 0, 0, 0.2);
  button-4-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);
}

.button-4::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  left: -100%;
  transition: 0.5s;
}

.button-4:hover::before {
  left: 100%;
}
.button-5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 13px;
  border: 0px solid;
  background-image: linear-gradient(45deg, blue, #00f0a0, blue);
  background-size: 500% 400%;
  color: white;
  border-radius: 15px;
  transition: 0.6s all;
  display: inline-block;
  text-align: center;
}

.button-5:hover {
  background-position: 75% 50%;
  transform: perspective(100px);
}

.button-5:active {
  transform: scale(0.95);
  transition: 0.1s;
}

.page-content h2 {
  font-size: 18px;
}

.travel-form-group,
.travel-form-group2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.travel-form-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

#place {
  width: 100%;
  flex-direction: column;
}

@media (min-width: 768px) {
  .travel-form-detail {
    width: calc(50% - 14px);
  }

  .travel-form-group2 {
    .travel-form-detail {
      width: calc(33.33% - 14px);
    }
  }
}