/*----------------------------------------------------

Template Name:    Evne
Template URL:     https://th3s.com/ev/evne-html/
Version:          1.0
Author:           Th3s
Author URL:       https://themeforest.net/user/th3s
Website:          http://th3s.com/
E-mail:           hi.e@th3s.com

This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

---------------------------------------------------- */
/*###############################
Slider Page
###############################*/
/* 1.3. General Imports */
/* ============= Placeholder ============= */
/* 1.3. General Imports */
.display-1,
.display-2,
.display-3,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.button-xs {
  font-family: var(--font-family);
  font-weight: 400;
}

.display-1,
.display-2 {
  line-height: 116%;
}

.display-3 {
  line-height: 125%;
}

.display-1 {
  font-size: var(--display-1);
}

.display-2 {
  font-size: var(--display-2);
}

.display-3 {
  font-size: var(--display-3);
}

.h1 {
  font-size: var(--h1);
  line-height: 1.25;
}
@media only screen and (min-width: 1281px) {
  .h1 {
    line-height: 116%;
  }
}

.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 129%;
}

.h2 {
  font-size: var(--h2);
}

.h3 {
  font-size: var(--h3);
}

.h4 {
  font-size: var(--h4);
}

.h5 {
  font-size: var(--h5);
}

.h6 {
  font-size: var(--h6);
}

.body-xxl {
  font-size: var(--body-xxl);
  line-height: 140%;
}

.body-xl {
  font-size: var(--body-xl);
  line-height: 166%;
}

.body-l {
  font-size: var(--body-l);
  line-height: 200%;
}
@media only screen and (min-width: 769px) {
  .body-l {
    line-height: 167%;
  }
}

.body-m {
  line-height: 165%;
  font-size: var(--body-m);
}

.body-s {
  font-size: var(--body-s);
  line-height: 165%;
}

.body-xs {
  font-size: var(--body-xs);
  line-height: 24px;
}

.button-l {
  font-size: var(--button-l);
  line-height: 112%;
}

.button-m {
  font-size: var(--button-m);
  line-height: 30px;
}

.button-s {
  font-size: var(--button-s);
  line-height: 28px;
}

.button-xs {
  font-size: var(--button-xs);
  line-height: 24px;
}

.blockquote-1 {
  font-size: var(--blockquote-1);
  line-height: 178%;
}

/* ============= Header - One ============= */
.header-one .circle,
.header-one .circle-1 {
  background-color: var(--color-primary);
  aspect-ratio: 1/1;
  position: absolute;
  border-radius: 50%;
}
.header-one .circle {
  width: 48.6458333333vw;
  top: -17.3vw;
  left: -4.2vw;
}
.header-one .circle-1 {
  width: 62.5vw;
  height: 62.5vw;
  left: -1vw;
  top: -39.5vw;
  filter: blur(8vw);
  opacity: 0.7;
}
.header-one .data {
  padding-top: 150px;
  z-index: 1;
}
@media only screen and (min-width: 1281px) {
  .header-one .data {
    padding-top: 200px;
  }
}
@media only screen and (min-width: 1367px) {
  .header-one .data {
    padding-top: 230px;
  }
}
.header-one .data .header-title {
  z-index: 110;
}
@media only screen and (min-width: 1281px) {
  .header-one .data .header-title {
    margin-bottom: 250px !important;
  }
}
.header-one .data .img-1 {
  width: 60%;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 40px;
}
@media only screen and (min-width: 769px) {
  .header-one .data .img-1 {
    width: 85%;
    border-radius: 60px;
  }
}
@media only screen and (min-width: 1281px) {
  .header-one .data .img-1 {
    border-radius: 80px;
    width: 48vw;
    position: absolute;
    right: calc(var(--bs-gutter-x) * 0.5);
    bottom: 0px;
    top: unset;
    left: unset;
  }
}
@media only screen and (min-width: 1367px) {
  .header-one .data .img-1 {
    width: 740px;
    height: auto;
  }
}
.header-one .data .img-1 .cover-image {
  -o-object-fit: contain;
     object-fit: contain;
  background-image: url(../images/header/1-small.webp);
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width: 769px) {
  .header-one .data .img-1 .cover-image {
    background-image: url(../images/header/1.webp);
  }
}

/* ============= Slider ============= */
.slider-scroll .main-slider-texts .swiper .swiper-wrapper,
.slider-scroll .main-slider-texts swiper-container .swiper-wrapper {
  width: -moz-fit-content;
  width: fit-content;
  block-size: -moz-fit-content;
  block-size: fit-content;
}
.slider-scroll .main-slider-texts .swiper .swiper-slide,
.slider-scroll .main-slider-texts .swiper swiper-slide,
.slider-scroll .main-slider-texts swiper-container .swiper-slide,
.slider-scroll .main-slider-texts swiper-container swiper-slide {
  transition: 0.4s;
}
.slider-scroll .main-slider-texts .swiper .swiper-slide .slider-text,
.slider-scroll .main-slider-texts .swiper swiper-slide .slider-text,
.slider-scroll .main-slider-texts swiper-container .swiper-slide .slider-text,
.slider-scroll .main-slider-texts swiper-container swiper-slide .slider-text {
  transition: 0.35s;
}
.slider-scroll .main-slider-texts .swiper .swiper-slide .slider-text span,
.slider-scroll .main-slider-texts .swiper .swiper-slide .slider-text p,
.slider-scroll .main-slider-texts .swiper swiper-slide .slider-text span,
.slider-scroll .main-slider-texts .swiper swiper-slide .slider-text p,
.slider-scroll .main-slider-texts swiper-container .swiper-slide .slider-text span,
.slider-scroll .main-slider-texts swiper-container .swiper-slide .slider-text p,
.slider-scroll .main-slider-texts swiper-container swiper-slide .slider-text span,
.slider-scroll .main-slider-texts swiper-container swiper-slide .slider-text p {
  transition: color 0.35s ease;
}
.slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text {
  opacity: 1;
}
.slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:hover, .slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:focus,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:hover,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:focus {
  color: var(--color-primary);
  transform: translateX(10px);
}
.slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:hover span, .slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:focus span,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:hover span,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:focus span {
  color: var(--color-light);
}
.slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:hover p, .slider-scroll .main-slider-texts .swiper .swiper-slide-active .slider-text:focus p,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:hover p,
.slider-scroll .main-slider-texts swiper-container .swiper-slide-active .slider-text:focus p {
  color: var(--color-primary);
}
.slider-scroll .main-slider-images {
  width: 90vw;
  height: 80vh;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 0;
}
@media only screen and (min-width: 1281px) {
  .slider-scroll .main-slider-images {
    width: 85vw;
  }
}
.slider-scroll .main-slider-images .swiper .swiper-slide,
.slider-scroll .main-slider-images .swiper swiper-slide,
.slider-scroll .main-slider-images swiper-container .swiper-slide,
.slider-scroll .main-slider-images swiper-container swiper-slide {
  border-radius: 40px;
}
.slider-scroll .main-slider-images .swiper .swiper-slide .slider-image::after,
.slider-scroll .main-slider-images .swiper swiper-slide .slider-image::after,
.slider-scroll .main-slider-images swiper-container .swiper-slide .slider-image::after,
.slider-scroll .main-slider-images swiper-container swiper-slide .slider-image::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.4;
  z-index: 100;
}
@media only screen and (min-width: 1281px) {
  .slider-scroll .main-slider-images .swiper .swiper-slide .slider-image::after,
  .slider-scroll .main-slider-images .swiper swiper-slide .slider-image::after,
  .slider-scroll .main-slider-images swiper-container .swiper-slide .slider-image::after,
  .slider-scroll .main-slider-images swiper-container swiper-slide .slider-image::after {
    opacity: 0.25;
  }
}
.slider-scroll .circle-link {
  right: 10px;
  bottom: 20px;
}
@media only screen and (min-width: 1281px) {
  .slider-scroll .circle-link {
    right: 210px;
    bottom: 60px;
  }
}
@media only screen and (min-width: 1367px) {
  .slider-scroll .circle-link {
    right: 350px;
    bottom: 150px;
  }
}
.slider-scroll .slider-scroll-contact {
  transition: bottom 0.5s linear;
  bottom: -160px;
  z-index: 100;
}