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

  Trexa – AI Agency & Technology Figma Template
  Author: themewolfs 
  Description: Trexa Ai agency is a cutting-edge Figma template built for AI-driven businesses and technology companies. With its clean, modern design, it’s ideal for AI agencies, tech consultants, data science specialists, machine learning startups, AI developers, and any organization working in the world of artificial intelligence and advanced technologies.
  Developer: Masirul Islam & Rana Ahmed
  Design Source: https://themeforest.net/user/themewolfs
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************
/* variable css */
/* typography css */
/* animation css */
/* common css */
/* theme css */
/* preloader css */
/* scroll css */
/* button css */
/* menu css */
/* modal css */
/* cursor css */
/* header css */
/* footer css */
/* === Colors variable scss (index 01) === */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Teko:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Big+Shoulders:opsz,wght@10..72,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
:root {
  --white: #fff;
  --primary: #ff6b45;
  --black: #121212;
  --section-bg: #181818;
  --body-text: #575757;
  --bg: #f5f5f5;
  --icon-color: #878787;
  --star: #ffb422;
  --bg-2: #0e0e0e;
}

/* === Responsive variable scss (index 02) === */
/* === For Box Layout scss (index 03) === */
/* === Responsive container scss (index 04) === */
/* === heading scss (index 01) === */
/* === dark scss (index 01) === */
/* === bg primary  scss (index 01) === */
/* === Transition multiple scss (index 01) === */
/* === Transform scss (index 01) === */
/* === Flexbox scss (index 01) === */
/* === Font Family scss (index 01) === */
/* === MangoGrotesque scss (index 02) === */
@font-face {
  font-family: "MangoGrotesque";
  src: url("../fonts/MangoGrotesque-ExtraBold.ttf");
  font-weight: 800;
}
@font-face {
  font-family: "MangoGrotesque";
  src: url("../fonts/MangoGrotesque-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "MangoGrotesque";
  src: url("../fonts/MangoGrotesque-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "MangoGrotesque";
  src: url("../fonts/MangoGrotesque-Regular.ttf");
  font-weight: 400;
}
/* home 1 font */
/* home 2 font */
@font-face {
  font-family: "Mona Sans Condensed";
  src: url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.eot");
  src: url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.woff") format("woff"), url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/22c1859c45dc03fec30c7f5266917e56.svg#Mona Sans Condensed") format("svg");
}
:root {
  --font_teko: "Teko", sans-serif;
  --font_mulish: "Mulish", sans-serif;
  --font_instrument: "Instrument Sans", sans-serif;
  --font_mango: "MangoGrotesque";
  --font_plus-jaka: "Plus Jakarta Sans", sans-serif;
  --font_mona-sans-cond: "Mona Sans Condensed";
  --font_awesome: "Font Awesome 6 Pro";
}

/* === Defalut Style scss (index 03) === */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font_kanit);
  line-height: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--body-text);
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  color: var(--primary);
  line-height: 1.22;
  font-family: var(--font_instr);
  font-weight: 500;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  transition: all 0.3s;
  color: inherit;
}
a:hover {
  color: var(--primary);
}

button {
  background-color: transparent;
  border: 0;
}

p {
  padding: 0;
  margin: 0;
}

strong {
  font-weight: 500;
}

video,
iframe,
img {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
}

.medium {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.pb {
  padding-bottom: 48px;
}
@media (max-width: 575px) {
  .pb {
    padding-bottom: 18px;
  }
}

.p-rel {
  position: relative;
}

.rr-ov-hidden {
  overflow: hidden;
}

main {
  overflow: hidden;
}

/* === Gutter scss (index 03) === */
@media only screen and (max-width: 767px) {
  .g-0 {
    padding-right: 15px;
    padding-left: 15px;
  }
  .row.g-0 {
    padding-right: 0;
    padding-left: 0;
  }
  br {
    display: none;
  }
}
h1 {
  font-size: 120px;
  line-height: 128px;
}
@media only screen and (max-width: 1199px) {
  h1 {
    font-size: 65px;
    line-height: 75px;
  }
}
@media only screen and (max-width: 991px) {
  h1 {
    font-size: 60px;
    line-height: 75px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  h1 {
    font-size: 55px;
    line-height: 65px;
  }
}

h2 {
  font-size: 100px;
  line-height: 108px;
}
@media only screen and (max-width: 1919px) {
  h2 {
    font-size: 75px;
    line-height: 85px;
  }
}
@media only screen and (max-width: 1399px) {
  h2 {
    font-size: 65px;
    line-height: 75px;
  }
}
@media only screen and (max-width: 1199px) {
  h2 {
    font-size: 55px;
    line-height: 65px;
  }
}
@media only screen and (max-width: 991px) {
  h2 {
    font-size: 48px;
    line-height: 55px;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 40px;
    line-height: 55px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 32px;
    line-height: 45px;
  }
}

h3 {
  font-size: 72px;
}
@media only screen and (max-width: 991px) {
  h3 {
    font-size: 48px;
    line-height: 55px;
  }
}
@media only screen and (max-width: 767px) {
  h3 {
    font-size: 40px;
    line-height: 55px;
  }
}
@media (max-width: 575px) {
  h3 {
    font-size: 32px;
    line-height: 45px;
  }
}

h4 {
  font-size: 48px;
}

h5 {
  font-size: 40px;
  line-height: 48px;
}
@media (max-width: 575px), only screen and (max-width: 1399px) {
  h5 {
    font-size: 32px;
    line-height: 45px;
  }
}

h6 {
  font-size: 20px;
}

.container {
  padding: 0 15px;
}
@media (min-width: 1800px) {
  .container {
    max-width: 1800px;
    margin: 0 auto;
  }
}

.container-1600 {
  padding: 0 15px;
}
@media (min-width: 1800px) {
  .container-1600 {
    max-width: 1630px;
    margin: 0 auto;
  }
}

.container {
  padding: 0 15px;
}
@media (min-width: 1800px) {
  .container {
    max-width: 1600px;
    margin: 0 auto;
  }
}

.container-1720 {
  padding: 0 15px;
}
@media (min-width: 1800px) {
  .container-1720 {
    max-width: 1720px;
    margin: 0 auto;
  }
}

.container-1800 {
  padding: 0 15px;
}

@media (min-width: 1800px) {
  .container-1800 {
    max-width: 1800px;
    margin: 0 auto;
  }
}
/* animation css */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.infinity {
  animation: rotate 10s linear infinite;
}

/* === Scrollbar scss (index 01) === */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #d6d6d6;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === positioning scss (index 02) === */
.rr-pos-rel {
  position: relative;
}

.rr-pos-abs {
  position: absolute;
}

.rr-ov-hidden {
  overflow: hidden;
}

/* === Container scss (index) === */
.rr-container-1630 {
  max-width: 1630px;
}

/* === Background scss (index 04) === */
.rr-bg-primary {
  background-color: var(--primary);
}

.rr-bg-gray {
  background-color: #f8f9ff;
}

/* === Parallax view scss (index 05) === */
.parallax-view {
  overflow: hidden;
}

/* === ontainer styling with full HD support  scss (index 08) === */
.container {
  --bs-gutter-x: 30px;
}
@media (min-width: 1600px) {
  .container.full-hd {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===Inverted scss (index 09) === */
.text-invert > div {
  background-image: linear-gradient(to right, var(--primary) 50%, #cdc9c6 51%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* ===Side info and offcanvas scss (index 10) === */
.offcanvas-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 900;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.offcanvas-overlay.overlay-open {
  opacity: 0.5;
  visibility: visible;
}

.side-info-close {
  font-size: 20px;
  padding: 0;
  transition: all 0.3s linear;
  background-color: transparent;
  color: var(--black);
  width: 40px;
  height: 40px;
  border: 1px solid var(--black);
  border-radius: 50%;
  line-height: 38px;
}
.dark .side-info-close {
  border-color: var(--white);
  color: var(--white);
}
.side-info-close:hover {
  transform: rotate(90deg);
}

.side-info {
  background: var(--white) none repeat scroll 0 0;
  padding: 40px 45px;
  position: fixed;
  right: 0;
  top: 0;
  width: 500px;
  height: 100%;
  transform: translateX(calc(100% + 80px));
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 9999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.dark .side-info {
  background-color: #1f1f1f;
}
@media only screen and (max-width: 1199px) {
  .side-info {
    width: 460px;
  }
}
@media (max-width: 575px) {
  .side-info {
    width: 280px;
    padding: 30px 20px;
  }
}
.side-info ::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}
.side-info.info-open {
  opacity: 1;
  transform: translateX(0);
  /* Show side info */
}

/* === Offset header scss (index 11) === */
.offset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.offset-logo {
  width: 95px;
}
@media (max-width: 575px) {
  .offset-logo {
    width: 95px;
  }
}
.offset-logo img {
  width: 100%;
}
.offset-button {
  margin-top: 40px;
}
@media (min-width: 576px) {
  .offset-button {
    display: none;
  }
}

/* === Offset widget box scss (index 12) === */
.offset-widget-box {
  margin-top: 40px;
}
.offset-widget-box .title {
  font-size: 24px;
  line-height: 1.33;
  margin-bottom: 15px;
  color: var(--black);
}
@media only screen and (max-width: 1919px) {
  .offset-widget-box .title {
    margin-bottom: 22px;
  }
}
.offset-widget-box .contact-meta > *:not(:first-child) {
  margin-top: 16px;
}
.offset-widget-box .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.offset-widget-box .contact-item span {
  color: var(--black);
  font-weight: 600;
  font-family: var(--font_instrument);
}
.offset-widget-box .contact-item span a:hover {
  color: var(--primary);
}
.offset-widget-box .contact-item .icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  border: 1px solid var(--black);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--black);
}

/* ===Mobile menu customization scss (index 13) === */
.mobile-menu {
  margin-top: 40px;
}
.mobile-menu.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mobile-menu.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--black);
}
.mobile-menu.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.mobile-menu.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: #999999;
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.mobile-menu.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 0px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--black);
  text-transform: capitalize;
  border-top: 1px solid var(--black);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
  opacity: 1;
  font-family: var(--font_instrument);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}
.mobile-menu.mean-container .mean-nav ul li a:hover {
  color: var(--primary);
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand {
  width: 100%;
  height: 48px;
  justify-content: end;
  font-weight: 300;
  border: none !important;
  background-color: transparent;
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}
.mobile-menu.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black);
}
.mobile-menu.mean-container .mean-nav ul li li a {
  font-size: 16px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 15px;
}
.mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}
@media only screen and (max-width: 991px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.mobile-menu.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black);
}
.mobile-menu.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}
.mobile-menu.mean-container .mean-bar {
  padding-bottom: 30px;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}
.mobile-menu.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}
.mobile-menu.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mb-minus-30 {
  margin-bottom: -30px;
}

/* === inverted text scss (index 15) === */
.text-invert > div {
  background-image: linear-gradient(to right, var(--primary) 50%, rgba(17, 17, 17, 0.3) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.section-spacing {
  padding-bottom: 120px;
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-spacing {
    padding-bottom: 90px;
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-spacing {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-spacing {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

.section-pt {
  padding-top: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-pt {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-pt {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-pt {
    padding-top: 60px;
  }
}

.section-pb {
  padding-bottom: 120px;
}
@media only screen and (max-width: 1919px) {
  .section-pb {
    padding-bottom: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .section-pb {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .section-pb {
    padding-bottom: 60px;
  }
}

.nice-select:after {
  display: none !important;
}

/* Light mode background */
.switcher-button {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: background 0.4s ease;
  z-index: 100;
  border: 1px solid var(--black);
  overflow: hidden;
}

.switcher-button.light-mode {
  background: #fff;
}

.switcher-button.dark-mode {
  background: #000;
}

.switcher-button-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.switcher-button-inner i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.switcher-button-inner i.icon-light {
  color: var(--primary);
}
.switcher-button-inner i.icon-dark {
  transform: translate(-50%, 100%);
  opacity: 0;
  color: #fff;
}

body.dark .switcher-button-inner i.icon-light {
  transform: translate(-50%, 100%);
  opacity: 0;
}
body.dark .switcher-button-inner i.icon-dark {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.br-24 {
  border-radius: 24px;
}

/* === theme scss (index 01) === */
html {
  --container-max-widths: 1320px;
}
@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px;
  }
}
@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px;
  }
}
@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px;
  }
}
@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px;
  }
}

/* === fonts Famaly scss (index 02) === */
.font-mango {
  font-family: var(--font_mango);
}

.font-display {
  font-family: var(--font_display);
}

.font-bdo-grotesk {
  font-family: var(--font_bdo-grotesk);
}

.font-mona-sans {
  font-family: var(--font_mona-sans);
}

/* === fonts weight scss (index 02) === */
.fw-800 {
  font-weight: 800;
}

.fw-700 {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fw-500 {
  font-weight: 500;
}

.fw-400 {
  font-weight: 400;
}

/* === Color scss (index 02) === */
.color-white {
  color: var(--white);
}
.color-black {
  color: var(--black);
}
.color-primary {
  color: var(--primary);
}
.color-secondary {
  color: var(--secondary);
}

/* === BG Color scss (index 02) === */
.theme-bg-white {
  background-color: var(--white);
}
.theme-bg-black {
  background-color: var(--black);
}
.dark .theme-bg-black {
  background-color: #171717;
}
.theme-bg-primary {
  background-color: var(--primary);
}
.theme-bg-secondary {
  background-color: var(--secondary);
}
.theme-bg-transparent {
  background-color: transparent;
}
.theme-bg-theme {
  background-color: var(--theme);
}

/* === Z-index scss (index 03) === */
.zi-1 {
  z-index: 1;
}
.zi-2 {
  z-index: 2;
}
.zi-0 {
  z-index: 0;
}
.zi--1 {
  z-index: -1;
}

/* === Text Border scss (index 04) === */
.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

.vertically-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === Text Indent scss (index 05) === */
.text-indent-40 {
  text-indent: 40px;
}
.text-indent-50 {
  text-indent: 50px;
}

header {
  margin-bottom: -1px;
  z-index: 100;
}

section {
  margin-bottom: -1px;
}

.mb--1 {
  margin-bottom: -1px;
}

.dir-rtl {
  direction: rtl;
}

.show-light {
  display: inline-block;
}
.dark .show-light {
  display: none;
}

.show-dark {
  display: none;
}
.dark .show-dark {
  display: inline-block;
}

.line-divider-sm {
  height: 0.5px;
  background-color: var(--black-9);
}

/* === preloader scss (index 02) === */
.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--action);
  z-index: 99999999999999;
}

.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 110vh;
  fill: #000;
}

.loader-wrap .loader-wrap-heading .load-text {
  font-size: 100px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--white);
  z-index: 20;
}
@media only screen and (max-width: 767px) {
  .loader-wrap .loader-wrap-heading .load-text {
    font-size: 50px;
  }
}

.load-text span {
  -webkit-animation: loading 1s infinite alternate;
  animation: loading 1s infinite alternate;
}

.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* === scroll scss (index 01) === */
.scroll__down {
  display: flex;
  gap: 20px;
  align-items: center;
}
.scroll__down p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--white);
}
.scroll__down span {
  width: 66px;
  height: 106px;
  border: 1px solid var(--black-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 89px;
}
.scroll__down span i {
  color: var(--white);
}
.scroll__down-wrapper {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 1399px) {
  .scroll__down-wrapper {
    height: 380px;
  }
}
@media only screen and (max-width: 1199px) {
  .scroll__down-wrapper {
    height: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .scroll__down-wrapper {
    height: auto;
    padding: 40px 0;
  }
}
.scroll-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 0px;
  z-index: 9999;
  background: var(--white);
  border-radius: 100px;
  mix-blend-mode: exclusion;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.scroll-top.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

.go-top-writer {
  width: 105px;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  background-image: url(../imgs/writer/go-top.webp);
  background-position: right center;
  background-repeat: no-repeat;
  right: 16%;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 0.5s;
}
.go-top-writer:hover {
  color: var(--primary);
}
.go-top-writer.showed {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .go-top-writer br {
    display: block;
  }
}

/* === progress-wrap scss (index 01) === */
.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100px);
  transition: all 300ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  mix-blend-mode: exclusion;
  background-color: var(--black);
}

.progress-wrap::after {
  position: absolute;
  content: "\f062";
  font: var(--fa-font-solid);
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: var(--primary);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
  border-radius: 50px;
}
.dark .progress-wrap::after {
  color: var(--black);
}

.progress-wrap svg path {
  fill: var(--black-6);
}

.progress-wrap svg.progress-circle path {
  fill: var(--white);
  stroke: transparent;
  stroke-width: 5;
  box-sizing: border-box;
  transition: all 200ms linear;
}

/* === primary btn scss (index 01) === */
.rr-btn-primary {
  font-size: 16px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
}
.rr-btn-primary .text {
  padding: 16px 43px;
  border-radius: 500px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: var(--white);
  background: var(--primary);
  transition: color 0.4s ease;
  font-family: var(--font_instrument);
  font-weight: 600;
  text-transform: capitalize;
}
.rr-btn-primary .text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  border-radius: 500px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}
.rr-btn-primary .icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: var(--black);
  background: var(--white);
  transition: color 0.4s ease;
}
.rr-btn-primary .icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  border-radius: 500px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}
.rr-btn-primary:hover .text {
  color: var(--black);
}
.rr-btn-primary:hover .text::before {
  transform: scaleX(1);
}
.rr-btn-primary:hover .icon {
  color: var(--white);
}
.rr-btn-primary:hover .icon::before {
  transform: scaleX(1);
}
.rr-btn-primary-transparent .text {
  background-color: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}
.rr-btn-primary-transparent .text::before {
  content: "";
  background: var(--primary);
}
.rr-btn-primary-transparent .icon {
  background-color: var(--primary);
}
.rr-btn-primary-transparent .icon i,
.rr-btn-primary-transparent .icon svg {
  color: var(--white);
}
.rr-btn-primary-transparent .icon::before {
  content: "";
  background: var(--white);
}
.rr-btn-primary-transparent:hover .text {
  color: var(--white);
}
.rr-btn-primary-transparent:hover .text::before {
  transform: scaleX(1);
}
.rr-btn-primary-transparent:hover .icon i,
.rr-btn-primary-transparent:hover .icon svg {
  color: var(--black);
}
.rr-btn-primary-transparent:hover .icon::before {
  transform: scaleX(1);
}

.btn-grp {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-bottom: 84px;
}

/* === menu scss (index 01) === */
.main-menu.menu-dark > ul > li > a {
  color: var(--black);
}
.main-menu.menu-light > ul > li > a {
  color: var(--white);
}
.main-menu > ul {
  display: flex;
}
.main-menu > ul > li:first-child > a {
  padding-left: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-menu > ul > li:last-child > a {
  padding-right: 0;
}
.main-menu > ul > li:hover > a {
  color: var(--primary);
}
.main-menu > ul > li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 0;
}
.main-menu > ul > li:hover > ul.dp-menu li:hover > ul {
  opacity: 1;
  pointer-events: all;
  inset-inline-start: 100%;
}
.main-menu li {
  position: relative;
  list-style: none;
}
.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--white);
  padding: 38px 15px;
  font-family: var(--font_mango);
  text-transform: uppercase;
}
.main-menu ul.dp-menu {
  background-color: #232529;
  padding: 18px 0px;
  width: 250px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu.column-2 {
  column-count: 2;
  width: 480px;
  column-gap: 0;
}
.main-menu ul.dp-menu ul {
  background: var(--black);
  padding: 18px 0px;
  width: 300px;
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 0;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}
.main-menu ul.dp-menu li:hover > a {
  color: var(--white);
  background-color: transparent;
}
.main-menu ul.dp-menu li:hover > ul {
  opacity: 1;
  transform: none !important;
  pointer-events: all;
}
.main-menu ul.dp-menu li a {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  padding: 10px 0;
  font-family: "Big Shoulders";
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}
.main-menu ul.dp-menu li a:hover {
  letter-spacing: 0.5px;
}
.main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}
.main-menu .has-mega-menu {
  position: static;
}
.main-menu li.menu-item-has-children > a:after {
  content: "\f0d7";
  font-family: var(--font_awesome);
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}
.main-menu .mega-menu {
  background-color: var(--black);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 50px;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-menu {
    column-gap: 30px;
  }
}
.main-menu .mega-menu li:has(ul) > a:after {
  content: "";
}
.main-menu .mega-menu li a {
  font-size: 24px;
  font-weight: 500;
  color: #999999;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border-radius: 8px;
  overflow: hidden;
}
.main-menu .mega-menu li a:hover {
  color: var(--white);
  background: #2c2c2f;
}
.main-menu .mega-menu .title {
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  border-bottom: 1px solid #333337;
  padding-bottom: 20px;
  margin-bottom: 20px;
  pointer-events: none;
  border-radius: 0;
}
.main-menu .span-first-item ul li:first-child {
  grid-column: 1/-1;
  column-span: all;
}

/* === offcanvas scss (index 02) === */
.offcanvas__menu-wrapper.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}
.offcanvas__menu-wrapper.mean-container .mean-nav .new {
  font-size: 10px;
  font-weight: 600;
  background: #ffa38e;
  color: var(--black);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 15px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width: 54px;
  height: 54px;
  justify-content: center;
  font-weight: 300;
  border: none !important;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height: 50px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--secondary);
  opacity: 1;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size: 20px;
  text-transform: capitalize;
  border-top: none !important;
  padding: 12px 0;
  padding-inline-start: 30px;
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 18px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height: 58px;
}
@media only screen and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 22px;
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left: 40px;
}
.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding: 0;
  background: none;
  max-height: auto;
  overflow-y: scroll;
}
.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
  width: 0;
}
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display: none !important;
}

.header-bg {
  width: 100%;
  padding-top: 50px;
  position: relative;
  object-fit: cover;
  padding-bottom: 50px;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .header-bg {
    padding-top: 70px !important;
  }
}
@media (max-width: 575px) {
  .header-bg {
    padding-top: 43px !important;
  }
}

.breadcrumb {
  margin: 0;
}
.breadcrumb__inner {
  width: 100%;
  padding-top: 200px;
  position: relative;
  object-fit: cover;
  padding-bottom: 50px;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .breadcrumb__inner {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .breadcrumb__inner {
    padding-top: 170px;
  }
}
@media (max-width: 575px) {
  .breadcrumb__inner {
    padding-top: 115px;
  }
}
.breadcrumb__content {
  z-index: 2;
  text-align: center;
  position: relative;
}
.breadcrumb__content ul {
  gap: 30px;
  display: flex;
  list-style: none;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center;
}
.breadcrumb__content ul li {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  position: relative;
  color: var(--secondary);
  text-transform: uppercase;
  font-family: var(--font_mango);
}
.breadcrumb__content ul li:not(:last-child)::before {
  top: 50%;
  right: -20px;
  content: "//";
  position: absolute;
  transform: translateY(-50%);
  color: var(--white);
}
.breadcrumb__content ul li a {
  gap: 12px;
  display: flex;
  color: var(--white);
}
.breadcrumb__content ul li a:hover {
  color: var(--action);
}
.breadcrumb__content .title {
  font-weight: 700;
  font-size: 200px;
  line-height: 208px;
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--font_mango);
}
@media only screen and (max-width: 1399px) {
  .breadcrumb__content .title {
    font-size: 150px;
    line-height: 150px;
  }
}
@media only screen and (max-width: 1199px) {
  .breadcrumb__content .title {
    font-size: 120px;
    line-height: 120px;
  }
}
@media only screen and (max-width: 991px) {
  .breadcrumb__content .title {
    font-size: 80px;
    line-height: 80px;
  }
}
@media (max-width: 575px) {
  .breadcrumb__content .title {
    font-size: 40px;
    line-height: 50px;
  }
}
.breadcrumb-2 .breadcrumb__inner {
  padding-bottom: 268px;
}
@media only screen and (max-width: 767px) {
  .breadcrumb-2 .breadcrumb__inner {
    padding-bottom: 180px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-2 .breadcrumb__inner {
    padding-bottom: 60px;
  }
}

/* === header scss (index 01) === */
.header-area {
  position: absolute;
  width: 100%;
  z-index: 99;
}
.header-area__inner {
  gap: 30px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: transparent;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .header-area__inner {
    margin-top: 30px;
  }
}
.header-area .header__logo {
  display: flex;
  align-items: center;
  gap: 124px;
}
.header-area .header-right {
  gap: 10px;
  display: flex;
  align-items: center;
}
@media (max-width: 575px) {
  .header-area .header-right {
    display: none;
  }
}
.header-area .sticky,
.header-area .transformed {
  background-color: #ffffff;
}
.header-area .header__navicon {
  margin-right: auto;
}
.header-area .header__navicon i {
  font-size: 22px;
  color: var(--white);
}
.header-area-2 .main-menu ul.dp-menu li:hover > a {
  color: var(--green);
}
.header-area-2 .main-menu ul.dp-menu li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  font-family: var(--font_teko);
}
.header-area-2 .main-menu > ul > li:hover > a {
  color: var(--green);
}
.header-area-2 .main-menu li a {
  font-size: 16px;
  font-weight: 600;
  padding: 42px 14px;
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--font_teko);
}
@media only screen and (max-width: 1399px) {
  .header-area-2 .main-menu li a {
    padding: 29px 10px;
  }
}
.header-area-2 .main-menu li a:hover {
  color: var(--green);
}
.header-area-2 .header-right {
  display: block;
}
.header-area-2 .header__navicon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--white);
}
.header-area-2 .header__navicon .bar-icon span {
  background: var(--primary);
}
.header-area-3 .header-main {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding: 21px 0px;
}
.header-area-3 .mail {
  color: var(--white);
  font-family: var(--font_display);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.5px;
}
@media only screen and (max-width: 991px) {
  .header-area-3 .mail {
    display: none;
  }
}
.header-area-3 .mail a {
  font-weight: 600;
}
.header-area-3 .header__navicon {
  width: 122px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(21px);
}
.header-area-3 .header__navicon .side-toggle {
  gap: 8px;
  display: flex;
  align-items: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  font-family: var(--font_display);
  letter-spacing: 0.438px;
  text-transform: uppercase;
}
.header-area-3 .header__navicon .bar-icon span {
  background: #fff6f6;
}

.header-area-6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.header-area-6__inner {
  gap: 30px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  background: transparent;
  justify-content: space-between;
  padding: 0 100px;
}
@media only screen and (max-width: 1919px) {
  .header-area-6__inner {
    padding: 0 15px;
  }
}
.header-area-6 .header__logo {
  display: flex;
  align-items: center;
  gap: 124px;
}
.header-area-6 .header-right {
  gap: 10px;
  display: flex;
  align-items: center;
}
.header-area-6 .sticky,
.header-area-6 .transformed {
  background-color: #ffffff;
}
.header-area-6 .header__navicon {
  margin-right: auto;
}
.header-area-6 .header__navicon .side-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-area-6 .header__navicon .side-toggle h2 {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  font-family: var(--font_kanit);
}
.header-area-6 .header__navicon i {
  font-size: 22px;
  color: var(--white);
}

/* === Icon draw scss (index 01) === */
.bar-icon {
  width: 28px;
  height: 18px;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  transition: color 0.2s ease-out;
}
.bar-icon span {
  width: 100%;
  height: 2px;
  display: inline-block;
  background: var(--white);
  transition: color 0.2s ease-out;
}
.bar-icon span:nth-child(1) {
  margin-left: 11px;
}
.bar-icon span:nth-child(2) {
  margin-left: 0px;
}
.bar-icon span:nth-child(3) {
  margin-left: -11px;
}
.bar-icon:hover span {
  animation: qode-draw 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.bar-icon:hover span:nth-child(2) {
  margin-left: 0px;
  animation-delay: 0.1s;
}
.bar-icon:hover span:nth-child(3) {
  animation-delay: 0.2s;
}
.bar-icon.is-black span {
  background: var(--rr-common-black);
}
.bar-icon.is-white span {
  background: var(--rr-common-white);
}

/* === Icon draw Animate scss (index 01) === */
@keyframes qode-draw {
  0%, 100% {
    -webkit-clip-path: inset(-2px 0);
    clip-path: inset(-2px 0);
  }
  42% {
    -webkit-clip-path: inset(-2px 0 -2px 100%);
    clip-path: inset(-2px 0 -2px 100%);
  }
  43% {
    -webkit-clip-path: inset(-2px 100% -2px 0);
    clip-path: inset(-2px 100% -2px 0);
  }
}
/* === footer scss (index 01) === */
.footer__inner {
  padding-top: 120px;
  padding-bottom: 225px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .footer__inner {
    padding-top: 80px;
  }
}
@media (max-width: 575px) {
  .footer__inner {
    padding-bottom: 100px;
  }
}
.footer__inner .logo {
  bottom: 44px;
  position: absolute;
  text-align: center;
}
@media (max-width: 575px) {
  .footer__inner .logo {
    bottom: 20px;
  }
}
.footer__inner .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer .footer-widget__wrapper {
  gap: 40px;
  display: grid;
  padding: 0 40px;
  border-radius: 24px;
  backdrop-filter: blur(24px);
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(115, 115, 115, 0.24);
}
@media only screen and (max-width: 1919px) {
  .footer .footer-widget__wrapper {
    gap: 20px;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 991px) {
  .footer .footer-widget__wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .footer .footer-widget__wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.footer .footer-widget__box {
  padding: 40px 0 35px;
}
.footer .footer-widget__box:not(:last-child) {
  border-right: 1px solid rgba(115, 115, 115, 0.24);
  padding-right: 40px;
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__box:not(:last-child) {
    padding-right: 20px;
  }
}
@media (max-width: 575px) {
  .footer .footer-widget__box:not(:last-child) {
    border: none;
    padding: 40px 0 0px;
  }
}
.footer .footer-widget__box .title {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--white);
  font-family: var(--font_kanit);
}
.footer .footer-widget__box .links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: 140px;
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__box .links {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .footer .footer-widget__box .links {
    margin-top: 30px;
  }
}
.footer .footer-widget__box .links li a {
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  color: var(--white);
  font-family: var(--font_teko);
}
@media only screen and (max-width: 1399px) {
  .footer .footer-widget__box .links li a {
    font-size: 30px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__box .links li a {
    font-size: 25px;
    line-height: 25px;
  }
}
.footer .footer-widget__box .links li a:hover {
  color: var(--action);
}
.footer .footer-widget__box .social {
  gap: 16px;
  display: flex;
  margin-top: 16px;
  list-style: none;
  align-items: center;
}
.footer .footer-widget__box .social li a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  color: var(--white);
  border-radius: 500px;
  justify-content: center;
  backdrop-filter: blur(24px);
  background: rgba(255, 255, 255, 0.08);
}
.footer .footer-widget__box .social li a:hover {
  background: var(--green);
  color: var(--primry);
}
.footer .footer-widget__box p {
  font-size: 40px;
  font-weight: 500;
  margin-top: 84px;
  line-height: 48px;
  color: var(--white);
  font-family: var(--font_teko);
}
@media only screen and (max-width: 1399px) {
  .footer .footer-widget__box p {
    font-size: 30px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__box p {
    font-size: 25px;
    line-height: 25px;
    margin-top: 25px;
  }
}
.footer .footer-widget__box p a {
  color: var(--green);
}
.footer .footer-widget__info {
  margin-top: 140px;
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__info {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .footer .footer-widget__info {
    margin-top: 30px;
  }
}
.footer .footer-widget__info a {
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  color: var(--white);
  font-family: var(--font_teko);
}
@media only screen and (max-width: 1399px) {
  .footer .footer-widget__info a {
    font-size: 30px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer .footer-widget__info a {
    font-size: 25px;
    line-height: 25px;
  }
}
.footer .footer-widget__info a:hover {
  color: var(--action);
}

.footer-2__inner {
  background: var(--primary);
  padding: 120px 0px 90px;
  overflow: hidden;
}
@media only screen and (max-width: 1199px) {
  .footer-2__inner {
    padding: 80px 0px 80px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-2__inner {
    padding: 60px 0px 60px;
  }
}
.footer-2 .footer-2-widget__wrapper {
  display: grid;
  gap: 50px;
  grid-template-columns: 550px 424px 1fr;
}
@media only screen and (max-width: 1399px) {
  .footer-2 .footer-2-widget__wrapper {
    gap: 30px;
    grid-template-columns: 351px 420px 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-2 .footer-2-widget__wrapper {
    gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .footer-2 .footer-2-widget__wrapper {
    gap: 30px;
    grid-template-columns: 1fr;
  }
}
.footer-2 .footer-2-widget__content {
  position: relative;
  padding-right: 40px;
}
@media only screen and (max-width: 1399px) {
  .footer-2 .footer-2-widget__content {
    padding-right: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget__content {
    padding-right: 0;
  }
}
.footer-2 .footer-2-widget__content::before {
  content: "";
  top: -300px;
  height: 10000px;
  width: 1px;
  right: 0;
  position: absolute;
  background: currentColor;
}
@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget__content::before {
    display: none;
  }
}
.footer-2 .footer-2-widget__content .title {
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  color: var(--white);
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-family: var(--font_mango);
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__content .title {
    font-size: 40px;
    line-height: 45px;
  }
}
.footer-2 .footer-2-widget__content .description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.75px;
  margin-bottom: 32px;
  font-family: var(--font_instrument);
  color: rgba(255, 255, 255, 0.7);
}
.footer-2 .footer-2-widget__content .coppyright {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 500px;
  padding: 6px 24px;
  display: inline-block;
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__content .coppyright {
    padding: 6px 10px;
  }
}
.footer-2 .footer-2-widget__content .coppyright-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  font-family: var(--font_instrument);
  color: rgba(255, 255, 255, 0.7);
}
.footer-2 .footer-2-widget__content .coppyright-text a {
  font-weight: 600;
  color: var(--secondary);
}
.footer-2 .footer-2-widget__info .number {
  gap: 17px;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  align-items: center;
  position: relative;
  margin-bottom: 18px;
  display: inline-flex;
  letter-spacing: 0.75px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font_instrument);
}
@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget__info .number {
    font-size: 30px;
    line-height: 35px;
  }
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__info .number {
    font-size: 25px;
    line-height: 20px;
  }
}
.footer-2 .footer-2-widget__info .number::before {
  content: "";
  bottom: 0;
  height: 1px;
  width: calc(100% - 40px);
  position: absolute;
  background: currentColor;
}
.footer-2 .footer-2-widget__info .number i {
  rotate: -45deg;
  font-size: 20px;
}
.footer-2 .footer-2-widget__info .number:hover {
  color: var(--action);
}
.footer-2 .footer-2-widget__info .mail {
  gap: 17px;
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  position: relative;
  margin-bottom: 38px;
  align-items: center;
  display: inline-flex;
  letter-spacing: 0.75px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font_instrument);
}
@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget__info .mail {
    font-size: 30px;
    line-height: 35px;
  }
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__info .mail {
    font-size: 25px;
    line-height: 20px;
  }
}
.footer-2 .footer-2-widget__info .mail::before {
  content: "";
  bottom: 0;
  height: 1px;
  width: calc(100% - 40px);
  position: absolute;
  background: currentColor;
}
.footer-2 .footer-2-widget__info .mail i {
  rotate: -45deg;
  font-size: 20px;
}
.footer-2 .footer-2-widget__info .mail:hover {
  color: var(--action);
}
.footer-2 .footer-2-widget__info .social-links {
  gap: 25px;
  display: flex;
  list-style: none;
  align-items: center;
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__info .social-links {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.footer-2 .footer-2-widget__info .social-links li {
  position: relative;
}
.footer-2 .footer-2-widget__info .social-links li:not(:last-child)::before {
  content: "";
  top: 50%;
  right: -16px;
  height: 3px;
  width: 3px;
  position: absolute;
  background: currentColor;
  transform: translateY(-50%);
}
.footer-2 .footer-2-widget__info .social-links li a {
  font-size: 18px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.7);
}
.footer-2 .footer-2-widget__info .social-links li a:hover {
  color: var(--action);
}
.footer-2 .footer-2-widget__newsletter .title {
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 32px;
  color: var(--white);
  font-family: var(--font_mango);
}
@media only screen and (max-width: 991px) {
  .footer-2 .footer-2-widget__newsletter .title {
    font-size: 40px;
    line-height: 45px;
  }
}
.footer-2 .footer-2-widget__newsletter .input-grup input {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 500px;
  outline: none;
  border: none;
  color: var(--white);
  width: 327px;
  padding: 22px 24px;
}
@media (max-width: 575px) {
  .footer-2 .footer-2-widget__newsletter .input-grup input {
    width: 300px;
  }
}
.footer-2 .footer-2-widget__newsletter .input-grup button {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  color: var(--white);
  border-radius: 500px;
  padding: 19.5px 36px;
  background: var(--secondary);
  font-family: var(--font_instrument);
}
.footer-2__bottom {
  text-align: center;
  background: var(--secondary);
}

.footer-3__inner {
  padding-top: 110px;
  padding-bottom: 26px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 991px) {
  .footer-3__inner {
    padding-top: 60px;
  }
}
.footer-3__top {
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 991px) {
  .footer-3__top {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.footer-3__top .line {
  width: 604px;
  height: 1px;
  display: block;
  background: #FFFFFF;
  opacity: 0.16;
}
@media only screen and (max-width: 1399px) {
  .footer-3__top .line {
    width: 300px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-3__top .line {
    display: none;
  }
}
.footer-3__top .links {
  gap: 48px;
  display: flex;
  list-style: none;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .footer-3__top .links {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}
.footer-3__top .links li a {
  color: var(--white);
  font-family: var(--font_display);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.footer-3__top .links li a:hover {
  color: var(--green);
}
.footer-3 .footer-3-widget__wrapper {
  padding-bottom: 300px;
  margin-top: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1399px) {
  .footer-3 .footer-3-widget__wrapper {
    padding-bottom: 250px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-3 .footer-3-widget__wrapper {
    padding-bottom: 200px;
    margin-top: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-3 .footer-3-widget__wrapper {
    gap: 20px;
    padding-bottom: 100px;
    flex-direction: column;
    justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer-3 .footer-3-widget__wrapper {
    margin-top: 30px;
    padding-bottom: 60px;
  }
}
.footer-3 .big-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer-3 .socail-media {
  list-style: none;
}
.footer-3 .socail-media li {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font_display);
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (max-width: 991px) {
  .footer-3 .socail-media li {
    text-align: center;
  }
}
@media (max-width: 575px) {
  .footer-3 .socail-media li {
    font-size: 18px;
    line-height: 20px;
  }
}
.footer-3 .socail-media li:not(:last-child) {
  margin-bottom: 20px;
}
@media only screen and (max-width: 991px) {
  .footer-3 .socail-media li:not(:last-child) {
    margin-bottom: 0px;
  }
}
.footer-3 .socail-media li:hover a {
  color: var(--green);
}
.footer-3 .info a {
  color: var(--white);
  text-align: center;
  font-family: var(--font_display);
  font-size: 40px;
  font-weight: 700;
  display: block;
  line-height: 48px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media only screen and (max-width: 1199px) {
  .footer-3 .info a {
    font-size: 35px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-3 .info a {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .footer-3 .info a {
    font-size: 20px;
    line-height: 30px;
  }
}
.footer-3 .info a:hover {
  color: var(--green);
}
.footer-3 .coppyright {
  color: var(--white);
  font-family: var(--font_open-sans);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.footer-3 .coppyright a {
  color: var(--green);
}

.footer-6__inner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 120px;
}
@media only screen and (max-width: 1399px) {
  .footer-6__inner {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-6__inner {
    padding-top: 60px;
  }
}
.footer-6 .footer-6-widget__wrapper {
  display: grid;
  grid-template-columns: 1fr 376px 619px;
  gap: 61px;
}
@media only screen and (max-width: 1919px) {
  .footer-6 .footer-6-widget__wrapper {
    grid-template-columns: 1fr 376px 527px;
  }
}
@media only screen and (max-width: 1399px) {
  .footer-6 .footer-6-widget__wrapper {
    grid-template-columns: 1fr 334px 419px;
    gap: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-6 .footer-6-widget__wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .footer-6 .footer-6-widget__wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
}
.footer-6 .footer-6-widget__box-2 {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 30px 32px;
}
@media only screen and (max-width: 767px) {
  .footer-6 .footer-6-widget__box-2 {
    padding: 20px 15px;
  }
}
.footer-6 .footer-6-widget__box .title {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  font-family: var(--font_kanit);
  margin-bottom: 21px;
}
@media only screen and (max-width: 767px) {
  .footer-6 .footer-6-widget__box .title {
    font-size: 26px;
    line-height: 38px;
  }
}
.footer-6 .footer-6-widget__box .decs {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  opacity: 0.7;
  font-family: var(--font_kanit);
  max-width: 460px;
  margin-top: 20px;
  margin-bottom: 22px;
}
.footer-6 .footer-6-widget__box .location {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: #FFFFFF;
  opacity: 0.88;
  font-family: var(--font_kanit);
}
.footer-6 .footer-6-widget__menu {
  display: grid;
  gap: 8px;
  grid-template-columns: 144px 1fr;
}
@media only screen and (max-width: 767px) {
  .footer-6 .footer-6-widget__menu {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer-6 .footer-6-widget__menu ul li {
  list-style: none;
  margin-bottom: 16px;
}
.footer-6 .footer-6-widget__menu ul li:last-child {
  margin-bottom: 0;
}
.footer-6 .footer-6-widget__menu ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #FFFFFF;
  opacity: 0.7;
  font-family: var(--font_kanit);
}
@media only screen and (max-width: 767px) {
  .footer-6 .footer-6-widget__menu ul li a {
    font-size: 16px;
    line-height: 26px;
  }
}
.footer-6 .footer-6-widget__socail {
  display: flex;
  background: #E11010;
  border-radius: 16px;
  gap: 37px;
  padding: 25px 32px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 1919px) {
  .footer-6 .footer-6-widget__socail {
    gap: 15px;
    padding: 20px 20px;
    flex-wrap: wrap;
  }
}
.footer-6 .footer-6-widget__socail li {
  list-style: none;
  position: relative;
}
.footer-6 .footer-6-widget__socail li::before {
  position: absolute;
  content: "";
  left: -18px;
  bottom: 5px;
  width: 5px;
  height: 5px;
  background: var(--white);
}
@media only screen and (max-width: 1919px) {
  .footer-6 .footer-6-widget__socail li::before {
    display: none;
  }
}
.footer-6 .footer-6-widget__socail li:first-child::before {
  display: none;
}
.footer-6 .footer-6-widget__socail li a {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--white);
  font-family: var(--font_kanit);
}
@media only screen and (max-width: 991px) {
  .footer-6 .footer-6-widget__socail li a {
    font-size: 18px;
    line-height: 18px;
  }
}
.footer-6 .footer-6-widget__working-hours .title {
  margin-bottom: 18px;
}
.footer-6 .footer-6-widget__working-hours ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media only screen and (max-width: 991px) {
  .footer-6 .footer-6-widget__working-hours ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
.footer-6 .footer-6-widget__working-hours ul li {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  opacity: 0.7;
  font-family: var(--font_kanit);
  list-style: none;
}
@media only screen and (max-width: 1919px) {
  .footer-6 .footer-6-widget__working-hours ul li {
    font-size: 15px;
    line-height: 24px;
  }
}
.footer-6__title {
  text-align: center;
  margin-top: 90px;
}
@media only screen and (max-width: 1399px) {
  .footer-6__title {
    margin-top: 60px;
  }
}
.footer-6__title h2 {
  font-weight: 500;
  font-size: 300px;
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--white);
  font-family: var(--font_kanit);
}
@media only screen and (max-width: 1919px) {
  .footer-6__title h2 {
    font-size: 210px;
    line-height: 0.8;
  }
}
@media only screen and (max-width: 1399px) {
  .footer-6__title h2 {
    font-size: 177px;
    line-height: 0.8;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-6__title h2 {
    font-size: 150px;
    line-height: 0.8;
  }
}
@media only screen and (max-width: 991px) {
  .footer-6__title h2 {
    font-size: 115px;
    line-height: 0.8;
  }
}
@media only screen and (max-width: 767px) {
  .footer-6__title h2 {
    font-size: 90px;
    line-height: 0.8;
  }
}
@media (max-width: 575px) {
  .footer-6__title h2 {
    font-size: 45px;
    line-height: 0.8;
  }
}
.footer-6 .coppy-right {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: var(--white);
  font-family: var(--font_kanit);
  text-align: end;
  padding-top: 10px;
  padding-bottom: 30px;
}
.footer-6 .coppy-right a {
  color: #E11010;
}

.section__header {
  margin-bottom: 48px;
}
.section__header h2 {
  color: var(--black);
  font-family: var(--font_mango);
  letter-spacing: 2%;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}
.section__header p {
  font-family: var(--font_instrument);
  line-height: 24px;
  letter-spacing: 2%;
  max-width: 1020px;
  text-align: center;
  margin: 0 auto;
}

.main-sideber .single-sidebar-widget {
  padding: 32px 40px;
  margin-bottom: 30px;
  border-radius: 24px;
  background: #F5F5F5;
}
@media only screen and (max-width: 1199px) {
  .main-sideber .single-sidebar-widget {
    padding: 30px 20px;
  }
}
.main-sideber .single-sidebar-widget .wid-title .title {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  margin-bottom: 20px;
  color: var(--primary);
  font-family: var(--font_mango);
}
@media (max-width: 575px) {
  .main-sideber .single-sidebar-widget .wid-title .title {
    font-size: 30px;
    line-height: 40px;
  }
}
.main-sideber .single-sidebar-widget .search-widget form {
  width: 100%;
  position: relative;
}
.main-sideber .single-sidebar-widget .search-widget form input {
  background-color: var(--white);
  color: #575757;
  font-family: var(--font_instrument);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 20px 20px;
  padding-right: 70px;
  width: 100%;
  border-radius: 500px;
  border: none;
  outline: none;
  color: var(--primary);
}
.main-sideber .single-sidebar-widget .search-widget form button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 18px;
  border-radius: 500px;
  background-color: var(--secondary);
  color: var(--white);
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.main-sideber .single-sidebar-widget .search-widget form button:hover {
  background-color: var(--primary);
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  position: relative;
  transition: all 0.4s ease-in-out;
  color: var(--primary);
  justify-content: space-between;
  font-family: var(--font_instrument);
  padding-bottom: 8px;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li:not(:last-child) {
  margin-bottom: 28px;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(87, 87, 87, 0.16);
  z-index: 0;
  transition: width 0.5s ease;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li a {
  gap: 8px;
  display: flex;
  align-items: center;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li a i {
  rotate: -45deg;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li span {
  transition: all 0.4s ease-in-out;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li:hover::before {
  width: 100%;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li:hover a {
  color: var(--action);
  position: relative;
  z-index: 999;
}
.main-sideber .single-sidebar-widget .news-widget-categories ul li:hover span {
  color: var(--action);
  position: relative;
  z-index: 999;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items:not(:last-child) {
  margin-bottom: 20px;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-thumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 16px;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-content .title {
  color: var(--title-text);
  font-family: var(--font_mango);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-content .title a:hover {
  color: var(--action);
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-content ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li {
  color: #575757;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 24px;
  font-family: var(--font_instrument);
}
.main-sideber .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li i {
  color: var(--secondary);
}
.main-sideber .single-sidebar-widget .tagcloud a {
  display: inline-block;
  padding: 11px 16px;
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
  background: transparent;
  margin-right: 12px;
  overflow: hidden;
  text-transform: capitalize;
  margin-bottom: 12px;
  border-radius: 500px;
  background: var(--white);
  transition: all 0.4s ease-in-out;
  position: relative;
  font-family: var(--font_instrument);
}
@media (max-width: 575px) {
  .main-sideber .single-sidebar-widget .tagcloud a {
    margin-right: 10px;
  }
}
.main-sideber .single-sidebar-widget .tagcloud a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--action);
  z-index: 0;
  transition: width 0.5s ease;
}
.main-sideber .single-sidebar-widget .tagcloud a:last-child {
  margin-right: 0;
}
.main-sideber .single-sidebar-widget .tagcloud a:hover {
  color: var(--white);
  z-index: 999;
  position: relative;
  border-color: transparent;
}
.main-sideber .single-sidebar-widget .tagcloud a:hover::before {
  width: 100%;
  z-index: -1;
}

/* === pages scss (index 01) === */
.banner {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 242px;
  padding-bottom: 376px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .banner {
    padding-top: 190px;
    padding-bottom: 190px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .banner {
    padding-top: 150px;
    padding-bottom: 150px;
  }
}
.banner__content {
  position: relative;
  z-index: 9999999;
}
.banner__content h1 {
  font-family: var(--font_mango);
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 2%;
  max-width: 33ch;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 48px;
  position: relative;
  z-index: 99999;
  font-weight: 600;
  font-style: italic;
}
.banner__feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
}
@media only screen and (max-width: 767px), only screen and (max-width: 991px) {
  .banner__feature {
    gap: 20px;
  }
}
.banner__feature-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  max-width: 175px;
}
@media (max-width: 575px) {
  .banner__feature-wrapper {
    max-width: 130px;
  }
}
.banner__feature-title h6 {
  font-family: var(--font_teko);
  line-height: 22px;
  letter-spacing: 2%;
  color: var(--white);
  max-width: 14ch;
}

.banner__shape-item--style1 {
  position: absolute;
  top: 119px;
  left: 0px;
  z-index: -2;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .banner__shape-item--style1 {
    opacity: 0;
  }
}
.banner__shape-item--style2 {
  position: absolute;
  top: 119px;
  right: 0px;
  z-index: -2;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .banner__shape-item--style2 {
    opacity: 0;
  }
}

/* marque css start */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
  padding-bottom: 100px;
}
@media (max-width: 575px) {
  .marquee {
    padding-bottom: 60px;
  }
}
.marquee__content {
  display: flex;
  animation: scroll 15s linear infinite;
}
.marquee__title {
  display: flex;
  align-items: center;
  font-size: 128px;
  line-height: 136px;
  letter-spacing: 2%;
  text-transform: uppercase;
  color: #0e0e0e;
  font-family: var(--font_mango);
  font-weight: bold;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .marquee__title {
    font-size: 60px;
    line-height: 5px;
  }
}
.marquee__icon-2 {
  width: 100px;
  height: 100px;
  margin-inline: 32px;
  transform: translateY(-30px);
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .marquee__icon-2 {
    width: 60px;
    height: 60px;
    transform: translateY(-5px);
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes moveTopBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
.anim-top-btm {
  display: inline-block;
  animation: moveTopBottom 3s ease-in-out infinite;
}

.project {
  position: relative;
  margin-top: -170px;
  background-color: var(--black);
}
@media only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .project {
    margin-top: -100px;
  }
}
@media only screen and (max-width: 767px) {
  .project {
    margin-top: -100px;
  }
}
@media (max-width: 575px) {
  .project {
    margin-top: -260px;
  }
}
.project__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.project__thumb {
  position: relative;
  z-index: 2;
}
.project__thumb img {
  border-radius: 24px;
}
@media only screen and (max-width: 1919px) {
  .project__thumb img {
    width: 600px;
    height: auto;
  }
}
@media only screen and (max-width: 1399px) {
  .project__thumb img {
    width: 500px;
    height: auto;
  }
}
@media only screen and (max-width: 1199px) {
  .project__thumb img {
    width: 460px;
    height: auto;
  }
}
@media only screen and (max-width: 991px) {
  .project__thumb img {
    width: 340px;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .project__thumb img {
    width: 250px;
    height: auto;
  }
}
@media (max-width: 575px) {
  .project__thumb img {
    width: 100%;
    height: auto;
  }
}

.project--style2 {
  overflow: hidden;
}
.project--style2 .project__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project--style2 .title {
  font-weight: 600;
  color: var(--black);
  letter-spacing: 2%;
  line-height: 48px;
  font-family: var(--font_teko);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.project--style2 .subtitle {
  display: flex;
  align-items: center;
  gap: 15px;
}
.project--style2 .line {
  width: 48px;
  height: 1px;
  background-color: var(--body-text);
}
.project--style2 .dot {
  width: 8px;
  height: 8px;
  background-color: var(--body-text);
  border-radius: 50%;
}
.project--style2 .text {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  font-family: var(--font_instrument);
  color: var(--body-text);
}
@media (max-width: 575px), only screen and (max-width: 991px), only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .project--style2 .text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.project--style2 .project__item {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.project--style2 .project__item:hover .project__item-btn a {
  opacity: 1;
}
.project--style2 .project__item:hover .project__item-thumb .blur {
  filter: blur(5px);
}
.project--style2 .project__item-btn a {
  background-color: var(--white);
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  font-family: var(--font_teko);
  padding-block: 10px 8px;
  padding-inline: 24px;
  border-radius: 99px;
  color: var(--black);
  opacity: 0;
}
.project--style2 .project__item-btn a:hover {
  background-color: var(--primary);
  color: var(--white);
}
.project--style2 .project__item-btn a span {
  margin-right: 6px;
}
.project--style2 .project__item-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  padding-inline: 24px;
  padding-block-start: 32px;
  padding-block-end: 24px;
}
.project--style2 .project__item-thumb {
  margin-bottom: 24px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.project--style2 .project__item-thumb img {
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase {
  background-color: var(--black);
  border-radius: 48px 48px 0 0;
  overflow: hidden;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .showcase {
    border-radius: 20px 20px 0 0;
  }
}
.showcase__item {
  flex-shrink: 0;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background-color: rgb(24, 24, 24);
  padding-block: 16px;
  padding-inline: 8px;
}
.showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase__item:hover {
  transform: scale(1.01);
  border-color: var(--primary);
}
.showcase .slider-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.showcase .slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}
.showcase .slide-track {
  display: flex;
  width: 3500px;
  gap: 20px;
}
.showcase .slide-left {
  animation: scrollLeft 25s linear infinite;
}
.showcase .slide-right {
  animation: scrollRight 25s linear infinite;
}
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1850px);
  }
}
@keyframes scrollRight {
  0% {
    transform: translateX(-1850px);
  }
  100% {
    transform: translateX(0);
  }
}
.showcase .slider:hover .slide-track {
  animation-play-state: paused;
}

.demo {
  padding-top: 100px;
  overflow: hidden;
  /* Scrolling Track */
  /* Button Style */
  /* Auto Animation Keyframes */
}
.demo__title {
  text-align: center;
}
.demo__title h5 {
  font-family: var(--font_mango);
  color: var(--black);
  text-transform: uppercase;
}
.demo .slider-demo {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding-top: 20px;
  display: flex;
}
.demo .slider-demo:hover .slider-track {
  animation-play-state: paused;
}
.demo .slider-track {
  display: flex;
  animation: scroll 30s linear infinite;
}
.demo .btn {
  display: inline-block;
  padding: 16px 24px;
  margin: 0 10px;
  border-radius: 50px;
  background-color: var(--bg);
  color: var(--bg-2);
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1%;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
  cursor: pointer;
  border: none;
  font-family: var(--font_teko);
}
.demo .btn-active {
  background-color: var(--primary);
  color: var(--white);
}
.demo .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.demo .btn:hover::before {
  left: 0;
}
.demo .btn:not(:hover)::before {
  left: 100%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.demo .btn:hover {
  color: var(--white);
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.pb {
  padding-bottom: 255px;
}
@media only screen and (max-width: 1919px) {
  .pb {
    padding-bottom: 190px;
  }
}
@media only screen and (max-width: 1399px) {
  .pb {
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 1199px) {
  .pb {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .pb {
    padding-bottom: 135px;
  }
}
@media only screen and (max-width: 767px) {
  .pb {
    padding-bottom: 270px;
  }
}
@media (max-width: 575px) {
  .pb {
    padding-bottom: 150px;
  }
}

.project__shape-item--style1 {
  position: absolute;
  top: -138px;
  left: 25%;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .project__shape-item--style1 {
    top: -120px;
    left: 17%;
  }
}
@media only screen and (max-width: 1399px) {
  .project__shape-item--style1 {
    top: -120px;
    left: 11%;
  }
}
@media only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .project__shape-item--style1 {
    opacity: 0;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .project__shape-item--style1 {
    opacity: 0;
  }
}
.project__shape-item--style1 img {
  border-radius: 24px;
}
.project__shape-item--style2 {
  position: absolute;
  top: -118px;
  left: 428px;
  z-index: 3;
}
@media only screen and (max-width: 1919px) {
  .project__shape-item--style2 {
    top: -80px;
    left: 185px;
  }
}
@media only screen and (max-width: 1399px) {
  .project__shape-item--style2 {
    top: -80px;
    left: 85px;
  }
}
@media only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .project__shape-item--style2 {
    opacity: 0;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .project__shape-item--style2 {
    opacity: 0;
  }
}
.project__shape-item--style2 img {
  border-radius: 24px;
}
.project__shape-item--style3 {
  position: absolute;
  top: -81px;
  left: 390px;
  z-index: 3;
}
@media only screen and (max-width: 1919px) {
  .project__shape-item--style3 {
    top: -40px;
    left: 130px;
  }
}
@media only screen and (max-width: 1399px) {
  .project__shape-item--style3 {
    top: -40px;
    left: 26px;
  }
}
@media only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .project__shape-item--style3 {
    opacity: 0;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .project__shape-item--style3 {
    opacity: 0;
  }
}
.project__shape-item--style3 img {
  border-radius: 24px;
}

.website {
  background-color: var(--black);
  padding-top: 180px;
  border-radius: 0 0 50px 50px;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 1919px) {
  .website {
    padding-top: 300px;
  }
}
@media only screen and (max-width: 1399px) {
  .website {
    padding-top: 300px;
  }
}
@media only screen and (max-width: 1199px) {
  .website {
    padding-top: 80px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px) {
  .website {
    border-radius: 0 0 20px 20px;
    padding-top: 60px;
  }
}
.website__title {
  margin: 0 auto;
  position: relative;
}
.website__title h2 {
  font-family: var(--font_mango);
  letter-spacing: 2%;
  margin-bottom: 48px;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
}
.website__item {
  background-color: rgba(255, 255, 255, 0.08);
  padding-top: 30px;
  padding-bottom: 30px;
  padding-inline-start: 48px;
  padding-inline-end: 32px;
  border-radius: 24px;
  overflow: hidden;
  z-index: 9999999;
  border: 1px solid rgba(149, 149, 148, 0.1);
}
.website__item--style1 {
  background-color: #181818 !important;
}
@media only screen and (max-width: 1919px) {
  .website__item {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 1399px) {
  .website__item {
    padding-top: 30px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 1199px) {
  .website__item {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-inline-start: 30px;
    padding-inline-end: 30px;
  }
}
.website__item-thumb {
  position: relative;
}
.website__item-thumb img {
  position: relative;
  z-index: 99;
}
.website__item--style2 {
  padding-inline: 12px;
  padding-block: 12px 24px;
}
.website__item-title {
  text-align: center;
}
.website__item-title h5 {
  color: var(--white);
  font-family: var(--font_teko);
  padding-top: 16px;
  font-weight: 400;
  letter-spacing: 2%;
}
@media only screen and (max-width: 1199px) {
  .website__item-title h5 {
    font-size: 28px;
  }
}
.website .main-title {
  font-size: 48px;
  line-height: 56px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  letter-spacing: 2%;
  font-family: var(--font_teko);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 62px;
}
@media only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .website .main-title {
    font-size: 30px;
    line-height: 42px;
  }
}
@media only screen and (max-width: 991px) {
  .website .main-title {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .website .main-title {
    font-size: 26px;
    line-height: 38px;
  }
}
.website .subtitle-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.website .line-dot {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.website .line-dot::before {
  content: "";
  width: 120px;
  height: 1px;
  background-color: #999;
  margin-left: 35px;
}
@media only screen and (max-width: 1919px) {
  .website .line-dot::before {
    margin-left: 20px;
    width: 40px;
  }
}
@media only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .website .line-dot::before {
    margin-left: 20px;
    width: 60px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .website .line-dot::before {
    margin-left: 20px;
    width: 40px;
  }
}
.website .line-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--white);
  border-radius: 50%;
  margin-left: -4px;
}
.website .small-text {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 1%;
  margin-right: 12px;
  font-family: "Big Shoulders";
  color: var(--white);
  text-transform: uppercase;
}
.website .large-text {
  font-size: 48px;
  line-height: 56px;
  color: var(--white);
  letter-spacing: 2%;
  font-family: "Big Shoulders";
  font-weight: 600;
  text-transform: uppercase;
}
@media only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .website .large-text {
    font-size: 30px;
    line-height: 42px;
  }
}
@media only screen and (max-width: 991px) {
  .website .large-text {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .website .large-text {
    font-size: 26px;
    line-height: 38px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating-image {
  animation: spin 5s linear infinite;
}

.website__shape-item--style1 {
  position: absolute;
  top: -35px;
  left: -20px;
  z-index: 1;
}
@media (max-width: 575px) {
  .website__shape-item--style1 {
    top: -75px;
    left: -77px;
  }
}
.website__shape-item--style2 {
  position: absolute;
  top: -140px;
  right: -50px;
  z-index: 1;
}
@media (max-width: 575px) {
  .website__shape-item--style2 {
    top: -75px;
    left: 220px;
  }
}
.website__shape-item--style3 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

.service {
  background-color: var(--black);
  border-radius: 0 0 50px 50px;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .service {
    border-radius: 0 0 20px 20px;
  }
}
.service__title {
  text-align: center;
  margin-inline: 0 auto;
  margin-bottom: 48px;
}
.service__title h2 {
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--font_mango);
  line-height: 108px;
  letter-spacing: 2%;
  font-weight: 700;
}
.service__title p {
  max-width: 700px;
  margin-inline: auto;
  line-height: 24px;
  letter-spacing: 2%;
  font-weight: 400;
  font-family: var(--font_instrument);
  color: var(--white);
}

.service__capsol-wrapper {
  position: relative;
}
.service__capsol-wrapper p {
  background-color: var(--white);
  display: inline-block;
  height: 256px;
  width: 256px;
  border-radius: 130px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .service__capsol-wrapper p {
    height: 190px;
    width: 190px;
  }
}
@media only screen and (max-width: 767px) {
  .service__capsol-wrapper p {
    height: 160px;
    width: 160px;
  }
}
@media (max-width: 575px) {
  .service__capsol-wrapper p {
    height: 120px;
    width: 120px;
  }
}

.service-4__capsol__item {
  font-size: 20px;
  line-height: 28px;
  font-family: "Big Shoulders";
  letter-spacing: 2%;
  color: var(--black);
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (max-width: 575px) {
  .service-4__capsol__item {
    font-size: 14px;
    line-height: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .service-4__capsol__item {
    font-size: 14px;
    line-height: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .service-4__capsol__item img {
    width: 50px;
  }
}
@media (max-width: 575px) {
  .service-4__capsol__item img {
    width: 50px;
  }
}

.service__capsol__content {
  position: relative;
  width: 100%;
  pointer-events: none;
  height: 360px;
}

.service__capsol-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0;
}

[data-t-throwable-el] {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  pointer-events: auto;
  opacity: 0;
  cursor: grab;
  will-change: transform;
  left: 0;
  top: 0;
}

[data-t-throwable-el]:active {
  cursor: grabbing;
}

.stripe--rise {
  display: grid;
  gap: 6px;
  overflow: hidden;
  margin-top: 70px;
}
@media only screen and (max-width: 1919px) {
  .stripe--rise {
    margin-top: 37px;
  }
}
@media only screen and (max-width: 767px) {
  .stripe--rise {
    margin-top: 20px;
  }
}
@media (max-width: 575px) {
  .stripe--rise {
    margin-top: 2px;
  }
}

.stripe--rise > div {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.stripe--rise > div:nth-child(1) {
  height: 1px;
}

.stripe--rise > div:nth-child(2) {
  height: 1px;
}

.stripe--rise > div:nth-child(3) {
  height: 1px;
}

.stripe--rise > div:nth-child(4) {
  height: 1px;
}

.stripe--rise > div:nth-child(5) {
  height: 1px;
}

.stripe--rise > div:nth-child(6) {
  height: 1px;
}

.stripe--rise > div:nth-child(7) {
  height: 1px;
}

.stripe--rise > div:nth-child(8) {
  height: 1px;
}

.stripe--rise > div:nth-child(9) {
  height: 1px;
}

.stripe--rise > div:nth-child(1) {
  height: 1px;
}

.stripe--rise > div:nth-child(11) {
  height: 1px;
}

.stripe--rise.active > div {
  transform: translateY(0);
  opacity: 1;
}

.stripe--rise.active > div:nth-child(1) {
  transition-delay: 0.1s;
}

.stripe--rise.active > div:nth-child(2) {
  transition-delay: 0.2s;
}

.stripe--rise.active > div:nth-child(3) {
  transition-delay: 0.3s;
}

.stripe--rise.active > div:nth-child(4) {
  transition-delay: 0.4s;
}

.stripe--rise.active > div:nth-child(5) {
  transition-delay: 0.1s;
}

.stripe--rise.active > div:nth-child(6) {
  transition-delay: 0.2s;
}

.stripe--rise.active > div:nth-child(7) {
  transition-delay: 0.3s;
}

.stripe--rise.active > div:nth-child(8) {
  transition-delay: 0.4s;
}

.stripe--rise.active > div:nth-child(9) {
  transition-delay: 0.1s;
}

.stripe--rise.active > div:nth-child(10) {
  transition-delay: 0.2s;
}

.stripe--rise.active > div:nth-child(11) {
  transition-delay: 0.3s;
}

.work {
  overflow: hidden;
}
.work__item {
  background-color: var(--bg);
  padding-inline: 40px;
  padding-block-start: 56px;
  padding-block-end: 40px;
  border-radius: 24px;
  max-height: 760px;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 1199px) {
  .work__item {
    padding-inline: 30px;
    padding-block-start: 30px;
    padding-block-end: 30px;
  }
}
.work__item--style2 {
  padding-block-start: 37px;
  padding-inline: 32px;
  padding-block-end: 16px;
  max-height: 760px;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 1199px) {
  .work__item--style2 {
    padding-inline: 30px;
    padding-block-start: 30px;
    padding-block-end: 30px;
  }
}
.work__item-thumb img {
  border-radius: 24px;
}
.work .main-title {
  font-size: 48px;
  line-height: 56px;
  color: var(--black);
  display: flex;
  flex-direction: column;
  letter-spacing: 2%;
  font-family: var(--font_mango);
  font-weight: 600;
  align-items: center;
  margin-bottom: 48px;
}
@media only screen and (max-width: 1199px) {
  .work .main-title {
    font-size: 40px;
    line-height: 52px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .work .main-title {
    font-size: 26px;
    line-height: 38px;
  }
}
.work .subtitle-container {
  display: flex;
  align-items: center;
  margin-left: 100px;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .work .subtitle-container {
    margin-left: 0px;
  }
}
.work .line-dot {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.work .line-dot::before {
  content: "";
  width: 47px;
  height: 1px;
  background-color: #999;
}
@media (max-width: 575px) {
  .work .line-dot::before {
    width: 40px;
  }
}
.work .line-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--black);
  border-radius: 50%;
  margin-left: -4px;
}
.work .small-text {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 1%;
  margin-right: 12px;
  font-family: "Big Shoulders";
  color: var(--black);
  text-transform: uppercase;
}
.work .large-text {
  font-size: 48px;
  line-height: 56px;
  color: var(--black);
  letter-spacing: 2%;
  font-family: var(--font_mango);
  font-weight: 600;
}
@media only screen and (max-width: 1199px) {
  .work .large-text {
    font-size: 40px;
    line-height: 52px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .work .large-text {
    font-size: 26px;
    line-height: 38px;
  }
}

.review {
  overflow: hidden;
  /* Counter Area */
}
.review__header {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .review__header {
    justify-content: center;
  }
}
.review__header-titile h3 {
  font-family: var(--font_mango);
  color: var(--black);
}
.review__header-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 48px;
  gap: 20px;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .review__header-wrapper {
    justify-content: center;
  }
}
.review__item {
  background-color: var(--bg);
  padding: 48px;
  border-radius: 20px;
  max-width: 784px;
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px) {
  .review__item {
    padding: 30px;
  }
}
.review__item-icon {
  margin-bottom: 1rem;
}
.review__item-icon i,
.review__item-icon svg {
  color: var(--star);
}
.review__item-title h6 {
  font-family: var(--font_instrument);
  font-weight: 600;
  font-style: italic;
  line-height: 36px;
  font-size: 24px;
  max-width: 700px;
  color: var(--black);
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .review__item-title h6 {
    font-size: 20px;
  }
}
.review__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.review__author-name h6 {
  font-size: 22px;
  line-height: 20px;
  font-weight: bold;
  letter-spacing: 3%;
  color: var(--black);
  text-transform: capitalize;
  font-family: "Big Shoulders";
  margin-bottom: 7px;
}
.review__author-name span {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  font-family: var(--font_plus-jaka);
  color: var(--body-text);
}
.review__author-thumb img {
  padding: 15px;
  background-color: var(--white);
  border-radius: 99px;
  border: 1px solid #6bba1f;
}
.review__author-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.review .tf-slider-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.review .nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media only screen and (max-width: 1919px) {
  .review .nav-btn {
    width: 32px;
    height: 32px;
  }
}
.review .nav-btn.prev {
  background-color: var(--bg);
  color: var(--icon-color);
  rotate: 45deg;
}
.review .nav-btn.next {
  background-color: var(--bg);
  color: var(--icon-color);
  rotate: -55deg;
}
.review .nav-btn:hover, .review.active {
  transform: scale(1.05);
  opacity: 0.9;
  background-color: var(--primary);
  color: var(--white);
}
.review .tf-slider-nav {
  display: flex;
  flex-wrap: wrap;
}
.review .nav-counter {
  display: flex;
  align-items: center;
  gap: 30px;
}
.review .nav-counter .line {
  width: 60px;
  height: 1px;
  background-color: rgb(135, 135, 135);
}
@media only screen and (max-width: 1919px) {
  .review .nav-counter .line {
    width: 40px;
  }
}
@media only screen and (max-width: 1399px) {
  .review .nav-counter .line {
    width: 20px;
  }
}
.review .counter-content {
  display: flex;
  align-items: baseline;
  font-size: 30px;
  color: rgb(21, 21, 21);
  font-weight: 400;
  font-family: "Marcellus", serif;
}
@media only screen and (max-width: 1919px) {
  .review .counter-content {
    font-size: 20px;
  }
}
.review .counter-content .total {
  font-size: 16px;
  color: var(--line);
  margin-left: 5px;
  font-family: "Marcellus", serif;
}

.footer {
  background-color: var(--black);
  position: relative;
  overflow: hidden;
  border-radius: 50px 50px 0px 0px;
}
@media (max-width: 575px), only screen and (max-width: 767px) {
  .footer {
    border-radius: 20px 20px 0px 0px;
  }
}
.footer__copyright {
  padding-block: 22px;
  background-color: var(--bg-2);
}
.footer__copyright-social p {
  color: var(--white);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  font-family: var(--font_mona-sans-cond);
}
.footer__copyright-social .social-links a {
  background-color: var(--bg);
  border-radius: 99px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer__copyright-social .social-links a:hover {
  background-color: var(--primary);
  color: var(--white);
}
.footer__copyright-content p {
  font-size: 1rem;
  line-height: 24px;
  font-family: var(--font_mulish);
}
.footer__copyright-content p a {
  color: var(--white);
}
.footer__copyright-content p a:hover {
  color: var(--primary);
}
.footer__wrapper {
  padding-block: 132px;
}
@media only screen and (max-width: 1399px) {
  .footer__wrapper {
    padding-block: 100px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px) {
  .footer__wrapper {
    padding-block: 60px;
  }
}
.footer__content {
  position: relative;
  z-index: 99;
}
.footer__content h3 {
  font-size: 88px;
  line-height: 87px;
  color: var(--white);
  font-family: var(--font_mango);
  font-weight: bold;
  letter-spacing: 4%;
  max-width: 724px;
  margin-bottom: 56px;
}
@media only screen and (max-width: 1399px) {
  .footer__content h3 {
    font-size: 65px;
    line-height: 75px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__content h3 {
    font-size: 55px;
    line-height: 65px;
  }
}
@media only screen and (max-width: 991px) {
  .footer__content h3 {
    font-size: 48px;
    line-height: 55px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__content h3 {
    font-size: 40px;
    line-height: 55px;
  }
}
@media (max-width: 575px) {
  .footer__content h3 {
    font-size: 32px;
    line-height: 45px;
  }
}
.footer__content a {
  padding-block: 16px;
  padding-inline: 40px;
  background-color: var(--primary);
  border-radius: 99px;
  color: var(--white);
}
.footer .section-title {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer .line {
  width: 150px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 575px) {
  .footer .line {
    width: 30px;
  }
}
.footer .number {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 1px;
  font-family: "Big Shoulders";
}
.footer .dot {
  font-size: 14px;
  opacity: 0.8;
  color: var(--white) !important;
}
.footer .text {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 4%;
  margin: 0;
  color: var(--white);
  font-family: "Big Shoulders";
}
@media (max-width: 575px) {
  .footer .text {
    font-size: 18px;
  }
}

.footer__shape-item--style1 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.footer__shape-item--style2 {
  position: absolute;
  top: 0px;
  left: 275px;
  z-index: 1;
}
.footer__shape-item--style3 {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}
@media only screen and (max-width: 1919px) {
  .footer__shape-item--style3 {
    right: -390px;
  }
}
@media (max-width: 575px), only screen and (max-width: 767px), only screen and (max-width: 991px), only screen and (max-width: 1199px), only screen and (max-width: 1399px) {
  .footer__shape-item--style3 {
    opacity: 0;
  }
}

/*# sourceMappingURL=style.css.map */