/* keyframes files */
@import url(./keyframes.css);
/* Start Global Style */
:root {
  --main-padding: 6.25rem;
  --main-color: #bd945a;
  --main-bg-color: #f6f1f0;
  --alt-color: #faf8f7;
  --secondry-color: #888;
  --main-transition: all 0.5s ease;
  --main-fonts: 'Nunito Sans', sans-serif;
}
body {
  font-family: 'Nunito Sans', sans-serif;
  /* height: 1000vh; */
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.container {
  overflow: hidden;
}
* {
  text-transform: capitalize;
  list-style: none;
}

a {
  text-decoration: none;
}
h6,
a,
h3 {
  font-family: 'Cormorant Garamond', serif;
}
h1,
h2,
h4,
span {
  font-family: 'Alex Brush', cursive;
  font-weight: 400;
}
span {
  color: var(--main-color);
}
p {
  font-size: 15px;
  font-weight: 400;
  color: var(--secondry-color);
}

.w-140 {
  width: 140px;
}
.main-title span {
  color: var(--main-color);
  font-size: 30px;
}
.main-title h3 {
  color: #000;
  font-size: 30px;
  font-weight: 600;
}
/* End Global */
/* Start Loding */
.loding {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 99999;
  width: 100%;
  height: 100%;
  animation: parentLoding 0.5s 1.5s linear forwards;
}
.loding img {
  animation: lodingHeart 0.8s 4 linear forwards alternate;
}
/* End Loding */
/* Start Nav */
nav {
  background-color: var(--main-bg-color);
  width: 20%;
  transition: var(--main-transition);
  height: 100vh;
}
nav .logo span {
  color: var(--main-color);
}
nav .logo h6 {
  font-family: var(--main-fonts);
  font-size: 10px;
  letter-spacing: 5px;
  color: #000;
}
nav ul li a {
  color: #000;
}
nav ul li {
  width: fit-content;
  margin: auto;
}
nav ul li a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0%;
  margin: auto;
  background-color: var(--main-color);
  height: 1px;
  transition: var(--main-transition);
}
nav ul li:hover a::before {
  width: 80%;
}
nav .foot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 10%;
  margin: auto;
  background-color: var(--main-color);
  height: 1px;
}
nav .foot p {
  color: var(--secondry-color);
  font-size: 10px;
}
.bars {
  /*
   Whay The Left was 20% ? for the width for nav == 20%
  
*/
  left: 1px;
  top: 10px;
  z-index: 9;
  cursor: pointer;
  background-color: var(--main-color);
  color: white;
  width: 50px;
  height: 50px;
  display: none;
  transition: all 0.5s;
}
/* End Nav */

/* Start Main */
main {
  width: 80%;
  float: right;
  transition: var(--main-transition);
}
/* End Main */

/* Start header */
header {
  background-image: url(../images/slider.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}
header .content h1 {
  color: #fff;
  font-size: 100px;
}
header .content h5 {
  letter-spacing: 5px;
  color: #fff;
}
/* End header */
/* Start Couple */
section.couple {
  padding: var(--main-padding) 0;
  background-color: var(--alt-color);
}
section.couple .mb-100 {
  margin-bottom: 100px;
}
section.couple .inner .head h6 {
  font-weight: 600;
}
section.couple .inner .head i {
  color: var(--main-color);
}
section.couple .inner p {
  color: var(--secondry-color);
  font-size: 14px;
}

section.couple .inner span {
  color: var(--main-color);
}
section.couple .inner .icons i {
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 13px;
  transition: var(--main-transition);
  cursor: pointer;
}
section.couple .inner .icons i:hover {
  color: #fff;
  background-color: var(--main-color);
}
section.couple .foot h4 {
  font-size: 60px;
  color: var(--main-color);
}
section.couple .foot h3 {
  color: #000;
  font-size: 18px;
}
/* End Couple */
/* Start Slider */
.slider {
  /* height: 40vh; */
  background-image: url(../images/banner-1.jpg);
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
}
.slider .overlay {
  /* width: 100%;
  height: 100%; */
  backdrop-filter: blur(5px);
  z-index: -1;
}
.slider h4 {
  font-size: 60px;
}
.slider .counter li {
  font-weight: bolder;
}
.slider .counter li h5 {
  font-size: 4rem;
  font-weight: 600;
}
/* End Slider */
/* Start Story */
.story {
  padding: var(--main-padding) 0;
}

.story figure::before {
  position: absolute;
  content: '';
  border: 10px solid var(--main-color);
  width: 100%;
  height: 100%;
}
.story figure::after {
  position: absolute;
  content: '';
  background-image: url(../images/dots.png);
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  z-index: -1;
  width: 100%;
  height: 130%;
  left: -10%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.story figure .logo-wedding {
  animation: rotate 7s linear infinite forwards;
  width: 30%;
  right: 25px;
  top: -10px;
}
.story figure img {
  transform: translate(-25px, -25px);
}

.story .info p {
  color: var(--secondry-color);
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
}
.story .info h4 {
  font-family: 'Cormorant Garamond';
  font-weight: 600;
}
/* End Story */
/* Start Friends */
.friends {
  padding: var(--main-padding) 0;
  background-color: var(--alt-color);
}
.friends .row .w-70 {
  width: 140px;
}
.friends .carousel-inner h6 {
  font-size: 24px;
  font-weight: 600;
}
.friends .carousel-inner span {
  font-size: 24px;
}
.carousel-indicators [data-bs-target] {
  background-color: #88888847;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.carousel-indicators .active {
  background-color: var(--main-color);
}
/* End Friends */
/* Start Organization */
.organization {
  padding: var(--main-padding) 0;
  background-color: var(--alt-color);
}
.organization .row {
  background-image: url(../images/slider.jpg);
  background-position: top;
  background-size: cover;
  min-width: 245px;
  min-height: 275px;
}
.organization .row div {
  background-color: #fff;
  transition: var(--main-transition);
  padding: 60px 30px;
  border: 1px solid #f6f1f0;
}
.organization .row h2 {
  color: var(--main-color);
  font-size: 75px;
}

.organization .row h6 {
  color: #000;
  transition: var(--main-transition);
}
.organization .row p {
  transition: var(--main-transition);
}
.organization .row div:hover :is(h6, p) {
  color: #fff;
}
.organization .row div:hover {
  background-color: #00000099;
}
/* End Organization */
/* Start Memories */
#memories {
  padding: var(--main-padding) 0;
}
#memories .inner-content .row figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0;
  transition: var(--main-transition);
  transform: translate(-0.0625rem, 1.25rem);
}

#memories .row div {
  transition: all 0.5s linear;
}
#memories .row .moving-animation {
  animation: moving 1s alternate linear;
}
#memories .inner-content .row figure:hover figcaption {
  transform: translate(0);
  opacity: 0.8;
}
#memories .inner-content .row figcaption h4 {
  font-family: 'Alex Brush';
  font-weight: 400;
  font-size: 24px;
}

#memories .inner-content .row figcaption .icons span {
  width: 1.875rem;
  height: 1.875rem;
  background-color: #000;
  color: white;
  transition: var(--main-transition);
  cursor: pointer;
}

#memories .inner-content .row figcaption .icons span:hover {
  background-color: #fff;
  border: 0.0625rem solid #000;
  color: #000;
}
#memories .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--main-color);
  background-color: transparent;
  transition: var(--main-transition);
}
#memories .nav-link {
  position: relative;
  color: var(--secondry-color);
  font-family: 'Montserrat';
  font-weight: 500;
  text-transform: capitalize;
  padding: 0.625rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
#memories .nav-pills .nav-link::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  transition: var(--main-transition);
}
#memories .nav-pills .nav-link.active {
  color: #fff;
}
#memories .nav-pills .nav-link.active::before {
  background-color: var(--main-color);
  width: 100%;
}
#memories .fade:not(.show) {
  transform: scale(0.5);
}
#memories .fade {
  transition: all 0.3s;
}

/* End Memories */

/* Start When And Where */
.whenwher {
  padding: var(--main-padding) 0;
  background-color: var(--alt-color);
}
.whenwher h5 {
  text-transform: uppercase;
  font-family: 'Cormorant Garamond', serif;
}
.whenwher figcaption i {
  color: var(--main-color);
}
.whenwher span:not(:first-child) {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--secondry-color);
}
/* End When And Where */
/* Start RSVP */
.rsvp {
  padding: var(--main-padding) 0;
  background-image: url('../images/banner-2.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  background-attachment: fixed;
}
.rsvp .p-40 {
  padding: 40px;
}
.rsvp span {
  font-size: 30px;
}
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--main-color);
    outline: 0;
    box-shadow: 0 0 0 0.10rem var(--main-color);
}
.rsvp .btn-send {
  position: relative;
  padding: 10px 20px;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  transition: var(--main-transition);
  z-index: 1;

}
.rsvp .btn-send:hover {
  color: white;
}
.rsvp .btn-send::before {
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: var(--main-color);
  z-index: -1;
  transition: var(--main-transition);
}

.rsvp .btn-send:hover::before {
  width: 100%;

}
 

@media (max-width: 768px) {
   
  .slider {
    background-image: url(../images/file.jpg); /* Ruta de tu imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen */
  }
}

/* Estilos CSS */
.image-container {
  position: relative; /* Permite posicionar el texto sobre la imagen */
}

.text-container {
  position: absolute;
  top: 0; /* Coloca el texto arriba de la imagen */
  left: 0;
  right: 0;
  padding: 20px; /* Ajusta el espaciado del texto */
  
}