@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Clicker+Script&family=Cookie&family=Great+Vibes&family=MonteCarlo&family=Montserrat+Alternates&family=Poppins&display=swap");
@font-face {
  font-family: "Beautyofthebeast";
  src: url(../assets/fonts/Beautyofthebeast-1VpM.ttf);
}
@font-face {
  font-family: "ArastinStd";
  src: url(../assets/fonts/Arastin\ Std.ttf);
}
@font-face {
  font-family: "ArastinPro";
  src: url(../assets/fonts/Arastin\ Pro.ttf);
}
@font-face {
  font-family: "ArastinScript";
  src: url(../assets/fonts/Arastin\ Script.ttf);
}
@font-face {
  font-family: "AntariskaliaSignature";
  src: url(../assets/fonts/Antariskalia\ Signature.ttf);
}
@font-face {
  font-family: "AntariskaliaItalic";
  src: url(../assets/fonts/Antariskalia\ Signature\ Italic.ttf);
}
@font-face {
  font-family: "HelloValentina";
  src: url(../assets/fonts/Hello\ Valentina.ttf);
}
:root {
  /* Colors Prx Creations */
  --gold-color: #95783D;
  --blueTitle-color: #1B3153;
  --btnsBlueLight: #4D5D75;
  --btnsRedLight: #83283B;
  --backgroundGreen: #2D442C;
  /* Family Fonts */
  --GreatVibes-family: "Great Vibes", cursive;
  --MonteCarlo-family: "MonteCarlo", cursive;
  --Montserrat-family: "Montserrat Alternates", sans-serif;
  --Poppins-family: "Poppins", sans-serif;
  --Beautyofthebeast-family: "Beautyofthebeast";
  --ClickerScript-family: "Clicker Script", cursive;
  --Cookie-family: "Cookie", cursive;
  --ArastinStd-family: "ArastinStd";
  --ArastinPro-family: "ArastinPro";
  --ArastinScript-family: "ArastinScript";
  --AntariskaliaSignature-family: "AntariskaliaSignature";
  --AntariskaliaItalic-family: "AntariskaliaItalic";
  --HelloValentina-family: "HelloValentina";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  font-family: var(--Poppins-family);
}

html.sr .load-hidden {
  visibility: hidden;
}

header {
  width: 100%;
  height: 6rem;
  background-color: #000;
  position: sticky;
  top: -1px;
  z-index: 100;
  font-family: "Montserrat Alternates", sans-serif;
}
header nav {
  width: 80%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  background-color: var(--secondary-color);
  margin: 0 auto;
  align-items: center;
}
header nav .nav__logo-container {
  width: 150px;
  height: 50px;
  grid-column: 1/1;
  grid-row: 1/1;
}
header nav .nav__logo-container img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
header nav .navigation {
  display: none;
  background-color: #000;
  z-index: 100;
}
header nav .navigation li {
  list-style: none;
}
header nav .navigation li a {
  text-decoration: none;
  display: inline-block;
  color: white;
  margin: 10px 0;
  font-size: 2.5rem;
  background-image: linear-gradient(270deg, #fff 0.81%, #000000 100%);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s;
  padding-bottom: 3px;
}
header nav .navigation li a:hover, header nav .navigation li a:focus {
  background-size: 100% 2px;
}
header nav .navigation.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 101;
}
header nav .toggle {
  position: relative;
  width: 32px;
  height: 40px;
  display: flex;
  justify-self: flex-end;
  align-items: center;
  z-index: 100000;
  cursor: pointer;
}
header nav .toggle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #95783D;
  transform: translateY(-10px);
  box-shadow: 0 10px 0 #95783D;
  transition: 0.25s;
}
header nav .toggle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: #95783D;
  transform: translateY(10px);
  transition: 0.25s;
}
header nav .toggle.active {
  right: 10%;
}
header nav .toggle.active::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 0 #fff;
}
header nav .toggle.active::after {
  transform: translateY(0px) rotate(-45deg);
}

/* Text  */
.main__section {
  color: white;
  height: 40vh;
}
.main__section .main__section-container {
  background-color: var(--backgroundGreen);
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 2.5rem;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.main__section .main__section-container .names {
  text-align: center;
  font-size: 1.8rem;
}
.main__section .main__section-container .names .lineWhite-heart {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  align-items: center;
}
.main__section .main__section-container .names .lineWhite-heart .line1, .main__section .main__section-container .names .lineWhite-heart .line2 {
  width: 5rem;
  height: 0.25rem;
  background-color: white;
}
.main__section .main__section-container .names .lineWhite-heart .line1 {
  justify-self: end;
}
.main__section .main__section-container .names .lineWhite-heart .line2 {
  justify-self: start;
}
.main__section .main__section-container .introduction {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.main__section .main__section-container .introduction p {
  width: 90%;
}
.main__section .main__section-container .date {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.main__section .main__section-container .date p {
  width: 90%;
}

.faltan__section {
  min-height: 15rem;
  width: 100%;
  position: relative;
  /* border-radius: 2.5rem; */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background-color: #F0F2F5;
}
.faltan__section .time-part {
  width: 100%;
  min-height: 30rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  z-index: 1;
}
.faltan__section .time-part .date-large img {
  max-width: 100%;
}
.faltan__section .time-part .faltan {
  font-size: 1.5rem;
  font-family: var(--Poppins-family);
}
.faltan__section .time-part .square-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}
.faltan__section .time-part .square-container .square-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  min-width: 7rem;
  min-height: 9rem;
  position: relative;
  border-radius: 15%;
}
.faltan__section .time-part .square-container .square-time span {
  font-size: 3rem;
  font-family: var(--MonteCarlo-family);
}
.faltan__section .time-part .square-container .square-time p {
  font-size: 2rem;
  font-family: var(--GreatVibes-family);
}
.faltan__section .time-part .square-container .square-time .img-container {
  position: absolute;
  left: -4rem;
  top: -5rem;
}
.faltan__section .background-main {
  position: absolute;
  top: 0;
  width: 100%;
  background: url("../assets/images/img11.1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 10% 10%;
  opacity: 20%;
  z-index: -1;
}

.section__separador {
  width: 100%;
  padding-top: 3rem;
  z-index: 2;
}
.section__separador img {
  width: 100%;
}

.footer__section {
  width: 100%;
  background-color: #000;
}
.footer__section .logo__container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}
.footer__section .logo__container img {
  width: 180px;
  justify-self: center;
}
.footer__section .redes__container {
  padding: 2rem 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}
.footer__section .redes__container ion-icon {
  margin: 10px;
  font-size: 30px;
}
.footer__section .redes__container .facebook {
  color: #3B5998;
}
.footer__section .redes__container .whatsapp {
  color: #25D366;
}
.footer__section .redes__container .instagram {
  color: #F11A7B;
}
.footer__section .redes__container .tiktok {
  color: white;
  font-size: 28px;
}

/* Scroll Up */
.scrollup {
  position: fixed;
  background-color: #000;
  border: 1px solid white;
  right: 1rem;
  bottom: -40%;
  display: inline-flex;
  padding: 0.3rem;
  border-radius: 50%;
  z-index: 100;
  opacity: 0.8;
  transition: 0.4s;
}
.scrollup ion-icon {
  font-size: 30px;
  color: white;
}
.scrollup:hover {
  background-color: var(--gold-color);
  opacity: 1;
}

.show-scroll {
  z-index: 99;
  bottom: 3rem;
  right: 1rem;
}

.sendwhatsapp {
  position: fixed;
  border: 1px solid white;
  background-color: black;
  left: 1rem;
  display: inline-flex;
  padding: 0.3rem;
  border-radius: 15%;
  z-index: 100;
  opacity: 0.8;
  transition: 0.4s;
  animation: pressAnimation 1s ease-in-out infinite; /* Duración de 0.2 segundos y repetición infinita */
}
.sendwhatsapp .audio__container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sendwhatsapp .audio__container #play-button {
  border-radius: 50%;
  background: black;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sendwhatsapp .audio__container #play-button ion-icon {
  font-size: 3rem;
  color: white;
}
.sendwhatsapp:hover {
  opacity: 1;
}

.show-whats {
  z-index: 99;
  bottom: 3rem;
  left: 1rem;
}

.no-animation {
  animation: none;
}

.ancla-btns {
  text-decoration: none;
}

/*=============== KEYFRAMES ===============*/
@keyframes floating {
  0% {
    transform: translate(0, -2px);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, -2px);
  }
}
@keyframes pressAnimation {
  0% {
    transform: scale(1); /* Tamaño normal */
  }
  50% {
    transform: scale(1.2); /* Tamaño reducido a la mitad de la animación */
  }
  100% {
    transform: scale(1); /* Vuelve al tamaño normal al final de la animación */
  }
}/*# sourceMappingURL=styles.css.map */