/* ====================================
General Styles
==================================== */

/* NOTE: The 'body' selector was removed to prevent conflicts with your site's global styles.
  Apply background colors to your site's main stylesheet. */

.page-wrap {
  width: 100%;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right bottom, #ffffff 50%, #ffffff 50%);
}

/* ========================================================
Home Slider - All styles are now prefixed with #home-slider 
to prevent conflicts.
======================================================== */

#home-slider {
  height: 40vh;
  width: 90vw;
  position: relative;
  border-radius: var(--bs-border-radius);
}

/* Updated selector from .swiper-container to .swiper */

#home-slider .swiper {
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  height: 100%;
  width: 100%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* This rule is crucial for the side-by-side layout. */

#home-slider .swiper-slide {
  display: flex;
  background-color: #fff;
  overflow: hidden;
}

#home-slider .swiper-image-one {
  background-image: url(../../assets/img/screen1c.webp);
}

#home-slider .swiper-image-two {
  background-image: url(../../assets/img/screen2.webp);
}

/* Slide 2 Images */

#home-slider .swiper-image-three {
  background-image: url(../../assets/img/screen3.webp);
}

#home-slider .swiper-image-four {
  background-image: url(../../assets/img/screen4.webp);
}

/* Slide 3 Images */

#home-slider .swiper-image-five {
  background-image: url(../../assets/img/screen5.webp);
}

#home-slider .swiper-image-six {
  background-image: url(../../assets/img/screen6b.webp);
}

/* Slide 4 Images */

#home-slider .swiper-image-seven {
  background-image: url(../../assets/img/screen7b.webp);
}

#home-slider .swiper-image-eight {
  background-image: var(--bs-gray-600);
}

/* Slide 5 Images */

#home-slider .swiper-image-nine {
  background-image: url(../../assets/img/screen9.webp);
}

#home-slider .swiper-image-ten {
  background-image: url(../../assets/img/how3.webp);
}

#home-slider .swiper-image {
  width: 50%;
  height: 100%;
}

#home-slider .swiper-image-inner {
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.2);
  background-blend-mode: overlay;
  position: relative;
}

#home-slider .swiper-image-inner.swiper-image-left {
  padding: 4rem;
}

#home-slider .swiper-image-left {
  filter: sepia(100%);
  transition: all 1s linear;
  transition-delay: 1s;
}

#home-slider .swiper-slide.swiper-slide-active .swiper-image-left {
  filter: sepia(0%);
}

#home-slider .swiper-image-inner.swiper-image-right {
  filter: hue-rotate(-60deg);
  transition: all 1s linear;
  transition-delay: 1s;
  background-color: hsla(0, 0%, 0%, 0.5);
  background-blend-mode: multiply;
}

/* --- Video Background Styles --- */

#home-slider .background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

#home-slider .swiper-image-inner p.paragraph {
  position: relative;
  z-index: 2;
}

/* Scoped generic tags like h1 and p */

#home-slider h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: #fff;
  align-self: flex-start;
  margin: 0 0 auto 0;
  font-size: 4.5rem;
  line-height: 1;
  transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s;
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
}

#home-slider h1 span.emphasis {
  font-weight: 700;
  font-style: italic;
  opacity: 0;
  transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s;
  transform: translate3d(-20%, 0, 0);
  display: inline-block;
}

#home-slider h1 span:not(.emphasis) {
  font-size: 3.5rem;
}

#home-slider h1 + p {
  font-family: 'Cormorand SC';
  font-size: 14px;
  letter-spacing: 2px;
  /*margin: 0;*/
  line-height: 1;
  margin-bottom: auto;
  /*align-self: flex-end;*/
  text-transform: uppercase;
  transition: all .8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.3s;
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
  font-weight: 500;
  color: #fff;
  padding-right: 8rem;
  position: absolute;
  bottom: 1%;
  right: 1%;
}

#home-slider p.paragraph {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  color: #fff;
  width: 100%;
  max-width: 350px;
  text-align: justify;
  font-size: 1.2rem;
  font-weight: 500;
  opacity: 0;
  transition: all .6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.4s;
  transform: translate3d(-20%, 0, 0);
}

#home-slider .swiper-slide.swiper-slide-active .swiper-image-right {
  filter: hue-rotate(90deg);
}

#home-slider .swiper-slide.swiper-slide-active h1, #home-slider .swiper-slide.swiper-slide-active p.paragraph, #home-slider .swiper-slide.swiper-slide-active h1 span.emphasis, #home-slider .swiper-slide.swiper-slide-active h1 + p {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Scoped pagination styles */

#home-slider .swiper-pagination-bullet {
  width: 14px !important;
  height: 14px !important;
  background: #fff !important;
  opacity: 0.4;
  border-radius: 0% !important;
}

#home-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Media queries now also use the #home-slider prefix */

@media screen and (max-width: 1280px) {
  #home-slider h1 {
    font-size: 3.9rem;
  }
}

@media screen and (max-width: 1280px) {
  #home-slider h1 span:not(.emphasis) {
    font-size: 2.9rem;
  }
}

@media screen and (max-width: 1280px) {
  #home-slider h1 + p {
    font-size: 13px;
  }
}

@media screen and (max-width: 1280px) {
  #home-slider p.paragraph {
    font-size: 1rem;
    line-height: 1.3;
  }
}

@media screen and (max-width: 960px) {
  #home-slider h1 {
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 960px) {
  #home-slider h1 span:not(.emphasis) {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 960px) {
  #home-slider p.paragraph {
    max-width: 90%;
  }
}

@media screen and (max-width: 640px) {
  #home-slider {
    height: 86vh;
    width: 96vw;
  }
}

@media screen and (max-width: 640px) {
  #home-slider h1 {
    font-size: 3.2rem;
    align-self: center;
  }
}

@media screen and (max-width: 640px) {
  #home-slider h1 span:not(.emphasis) {
    font-size: 2.1rem;
  }
}

@media screen and (max-width: 640px) {
  #home-slider p.paragraph {
    max-width: 94%;
  }
}

.h1-slider {
  margin-left: 2% !important;
  margin-top: 2% !important;
}

/* 1. Change the main slide container to a vertical layout */

@media screen and (max-width: 500px) {
  #home-slider .swiper-slide {
    flex-direction: column;
  }
}

@media screen and (max-width: 500px) {
  #home-slider h1 {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
    margin-top: 50% !important;
  }
}

@media screen and (max-width: 500px) {
  #home-slider h1 span.emphasis {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  }
}

@media screen and (max-width: 500px) {
  #home-slider h1 + p {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  }
}

@media screen and (max-width: 500px) {
  #home-slider p.paragraph {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    font-size: 12px;
    position: absolute;
    top: -40px !important;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
  }
}

/* 2. Make each of the two inner divs take up the full width and half the height */

@media screen and (max-width: 500px) {
  #home-slider .swiper-image {
    width: 100%;
    height: 50%;
  }
}

/* 3. (Optional) Fine-tune text for very small screens */

@media screen and (max-width: 500px) {
  #home-slider h1 {
    font-size: 2.1rem;
  }
}

@media screen and (max-width: 500px) {
  #home-slider h1 span:not(.emphasis) {
    font-size: 2rem;
  }
}

@media screen and (max-width: 500px) {
  #home-slider h1 + p {
    padding-right: 2rem;
    padding-bottom: 1rem;
  }
}