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

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.

---------------------------------------------------- */
/** 
 * ============= Table of Contents =============
 *
 * 1. Imports
 *    1.1. Variables in Scss
 *    1.2. Font Path
 *    1.3. General Imports
 *    1.4. Layout Imports
 *
 * 2. Components
 *    2.1. General Components
 *    2.2. Media Components
 *
 * ==============================================
 */
/*
 ------------------------------------------------------------------
1.1. Variables in Scss
   1.1. Section Spacing Variables
        1.1.1. $sectionSpace / Default section spacing: 80px
        1.1.2. $sectionSpace_md / Medium screen section spacing: 100px
        1.1.3. $sectionSpace_lg / Large screen section spacing: 140px
        1.1.4. $sectionSpace_xl / Extra-large screen section spacing: 200px
 ------------------------------------------------------------------
*/
/* 1.2. Font Path [$font_path] */
/* 1.3. General Imports */
/** 
 ------------------------------------------------------------------
 Font Family
      1.1. @font-face for "Glancyr Neue" Light (font-weight: 300)
      1.2. @font-face for "Glancyr Neue" Regular (font-weight: 400)
      1.3. @font-face for "Roboto Flex" (font-weight: 100)
      1.4. @font-face for "Roboto Flex" (font-weight: 200)
      1.5. @font-face for "Roboto Flex" (font-weight: 300)
      1.6. @font-face for "Roboto Flex" (font-weight: 400)
      1.7. @font-face for "Roboto Flex" (font-weight: 500)
      1.8. @font-face for "Roboto Flex" (font-weight: 600)
      1.9. @font-face for "Roboto Flex" (font-weight: 700)
      1.10. @font-face for "Roboto Flex" (font-weight: 800)
      1.11. @font-face for "Roboto Flex" (font-weight: 900)
  ------------------------------------------------------------------
 */
/* 1.1. Defines the "Glancyr Neue" Light font with a font-weight of 300 */
@font-face {
  font-family: "Glancyr Neue";
  src: url(../../assets/fonts/Glancyr_Neue_Light.otf) format("truetype");
  font-weight: 300;
  font-display: fallback;
}
/* 1.2. Defines the "Glancyr Neue" Regular font with a font-weight of 400 */
@font-face {
  font-family: "Glancyr Neue";
  src: url(../../assets/fonts/Glancyr_Neue_Regular.otf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* 1.3. Defines the "Roboto Flex" font with a font-weight of 100 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 100;
  font-display: swap;
}
/* 1.4. Defines the "Roboto Flex" font with a font-weight of 200 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 200;
  font-display: swap;
}
/* 1.5. Defines the "Roboto Flex" font with a font-weight of 300 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 300;
  font-display: swap;
}
/* 1.6. Defines the "Roboto Flex" font with a font-weight of 400 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}
/* 1.7. Defines the "Roboto Flex" font with a font-weight of 500 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
}
/* 1.8. Defines the "Roboto Flex" font with a font-weight of 600 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 600;
  font-display: swap;
}
/* 1.9. Defines the "Roboto Flex" font with a font-weight of 700 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* 1.10. Defines the "Roboto Flex" font with a font-weight of 800 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 800;
  font-display: swap;
}
/* 1.11. Defines the "Roboto Flex" font with a font-weight of 900 */
@font-face {
  font-family: "Roboto Flex";
  src: url(../../assets/fonts/RobotoFlex.ttf) format("truetype");
  font-weight: 900;
  font-display: swap;
}
/*
 ------------------------------------------------------------------
Typography
    1.1. Font Family Definitions
        1.1.1. --font-family
        1.1.2. --font-family-normal
    1.2. Display Text Sizes
        1.2.1. --display-1
        1.2.2. --display-2
        1.2.3. --display-3
    1.3. Heading Text Sizes
        1.3.1. --h1
        1.3.2. --h2
        1.3.3. --h3
        1.3.4. --h4
        1.3.5. --h5
        1.3.6. --h6
    1.4. Body Text Sizes
        1.4.1. --body-xxl
        1.4.2. --body-xl
        1.4.3. --body-l
        1.4.4. --body-m
        1.4.5. --body-s
        1.4.6. --body-xs
    1.5. Blockquote Text Sizes
        1.5.1. --blockquote-1
        1.5.2. --blockquote-2
    1.6. Button Text Sizes
        1.6.1. --button-l
        1.6.2. --button-m
        1.6.3. --button-s
        1.6.4. --button-xs
 ------------------------------------------------------------------
*/
/* ============= Typography ============= */
:root {
  --font-family: "Glancyr Neue", sans-serif;
  --font-family-normal: "Roboto Flex", sans-serif;
  --display-1: clamp(100px, 10vw, 266px);
  --display-2: clamp(55px, 10vw, 199px);
  --display-3: clamp(30px, 7.5vw, 150px);
  --h1: clamp(45px, 6vw, 112px);
  --h2: clamp(35px, 5vw, 84px);
  --h3: clamp(30px, 3.5vw, 63px);
  --h4: clamp(28px, 3vw, 47px);
  --h5: clamp(22px, 2.5vw, 36px);
  --h6: clamp(20px, 1.7vw, 26px);
  --body-xxl: clamp(28px, 3vw, 56px);
  --body-xl: clamp(22px, 2.8vw, 47px);
  --body-l: clamp(20px, 2vw, 36px);
  --body-m: clamp(16px, 1.5vw, 26px);
  --body-s: clamp(16px, 1.5vw, 20px);
  --body-xs: clamp(16px, 1.5vw, 18px);
  --blockquote-1: clamp(20px, 2.2vw, 36px);
  --blockquote-2: clamp(18px, 2vw, 30px);
  --button-l: clamp(20px, 2vw, 36px);
  --button-m: clamp(18px, 1.8vw, 26px);
  --button-s: clamp(16px, 2.3vw, 20px);
  --button-xs: clamp(16px, 1vw, 16px);
}

/* Button Text Sizes */
.button-l {
  font-size: var(--button-l);
  line-height: 112%;
}

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

/* ============= Placeholder ============= */
/* 1.3. General Imports */
h1,
h2,
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a,
h3,
h4,
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a,
.menu .site-nav .nav-list .container .menu-contact .menu-contact-email a,
h5,
h6,
.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,
.h1 {
  font-size: var(--h1);
  line-height: 1.25;
}
@media only screen and (min-width: 1281px) {
  h1,
  .h1 {
    line-height: 116%;
  }
}

h2,
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a,
h3,
h4,
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a,
.menu .site-nav .nav-list .container .menu-contact .menu-contact-email a,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 129%;
}

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

.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a, h3,
.h3 {
  font-size: var(--h3);
}

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

.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a, .menu .site-nav .nav-list .container .menu-contact .menu-contact-email a, h5,
.h5 {
  font-size: var(--h5);
}

h6,
.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%;
}

.menu .site-nav .nav-list .container .menu-contact .menu-contact-email .question,
.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%;
}

/** 
  ------------------------------------------------------------------
  Colors
      1.1. --color-black (Dark black color)
      1.2. --color-black-2 (Darker black color)
      1.3. --color-primary (Primary color)
      1.4. --color-light (Light color, white)
      1.5. --color-1 (Light grey color)
      1.6. --color-2 (Transparent light grey color)
      1.7. --color-3 (Darker grey color)
      1.8. --color-4 (Light peach color)
      1.9. --color-5 (Light blue color)
  ------------------------------------------------------------------
 **/
/* ================= Colors ================= */
:root {
  --color-black: #000000;
  --color-black-2: #181818;
  --color-primary: #FF5593;
  --color-light: #fff;
  --color-1: #d7dbdf;
  --color-2: rgba(241, 241, 241, 20%);
  --color-3: #4f5659;
  --color-4: #efd8c9;
  --color-5: #e9ecf2;
}

/** 
  ------------------------------------------------------------------
  Background Colors
      1.1. .bg-color-primary (Background color primary)
      1.2. .bg-color-black (Background color black)
      1.3. .bg-color-black-2 (Background color black-2)
      1.4. .bg-color-1 (Background color 1)
      1.5. .bg-color-5 (Background color 5)
  Classes Colors
      2.1. .color-primary (Text color primary)
      2.2. .color-black (Text color black)
      2.3. .color-light (Text color light)
      2.4. .color-1 (Text color 1)
      2.5. .color-2 (Text color 2)
      2.6. .color-3 (Text color 3)
      2.7. .color-4 (Text color 4)
      2.8. .color-5 (Text color 5)
  Text Effects
      3.1. .text-gradient (Text with gradient effect)
      3.2. .text-gradient-to-bottom (Text with bottom gradient effect)
      3.3. .ani-ls (Animation for letter spacing)
  ------------------------------------------------------------------
 **/
/* ================= Background Colors ================= */
.bg-color-primary {
  background-color: var(--color-primary);
}

.bg-color-black {
  background-color: var(--color-black);
}

.bg-color-black-2 {
  background-color: var(--color-black-2);
}

.bg-color-1 {
  background-color: #fff;
}

.bg-color-5 {
  background-color: var(--color-5);
}

/* ================= Classes Colors ================= */
.color-primary {
  color: var(--color-primary);
}

.color-black {
  color: var(--color-black);
}

.color-light {
  color: var(--color-light);
}

.color-1 {
  color: var(--color-1);
}

.color-2 {
  color: var(--color-2);
}

.color-3 {
  color: var(--color-3);
}

.color-4 {
  color: var(--color-4);
}

.color-5 {
  color: var(--color-5);
}

/* ================= Text Effects ================= */
.text-gradient {
  background: linear-gradient(to left, transparent 48%, var(--color-light) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-size 0.4s linear;
}
.text-gradient:hover {
  background-size: 500% 100%;
}

.text-gradient-to-bottom {
  background: linear-gradient(to bottom, var(--color-light) 0%, var(--color-black) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ani-ls {
  transition: letter-spacing 0.3s cubic-bezier(0.78, 0.28, 0, 0.76);
}
.ani-ls:hover {
  letter-spacing: 5px;
}

/** 
 ------------------------------------------------------------------
 HTML Styles
     1.1. html (General styles for the HTML element)
 Body and HTML Shared Styles
     2.1. html, body (Shared styling for html and body elements)
 Body Specific Styles
     3.1. body (Styling for the body element)
 * ------------------------------------------------------------------
 **/
/* ============= Html & Body ============= */
html {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  scroll-behavior: smooth;
}

/** 1. HTML Styles */
html,
body {
  font-size: var(--body-xs);
  background-color: var(--color-black);
  color: var(--color-light);
  min-height: 100vh;
  overflow-x: hidden !important;
}

/** 2. Body and HTML Shared Styles */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  font-kerning: none;
  font-family: var(--font-family-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}
body:not(.loaded) {
  opacity: 0;
}
body:not(.loaded) .cursor,
body:not(.loaded) .cursor-follower {
  opacity: 0;
}

/*
 ------------------------------------------------------------------
Tags
    1.1. General Tags Reset
        1.1.1. h1, .h1, h2, h3, h4, h5, h6, span, p, q, button, a, ul, li
        1.1.2. ul, ol
    1.2. Specific Tag Styling
        1.2.1. h1
        1.2.2. h2, h3
        1.2.3. h4, h5
        1.2.4. h6
        1.2.5. span
        1.2.6. button
        1.2.7. i
        1.2.8. a
        1.2.9. img
        1.2.10. input, textarea
        1.2.11. figure
        1.2.12. svg
 ------------------------------------------------------------------
*/
/* 1.1. General Tags Reset */
/* 1.1.1. h1, .h1, h2, h3, h4, h5, h6, span, p, q, button, a, ul, li */
h1,
.h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
q,
button,
a,
ul,
li {
  margin: 0;
}

/* 1.1.2. ul, ol */
ul,
ol {
  padding: 0;
  list-style: none;
}

/* 1.2. Specific Tag Styling */
/* 1.2.1. h1 */
h1 {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* 1.2.2. h2, h3 */
/* 1.2.3. h4, h5 */
h4 span {
  font-size: inherit;
}

h5 span {
  font-size: inherit;
}

/* 1.2.4. h6 */
/* 1.2.5. span */
span {
  display: inline-block;
}

/* 1.2.6. button */
button {
  text-align: center;
  background-color: transparent;
  color: inherit;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* 1.2.7. i */
i {
  aspect-ratio: 1/1;
  height: auto;
}

/* 1.2.8. a */
a {
  line-height: 1.15;
  color: inherit;
  text-decoration: none;
}

/* 1.2.9. img */
img {
  height: auto;
  text-align: center;
}

/* 1.2.10. input, textarea */
input,
textarea {
  padding: 0px 0px;
  border: none;
  background-color: unset;
  color: var(--color-4-85);
  line-height: 1.15;
  outline: none;
}

/* 1.2.11. figure */
figure {
  margin: 0;
}

/* 1.2.12. svg */
svg {
  will-change: transform, opacity;
}

/** 
 ------------------------------------------------------------------
 1. .con (Main container styling)
 2. .con-10 (Secondary container)
 3. .screen_tablet (Adjustments for tablet screen sizes)
 4. .screen_desktop (Adjustments for desktop screen sizes)
 5. .screen_xlarge (Adjustments for extra-large screens)
 6. .container (Sets max-width for container on extra-large screens)
 ------------------------------------------------------------------
 */
/* 1. .con (Main container styling) */
.con {
  margin: auto;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  width: calc(100% - 20px);
  padding: 80px 10px;
}
@media only screen and (min-width: 481px) {
  .con {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media only screen and (min-width: 1281px) {
  .con {
    border-radius: 100px;
  }
}

/* 2. .con-10 (Secondary container) */
.con-10 {
  margin: auto;
  position: relative;
  overflow: hidden;
  width: calc(100% - 20px);
}

/* 3. .screen_tablet (Adjustments for tablet screen sizes) */
@media only screen and (min-width: 769px) {
  .con {
    width: calc(100% - 15px);
    padding: 100px 0px;
  }
  .con-10 {
    width: calc(100% - 15px);
  }
}
/* 4. .screen_desktop (Adjustments for desktop screen sizes) */
@media only screen and (min-width: 1281px) {
  .con {
    width: calc(100% - 80px);
    padding: 150px 0px;
    border-radius: 150px;
  }
  .con-10 {
    width: calc(100% - 80px);
  }
}
/* 5. .screen_xlarge (Adjustments for extra-large screens) */
@media only screen and (min-width: 1367px) {
  .con {
    width: calc(100% - 120px);
    padding: 200px 100px;
  }
  .con-10 {
    width: calc(100% - 120px);
  }
}
/* 6. .container (Sets max-width for container on extra-large screens) */
@media only screen and (min-width: 1367px) {
  .container {
    max-width: 1366px;
  }
}
/*
 ------------------------------------------------------------------
Margins
    1.1. .mt-section class
    1.2. .mb-section class
    1.3. .my-section class
    1.4. Media Queries for Tablet, Desktop, and XLarge
 ------------------------------------------------------------------
*/
/* ============= Margins ============= */
/* 1.1. .mt-section class */
.mt-section {
  margin-top: 80px;
}

/* 1.2. .mb-section class */
.mb-section {
  margin-bottom: 80px;
}

/* 1.3. .my-section class */
.my-section {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* 1.4. Media Queries for Tablet, Desktop, and XLarge */
/* Tablet */
@media only screen and (min-width: 769px) {
  .mt-section {
    margin-top: 100px;
  }
  .mb-section {
    margin-bottom: 100px;
  }
  .my-section {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}
/* Desktop */
@media only screen and (min-width: 1281px) {
  .mt-section {
    margin-top: 140px;
  }
  .mb-section {
    margin-bottom: 140px;
  }
  .my-section {
    margin-top: 140px;
    margin-bottom: 140px;
  }
}
/* XLarge */
@media only screen and (min-width: 1367px) {
  .mt-section {
    margin-top: 200px;
  }
  .mb-section {
    margin-bottom: 200px;
  }
  .my-section {
    margin-top: 200px;
    margin-bottom: 200px;
  }
}
/*
 ------------------------------------------------------------------
Padding
    1.1. Section Padding
        1.1.1. .pt-section (Top Padding for Sections)
        1.1.2. .pb-section (Bottom Padding for Sections)
        1.1.3. .py-section (Top and Bottom Padding for Sections)
    1.2. Media Queries
        1.2.1. Tablet
            1.2.1.1. Adjust .pt-section, .pb-section, .py-section for tablet
        1.2.2. Desktop
            1.2.2.1. Adjust .pt-section, .pb-section, .py-section for desktop
        1.2.3. Xlarge
            1.2.3.1. Adjust .pt-section, .pb-section, .py-section for xlarge
    1.3. Custom Large Padding
        1.3.1. .pt-cust-large (Custom Large Padding)
 ------------------------------------------------------------------
*/
/* 1.1. Section Padding */
/* 1.1.1. .pt-section (Top Padding for Sections) */
.pt-section {
  padding-top: 80px;
}

/* 1.1.2. .pb-section (Bottom Padding for Sections) */
.pb-section {
  padding-bottom: 80px;
}

/* 1.1.3. .py-section (Top and Bottom Padding for Sections) */
.py-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 1.2. Media Queries */
/* 1.2.1. Tablet */
/* 1.2.1.1. Adjust .pt-section, .pb-section, .py-section for tablet */
@media only screen and (min-width: 769px) {
  .pt-section {
    padding-top: 100px;
  }
  .pb-section {
    padding-bottom: 100px;
  }
  .py-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
/* 1.2.2. Desktop */
/* 1.2.2.1. Adjust .pt-section, .pb-section, .py-section for desktop */
@media only screen and (min-width: 1281px) {
  .pt-section {
    padding-top: 140px;
  }
  .pb-section {
    padding-bottom: 140px;
  }
  .py-section {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
/* 1.2.3. Xlarge */
/* 1.2.3.1. Adjust .pt-section, .pb-section, .py-section for xlarge */
@media only screen and (min-width: 1367px) {
  .pt-section {
    padding-top: 200px;
  }
  .pb-section {
    padding-bottom: 200px;
  }
  .py-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/* 1.3. Custom Large Padding */
/* 1.3.1. .pt-cust-large (Custom Large Padding) */
.pt-cust-large {
  padding-top: 180px;
}
@media only screen and (min-width: 1367px) {
  .pt-cust-large {
    padding-top: 230px;
  }
}

/*
 ------------------------------------------------------------------
Helper Classes
    - .cover-* classes
    - .opacity-* classes
    - .z-index-* classes
    - .ls-* classes
    - .whitespace class
    - .scroll-marquee class
    - .user-no-select class
    - .cursor and .cursor-follower classes
    - .data-follow-mouse and .data-link-hover-scale classes
    - .animate-fill-text class
    - .simple-hover class
    - .modern-scroll class
    - .have-scroll class
    - .scrollbar-track-x class
 ------------------------------------------------------------------
*/
/* ============= Helper Classes  ============= */
/* .cover-* classes */
.cover-1 {
  position: relative;
}
.cover-1::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.1;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-2 {
  position: relative;
}
.cover-2::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0000;
  opacity: 0.2;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-3 {
  position: relative;
}
.cover-3::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0000;
  opacity: 0.3;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-4 {
  position: relative;
}
.cover-4::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.4;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-5 {
  position: relative;
}
.cover-5::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.5;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-6 {
  position: relative;
}
.cover-6::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.6;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-7 {
  position: relative;
}
.cover-7::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.7;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-8 {
  position: relative;
}
.cover-8::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.8;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

.cover-9 {
  position: relative;
}
.cover-9::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-black);
  opacity: 0.9;
  border-radius: inherit;
  transition: opacity 0.35s linear;
  z-index: 100;
}

/* .opacity-* classes */
.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opacity-10 {
  opacity: 1;
}

/* .z-index-* classes */
.z-index-1 {
  z-index: 1000;
}

.z-index-2 {
  z-index: 2000;
}

.z-index-3 {
  z-index: 3000;
}

.z-index-4 {
  z-index: 4000;
}

.z-index-5 {
  z-index: 5000;
}

.z-index-6 {
  z-index: 6000;
}

.z-index-7 {
  z-index: 7000;
}

.z-index-8 {
  z-index: 8000;
}

.z-index-9 {
  z-index: 9000;
}

.z-index-10 {
  z-index: 10000;
}

.z-index-11 {
  z-index: 11000;
}

.z-index-12 {
  z-index: 12000;
}

.z-index-13 {
  z-index: 13000;
}

.z-index-14 {
  z-index: 14000;
}

.z-index-15 {
  z-index: 15000;
}

.z-index-16 {
  z-index: 16000;
}

.z-index-17 {
  z-index: 17000;
}

.z-index-18 {
  z-index: 18000;
}

.z-index-19 {
  z-index: 19000;
}

.z-index-20 {
  z-index: 20000;
}

/* .ls-* classes */
.ls-0 {
  letter-spacing: calc(0px / 10) !important;
}

.ls-1 {
  letter-spacing: calc(1px / 10) !important;
}

.ls-2 {
  letter-spacing: calc(2px / 10) !important;
}

.ls-3 {
  letter-spacing: calc(3px / 10) !important;
}

.ls-4 {
  letter-spacing: calc(4px / 10) !important;
}

.ls-5 {
  letter-spacing: calc(5px / 10) !important;
}

.ls-6 {
  letter-spacing: calc(6px / 10) !important;
}

.ls-7 {
  letter-spacing: calc(7px / 10) !important;
}

.ls-8 {
  letter-spacing: calc(8px / 10) !important;
}

.ls-9 {
  letter-spacing: calc(9px / 10) !important;
}

.ls-10 {
  letter-spacing: calc(10px / 10) !important;
}

.ls-11 {
  letter-spacing: calc(11px / 10) !important;
}

.ls-12 {
  letter-spacing: calc(12px / 10) !important;
}

.ls-13 {
  letter-spacing: calc(13px / 10) !important;
}

.ls-14 {
  letter-spacing: calc(14px / 10) !important;
}

.ls-15 {
  letter-spacing: calc(15px / 10) !important;
}

.ls-16 {
  letter-spacing: calc(16px / 10) !important;
}

.ls-17 {
  letter-spacing: calc(17px / 10) !important;
}

.ls-18 {
  letter-spacing: calc(18px / 10) !important;
}

.ls-19 {
  letter-spacing: calc(19px / 10) !important;
}

.ls-20 {
  letter-spacing: calc(20px / 10) !important;
}

.ls-21 {
  letter-spacing: calc(21px / 10) !important;
}

.ls-22 {
  letter-spacing: calc(22px / 10) !important;
}

.ls-23 {
  letter-spacing: calc(23px / 10) !important;
}

.ls-24 {
  letter-spacing: calc(24px / 10) !important;
}

.ls-25 {
  letter-spacing: calc(25px / 10) !important;
}

.ls-26 {
  letter-spacing: calc(26px / 10) !important;
}

.ls-27 {
  letter-spacing: calc(27px / 10) !important;
}

.ls-28 {
  letter-spacing: calc(28px / 10) !important;
}

.ls-29 {
  letter-spacing: calc(29px / 10) !important;
}

.ls-30 {
  letter-spacing: calc(30px / 10) !important;
}

.ls-31 {
  letter-spacing: calc(31px / 10) !important;
}

.ls-32 {
  letter-spacing: calc(32px / 10) !important;
}

.ls-33 {
  letter-spacing: calc(33px / 10) !important;
}

.ls-34 {
  letter-spacing: calc(34px / 10) !important;
}

.ls-35 {
  letter-spacing: calc(35px / 10) !important;
}

.ls-36 {
  letter-spacing: calc(36px / 10) !important;
}

.ls-37 {
  letter-spacing: calc(37px / 10) !important;
}

.ls-38 {
  letter-spacing: calc(38px / 10) !important;
}

.ls-39 {
  letter-spacing: calc(39px / 10) !important;
}

.ls-40 {
  letter-spacing: calc(40px / 10) !important;
}

.ls-41 {
  letter-spacing: calc(41px / 10) !important;
}

.ls-42 {
  letter-spacing: calc(42px / 10) !important;
}

.ls-43 {
  letter-spacing: calc(43px / 10) !important;
}

.ls-44 {
  letter-spacing: calc(44px / 10) !important;
}

.ls-45 {
  letter-spacing: calc(45px / 10) !important;
}

.ls-46 {
  letter-spacing: calc(46px / 10) !important;
}

.ls-47 {
  letter-spacing: calc(47px / 10) !important;
}

.ls-48 {
  letter-spacing: calc(48px / 10) !important;
}

.ls-49 {
  letter-spacing: calc(49px / 10) !important;
}

.ls-50 {
  letter-spacing: calc(50px / 10) !important;
}

.ls-51 {
  letter-spacing: calc(51px / 10) !important;
}

.ls-52 {
  letter-spacing: calc(52px / 10) !important;
}

.ls-53 {
  letter-spacing: calc(53px / 10) !important;
}

.ls-54 {
  letter-spacing: calc(54px / 10) !important;
}

.ls-55 {
  letter-spacing: calc(55px / 10) !important;
}

.ls-56 {
  letter-spacing: calc(56px / 10) !important;
}

.ls-57 {
  letter-spacing: calc(57px / 10) !important;
}

.ls-58 {
  letter-spacing: calc(58px / 10) !important;
}

.ls-59 {
  letter-spacing: calc(59px / 10) !important;
}

.ls-60 {
  letter-spacing: calc(60px / 10) !important;
}

.ls-61 {
  letter-spacing: calc(61px / 10) !important;
}

.ls-62 {
  letter-spacing: calc(62px / 10) !important;
}

.ls-63 {
  letter-spacing: calc(63px / 10) !important;
}

.ls-64 {
  letter-spacing: calc(64px / 10) !important;
}

.ls-65 {
  letter-spacing: calc(65px / 10) !important;
}

.ls-66 {
  letter-spacing: calc(66px / 10) !important;
}

.ls-67 {
  letter-spacing: calc(67px / 10) !important;
}

.ls-68 {
  letter-spacing: calc(68px / 10) !important;
}

.ls-69 {
  letter-spacing: calc(69px / 10) !important;
}

.ls-70 {
  letter-spacing: calc(70px / 10) !important;
}

.ls-71 {
  letter-spacing: calc(71px / 10) !important;
}

.ls-72 {
  letter-spacing: calc(72px / 10) !important;
}

.ls-73 {
  letter-spacing: calc(73px / 10) !important;
}

.ls-74 {
  letter-spacing: calc(74px / 10) !important;
}

.ls-75 {
  letter-spacing: calc(75px / 10) !important;
}

.ls-5px {
  letter-spacing: 5px !important;
}

/* .whitespace class */
.whitespace {
  width: 0.2em;
}

/* .scroll-marquee class */
.scroll-marquee {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
}
.scroll-marquee .scroll-marquee-contain-text {
  display: flex;
  flex-wrap: nowrap;
}
.scroll-marquee span {
  font-size: 80px;
  margin: 0 0.25em;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.08;
}

/* .user-no-select class */
.user-no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* .cursor and .cursor-follower classes */
.cursor-pointer {
  cursor: pointer;
}

.cursor,
.cursor-follower {
  position: fixed;
  border-radius: 100%;
  display: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999999;
}
@media only screen and (min-width: 1281px) {
  .cursor,
  .cursor-follower {
    display: block;
  }
}

.cursor {
  background-color: white;
  width: 8px;
  height: 8px;
  transition: top 0.1s linear, left 0.1s linear;
}

.cursor-follower {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  font-family: var(--font-family);
  text-transform: uppercase;
  white-space: nowrap;
  border: 2px solid #fff;
  color: #fff;
  transition: width 0.2s ease, height 0.2s ease, border 0.1s ease;
}
.cursor-follower::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s linear, background 0.15s linear;
}

.cursor-tooltip {
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
}
.cursor-tooltip::before {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* .have-tooltip class */
/*  .data-follow-mouse and .data-link-hover-scale classes */
[data-follow-mouse] {
  transition: transform 0.15s ease;
}

[data-link-hover-scale] {
  position: relative;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
  color: transparent !important;
}
[data-link-hover-scale]::before, [data-link-hover-scale]::after {
  content: attr(data-link-hover-scale);
  position: absolute;
  white-space: nowrap;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  font-size: inherit;
  color: var(--color-5);
}
[data-link-hover-scale]::before {
  top: 50%;
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
[data-link-hover-scale]::after {
  top: 50%;
  transform: translateY(0%) scale(0.8);
  opacity: 0;
  color: var(--color-primary);
  font-weight: 500;
  font-size: inherit;
}
[data-link-hover-scale]:hover::before {
  opacity: 0;
  transform: translateY(-100%) scale(0.8);
}
[data-link-hover-scale]:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* .animate-fill-text class */
.animate-fill-text {
  z-index: 100;
}
.animate-fill-text div {
  background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0.2) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.animate-fill-text.no-fill-last div:last-of-type span:last-of-type {
  background: unset;
  color: var(--color-primary);
}

/* .simple-hover class */
.simple-hover img {
  transition: transform 0.35s ease-in-out;
}
.simple-hover:hover img {
  transform: scale(1.05);
}

/* .modern-scroll class */
.modern-scroll {
  scrollbar-color: unset !important;
}
.modern-scroll ::-webkit-scrollbar,
.modern-scroll ::-webkit-scrollbar-thumb,
.modern-scroll ::-webkit-scrollbar-track {
  width: 5px;
  border: none;
  background: transparent;
}
.modern-scroll ::-webkit-scrollbar-button,
.modern-scroll ::-webkit-scrollbar-track-piece,
.modern-scroll ::-webkit-scrollbar-corner,
.modern-scroll ::-webkit-resizer {
  display: none;
}
.modern-scroll ::-webkit-scrollbar-thumb {
  background-color: var(--color-light);
}
.modern-scroll ::-webkit-scrollbar-track {
  background-image: linear-gradient(to right, transparent 40%, var(--color-2), transparent 60%);
  background-repeat: repeat-y;
  background-size: contain;
  margin-top: 50px;
  margin-bottom: 50px;
}
@media only screen and (min-width: 1281px) {
  .modern-scroll ::-webkit-scrollbar-track {
    margin-top: 70px;
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 1367px) {
  .modern-scroll ::-webkit-scrollbar-track {
    margin-top: 150px;
    margin-bottom: 190px;
  }
}

/*
 ------------------------------------------------------------------
Wrapper & Scrollbar
    1.1. #evneWrapper
        1.1.1. .scrollbar-track
            1.1.1.1. .scrollbar-thumb
        1.1.2. .page-content
        1.1.3. .scroll-content
have-scroll class 
    2.1. have-scroll
    2.2. scrollbar-track-x
 ------------------------------------------------------------------
*/
/* 1.1. #evneWrapper */
/* 1.1.1. .scrollbar-track */
#evneWrapper {
  width: 100%;
  /* 1.1.2. .page-content */
  /* 1.1.3. .scroll-content */
}
#evneWrapper .scrollbar-track {
  background: var(--color-1);
  width: 12px;
  z-index: 99999;
  /* 1.1.1.1. .scrollbar-thumb */
}
#evneWrapper .scrollbar-track .scrollbar-thumb {
  background: var(--color-primary);
  width: 12px;
  opacity: 1;
  border-radius: 0;
}
#evneWrapper .page-content {
  position: relative;
}
#evneWrapper .scroll-content {
  overflow-x: hidden;
}

/* 2.1. have-scroll */
.have-scroll {
  position: relative;
  display: flex;
  scrollbar-width: none;
}
.have-scroll .scroll-modern {
  position: sticky;
  height: 60%;
  width: 5px;
  background-image: linear-gradient(to right, transparent 40%, var(--color-2), transparent 60%);
  background-repeat: repeat-y;
  background-size: contain;
  z-index: 100;
  top: 20%;
  left: 100%;
}
.have-scroll .scroll-modern .scroll-thumb {
  width: 5px;
  position: absolute;
  background-color: var(--color-light);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.have-scroll .scroll-modern .scroll-thumb:hover {
  background-color: var(--color-primary);
}
.have-scroll .scroll-modern .scroll-thumb:active {
  background-color: var(--color-primary);
}

/* 2.2. scrollbar-track-x */
.scrollbar-track-x {
  display: none !important;
}

/** 
 * ------------------------------------------------------------------
 * [Table of contents]
 * 1. Loading
 *     1.1. .preloader (Main container for the loading animation)
 *         1.1.1. .preloader-svg (Styles for the SVG element)
 *             1.1.1.1. line (Transition properties for line elements)
 * ------------------------------------------------------------------
 **/
/* ============= Loading ============= */
.preloader .preloader-svg line {
  opacity: 0;
  transition-property: x1, x2, y1, y2;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* ============= Menu ============= */
.menu {
  height: 130px;
  width: 100%;
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  transition: height 0.4s linear, background-color 0.4s linear, top 0.4s linear;
  z-index: 19999;
}
.menu .site-nav .logo {
  width: 95px;
  height: 32px;
  display: flex;
  z-index: 779;
}
.menu .site-nav .logo .link-logo {
  width: inherit;
  overflow: hidden;
  display: inline-block;
  position: relative;
}
.menu .site-nav .logo .link-logo img {
  width: 95px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%) scale(1);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.menu .site-nav .logo .link-logo img:first-of-type {
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}
.menu .site-nav .logo .link-logo img:last-of-type {
  display: none;
  opacity: 0;
  transform: translate(0%, 200%) scale(0.8);
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .logo .link-logo img:last-of-type {
    display: block;
  }
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .logo .link-logo:hover img:first-of-type {
    opacity: 0;
    transform: translate(0%, -100%) scale(0.8);
  }
  .menu .site-nav .logo .link-logo:hover img:last-of-type {
    opacity: 1;
    transform: translate(0%, -50%) scale(1);
  }
}
.menu .site-nav .nav-links {
  height: 30px;
  position: relative;
  z-index: 777;
}
.menu .site-nav .nav-links .nav-toggle {
  color: var(--color-light);
  transition: left 0.3s ease;
  z-index: 1;
}
.menu .site-nav .nav-links .nav-toggle .toggle-name {
  overflow: hidden;
  width: 60px;
  height: 100%;
  transition: margin 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  font-weight: 300;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-links .nav-toggle .toggle-name {
    width: 90px;
  }
}
.menu .site-nav .nav-links .nav-toggle .toggle-name .menu-text,
.menu .site-nav .nav-links .nav-toggle .toggle-name .open-text,
.menu .site-nav .nav-links .nav-toggle .toggle-name .close-text {
  line-height: 1;
  position: absolute;
  left: 0;
  top: 50%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.menu .site-nav .nav-links .nav-toggle .toggle-name .menu-text {
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}
.menu .site-nav .nav-links .nav-toggle .toggle-name .open-text {
  opacity: 0;
  transform: translate(0%, 150%) scale(0.8);
}
.menu .site-nav .nav-links .nav-toggle .toggle-name .close-text {
  opacity: 0;
  transform: translate(0%, -150%) scale(0.8);
}
.menu .site-nav .nav-links .nav-toggle .toggle-mark {
  position: relative;
  width: 16px;
  height: 15px;
  border: 1px solid transparent;
  border-radius: 24px;
  transition: width 0.2s ease, height 0.2s ease, border 0.2s ease, top 0.2s ease;
  top: calc(50% - 9px);
}
.menu .site-nav .nav-links .nav-toggle .toggle-mark::before, .menu .site-nav .nav-links .nav-toggle .toggle-mark::after {
  content: "";
  position: absolute;
  background-color: var(--color-light);
  border-radius: 10px;
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
  transition: top 0.2s ease, transform 0.2s ease;
}
.menu .site-nav .nav-links .nav-toggle .toggle-mark::before {
  top: 0%;
}
.menu .site-nav .nav-links .nav-toggle .toggle-mark::after {
  top: 100%;
}
.menu .site-nav .nav-links.open .nav-toggle .toggle-mark {
  width: 64px;
  height: 48px;
  border: 1px solid var(--color-light);
  top: calc(50% - 24px);
  transition: width 0.2s 0.2s ease, height 0.2s 0.2s ease, top 0.2s 0.2s ease, border 0.2s 0.2s ease;
}
.menu .site-nav .nav-links.open .nav-toggle .toggle-mark::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu .site-nav .nav-links.open .nav-toggle .toggle-mark::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.menu .site-nav .nav-links.open:hover .toggle-name .menu-text {
  opacity: 0;
  transform: translate(0%, 150%) scale(0.8);
}
.menu .site-nav .nav-links.open:hover .toggle-name .close-text {
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}
.menu .site-nav .nav-links:not(.open):hover .toggle-name .menu-text {
  opacity: 0;
  transform: translate(0%, -150%) scale(0.8);
}
.menu .site-nav .nav-links:not(.open):hover .toggle-name .open-text {
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}
.menu .site-nav .nav-list {
  display: none;
  z-index: 1;
}
.menu .site-nav .nav-list .container .menu-links {
  padding-top: 130px;
}
.menu .site-nav .nav-list .container .menu-links .social-links {
  order: 1;
  border-width: 1px 0;
  border-style: solid none;
  border-color: rgba(255, 255, 255, 0.1) transparent;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .container .menu-links .social-links {
    border: unset;
    order: 0;
  }
}
.menu .site-nav .nav-list .container .menu-links .social-links ul li {
  transition: all 0.25s linear;
}
.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link {
  display: inline-block;
  transition: color 0.35s ease, transform 0.35s ease;
}
.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:hover, .menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:focus {
  color: var(--color-primary);
  transform: translateX(8px);
}
.menu .site-nav .nav-list .container .menu-links .social-links ul li .social-link:focus {
  outline: 2px solid var(--color-black-2);
}
.menu .site-nav .nav-list .container .menu-links .links {
  height: 75%;
  overflow-y: auto;
  overflow-x: hidden;
  order: 0;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .container .menu-links .links {
    height: 85%;
    margin-bottom: 0;
    height: 100%;
  }
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .container .menu-links .links {
    order: 1;
  }
}
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv {
  height: 100%;
  margin: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv {
    align-items: flex-start;
  }
}
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  block-size: -moz-fit-content;
  block-size: fit-content;
  align-items: center;
  margin-bottom: 20px;
  transition: all 0.2s linear;
}
@media only screen and (min-width: 1367px) {
  .menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li {
    margin-bottom: 30px;
  }
}
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li a {
  transition: all 0.25s linear;
  color: var(--color-3);
}
.menu .site-nav .nav-list .container .menu-links .links ul.scrolldiv li:hover a {
  color: var(--color-light);
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-email .question {
  margin-bottom: 10px;
  color: var(--color-5);
  opacity: 0.4;
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone {
  display: flex;
  justify-content: center;
  align-items: end;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .container .menu-contact .menu-contact-phone {
    justify-content: flex-start;
  }
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a {
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease, transform 0.2s ease, letter-spacing 0.3s cubic-bezier(0.78, 0.28, 0, 0.76);
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:hover {
  color: var(--color-primary);
  transform: translateX(5px);
  letter-spacing: 1.5px;
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:hover span {
  color: var(--color-light);
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a:focus {
  outline: 3px solid var(--color-primary);
  letter-spacing: 1.5px;
}
.menu .site-nav .nav-list .container .menu-contact .menu-contact-phone a span {
  color: var(--color-primary);
  transition: color 0.3s ease;
}

/* ============= Parallax Image ============= */
.parallax-image {
  z-index: 1;
  overflow: hidden;
  top: 0;
  left: 0;
}
.parallax-image .cover-image,
.parallax-image img {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 120%;
  padding: 0;
  will-change: scroll-position;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(1);
}

@media only screen and (min-width: 769px) {
  .parallax-image-large-screen {
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
  }
  .parallax-image-large-screen .cover-image,
  .parallax-image-large-screen img {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 120% !important;
    padding: 0;
    will-change: scroll-position;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    transform: scale(1);
  }
}

/* ============= Link - Circle Scroll ============= */
.circle-link {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: block;
  position: relative;
  letter-spacing: 6.5px;
  transition: background-color 0.6s ease, transform 0.6s ease;
}
@media only screen and (min-width: 1281px) {
  .circle-link {
    width: 200px;
    height: 200px;
  }
}
.circle-link:hover {
  transform: scale(1.1);
}
.circle-link:hover .circle-inner > svg {
  animation: rotate360 12s linear infinite;
}
.circle-link:hover .circle-inner .slot .mouse-scroll,
.circle-link:hover .circle-inner .slot svg {
  transform: scale(1.15);
}
.circle-link .circle-inner {
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: background 0.6s ease, transform 0.6s ease, color 0.6s ease;
}
.circle-link .circle-inner::before, .circle-link .circle-inner::after {
  content: "";
  background: linear-gradient(to top, transparent 45%, transparent 80%) padding-box;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition: background 0.7s ease, border 0.7s ease, color 0.7s ease;
}
.circle-link .circle-inner::before {
  width: 112%;
  height: 112%;
  background: linear-gradient(to top, currentColor 45%, transparent 80%) padding-box;
}
.circle-link .circle-inner::after {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--color-black);
  z-index: -1;
}
.circle-link .circle-inner > svg {
  display: none;
}
.circle-link .circle-inner svg {
  transform: rotate(-15deg);
  transition: transform 0.5s ease;
}
.circle-link .circle-inner svg path {
  fill: transparent;
}
.circle-link .circle-inner svg textPath {
  word-spacing: 1px;
  font-weight: 400;
  font-size: 8px;
  transition: fill 0.5s ease;
}
.circle-link .circle-inner .slot {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}
.circle-link .circle-inner .slot svg {
  height: 50%;
  width: 50%;
  transition: transform 0.3s ease, fill 0.3s ease;
}
@media only screen and (min-width: 769px) {
  .circle-link .circle-inner .slot svg {
    height: 60%;
    width: 60%;
  }
}
@media only screen and (min-width: 1281px) {
  .circle-link .circle-inner .slot svg {
    height: 70%;
    width: 70%;
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.circle-link.transparent-half-on-dark:hover {
  background-color: var(--color-primary);
}
.circle-link.transparent-half-on-dark:hover .circle-inner::before {
  background: linear-gradient(to top, var(--color-primary) 45%, transparent 80%) padding-box;
  transition: background 0.5s ease;
}
.circle-link.transparent-half-on-dark:hover .circle-inner .slot .mouse-scroll {
  background-color: var(--color-5);
}
.circle-link.transparent-half-on-dark:hover .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-primary);
}
.circle-link.transparent-half-on-dark .circle-inner {
  background-color: transparent;
  color: var(--color-black);
}
.circle-link.transparent-half-on-dark .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.transparent-half-on-dark .circle-inner svg textPath {
  fill: var(--color-5);
}

.circle-link.transparent-half-on-light:hover {
  background-color: var(--color-primary);
}
.circle-link.transparent-half-on-light:hover .circle-inner::before {
  background: linear-gradient(to top, var(--color-primary) 45%, transparent 80%) padding-box;
}
.circle-link.transparent-half-on-light:hover .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.transparent-half-on-light:hover .circle-inner svg textPath {
  fill: var(--color-5);
}
.circle-link.transparent-half-on-light:hover .circle-inner .slot .mouse-scroll {
  background-color: var(--color-5);
}
.circle-link.transparent-half-on-light:hover .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-primary);
}
.circle-link.transparent-half-on-light:hover .circle-inner .slot svg path {
  fill: var(--color-5);
}
.circle-link.transparent-half-on-light .circle-inner::after {
  border: 1px dashed var(--color-black);
}
.circle-link.transparent-half-on-light .circle-inner svg textPath {
  fill: var(--color-black);
}
.circle-link.transparent-half-on-light .circle-inner .slot svg path {
  fill: var(--color-primary);
}

.circle-link.transparent-on-dark .circle-inner {
  background-color: transparent;
  color: var(--color-black);
}
.circle-link.transparent-on-dark .circle-inner::before {
  background: linear-gradient(to top, transparent 45%, transparent 80%) padding-box;
}
.circle-link.transparent-on-dark .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.transparent-on-dark .circle-inner svg textPath {
  fill: var(--color-5);
}

.circle-link.circle-primary {
  background-color: var(--color-primary);
}
.circle-link.circle-primary:hover {
  background-color: var(--color-black);
}
.circle-link.circle-primary:hover .circle-inner::before {
  background: linear-gradient(to top, var(--color-black) 45%, transparent 80%) padding-box;
}
.circle-link.circle-primary:hover .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.circle-primary:hover .circle-inner svg textPath {
  fill: var(--color-5);
  font-weight: 500;
}
.circle-link.circle-primary:hover .circle-inner .slot .mouse-scroll {
  background-color: var(--color-primary);
}
.circle-link.circle-primary:hover .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-black);
}
.circle-link.circle-primary:hover .circle-inner .slot svg path {
  fill: var(--color-primary);
}
.circle-link.circle-primary .circle-inner {
  background-color: transparent;
  color: var(--color-black);
}
.circle-link.circle-primary .circle-inner::before {
  background: linear-gradient(to top, var(--color-primary) 45%, transparent 80%) padding-box;
}
.circle-link.circle-primary .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.circle-primary .circle-inner svg textPath {
  fill: var(--color-5);
}
.circle-link.circle-primary .circle-inner .slot .mouse-scroll {
  background-color: var(--color-5);
}
.circle-link.circle-primary .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-primary);
}
.circle-link.circle-primary .circle-inner .slot svg path {
  fill: var(--color-5);
}

.circle-link.primary-half-on-light:hover {
  background-color: var(--color-black);
}
.circle-link.primary-half-on-light:hover .circle-inner::before {
  background: linear-gradient(to top, var(--color-black) 45%, transparent 80%) padding-box;
}
.circle-link.primary-half-on-light:hover .circle-inner::after {
  border: 1.5px dashed var(--color-primary);
}
.circle-link.primary-half-on-light:hover .circle-inner svg textPath {
  fill: var(--color-primary);
  font-weight: 500;
}
.circle-link.primary-half-on-light:hover .circle-inner .slot .mouse-scroll {
  background-color: var(--color-primary);
}
.circle-link.primary-half-on-light:hover .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-5);
}
.circle-link.primary-half-on-light:hover .circle-inner .slot svg path {
  fill: var(--color-primary);
}
.circle-link.primary-half-on-light .circle-inner::after {
  border: 1px dashed var(--color-5);
}
.circle-link.primary-half-on-light .circle-inner svg textPath {
  fill: var(--color-5);
}
.circle-link.primary-half-on-light .circle-inner .slot svg path {
  fill: var(--color-5);
}

.circle-link.circle-light {
  background-color: var(--color-5);
}
.circle-link.circle-light:hover {
  background-color: var(--color-black);
}
.circle-link.circle-light:hover .circle-inner::before {
  background: linear-gradient(to top, transparent 45%, transparent 80%) padding-box;
}
.circle-link.circle-light:hover .circle-inner::after {
  border: 1.5px dashed var(--color-5);
}
.circle-link.circle-light:hover .circle-inner svg textPath {
  fill: var(--color-5);
  font-weight: 500;
}
.circle-link.circle-light:hover .circle-inner .slot .mouse-scroll {
  background-color: var(--color-primary);
}
.circle-link.circle-light:hover .circle-inner .slot .mouse-scroll::after {
  background-color: var(--color-5);
}
.circle-link.circle-light:hover .circle-inner .slot svg path {
  fill: var(--color-primary);
}
.circle-link.circle-light .circle-inner::before {
  background: linear-gradient(to top, transparent 45%, transparent 80%) padding-box;
}
.circle-link.circle-light .circle-inner::after {
  border: 1px dashed var(--color-black);
  z-index: 1;
}
.circle-link.circle-light .circle-inner svg textPath {
  fill: var(--color-black);
}
.circle-link.circle-light .circle-inner .slot svg path {
  fill: var(--color-primary);
}

.mouse-scroll {
  background-color: var(--color-primary);
  width: 30px;
  height: 50px;
  border-radius: 50px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.mouse-scroll::after {
  content: "";
  background-color: var(--color-black);
  width: 3px;
  height: 10px;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  border-radius: 50px;
  position: absolute;
  z-index: 1;
  transition: transform 0.3s ease, background 0.3s ease;
}
@media only screen and (min-width: 1281px) {
  .mouse-scroll {
    width: 45px;
    height: 70px;
  }
  .mouse-scroll::after {
    width: 5px;
    height: 15px;
  }
}

/* ============= Link - One ============= */
.link-one {
  width: -moz-fit-content;
  width: fit-content;
  block-size: -moz-fit-content;
  block-size: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  cursor: pointer;
  font-weight: 100;
}
.link-one::after {
  content: "";
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: -16px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
.link-one:hover::after {
  width: 100%;
}
.link-one:hover img,
.link-one:hover svg {
  margin-top: 3px;
  transform: rotate(15deg);
  transition: transform 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}
.link-one a,
.link-one button,
.link-one input {
  padding-right: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
@media only screen and (min-width: 1367px) {
  .link-one a,
  .link-one button,
  .link-one input {
    padding-right: 20px;
  }
}
.link-one img,
.link-one svg {
  transition: all 0.2s linear;
  margin-top: -5px;
  width: 12px;
  height: 12px;
}
@media only screen and (min-width: 1281px) {
  .link-one img,
  .link-one svg {
    width: 16px;
    height: 16px;
  }
}
@media only screen and (min-width: 1367px) {
  .link-one img,
  .link-one svg {
    width: 21px;
    height: 21px;
  }
}
.link-one svg path {
  fill: currentColor;
}
.link-one.icon-primary img,
.link-one.icon-primary svg {
  transition: transform 0.2s linear;
  margin-top: -5px;
}
.link-one.icon-primary svg path {
  fill: var(--color-primary);
}

/* ============= Link - Normal ============= */
.normal-link {
  width: -moz-fit-content;
  width: fit-content;
  block-size: -moz-fit-content;
  block-size: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: -moz-fit-content;
  height: fit-content;
  block-size: fit-content;
  position: relative;
  cursor: pointer;
  position: relative;
  padding-bottom: 5px;
}
.normal-link::after {
  content: "";
  width: 0%;
  height: 1px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background-color: currentColor;
  transition: all 0.3s ease;
}
.normal-link:hover::after {
  width: calc(100% + 16px);
}
@media only screen and (min-width: 1281px) {
  .normal-link:hover::after {
    width: calc(100% + 35px);
  }
}
.normal-link:hover img,
.normal-link:hover svg {
  top: 14px;
  right: -22px;
  opacity: 1;
}
@media only screen and (min-width: 1281px) {
  .normal-link:hover img,
  .normal-link:hover svg {
    top: 25px;
    right: -50px;
  }
}
@media only screen and (min-width: 1367px) {
  .normal-link:hover img,
  .normal-link:hover svg {
    right: -50px;
  }
}
.normal-link a,
.normal-link button,
.normal-link input {
  margin-right: 10px;
  font-weight: 500;
}
.normal-link img,
.normal-link svg {
  width: 12px;
  height: 12px;
  position: absolute;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  top: 20px;
  right: -7px;
  opacity: 0;
  z-index: -1;
}
@media only screen and (min-width: 1281px) {
  .normal-link img,
  .normal-link svg {
    width: 24px;
    height: 24px;
    top: 40px;
    right: -20px;
  }
}
.normal-link svg path {
  fill: currentColor;
}
.normal-link.icon-primary svg path {
  fill: var(--color-primary);
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preloader-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #FF5593;
  font-family: 'Georgia', serif;
  text-align: center;
}

.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}

@media (max-width: 600px) {
  .preloader-text {
    font-size: 1rem;
  }
}