@charset "UTF-8";
/*----------------------------------------------------

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: 14px;
}

/* 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,
.zlides-texts .swiper .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts .swiper swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .slide-title,
h2,
h3,
.menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li a,
.zlides-texts .swiper .swiper-slide .project-data .slider-text .number,
.zlides-texts .swiper swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .number,
h4,
h5,
h6,
.preloader .loading-content .loading-marquee .track span,
.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%;
  }
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts .swiper swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .slide-title, h2,
h3,
.menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li a,
.zlides-texts .swiper .swiper-slide .project-data .slider-text .number,
.zlides-texts .swiper swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .number,
h4,
h5,
h6,
.preloader .loading-content .loading-marquee .track span,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 129%;
  font-weight: 500;
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts .swiper swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .slide-title,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .slide-title, h2,
.h2 {
  font-size: var(--h2);
}

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

.zlides-texts .swiper .swiper-slide .project-data .slider-text .number,
.zlides-texts .swiper swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container .swiper-slide .project-data .slider-text .number,
.zlides-texts swiper-container swiper-slide .project-data .slider-text .number, h4,
.h4 {
  font-size: var(--h4);
}

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

h6, .preloader .loading-content .loading-marquee .track span,
.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%;
}

.slider-footer .slider-navigation button, .social-bar, .zlides-texts .swiper .swiper-slide .project-data .tags a span,
.zlides-texts .swiper swiper-slide .project-data .tags a span,
.zlides-texts swiper-container .swiper-slide .project-data .tags a span,
.zlides-texts swiper-container swiper-slide .project-data .tags a span,
.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 ============= */
:root {
  --color-black: #000000;
  --color-black-2: #000000;
  --color-primary: #f25749;
  --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)

  ------------------------------------------------------------------
 **/
/* ================= Background Colors ================= */
.bg-color-primary {
  background-color: var(--color-primary);
}

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


.bg-color-black {
  background: #000000 url(/assets/images/renaissance_room.jpg) no-repeat center center;
  background-size: cover; /* optional, for scaling the image */
}

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

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

.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 & Body
    1.1. General HTML Styles
    1.2. Shared Styles for HTML and Body
    1.3. Body Specific Styles
------------------------------------------------------------------
*/
/* ============= HTML & Body ============= */
/* 1.1. General HTML Styles */
html {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  scroll-behavior: smooth;
}

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

/* 1.3. Body Specific 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::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 0;
  /* background-image: linear-gradient(rgba(111, 111, 111, 0.15) 1px, transparent 1px), linear-gradient(to right, rgba(111, 111, 111, 0.15) 1px, transparent 1px); */
  background-size: 3.6vw 3.6vw;
}

/*
 ------------------------------------------------------------------
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,
.menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li a,
h4,
h5,
h6,
.preloader .loading-content .loading-marquee .track span,
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 */
/* 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;
  }
}
.mt-section {
  margin-top: 80px;
}

.mb-section {
  margin-bottom: 80px;
}

.my-section {
  margin-top: 80px;
  margin-bottom: 80px;
}

@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;
  }
}
@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;
  }
}
@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;
  }
}
/*
====================================
📌 Table of Contents:
1. 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.2. Desktop
        1.2.3. Xlarge
    1.3. Custom Large Padding
====================================
*/
/* 1.1. Section Padding */
.pt-section {
  padding-top: 80px;
}

.pb-section {
  padding-bottom: 80px;
}

.py-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 1.2. Media Queries */
@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;
  }
}
@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;
  }
}
@media only screen and (min-width: 1367px) {
  .pt-section {
    padding-top: 200px;
  }
  .pb-section {
    padding-bottom: 200px;
  }
  .py-section {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}
/* 1.3. Custom Large Padding */
.pt-cust-large {
  padding-top: 180px;
}
@media only screen and (min-width: 1367px) {
  .pt-cust-large {
    padding-top: 230px;
  }
}

.mt-section {
  margin-top: 80px;
}

.mb-section {
  margin-bottom: 80px;
}

.my-section {
  margin-top: 80px;
  margin-bottom: 80px;
}

@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;
  }
}
@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;
  }
}
@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;
  }
}
/*
------------------------------------------------------------------
1. General Styles
   1.1. Page Wrapper
   1.2. Page Content

2. Helper Classes
   2.1. Cover Classes (.cover-*)
   2.2. Opacity Classes (.opacity-*)
   2.3. Z-Index Classes (.z-index-*)
   2.4. Letter Spacing Classes (.ls-*)
   2.5. Whitespace Class (.whitespace)
   2.6. User Select Control (.user-no-select)

3. Cursor Styles
   3.1. Cursor and Cursor Follower
   3.2. Cursor Loading
   3.3. Cursor Tooltip
   3.4. Cursor None

4. Interactive Elements
   4.1. Follow Mouse Effect ([data-follow-mouse])
   4.2. Link Hover Scale Effect ([data-link-hover-scale])
   4.3. Simple Hover Effect (.simple-hover)

5. SVG Elements
   5.1. Circle SVG (.circle-svg)

------------------------------------------------------------------
*/
/* ============= General Styles ============= */
.page-wrapper {
  position: relative;
  z-index: 100;
}

.page-content {
  transition: opacity 0.8s linear;
}

/* ============= Helper 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: var(--color-black);
  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: var(--color-black);
  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-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-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-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 {
  width: 0.2em;
}

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

/* ============= Cursor Styles ============= */
.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.hide,
.cursor-follower.hide {
  opacity: 0;
}

.cursor {
  background-color: white;
  width: 8px;
  height: 8px;
  transition: top 0.1s linear, left 0.1s linear, opacity 0.35s 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, opacity 0.35s linear, border 0.1s ease, top 0.1s linear, left 0.1s linear;
}

.cursor-loading::after {
  content: "";
  width: 150%;
  height: 150%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-primary) transparent var(--color-primary) transparent;
  position: absolute;
  transform: translate(-50%, -50%) rotate(360deg);
  left: 50%;
  top: 50%;
  border-radius: 50%;
  animation: cursor-loading 1.8s backwards linear infinite;
}

@keyframes cursor-loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.cursor-tooltip {
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor-none {
  transition: opacity 0.6s linear;
}

/* ============= Interactive Elements ============= */
[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;
}

.simple-hover img {
  transition: transform 0.35s ease-in-out;
}

.simple-hover:hover img {
  transform: scale(1.05);
}

/* ============= SVG Elements ============= */
.circle-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.circle-svg .circle-path {
  fill: transparent;
  stroke: var(--color-light);
}

/** 
 * ------------------------------------------------------------------
 * [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 {
  z-index: 999999999999;
  position: relative;
  background-color: var(--color-black);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 60px;
  font-weight: bold;
  display: flex;
  gap: 10px;
}
.preloader::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 0;
  /* background-image: linear-gradient(rgba(111, 111, 111, 0.15) 1px, transparent 1px), linear-gradient(to right, rgba(111, 111, 111, 0.15) 1px, transparent 1px); */
  background-size: 3.6vw 3.6vw;
}
.preloader .loading-content {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.preloader .loading-content .digit-counter {
  position: relative;
}
.preloader .loading-content .digit-counter .digit-container {
  width: 80px;
  height: 80px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  /* background: #222; */
  text-align: center;
}
.preloader .loading-content .digit-counter .digit-container .digit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.6s ease-in-out;
}
.preloader .loading-content .digit-counter .digit-container .digit span {
  display: block;
  font-size: 80px;
  height: 80px;
  line-height: 80px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: var(--color-1);
}
.preloader .loading-content .loading-marquee {
  height: 50px;
}
.preloader .loading-content .loading-marquee::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--color-black) 5%, transparent 10%, transparent 90%, var(--color-black) 95%);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.preloader .loading-content .loading-marquee .track img {
  height: auto;
  width: 1.8em;
}

.loading-marquee {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.loading-marquee .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
}
.loading-marquee .track.to-left {
  animation: loading-marquee 5s linear infinite;
}
.loading-marquee .track.to-right {
  animation: loading-marquee 5s linear infinite reverse;
}
.loading-marquee .track .content {
  display: flex;
  align-items: center;
}
.loading-marquee .track .content span {
  margin: 0;
  color: var(--color-primary);
}
@keyframes loading-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============= 1️⃣  General Link Styles ============= */
.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;
  position: relative;
  cursor: pointer;
  padding-bottom: 5px;
  /* ============= 2️⃣  Underline Effect ============= */
  /* ============= 3️⃣  Hover Effects ============= */
  /* ============= 4️⃣  Child Elements ============= */
  /* ============= 5️⃣  Icon & SVG Styling ============= */
  /* 🎨 Primary Color Icon */
}
.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);
}



/* ============= 1️⃣  General Menu Styles ============= */
.menu {
  height: 80px;
  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;
}
@media only screen and (min-width: 1367px) {
  .menu {
    height: 130px;
  }
}
.menu .site-nav {
  /* ============= 2️⃣  Logo Styling ============= */
  /* ============= 3️⃣  Navigation Links & Toggle ============= */
  /* ============= 4️⃣  Navigation List & Links ============= */
}
.menu .site-nav .logo {
  width: 95px;
  height: 64px;
  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: auto;
  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: 70px;
  }
}
.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.25s ease, height 0.25s 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.25s ease, transform 0.25s 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.25s 0.2s ease, height 0.25s 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 .nav-list-container {
  /* ============= 5️⃣  Contact Section in Menu ============= */
}
.menu .site-nav .nav-list .nav-list-container .menu-links {
  padding-top: 130px;
}
/* .menu .site-nav .nav-list .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 .nav-list-container .menu-links .social-links {
    border: unset;
    order: 0;
  }
}
.menu .site-nav .nav-list .nav-list-container .menu-links .social-links h6, .menu .site-nav .nav-list .nav-list-container .menu-links .social-links .preloader .loading-content .loading-marquee .track span, .preloader .loading-content .loading-marquee .track .menu .site-nav .nav-list .nav-list-container .menu-links .social-links span {
  transition: all 0.45s linear;
}
.menu .site-nav .nav-list .nav-list-container .menu-links .social-links ul li {
  transition: all 0.45s linear;
}
.menu .site-nav .nav-list .nav-list-container .menu-links .social-links ul li a {
  display: inline-block;
  transition: color 0.35s ease, transform 0.35s ease;
}
.menu .site-nav .nav-list .nav-list-container .menu-links .social-links ul li a:hover, .menu .site-nav .nav-list .nav-list-container .menu-links .social-links ul li a:focus {
  color: var(--color-primary);
  transform: scale(0.95);
}
.menu .site-nav .nav-list .nav-list-container .menu-links .social-links ul li a:focus {
  outline: 2px solid var(--color-black-2);
}
.menu .site-nav .nav-list .nav-list-container .menu-links .links {
  height: 80%;
  order: 0;
}
@media only screen and (min-width: 1281px) {
  .menu .site-nav .nav-list .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 .nav-list-container .menu-links .links {
    order: 1;
  }
}
.menu .site-nav .nav-list .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 .nav-list-container .menu-links .links ul.scrolldiv {
    align-items: flex-start;
  }
}
.menu .site-nav .nav-list .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.25s linear;
}
@media only screen and (min-width: 1367px) {
  .menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li {
    margin-bottom: 40px;
  }
}
.menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li a {
  transition: all 0.25s linear;
  color: var(--color-3);
}
.menu .site-nav .nav-list .nav-list-container .menu-links .links ul.scrolldiv li:hover a {
  color: var(--color-light);
}
.menu .site-nav .nav-list .nav-list-container .menu-contact .menu-contact-phone a {
  display: inline-flex;
  align-items: center;
  transition: color 0.6s ease, transform 0.6s ease, letter-spacing 0.6s ease;
}
.menu .site-nav .nav-list .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 .nav-list-container .menu-contact .menu-contact-phone a:hover span {
  color: var(--color-light);
}
.menu .site-nav .nav-list .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 .nav-list-container .menu-contact .menu-contact-phone a span {
  color: var(--color-primary);
  transition: color 0.3s ease;
}

/* ============= 6️⃣  Scrollbar Customization ============= */
.have-scroll {
  position: relative;
  display: flex;
  scrollbar-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.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);
}

.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;
  }
}

/* ============= Slideshow Texts ============= */
.zlides-texts {
  /* 1️⃣ General Swiper Styles */
}

.zlides-texts .swiper {
  /* 5️⃣ Active Slide Effects */
}

.zlides-texts .swiper .swiper-wrapper {
  width: fit-content;
  block-size: fit-content;
  counter-reset: item;
}

.zlides-texts .swiper .swiper-slide {
  user-select: none;
  /* 2️⃣ Project Data Styles */
}

.zlides-texts .swiper .swiper-slide .project-data {
  width: fit-content;
  opacity: 0.15;
  position: relative;
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* ============= Tags ============= */
  /* 3️⃣ Slider Text */
  /* 4️⃣ Hover & Active State Effects */
}

.zlides-texts .swiper .swiper-slide .project-data .tags {
  width: 100%;
  position: absolute;
  top: 100%;
  overflow: hidden;
}

.zlides-texts .swiper .swiper-slide .project-data .tags a {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translate(10%, 100%) rotateZ(5deg);
  transition: opacity 0.15s linear, transform 0.15s ease;
}

.zlides-texts .swiper .swiper-slide .project-data .tags a:not(:last-of-type) span::after {
  content: ", ";
}

.zlides-texts .swiper .swiper-slide .project-data .tags a span {
  font-weight: 400;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text {
  width: 150%;
  min-height: 50px; /* Minimum height */
  padding: 100px 0 100px 0; /* Top, Right, Bottom, Left */
  display: flex;
  flex-flow: column;
  justify-content: center; /* Center vertically */
  /* border: 2px solid yellow;  Example border */
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text .number {
  position: absolute;
  padding: 100px 0 100px 0; /* Top, Right, Bottom, Left */
  height: 100%;
  color: inherit;
  transition: color 0.8s ease;
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text .number.counter::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero) ".";
  color: inherit;
  position: relative;
  transition: color 0.8s ease;
}

.zlides-texts .swiper .swiper-slide .project-data .slider-text .number,
.zlides-texts .swiper .swiper-slide .project-data .slider-text .slide-title {
  transition: color 0.8s ease;
  line-height: 1;
}

/* Explicitly disable hover effects for non-active slides (increased specificity) */
.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:hover,
.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:focus {
  opacity: 0.15 !important; /* Ensure opacity doesn't change */
  transform: none !important; /* Prevent any transform */
}

.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:hover .tags,
.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:focus .tags {
  opacity: 0 !important; /* Keep tags hidden */
}

.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:hover .tags a,
.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) .project-data:focus .tags a {
  opacity: 0 !important; /* Keep tag links hidden */
  transform: translate(10%, 100%) rotateZ(5deg) !important; /* Reset to initial transform */
}

/* Fallback: Disable pointer events on non-active slides */
.zlides-texts .swiper .swiper-slide:not(.swiper-slide-active) {
  pointer-events: none;
}

/* Hover effects only for active slide */
.zlides-texts .swiper .swiper-slide-active .project-data:hover,
.zlides-texts .swiper .swiper-slide-active .project-data:focus {
  transform: translateX(10px);
  opacity: 1;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags,
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags {
  opacity: 1;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a,
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a {
  opacity: 1;
  transform: translate(0%, 0%) rotateZ(0deg);
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a:nth-child(1),
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a:nth-child(1) {
  transition-delay: 0s;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a:nth-child(2),
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a:nth-child(2) {
  transition-delay: 0.15s;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a:nth-child(3),
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a:nth-child(3) {
  transition-delay: 0.3s;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a:nth-child(4),
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a:nth-child(4) {
  transition-delay: 0.45s;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a:nth-child(5),
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a:nth-child(5) {
  transition-delay: 0.6s;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .tags a span,
.zlides-texts .swiper .swiper-slide-active .project-data:focus .tags a span {
  color: var(--color-light);
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover span,
.zlides-texts .swiper .swiper-slide-active .project-data:focus span {
  color: var(--color-light);
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover p,
.zlides-texts .swiper .swiper-slide-active .project-data:focus p {
  color: var(--color-primary);
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .number,
.zlides-texts .swiper .swiper-slide-active .project-data:focus .number {
  color: var(--color-light) !important;
}

.zlides-texts .swiper .swiper-slide-active .project-data:hover .number.counter::before,
.zlides-texts .swiper .swiper-slide-active .project-data:focus .number.counter::before {
  color: var(--color-light) !important;
}

/* Active slide styles */
.zlides-texts .swiper .swiper-slide-active .project-data {
  opacity: 1;
}

.zlides-texts .swiper .swiper-slide-active .project-data .slider-text {
  color: var(--color-light);
}

.zlides-texts .swiper .swiper-slide-active .project-data .slider-text .number {
  color: var(--color-primary);
}

.zlides-texts .swiper .swiper-slide-active .project-data .slider-text .number.counter::before {
  color: var(--color-primary);
}

/* ============= 1️⃣  Zlide Images ============= */
.zlides-images {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 0;
}
.zlides-images .swiper,
.zlides-images swiper-container {
  transition: z-index 0.8s ease;
  position: relative;
}
.zlides-images .swiper .swiper-slide,
.zlides-images .swiper swiper-slide,
.zlides-images swiper-container .swiper-slide,
.zlides-images swiper-container swiper-slide {
  transform: none;
  position: relative;
}

/* ============= 2️⃣  Dark Overlay ============= */
.dark-overlay {
  position: relative;
  /* 2.1. Overlay Effect */
}
.dark-overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: 999;
  transition: opacity 10.25s linear;
}

/* ============= 3️⃣  Contain Canvas Images ============= */
.contain-canvas-images {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
.contain-canvas-images::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}
.contain-canvas-images .canvas-images {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}

/* ============= 4️⃣  View Image ============= */
.view-image {
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  transition: opacity 0.35s linear;
  overflow: hidden;
}
.view-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s linear;
}
.view-image.view {
  width: 100%;
}
.view-image.view img {
  opacity: 1;
}

/* ============= 5️⃣  Hover Image ============= */
.hover-image {
  width: 0;
  position: absolute;
  height: 196px;
  top: 50%;
  left: 0;
  z-index: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.47, 0, 0.75, 0.72), transform 0.15s linear, opacity 0.35s 0.3s linear;
}
.hover-image img,
.hover-image video {
  width: 350px;
  height: 196px;
  -o-object-fit: cover;
     object-fit: cover;
}
.hover-image.view {
  width: 350px;
  opacity: 1;
  transition: width 0.25s 0.35s cubic-bezier(0.47, 0, 0.75, 0.72), transform 0.15s linear, opacity 0.1s 0.35s linear;
}

/* ============= 1️⃣  General Styles ============= */
.zlider-contact {
  transition: bottom 0.7s ease;
  bottom: -160px;
  z-index: 100;
  left: 48%;
  transform: translateX(-50%);
  width: 100%;
  /* 1.1. Responsive Adjustments */
  /* ============= 2️⃣  Contact Email ============= */
  /* ============= 3️⃣  Contact Phone ============= */
  /* ============= 4️⃣  Paragraph Styling ============= */
}
@media only screen and (min-width: 769px) {
  .zlider-contact {
    left: 50%;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.zlider-contact .contact-email {
  width: -moz-fit-content;
  width: fit-content;
}
.zlider-contact .contact-phone {
  width: -moz-fit-content;
  width: fit-content;
  /* 3.1. Link Styles */
}
.zlider-contact .contact-phone a {
  transition: 0.15s;
  line-height: 1;
  /* 3.2. Span and Paragraph Effects on Hover */
}
.zlider-contact .contact-phone a span {
  transition: 0.35s;
}
.zlider-contact .contact-phone a:hover, .zlider-contact .contact-phone a:focus {
  color: var(--color-primary);
}
.zlider-contact .contact-phone a:hover span, .zlider-contact .contact-phone a:focus span {
  color: var(--color-light);
}
.zlider-contact .contact-phone a:hover p, .zlider-contact .contact-phone a:focus p {
  color: var(--color-primary);
}
.zlider-contact p {
  color: var(--color-primary);
}

.slider-pagination {
  width: auto !important;
  position: fixed;
  left: unset !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 99;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
.slider-pagination .swiper-pagination-bullet {
  padding: 20px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
  margin: 0px 0px !important;
  transform: scale(1);
  border: 1px solid transparent;
  transition: background 0.25s ease, transform 0.35s ease, opacity 0.35s ease;
  cursor: pointer;
  z-index: 999;
}
@media only screen and (min-width: 1281px) {
  .slider-pagination .swiper-pagination-bullet {
    padding: 20px;
  }
}
.slider-pagination .swiper-pagination-bullet:last-of-type {
  margin-right: 0px;
}
.slider-pagination .swiper-pagination-bullet::before {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--color-light);
  border-radius: 50%;
  transform: translate(-60%, -60%) scale(1);
  top: 50%;
  left: 50%;
  position: absolute;
  transition: background 0.25s linear, transform 0.45s linear, opacity 0.25s linear;
}
.slider-pagination .swiper-pagination-bullet:after {
  position: absolute;
  content: attr(data-title);
  display: block;
  white-space: nowrap;
  color: var(--color-light);
  font-size: 14px;
  transform: translate(0%, -50%) scale(0.9);
  right: 120%;
  top: 100%;
  opacity: 0;
  transition: top 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.slider-pagination .swiper-pagination-bullet:hover:after {
  top: 50%;
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}
.slider-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1);
  transition: background 0.25s linear, transform 0.45s linear, opacity 0.25s linear;
  position: relative;
}
.slider-pagination .swiper-pagination-bullet-active::before {
  background-color: var(--color-primary);
  transform: translate(-60%, -60%) scale(1.5);
}

.social-bar {
  position: fixed;
  transform: translateY(-50%);
  top: 50%;
  font-size: 26px;
  z-index: 999;
  padding: 30px 0;
  cursor: pointer;
  display: none;
}
@media only screen and (min-width: 769px) {
  .social-bar {
    display: block;
  }
}
.social-bar:hover .social-bar-title {
  transform: scale(0.9);
}
.social-bar:hover .social-bar-title .social-title::before {
  opacity: 0;
  transform: translateY(-100%) scale(0.8);
}
.social-bar:hover .social-bar-title .social-title::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  font-weight: 500;
}
.social-bar:hover .social-links {
  opacity: 1;
  pointer-events: auto;
}
.social-bar:hover .social-links ul li {
  left: calc(100% - 40px);
  opacity: 1;
}
.social-bar .social-bar-title {
  rotate: -180deg;
  top: 0;
  left: 0;
  z-index: 9;
  position: relative;
  white-space: nowrap;
  writing-mode: vertical-lr;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.25s linear;
}
.social-bar .social-bar-title .social-title {
  transition: color 0.35s linear;
}
.social-bar .social-bar-title svg {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  rotate: 180deg;
  fill: none;
}
.social-bar .social-bar-title svg path {
  fill: var(--color-light);
}
.social-bar .social-links {
  width: 80px;
  position: absolute;
  margin-left: 0%;
  transform: translateY(-50%);
  top: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  will-change: transform, opacity;
}
.social-bar .social-links ul li {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 0%;
  opacity: 0.8;
  transition: left 0.35s ease, opacity 0.15s ease;
  line-height: 1;
  padding: 20px;
  will-change: transform, opacity;
  border-radius: 50%;
  z-index: 99;
  margin-bottom: 15px;
}
.social-bar .social-links ul li:nth-child(1) {
  transition-delay: 0s;
}
.social-bar .social-links ul li:nth-child(2) {
  transition-delay: 0.05s;
}
.social-bar .social-links ul li:nth-child(3) {
  transition-delay: 0.1s;
}
.social-bar .social-links ul li:nth-child(4) {
  transition-delay: 0.15s;
}
.social-bar .social-links ul li:nth-child(5) {
  transition-delay: 0.2s;
}
.social-bar .social-links ul li span:after {
  position: absolute;
  content: attr(data-title);
  display: block;
  color: var(--color-light);
  font-size: 14px;
  transform: translate(0%, -50%) scale(0.9);
  left: 120%;
  top: 100%;
  opacity: 0;
  transition: top 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
.social-bar .social-links ul li:hover {
  opacity: 1;
}
.social-bar .social-links ul li:hover span:after {
  top: 50%;
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
}

/* ============= 1️⃣  Slider Footer ============= */
.slider-footer {
  position: absolute;
  bottom: 40px;
  width: 100%;
  height: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  /* ============= 2️⃣  Slider Navigation ============= */
}
@media only screen and (min-width: 1367px) {
  .slider-footer {
    bottom: 60px;
  }
}
.slider-footer .slider-navigation {
  height: 0;
  /* 2.1. Button Styles */
  /* 2.2. Previous & Next Buttons */
  /* 2.3. Previous Button Effects */
  /* 2.4. Next Button Effects */
}
.slider-footer .slider-navigation button {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  position: relative;
  cursor: pointer;
  padding: 0;
  font-weight: 300;
}
.slider-footer .slider-navigation .swiper-prev,
.slider-footer .slider-navigation .swiper-next {
  position: relative;
}
.slider-footer .slider-navigation .swiper-prev svg,
.slider-footer .slider-navigation .swiper-next svg {
  fill: none;
  width: 100%;
  height: 100%;
}
.slider-footer .slider-navigation .swiper-prev .svg-arrow,
.slider-footer .slider-navigation .swiper-next .svg-arrow {
  width: 50%;
  height: 50%;
  position: absolute;
  transition: left 0.35s linear, transform 0.35s linear;
  opacity: 1;
}
.slider-footer .slider-navigation .swiper-prev .svg-arrow .arrow-path,
.slider-footer .slider-navigation .swiper-next .svg-arrow .arrow-path {
  fill: var(--color-light);
}
.slider-footer .slider-navigation .swiper-prev span,
.slider-footer .slider-navigation .swiper-next span {
  position: absolute;
  font-size: 14px;
  font-weight: 300;
  transition: left 0.35s ease, right 0.35s ease;
}
.slider-footer .slider-navigation .prev-button {
  width: 100px;
}
.slider-footer .slider-navigation .prev-button .swiper-prev .svg-arrow {
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
}
.slider-footer .slider-navigation .prev-button .swiper-prev span {
  transform: translate(-50%, -50%);
  top: 50%;
  left: calc(100% + 30px);
}
.slider-footer .slider-navigation .prev-button:hover .svg-arrow {
  left: 65%;
  transform: translate(-50%, -50%);
}
.slider-footer .slider-navigation .prev-button:hover span {
  left: calc(100% + 10px);
}
.slider-footer .slider-navigation .next-button {
  width: 100px;
}
.slider-footer .slider-navigation .next-button .swiper-next .svg-arrow {
  top: calc(50% + 1px);
  left: 80%;
  transform: translate(-50%, -50%);
}
.slider-footer .slider-navigation .next-button .swiper-next span {
  transform: translate(-50%, -50%);
  top: 50%;
  right: calc(100% + 0px);
}
.slider-footer .slider-navigation .next-button:hover .svg-arrow {
  left: 35%;
  transform: translate(-50%, -50%);
}
.slider-footer .slider-navigation .next-button:hover span {
  right: calc(100% - 20px);
}

.slider-container {
  transition: opacity 0.8s 2s linear;
}

.slider-creative .zlides-images {
  width: 90vw;
  height: 80vh;
}
@media only screen and (min-width: 1281px) {
  .slider-creative .zlides-images {
    width: 85vw;
  }
}
.slider-creative .zlides-images .swiper .swiper-slide,
.slider-creative .zlides-images .swiper swiper-slide,
.slider-creative .zlides-images swiper-container .swiper-slide,
.slider-creative .zlides-images swiper-container swiper-slide {
  background-color: var(--color-black);
  border-radius: 40px;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
.slider-creative .zlides-images .swiper .swiper-slide.swiper-slide-prev .slider-image, .slider-creative .zlides-images .swiper .swiper-slide.swiper-slide-next .slider-image,
.slider-creative .zlides-images .swiper swiper-slide.swiper-slide-prev .slider-image,
.slider-creative .zlides-images .swiper swiper-slide.swiper-slide-next .slider-image,
.slider-creative .zlides-images swiper-container .swiper-slide.swiper-slide-prev .slider-image,
.slider-creative .zlides-images swiper-container .swiper-slide.swiper-slide-next .slider-image,
.slider-creative .zlides-images swiper-container swiper-slide.swiper-slide-prev .slider-image,
.slider-creative .zlides-images swiper-container swiper-slide.swiper-slide-next .slider-image {
  opacity: 0.35;
}
.slider-creative .zlides-images .swiper .swiper-slide .slider-image,
.slider-creative .zlides-images .swiper swiper-slide .slider-image,
.slider-creative .zlides-images swiper-container .swiper-slide .slider-image,
.slider-creative .zlides-images swiper-container swiper-slide .slider-image {
  transition: all 1.5s ease;
}
.slider-creative .zlides-images .swiper .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-next):not(.swiper-slide-active),
.slider-creative .zlides-images .swiper swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-next):not(.swiper-slide-active),
.slider-creative .zlides-images swiper-container .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-next):not(.swiper-slide-active),
.slider-creative .zlides-images swiper-container swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-next):not(.swiper-slide-active) {
  opacity: 0;
}
.slider-creative .zlides-images .swiper .swiper-slide.swiper-slide-active,
.slider-creative .zlides-images .swiper swiper-slide.swiper-slide-active,
.slider-creative .zlides-images swiper-container .swiper-slide.swiper-slide-active,
.slider-creative .zlides-images swiper-container swiper-slide.swiper-slide-active {
  opacity: 1;
}

.slider-padding {
  overflow: hidden;
  position: relative;
}
.slider-padding .zlides-images {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
@media only screen and (min-width: 769px) {
  .slider-padding .zlides-images {
    width: calc(100% - 230px);
    height: calc(100% - 230px);
  }
}

.slider-parallax .zlides-images {
  width: 100vw;
  height: 100vh;
}
.slider-parallax.split .zlides-images {
  height: calc(100vh - 160px);
}
.slider-parallax.split .zlides-images .swiper .swiper-slide,
.slider-parallax.split .zlides-images .swiper swiper-slide,
.slider-parallax.split .zlides-images swiper-container .swiper-slide,
.slider-parallax.split .zlides-images swiper-container swiper-slide {
  border-radius: 40px;
  overflow: hidden;
}
.slider-parallax.split .zlides-images .swiper .swiper-slide .slider-image,
.slider-parallax.split .zlides-images .swiper swiper-slide .slider-image,
.slider-parallax.split .zlides-images swiper-container .swiper-slide .slider-image,
.slider-parallax.split .zlides-images swiper-container swiper-slide .slider-image {
  transition: transform 0.8s linear;
  border-radius: 40px;
}
.slider-parallax.split .zlides-images .swiper .swiper-slide .slider-image::after,
.slider-parallax.split .zlides-images .swiper swiper-slide .slider-image::after,
.slider-parallax.split .zlides-images swiper-container .swiper-slide .slider-image::after,
.slider-parallax.split .zlides-images swiper-container swiper-slide .slider-image::after {
  transition: opacity 0.8s linear;
  opacity: 0.35;
}

.slider-centered .zlides-texts .swiper-slide .project-data,
.slider-centered .zlides-texts swiper-slide .project-data {
  transition: visibility 0.6s linear, opacity 0.6s linear, transform 0.6s linear;
}
.slider-centered .zlides-texts .swiper-slide .project-data .slider-text .tags,
.slider-centered .zlides-texts swiper-slide .project-data .slider-text .tags {
  transition: visibility 0.6s linear, opacity 0.15s linear, transform 0.3s linear;
  transform: translateY(100%);
}
.slider-centered .zlides-texts .swiper-slide-active {
  opacity: 1;
}
.slider-centered .zlides-texts .swiper-slide-active .project-data {
  opacity: 1;
  visibility: visible;
  transform: rotateX(0deg);
}
.slider-centered .zlides-texts .swiper-slide-active .project-data .slider-text .tags {
  transition: visibility 0.6s linear, opacity 0.6s 0.6s linear, transform 0.6s 0.6s linear;
  transform: translateY(0%);
}
.slider-centered .zlides-images {
  height: calc(100vh - 160px);
}
.slider-centered .zlides-images .swiper .swiper-slide,
.slider-centered .zlides-images .swiper swiper-slide,
.slider-centered .zlides-images swiper-container .swiper-slide,
.slider-centered .zlides-images swiper-container swiper-slide {
  overflow: hidden;
}
.slider-centered .zlides-images .swiper .swiper-slide .slider-image,
.slider-centered .zlides-images .swiper swiper-slide .slider-image,
.slider-centered .zlides-images swiper-container .swiper-slide .slider-image,
.slider-centered .zlides-images swiper-container swiper-slide .slider-image {
  border-radius: 40px;
  overflow: hidden;
}

.three-col .zlides-images .swiper-slide .slider-image {
  transition: transform 0.6s linear, opacity 0.2s linear;
  transform: scale(1.2);
}
.three-col .zlides-images .swiper-slide-active .slider-image {
  transform: scale(1);
}
.three-col .zlides-images .swiper-slide-active .slider-image::after {
  opacity: 0.2;
}