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

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.

---------------------------------------------------- */
/*###############################
Page 404 Error
###############################*/
/* 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%;
}

/* ============= Marquee - Marquee-1 & Marquee-2 ============= */
.contain-marquee {
  width: 100vw;
  position: relative;
  overflow-x: clip;
}
.contain-marquee .marquee-1,
.contain-marquee .marquee-2 {
  width: 100%;
  left: 0;
  display: flex;
  overflow: hidden;
  position: relative;
  text-wrap: nowrap;
}
.contain-marquee .marquee-1 span,
.contain-marquee .marquee-2 span {
  font-family: var(--font-family);
  position: relative;
  font-size: var(--h1);
  font-weight: 400;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 130px;
}
.contain-marquee .marquee-1 span::after,
.contain-marquee .marquee-2 span::after {
  content: "-";
  position: absolute;
  left: calc(100% + 50px);
  color: transparent;
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: var(--color-light);
}
.contain-marquee .marquee-1 .marquee-content,
.contain-marquee .marquee-2 .marquee-content {
  display: flex;
  position: relative;
}
.contain-marquee .marquee-1 {
  border-top: 1px solid var(--color-3);
  border-bottom: 1px solid var(--color-3);
  padding: clamp(30px, 2vw, 70px) 0;
  position: absolute;
}
.contain-marquee .marquee-1 .marquee-content span {
  background: linear-gradient(to right, var(--color-light) 50%, var(--color-black) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--h3);
}
.contain-marquee .marquee-1 .marquee-content span:nth-of-type(2n) {
  background: linear-gradient(to right, var(--color-primary) 50%, var(--color-black) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contain-marquee .marquee-2 {
  width: 120vw;
  left: -10vw;
  background-color: var(--color-primary);
  padding: clamp(30px, 2vw, 50px) 0;
  transform: rotate(-15deg);
  top: -80px;
  z-index: 1;
  position: absolute;
}
@media only screen and (min-width: 769px) {
  .contain-marquee .marquee-2 {
    top: -120px;
  }
}
@media only screen and (min-width: 1281px) {
  .contain-marquee .marquee-2 {
    top: -260px;
  }
}
.contain-marquee .marquee-2 .marquee-content span {
  -webkit-text-fill-color: var(--color-light);
  color: var(--color-light);
}
.contain-marquee .marquee-2 .marquee-content span:nth-of-type(2n) {
  background: linear-gradient(to right, var(--color-primary) -20%, var(--color-black) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contain-marquee .marquee-2 .marquee-content span:nth-of-type(2n)::after {
  -webkit-text-fill-color: transparent;
}

/** 
 * ------------------------------------------------------------------
 * [Table of contents]
 * 1. 404 Error
 *     1.1. .contain-marquee (Main container for the marquee)
 *         1.1.1. .marquee-error styles (Width, position, border, and radius)
 *         1.1.2. .con (Responsive width adjustments for tablet screens)
 * ------------------------------------------------------------------
 **/
/* ============= 404 Error ============= */
.contain-marquee .marquee-error {
  width: calc(100% - 20px);
  bottom: 45px;
  border: 1px solid var(--color-3);
  border-radius: 50px;
  transform: translateX(-50%);
  left: 50%;
}
@media only screen and (min-width: 1281px) {
  .contain-marquee .marquee-error {
    border-radius: 100px;
  }
}
@media only screen and (min-width: 769px) {
  .contain-marquee .marquee-error .con {
    width: calc(100% - 15px);
  }
}
@media only screen and (min-width: 1281px) {
  .contain-marquee .marquee-error {
    width: calc(100% - 80px);
    border-radius: 150px;
  }
}