@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap");
:root {
  --font-family: 'Libre Baskerville', serif;
  --black-bg: #313434;
  --white-bg: #ffffff;
  --red-bg: #f03a37;
}

.parallax-slider {
  font-family: var(--font-family);
}

.parallax-slider .swiper-slide {
  position: relative;
  overflow: hidden;
}

.parallax-slider .img-container {
  background-position: center;
  background-size: cover;
}

/* .parallax-slider .img-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgb(0,0,0);
    background: linear-gradient(171deg, rgba(0,0,0,0.76234243697479) 0%, rgba(47,107,107,0.43461134453781514) 44%, rgba(55,167,164,1) 99%);
} */

.overlay {
  position: relative;
  background: #0a0a0a75;
  width: 100%;
  /* padding: 10rem 0rem; */
}

.parallax-slider .swiper-slide .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 15rem 0rem;
}

.parallax-slider .content {
  color: var(--white-bg);
  text-align: center;
}

.parallax-slider .content .title {
  font-weight: 800;
  font-size: 4rem;
}

.parallax-slider .content .des {
  font-weight: 500;
  font-size: 1.5rem;
  margin: 1rem 0rem;
  text-align: center!important;
}

.parallax-slider .content .title .title-wrapper {
  display: inline-flex;
  padding: 1rem 4rem;
}

/* nav ctrls */

.parallax-slider .swiper-nav-ctrl {
  background-image: none;
  height: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: var(--white-bg);
  width: 30px;
  outline: 0
}

.parallax-slider .swiper-nav-ctrl.next-ctrl {
  right: 0;
}

.parallax-slider .swiper-nav-ctrl.prev-ctrl {
  left: 0;
}

.parallax-slider .pagination-ctrl {
  max-width: calc(100%-60px);
  left: 0;
  right: 0;
  margin: auto;
  z-index: 4;
}

.parallax-slider .pagination-ctrl .swiper-pagination-bullet {
  background-color: var(--white-bg);
}

.parallax-slider .img-container.one {
  background-image: url('../images/3-slide.jpg');
}

.parallax-slider .img-container.two {
  background-image: url('../images/11-slide.jpg');
}

.parallax-slider .img-container.three {
  background-image: url('../images/14-slide.jpg');
}