/* Scoped slider styles */

.mse-slider {

  position: relative;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  font-family: inherit;

  box-sizing: border-box;

}



.mse-slide {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  opacity: 0;

  transition: opacity 2.5s ease-in-out;

}



.mse-slide::after {

  content: "";

  position: absolute;

  inset: 0;

  /* background: var(--mse-overlay, rgba(0, 21, 40, 0.5)); */

}



.mse-slide.active {

  opacity: 1;

  z-index: 1;

}



.mse-content {

  position: absolute;

  top: 50%;

  left: 6%;

  transform: translateY(-50%);

  color: #fff;

  max-width: 784px;

  z-index: 2;

}



.mse-tagline-wrapper {

  overflow: hidden;

  height: 65px;

}



.mse-tagline {

  display: flex;

  flex-direction: column;

  /* animation: mseScrollTagline 22s linear infinite; */

}



.mse-tagline h2 {

  color: #FFF;

  font-size: 60px;

  font-weight: 400;

  line-height: 40px;

  margin: 0 0 50px 0;

}



@keyframes mseScrollTagline {

  0% {

    transform: translateY(0);

  }



  100% {

    transform: translateY(-50%);

  }

}



.mse-content p {

  margin: 26px 0 0 5px;

  color: #FFF;

  font-size: 18px;

  line-height: 28px;

}



.mse-content a {

  display: inline-flex;

  margin-top: 40px;

  margin-left: 5px;

  padding: 14px 16px;

  align-items: center;

  gap: 6px;

  border-radius: 152px;

  background: #FFF;

  color: #001528;

  font-size: 18px;

  line-height: 20px;

  text-decoration: none;

  transition: .4s ease-in-out;

}



.mse-content a:hover {

  background-color: #290C54;

  color: #fff;

}



.mse-content a:hover svg path {

  stroke: #fff;

}



.mse-content a:hover svg {

  transform: rotate(50deg);

}



.mse-content a svg {

  transition: transform 0.6s ease;

}



.mse-indicators {

  position: absolute;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 12px;

  z-index: 3;

  transition: .4s ease-in-out;

}



.mse-indicators div {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.40);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  cursor: pointer;

  font-family: "Libre Franklin";

  font-weight: 400;

  color: rgba(255, 255, 255, 0.40);

  font-size: 14px;

  line-height: 16px;

}



.mse-indicators .active {

  color: #FFF;

  border-color: #fff;

}



.mse-indicators div:hover {

  color: #FFF;

  border-color: #fff;

}



/* Responsive */

@media (max-width: 1024px) {

  .mse-content {

    top: 65%;

  }



  .mse-slider {

    height: 95vh;

  }

}



@media (max-width: 768px) {

  .mse-tagline h2 {

    font-size: 1.8rem;

    line-height: 30px;

    margin-bottom: 30px;

  }



  .mse-content p {

    font-size: 1rem;

  }



  .mse-content {

    max-width: 600px;

    z-index: 2;

  }



  .mse-content {

    top: 50%;

    left: 3%;

    transform: translateY(-50%);

  }



  .mse-tagline-wrapper {

    height: 36px;

  }



  .mse-slider {

    height: 78vh;

  }



  .mse-slide {

    background-position: 80% -10%;

  }

}



@media (max-width: 500px) {

  .mse-tagline-wrapper {

    height: 40px;

  }



  .mse-tagline h2 {

    margin-bottom: 30px;

    line-height: 30px;

  }



  .mse-content {

    top: 55%;

    left: 0%;

    margin: 0 20px;

    transform: translateY(-50%);

  }

}



@media (max-width: 375px) {

  .mse-content {

    top: 60%;

  }

  .mse-tagline-wrapper {

    height: 60px;

  }





  .mse-slider {

    height: 100vh;

  }





}