/* COLORES */
/* PROPIEDADES */
/* Importaciones */
/* Reset */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Titillium+Web:wght@200;300;400;600;700&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h2 {
  font-family: "Titillium Web", sans-serif;
}

.header__logo__content--logo span {
  font-family: "Cinzel", serif;
}

/* ******************* Utlity Components ******************* */
body {
  font-family: "Titillium Web", sans-serif;
  line-height: 1.7;
}

.container {
  display: grid;
  grid-template-columns: [container-start] 1fr [center-start] repeat(10, [col-start] minmax(min-content, 11rem) [col-end]) [center-end] 1fr [container-end];
  grid-template-rows: 100vh repeat(8, min-content);
  /* Anchor tags */
  /* Paragraphs */
  /* List Item */
  /* Icons */
}
.container a:link,
.container a:visited {
  text-decoration: none;
  font-size: calc(0.5rem + 1vw);
  padding: 1rem 2rem;
  border-radius: 0.3rem;
  position: relative;
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  z-index: 1;
  color: #adf5ff;
}
.container p {
  font-size: calc(1rem + 1vw);
  font-weight: 300;
}
.container li {
  list-style: none;
  margin-bottom: 4rem;
}
.container i {
  font-size: calc(2rem + 2vw);
  color: #d55672;
}

/* Main Styling */
header#header {
  background-color: #0075a2;
  grid-column: container-start/container-end;
  background: linear-gradient(rgba(0, 117, 162, 0.5137254902), rgba(0, 117, 162, 0.5137254902)), url("../img/hero2.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Nav */
.header__main-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  /* Links Menu */
}
.header__main-nav input[type=checkbox] {
  position: absolute;
  top: 3rem;
  left: 3rem;
  height: 5rem;
  width: 5rem;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
  /* Rotating the menu */
}
.header__main-nav input[type=checkbox]:checked {
  /* Displaying the Menu when the checkbox is checked */
  /* Cuando seleccionamos checkbox se seleccionara igualmente el menu */
}
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div {
  transform: rotate(135deg);
}
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div::before {
  top: 0;
  left: 0;
  width: 100%;
  transform: rotate(270deg);
}
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div::after {
  opacity: 0;
}
.header__main-nav input[type=checkbox]:checked:hover + .header__main-nav--hamburger > div {
  transform: rotate(405deg);
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu {
  visibility: visible;
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu > div {
  transform: scaleX(1);
  transition-duration: 1s;
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu > div > div {
  opacity: 1;
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:link, .header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:visited {
  z-index: 5;
  font-size: calc(1.5rem + 0.5vw);
  position: relative;
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:link::before, .header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:visited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scaleY(0);
  background-color: rgba(0, 117, 162, 0.8823529412);
  transition: transform 0.5s ease-in-out;
}
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:link:hover::before, .header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:link:active::before, .header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:visited:hover::before, .header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu ul li a:visited:active::before {
  transform: scaleY(1);
}
.header__main-nav--menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.header__main-nav--menu > div {
  background-color: rgba(213, 86, 114, 0.8823529412);
  height: 200%;
  width: 200%;
  display: grid;
  place-items: center;
  transform: scaleX(0);
  transition: all 1s ease-in-out;
}
.header__main-nav--menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Hamburger */
.header__main-nav--hamburger {
  position: absolute;
  top: 3rem;
  left: 3rem;
  height: 5rem;
  width: 5rem;
  padding: 1rem;
  background-color: #d55672;
  z-index: 2;
  display: grid;
  place-items: center;
  animation: main-nav 2s;
  /* Hamburger lines */
  /* Hamburger Top and Bottom lines */
}
@keyframes main-nav {
  0% {
    transform: translateX(150rem) rotate(1800deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}
.header__main-nav--hamburger > div {
  position: relative;
  height: 0.3rem;
  width: 100%;
  background-color: #1dd380;
  display: grid;
  place-items: center;
  transition: all 0.3s ease-in-out;
}
.header__main-nav--hamburger > div::before, .header__main-nav--hamburger > div::after {
  content: "";
  position: absolute;
  top: -1rem;
  width: 60%;
  height: inherit;
  background-color: inherit;
  z-index: 2;
}
.header__main-nav--hamburger > div::before {
  left: 0;
}
.header__main-nav--hamburger > div::after {
  top: 1rem;
  right: 0;
}

/********** The rest of the header section  **********/
.header__logo__content {
  display: grid;
  grid-template-columns: 1fr minmax(30rem, 1fr) 1fr;
  grid-template-rows: min-content;
  height: 90%;
  justify-items: center;
}
.header__logo__content--logo {
  grid-column: 2/3;
  letter-spacing: 0.2rem;
}
.header__logo__content--logo span {
  color: #d55672;
  font-size: 3rem;
  text-align: center;
  line-height: 0.8;
}
.header__logo__content--logo span p {
  color: #13ff95;
  font-size: 1.5rem;
}
.header__logo__content--content {
  grid-column: 1/-1;
  align-self: center;
}
.header__logo__content--content__title {
  font-size: calc(4rem + 4vw);
  font-weight: 300;
  text-transform: uppercase;
  padding: 0 2rem 0 calc(2rem + 2vw);
  color: #fff;
}
.header__logo__content--content__para {
  font-size: calc(1rem + 2vw);
  font-weight: 500;
  padding: 2vh 2rem 6vh calc(2rem + 2vw);
}
.header__logo__content--content__link:link, .header__logo__content--content__link:visited {
  border: 0.2rem solid #1dd380;
  margin-left: calc(2rem + 2vw);
}
.header__logo__content--content__link:link::before, .header__logo__content--content__link:visited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #1dd380;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(1, 0, 0, 1);
  z-index: -1;
}
.header__logo__content--content__link:link:hover::before, .header__logo__content--content__link:visited:hover::before {
  transform: scaleX(1);
}

/* Section */
section {
  /* Booking Content Section */
  /* Booking Date Section */
  /* Villas Section */
  /* Motto Section */
  /* Events Section && Features Section */
  /* Events text Section */
  /* Gallery Text Section */
  /* Gallery Carousel Section */
  /* Features text Section */
  /* Testimonials Section */
  /* Footer Section */
}
section#booking-content {
  grid-column: center-start/col-end 6;
  padding: 8vh 3vw;
  background-color: #eee;
  display: grid;
  grid-template-rows: repeat(3, max-content);
  grid-gap: 2vh;
}
section .booking-content__title {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 300;
  position: relative;
  color: #d55672;
  font-weight: 500;
}
section .booking-content__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  height: 0.2rem;
  width: 30%;
  background-color: #d55672;
}
section .booking-content__para {
  padding: 2rem;
  color: #0075a2;
}
section .booking-content__icons {
  margin-left: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
section .booking-content__icons--weather, section .booking-content__icons--time {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  grid-template-rows: 10vh;
  place-items: center;
}
section#booking-date {
  background-color: #eee;
  grid-column: col-start 7/center-end;
  padding: 8vh 3vw;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}
section .booking-date__schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2vw;
  place-items: center;
}
section .booking-date__schedule--arrival, section .booking-date__schedule--departure, section .booking-date__schedule--guests {
  display: grid;
  grid-row-gap: 3vh;
  cursor: pointer;
}
section .booking-date__schedule--arrival h5, section .booking-date__schedule--departure h5, section .booking-date__schedule--guests h5 {
  font-size: calc(1rem + 1vh);
  text-align: center;
}
section .booking-date__schedule--arrival > div, section .booking-date__schedule--departure > div, section .booking-date__schedule--guests > div {
  background-color: #d55672;
  padding: 2rem 4rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  position: relative;
}
section .booking-date__schedule--arrival > div::before, section .booking-date__schedule--departure > div::before, section .booking-date__schedule--guests > div::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 1.5rem;
  margin-left: -1.5rem;
  border-style: solid;
  border-color: transparent transparent #d55672;
}
section .booking-date__schedule--arrival > div p:nth-of-type(2), section .booking-date__schedule--departure > div p:nth-of-type(2), section .booking-date__schedule--guests > div p:nth-of-type(2) {
  font-size: 3rem;
  font-weight: 700;
}
section .booking-date__contact {
  align-self: flex-end;
}
section .booking-date__contact p {
  font-size: 2rem;
  color: rgba(0, 117, 162, 0.8823529412);
  font-weight: 500;
}
section .booking-date__contact p:first-of-type {
  margin-top: 4rem;
}
section .booking-date__contact p:nth-of-type(2) {
  font-weight: 600;
}
section .booking-date__contact--link:link, section .booking-date__contact--link:visited {
  background-color: rgba(0, 117, 162, 0.8823529412);
  transition: all 0.3s ease-in-out;
}
section .booking-date__contact--link:hover, section .booking-date__contact--link:active {
  color: #000;
  background-color: rgba(29, 211, 128, 0.5137254902);
  border: 0.1rem rgba(0, 117, 162, 0.8823529412) solid;
}
section#villas {
  display: grid;
  grid-column: container-start/container-end;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  background: rgba(173, 245, 255, 0.5137254902);
  grid-gap: 2rem;
}
section#villas .villas__villa-1 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-1:hover, section#villas .villas__villa-1:active {
  transform: scale(1.05);
}
section#villas .villas__villa-1 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-1 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-1 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-1:link::before, section#villas .villas__villa-1:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-1 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-1:link::before, section#villas .villas__villa-1:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-1 a[class^=villas]:link, section#villas .villas__villa-1 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-1 a[class^=villas]:link::before, section#villas .villas__villa-1 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-1 a[class^=villas]:link:hover, section#villas .villas__villa-1 a[class^=villas]:link:active, section#villas .villas__villa-1 a[class^=villas]:visited:hover, section#villas .villas__villa-1 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-1 a[class^=villas]:link:hover::before, section#villas .villas__villa-1 a[class^=villas]:link:active::before, section#villas .villas__villa-1 a[class^=villas]:visited:hover::before, section#villas .villas__villa-1 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-2 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-2:hover, section#villas .villas__villa-2:active {
  transform: scale(1.05);
}
section#villas .villas__villa-2 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-2 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-2 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-2:link::before, section#villas .villas__villa-2:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-2 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-2:link::before, section#villas .villas__villa-2:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-2 a[class^=villas]:link, section#villas .villas__villa-2 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-2 a[class^=villas]:link::before, section#villas .villas__villa-2 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-2 a[class^=villas]:link:hover, section#villas .villas__villa-2 a[class^=villas]:link:active, section#villas .villas__villa-2 a[class^=villas]:visited:hover, section#villas .villas__villa-2 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-2 a[class^=villas]:link:hover::before, section#villas .villas__villa-2 a[class^=villas]:link:active::before, section#villas .villas__villa-2 a[class^=villas]:visited:hover::before, section#villas .villas__villa-2 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-3 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-3:hover, section#villas .villas__villa-3:active {
  transform: scale(1.05);
}
section#villas .villas__villa-3 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-3 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-3 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-3:link::before, section#villas .villas__villa-3:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-3 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-3:link::before, section#villas .villas__villa-3:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-3 a[class^=villas]:link, section#villas .villas__villa-3 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-3 a[class^=villas]:link::before, section#villas .villas__villa-3 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-3 a[class^=villas]:link:hover, section#villas .villas__villa-3 a[class^=villas]:link:active, section#villas .villas__villa-3 a[class^=villas]:visited:hover, section#villas .villas__villa-3 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-3 a[class^=villas]:link:hover::before, section#villas .villas__villa-3 a[class^=villas]:link:active::before, section#villas .villas__villa-3 a[class^=villas]:visited:hover::before, section#villas .villas__villa-3 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-4 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-4:hover, section#villas .villas__villa-4:active {
  transform: scale(1.05);
}
section#villas .villas__villa-4 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-4 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-4 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-4:link::before, section#villas .villas__villa-4:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-4 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-4:link::before, section#villas .villas__villa-4:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-4 a[class^=villas]:link, section#villas .villas__villa-4 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-4 a[class^=villas]:link::before, section#villas .villas__villa-4 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-4 a[class^=villas]:link:hover, section#villas .villas__villa-4 a[class^=villas]:link:active, section#villas .villas__villa-4 a[class^=villas]:visited:hover, section#villas .villas__villa-4 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-4 a[class^=villas]:link:hover::before, section#villas .villas__villa-4 a[class^=villas]:link:active::before, section#villas .villas__villa-4 a[class^=villas]:visited:hover::before, section#villas .villas__villa-4 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-5 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-5:hover, section#villas .villas__villa-5:active {
  transform: scale(1.05);
}
section#villas .villas__villa-5 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-5 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-5 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-5:link::before, section#villas .villas__villa-5:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-5 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-5:link::before, section#villas .villas__villa-5:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-5 a[class^=villas]:link, section#villas .villas__villa-5 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-5 a[class^=villas]:link::before, section#villas .villas__villa-5 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-5 a[class^=villas]:link:hover, section#villas .villas__villa-5 a[class^=villas]:link:active, section#villas .villas__villa-5 a[class^=villas]:visited:hover, section#villas .villas__villa-5 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-5 a[class^=villas]:link:hover::before, section#villas .villas__villa-5 a[class^=villas]:link:active::before, section#villas .villas__villa-5 a[class^=villas]:visited:hover::before, section#villas .villas__villa-5 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-6 {
  padding: 2rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}
section#villas .villas__villa-6:hover, section#villas .villas__villa-6:active {
  transform: scale(1.05);
}
section#villas .villas__villa-6 h2[class^=villas] {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
section#villas .villas__villa-6 p[class^=villas] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  font-weight: 500;
}
section#villas .villas__villa-6 :nth-child(n)::before, a[class^=villas] section#villas .villas__villa-6:link::before, section#villas .villas__villa-6:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
section#villas .villas__villa-6 :nth-child(2n)::before, a[class^=villas] section#villas .villas__villa-6:link::before, section#villas .villas__villa-6:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
section#villas .villas__villa-6 a[class^=villas]:link, section#villas .villas__villa-6 a[class^=villas]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: rgba(213, 86, 114, 0.8823529412);
  color: rgba(173, 245, 255, 0.8823529412);
  z-index: 2;
  overflow: hidden;
}
section#villas .villas__villa-6 a[class^=villas]:link::before, section#villas .villas__villa-6 a[class^=villas]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: #0075a2;
  transition: height 0.3s ease-in-out;
}
section#villas .villas__villa-6 a[class^=villas]:link:hover, section#villas .villas__villa-6 a[class^=villas]:link:active, section#villas .villas__villa-6 a[class^=villas]:visited:hover, section#villas .villas__villa-6 a[class^=villas]:visited:active {
  color: white;
}
section#villas .villas__villa-6 a[class^=villas]:link:hover::before, section#villas .villas__villa-6 a[class^=villas]:link:active::before, section#villas .villas__villa-6 a[class^=villas]:visited:hover::before, section#villas .villas__villa-6 a[class^=villas]:visited:active::before {
  height: 400%;
}
section#villas .villas__villa-1 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#villas .villas__villa-2 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#villas .villas__villa-3 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#villas .villas__villa-4 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#villas .villas__villa-5 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-5.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#villas .villas__villa-6 {
  background: linear-gradient(rgba(29, 211, 128, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Villas/villa-6.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
section#motto {
  background-color: rgba(0, 117, 162, 0.8823529412);
  grid-column: container-start/container-end;
  padding: 10vh 3vw;
}
section .motto__content {
  color: white;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
section .motto__content--title {
  font-size: calc(2rem + 2vw);
  padding: 0 2rem 1rem;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
}
section .motto__content--title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 0.2rem;
  width: 10%;
  background-color: #fff;
}
section#events-content {
  display: grid;
  grid-column: container-start/col-end 9;
  grid-template-columns: repeat(2, 1fr);
}
section#events-content > div {
  display: grid;
  padding: 8vh 3vw;
  grid-template-areas: "title " "para ";
  grid-row-gap: 4vh;
  align-items: center;
  justify-items: start;
}
section#events-content > div h2[class*=title] {
  grid-area: title;
  font-size: calc(2rem + 2vw);
  font-weight: 400;
  color: #000;
}
section#events-content > div p[class*=para] {
  grid-area: para;
  color: #adf5ff;
}
section#events-content > div:first-child {
  background: linear-gradient(rgba(213, 86, 114, 0.8823529412), rgba(213, 86, 114, 0.5137254902)), url("../img/Events/beach-party.jpg");
  border-right: solid 0.2rem #d55672;
}
section#events-content > div:last-child {
  background: linear-gradient(rgba(213, 86, 114, 0.8823529412), rgba(213, 86, 114, 0.5137254902)), url("../img/Events/culture-discovery.jpg");
  border-left: solid 0.2rem #d55672;
}
section#events-content > div:first-child, section#events-content > div:last-child {
  background-size: cover;
  background-position: center;
}
section#events-text {
  background-color: #d55672;
  grid-column: col-start 10/center-end;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
section#events-text .events-text__content {
  transform: rotate(0.25turn);
}
section#events-text .events-text__content--title {
  font-size: calc(2rem + 2vw);
  font-weight: 600;
  color: #adf5ff;
  letter-spacing: 0.2rem;
}
section#gallery-text {
  background-color: #0075a2;
  grid-column: center-start/col-end 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
section#gallery-text .gallery-text__content {
  transform: rotate(-0.25turn);
}
section#gallery-text .gallery-text__content--title {
  font-size: calc(2rem + 2vw);
  font-weight: 600;
  color: #1dd380;
  letter-spacing: 0.2rem;
}
section#gallery-carrousel {
  grid-column: col-start 2/container-end;
  height: 90vh;
  overflow: hidden;
  border: solid 0.2rem #1dd380;
  position: relative;
}
section#gallery-carrousel .gallery-carrousel__img--container {
  width: 100%;
  height: 100%;
  position: relative;
}
section#gallery-carrousel .gallery-carrousel__img--container--list {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}
section#gallery-carrousel .gallery-carrousel__img--container--list__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
section#gallery-carrousel .gallery-carrousel__img--container--list__item img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
}
section#gallery-carrousel .gallery-carrousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1;
}
section#gallery-carrousel .gallery-carrousel__btn--right {
  right: 0;
}
section#gallery-carrousel .gallery-carrousel__nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 5%;
  transform: translateX(-50%);
  margin-bottom: 1rem;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 3rem;
}
section#gallery-carrousel .gallery-carrousel__nav .current--img {
  background-color: #0075a2;
}
section#gallery-carrousel .gallery-carrousel__nav--btn {
  background-color: rgba(213, 86, 114, 0.8823529412);
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
}
section#feactures-content {
  display: grid;
  grid-column: container-start/col-end 9;
  grid-template-columns: repeat(2, 1fr);
}
section#feactures-content > div {
  display: grid;
  padding: 8vh 3vw;
  grid-template-areas: "title " "para ";
  grid-row-gap: 4vh;
  align-items: center;
  justify-items: start;
}
section#feactures-content > div h2[class*=title] {
  grid-area: title;
  font-size: calc(2rem + 2vw);
  font-weight: 400;
  color: #000;
}
section#feactures-content > div p[class*=para] {
  grid-area: para;
}
section#feactures-content > div:first-child {
  background: linear-gradient(rgba(173, 245, 255, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Features/cocktail.jpg");
  border-right: solid 0.2rem #adf5ff;
}
section#feactures-content > div:last-child {
  background: linear-gradient(rgba(173, 245, 255, 0.5137254902), rgba(173, 245, 255, 0.5137254902)), url("../img/Features/surfing.jpg");
  border-left: solid 0.2rem #adf5ff;
}
section#feactures-content > div:first-child, section#feactures-content > div:last-child {
  background-size: cover;
  background-position: left;
}
section#feactures-text {
  grid-column: col-start 10/center-end;
  background-color: #adf5ff;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}
section#feactures-text .feactures-text__content {
  transform: rotate(0.25turn);
}
section#feactures-text .feactures-text__content--title {
  font-size: calc(2rem + 2vw);
  font-weight: 600;
  color: #d55672;
  letter-spacing: 0.2rem;
}
section#testimonials,
section .testimonials {
  grid-column: center-start/center-end;
  padding: 8vh 3vw;
  background-color: rgba(173, 245, 255, 0.5137254902);
  display: grid;
  grid-template-columns: repeat(auto-fit, 25rem);
  grid-gap: 5rem;
  place-content: center;
}
section#testimonials__card,
section .testimonials__card {
  width: 28rem;
  height: 50rem;
  position: relative;
}
section#testimonials__card--front, section#testimonials__card--back,
section .testimonials__card--front,
section .testimonials__card--back {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
  backface-visibility: hidden;
  transform: perspective(100rem);
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 3rem;
}
section#testimonials__card--front h2,
section .testimonials__card--front h2 {
  background-color: #adf5ff;
  padding: 1rem;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  color: #d55672;
}
section#testimonials__card--back p,
section .testimonials__card--back p {
  place-self: center;
  font-size: 2rem;
  font-weight: 400;
}
section#testimonials .testimonials__card--back,
section .testimonials .testimonials__card--back {
  transform: perspective(100rem) rotateY(0.5turn);
  background-color: #d55672;
}
section#testimonials .testimonials__card:hover .testimonials__card--front,
section .testimonials .testimonials__card:hover .testimonials__card--front {
  transform: perspective(100rem) rotateY(0.5turn);
}
section#testimonials .testimonials__card:hover .testimonials__card--back,
section .testimonials .testimonials__card:hover .testimonials__card--back {
  transform: perspective(100rem) rotateY(1turn);
}
section#testimonials .testimonials__card:first-child .testimonials__card--front,
section .testimonials .testimonials__card:first-child .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-1.jpg");
}
section#testimonials .testimonials__card:nth-child(2) .testimonials__card--front,
section .testimonials .testimonials__card:nth-child(2) .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-2.jpg");
}
section#testimonials .testimonials__card:nth-child(3) .testimonials__card--front,
section .testimonials .testimonials__card:nth-child(3) .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-3.jpg");
}
section#testimonials .testimonials__card:nth-child(4) .testimonials__card--front,
section .testimonials .testimonials__card:nth-child(4) .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-4.jpg");
}
section#testimonials .testimonials__card:nth-child(5) .testimonials__card--front,
section .testimonials .testimonials__card:nth-child(5) .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-5.jpg");
}
section#testimonials .testimonials__card:nth-child(6) .testimonials__card--front,
section .testimonials .testimonials__card:nth-child(6) .testimonials__card--front {
  background-image: url("../img/Testimonials/testimonials-6.jpg");
}
section#footer {
  background-color: #0075a2;
  grid-column: container-start/container-end;
  padding: 6vh 4vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}
section#footer .footer__social--link:link, section#footer .footer__social--link:visited {
  display: inline-block;
  background-color: #1dd380;
  border-radius: 4rem;
  margin-right: 1rem;
  box-shadow: 0.5rem 0.5rem 2rem 1rem #1dd380, -0.5rem -0.5rem 2rem 1rem #1dd380;
  transform: scale(0.8);
  animation-name: social-u72ol2f;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes social-u72ol2f {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}
section#footer .footer__social--link:link:first-child, section#footer .footer__social--link:visited:first-child {
  animation-delay: 0s;
}
section#footer .footer__social--link:link:nth-child(2), section#footer .footer__social--link:visited:nth-child(2) {
  animation-delay: 0.3s;
}
section#footer .footer__social--link:link:nth-child(3), section#footer .footer__social--link:visited:nth-child(3) {
  animation-delay: 0.6s;
}
section#footer .footer__social--link:link:last-child, section#footer .footer__social--link:visited:last-child {
  animation-delay: 0.9s;
}
section#footer .footer__social i {
  font-size: 2rem;
}
section#footer p {
  color: #d55672;
  font-weight: 500;
}
section#footer p span {
  color: #1dd380;
  font-weight: 450;
}

.hidden {
  display: none;
}

/* green green green green* 1000 px *green green green green */
@media screen and (max-width: 1000px) {
  /* all Links */
  a:link,
a:visited {
    font-size: calc(1rem + 1vw);
  }
}
/* blue blue blue blue blue blue 800 px blue blue blue blue blue blue */
@media screen and (max-width: 800px) {
  section {
    /*@@@###$%%%#$%*** Booking Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Booking Date Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Villas Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** footer  ***@@@###$%%%#$%*/
  }
  section#booking-content {
    grid-column: col-start/center-end;
    padding: 4vh 3vw;
  }
  section .booking-content__title {
    text-align: center;
  }
  section .booking-content__title::after {
    width: 20%;
    left: 40%;
  }
  section#booking-date {
    padding: 4vh 3vw;
    grid-column: center-start/center-end;
    grid-row-gap: 7vh;
  }
  section .booking-date__schedule--arrival > div, section .booking-date__schedule--departure > div, section .booking-date__schedule--guests > div {
    padding: 2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: min-content;
    grid-column-gap: 2vw;
    place-items: center;
  }
  section#villas {
    grid-gap: 0;
  }
  section#footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3rem;
    padding: 3vh 3vw;
  }
}
/* red red red red red red red 600 px red red red red red red red */
@media screen and (max-width: 600px) {
  /*@@@###$%%%#$%*** Header Section  ***@@@###$%%%#$%*/
  .header__logo__content--content__para {
    font-size: 2rem;
  }

  section {
    /*@@@###$%%%#$%*** Booking Date Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Events Text Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Booking Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Villas Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Motto Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Events Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Gallery Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Features Content Section  ***@@@###$%%%#$%*/
    /*@@@###$%%%#$%*** Booking Content Section  ***@@@###$%%%#$%*/
  }
  section#booking-date {
    grid-template-rows: repeat(2, max-content);
  }
  section .booking-date__schedule--arrival > div, section .booking-date__schedule--departure > div, section .booking-date__schedule--guests > div {
    grid-template-columns: min-content;
  }
  section#gallery-text, section#events-text, section#feactures-text {
    display: none;
  }
  section#villas {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }
  section#villas .villas__villa-1 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#villas .villas__villa-2 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#villas .villas__villa-3 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#villas .villas__villa-4 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#villas .villas__villa-5 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#villas .villas__villa-6 p[class^=villas] {
    font-size: 1.3rem;
    margin: 1rem 0 2rem 0;
  }
  section#events-content {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }
  section#events-content > div p[class*=para] {
    font-size: 1.3rem;
  }
  section#events-content, section#gallery-carrousel, section#feactures-content {
    grid-column: center-start/center-end;
  }
  section .booking-content__para {
    font-size: 1.5rem;
  }
  section#events-content > div:first-child, section#events-content > div:last-child {
    border: none;
  }
  section#feactures-content {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }
  section#feactures-content > div:first-child, section#feactures-content > div:last-child {
    border: none;
  }
  section#feactures-content > div p[class*=para] {
    font-size: 1.5rem;
  }
  section .motto__content--para {
    font-size: 1.5rem;
  }
  section#gallery-carrousel .gallery-carrousel__btn i {
    font-size: 3rem;
  }
  section#gallery-carrousel .gallery-carrousel__nav {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3vh;
    grid-column-gap: 10vw;
    height: 12%;
  }
  section#testimonials,
section .testimonials {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    grid-gap: 3rem;
    place-items: center;
  }
  section#testimonials__card,
section .testimonials__card {
    width: 19rem;
    height: 30rem;
    position: relative;
  }
  section#testimonials__card--front h2,
section .testimonials__card--front h2 {
    padding: 0.5rem;
    font-size: 1rem;
  }
  section#footer {
    padding: 3vh 2vw;
  }
  section#footerp {
    font-size: 1.5rem;
  }
}
/* yellow yellow yellow yellow 400 px yellow yellow yellow yellow   */
@media screen and (max-width: 400px) {
  /*@@@###$%%%#$%*** Booking Date Section  ***@@@###$%%%#$%*/
  .header__logo__content {
    grid-template-columns: 1fr minmax(10rem, 1fr) 1fr;
    place-content: center;
  }

  .header__logo__content--content {
    grid-column: 1/-2;
  }

  section {
    /*@@@###$%%%#$%*** Booking Content Section  ***@@@###$%%%#$%*/
  }
  section .booking-date__schedule {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: auto;
    grid-row-gap: 4vh;
  }
  section .booking-date__contact {
    justify-self: center;
    padding: 0 2rem;
  }
  section .villas__villa-1 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section .villas__villa-2 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section .villas__villa-3 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section .villas__villa-4 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section .villas__villa-5 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section .villas__villa-6 {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0.5rem;
    font-size: 1rem;
  }
  section#testimonials,
section .testimonials {
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  section#testimonials__card,
section .testimonials__card {
    width: 17rem;
    height: 25rem;
  }
  section#testimonials__card--front, section#testimonials__card--back,
section .testimonials__card--front,
section .testimonials__card--back {
    padding: 1rem;
    align-items: center;
  }
  section#testimonials__card--front h2,
section .testimonials__card--front h2 {
    padding: 0.5rem;
    font-size: 1rem;
  }
  section#testimonials#footer,
section .testimonials#footer {
    padding: 0.5vh 0.5vw;
    font-size: 1rem;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 2rem;
    text-align: center;
  }
}

/*# sourceMappingURL=style.css.map */