@font-face {
  font-family: main;
  src: url(../assets/font/DB_Helvethaica_X_Med_Ext_v3.2.ttf);
}

body {
  background-image: url(../assets/components/element-bg.jpg);
  background-size: cover;
  background-color: lightgray;
  font-family: "main";
}

nav {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}
a{
  color: white;
}
nav ul a {
  font-size: 2rem;
}

nav .stone-left {
  width: 15%;
  position: absolute;
  left: 0;
  z-index: 5;
}

nav .stone-right {
  width: 15%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

nav .nav-height-fixed {
  height: 65px;
}

nav .tel img {
  margin-top: 15px;
  margin-bottom: -12px;
}

.why {
  padding-top: 50px;
  color: white;
  height: 740px;
  width: 100%;
  background-image: url(../assets/content/why.png);
  background-color: black;
  background-position: center;
  margin-bottom: 100px;
}

.why .h1 {
  font-size: 50px;
  margin-bottom: 160px;
}
.why .p1 {
  font-size: 2rem;
  margin-bottom: -20px;
}
.why p {
  font-size: 2rem;
}

.container.service {
}

.container.service img {
  width: 100%;
}

.review {
  margin-top: 100px;
  margin-bottom: 100px;
}

.get-special-price {
  background-color: red;
  color: white;
  padding: 10px;
  font-size: 20px;
  border-width: 1px;
  border-color: darkred;
  border-radius: 10px;
  cursor: pointer;
}
.container.girl {
  margin-top: 150px;
}
.container.girl img {
  width: 100%;
}
.girl .stone {
  display: flex;
  flex-direction: row;
  justify-content: left;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.girl .stone img {
  width: 20%;
  height: 20%;
}
.girl .stone .stone-left {
  margin-left: -6%;
}
.girl .stone .stone-right {
  margin-right: -6%;
  margin-left: auto;
}

.container.video {
  margin-top: 100px;
  margin-bottom: 100px;
}

.container.video video {
  width: 100%;
  padding: 5px;
  border-radius: 20px;
  width: 100%;
  background: linear-gradient(12deg, #e2e251, #3e3700, #d0af00);
}

.container h1 {
  text-align: center;
}

.slider.carousel {
  z-index: 4;
  overflow: hidden;
  position: relative;
  width: 100%;
  /* height: 500px; */
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.review .carousel {
  margin-top: -90px;
  margin-bottom: -90px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 600px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.review .carousel .carousel-item {
  width: 400px;
  height: 400px;
}

.slide-control {
  margin-top: 160px;
  position: absolute;
  width: 100%;
  height: 300px;
  z-index: 3;
}

.slide-control img {
  transform: scale(0.8);
}

.contact {
  color: white;
  background-color: #003f47;
  background-image: url(../assets/content/contact.png);
  background-position: center;
  background-size: cover;
  height: 50vw;
  overflow: hidden;
}

.contact .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.contact .col {
  width: 50%;
}

.contact .phone {
  margin-bottom: -30px;
}

.contact .qr-code-outer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.contact .qr-code {
  width: 250px;
  height: 330px;
  margin-left: auto;
}

.contact .qr-code img {
  width: 90%;
}

.contact h4,
.contact h1 {
  line-height: 50%;
}
.contact h1.title {
  font-size: 5rem;
  line-height: 0%;
}

.footer {
  background-image: url(../assets/components/Element-footer-bg.png);
  height: 48vw;
  background-size: cover;
  background-position: 0vw 0vw;
  background-repeat: no-repeat;
  margin-top: -10vw;
  padding-top: 15%;
  color: white;
  min-height: max-content;
}

.footer .image {
  position: relative;
  padding-bottom: 70%;
}

.footer .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}

.footer .description {
  padding-left: 20%;
}

.footer .description h3 img {
  margin-bottom: -23px;
}

.footer .map h5 {
  margin: 0px;
}

.footer .map h5 img {
  margin-bottom: -23px;
}

.footer .map .image {
  margin-top: 15px;
  padding-bottom: 55%;
}

/* Basic style */
.center-y {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}

.center-x {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.btn-next {
  margin-left: 22vw;
}

@media screen and (max-width: 1440px) {
  .contact {
    height: 820px;
    background-position-x: 10%;
  }
}

@media screen and (max-width: 1070px) {
  .footer {
    margin-top: -10vw;
    padding-top: 15%;
  }
}

@media screen and (max-width: 1024px) {
  .contact h4 {
    font-size: 1.5rem;
  }

  .contact h1 {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 991px) {
  .hidden-991 {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .btn-next {
    margin-left: 29vw;
  }
}
@media screen and (min-width: 760px) {
  .girl .get-special-price {
    margin-top: -70px;
    position: absolute;
    margin-left: 160px;
  }
}
@media screen and (max-width: 600px) {
  nav ul a {
    font-size: 12px;
    color: #fff;
    display: block;
    padding-left: 2%;
    padding-right: 2%;
  }

  nav .nav-height-fixed {
    height: 55px;
  }

  .contact .col {
    width: 100%;
  }

  .contact .qr-code {
    width: 140px;
    height: 200px;
  }
  .footer {
    margin-top: -18vw;
    padding-top: 30%;
  }
}

@media screen and (max-width: 425px) {
  .btn-next {
    margin-left: 44vw;
  }
  .why .h1 {
    margin-bottom: 120px;
  }
}

@media screen and (max-width: 320px) {
  .slide-control img {
    transform: scale(0.2);
  }

  .btn-next {
    margin-left: 4vw;
  }

  .contact .qr-code img {
    width: 73%;
  }
}

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

.bg-black-transparent {
  background-color: rgba(0, 0, 0, 0.4);
}