/* ============================================================
   01. GOOGLE FONTS
   ============================================================ */
@import "https://fonts.googleapis.com/css2?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&display=swap";
@import "https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";
@import "https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";


/* ============================================================
   02. CSS VARIABLES (ROOT)
   ============================================================ */
:root {
  --primary:   #121212;
  --secondary: #555555;
  --border:    rgba(18, 18, 18, 0.08);
  --theme:     #121212;
  --black:     #121212;
  --black-2:   #555555;
  --white:     #ffffff;
  --white-2:   #999999;
  --action:    #FFCD4D;

  --container-max-widths: 1320px;
}

:root .dark {
  --primary:   #ffffff;
  --secondary: #999999;
  --border:    rgba(255, 255, 255, 0.08);
}

@media only screen and (max-width: 1399px) { :root { --container-max-widths: 1140px; } }
@media only screen and (max-width: 1199px) { :root { --container-max-widths: 960px;  } }
@media only screen and (max-width: 991px)  { :root { --container-max-widths: 720px;  } }
@media only screen and (max-width: 767px)  { :root { --container-max-widths: 540px;  } }


/* ============================================================
   03. SPACING UTILITIES
   ============================================================
   Pattern: .pb-{n}, .pt-{n}, .pl-{n}, .mt-{n}, .mb-{n}, .ml-{n}
   Values range from 10 to 250 with responsive overrides.
   ============================================================ */

/* --- Padding Bottom --- */
.pb-10  { padding-bottom: 10px; }
.pb-15  { padding-bottom: 15px; }
.pb-20  { padding-bottom: 20px; }
.pb-25  { padding-bottom: 25px; }
.pb-30  { padding-bottom: 30px; }
.pb-35  { padding-bottom: 35px; }
.pb-40  { padding-bottom: 40px; }
.pb-45  { padding-bottom: 45px; }
.pb-50  { padding-bottom: 50px; }
.pb-55  { padding-bottom: 55px; }
.pb-60  { padding-bottom: 60px; }
.pb-65  { padding-bottom: 65px; }
.pb-70  { padding-bottom: 70px; }
.pb-75  { padding-bottom: 75px; }
.pb-80  { padding-bottom: 80px; }
.pb-85  { padding-bottom: 85px; }
.pb-90  { padding-bottom: 90px; }
.pb-95  { padding-bottom: 95px; }
.pb-100 { padding-bottom: 100px; }
.pb-105 { padding-bottom: 105px; }
.pb-110 { padding-bottom: 110px; }
.pb-115 { padding-bottom: 115px; }
.pb-120 { padding-bottom: 120px; }
.pb-125 { padding-bottom: 125px; }
.pb-130 { padding-bottom: 130px; }
.pb-135 { padding-bottom: 135px; }
.pb-140 { padding-bottom: 140px; }
.pb-145 { padding-bottom: 145px; }
.pb-150 { padding-bottom: 150px; }
.pb-160 { padding-bottom: 160px; }
.pb-170 { padding-bottom: 170px; }
.pb-180 { padding-bottom: 180px; }
.pb-190 { padding-bottom: 190px; }
.pb-200 { padding-bottom: 200px; }

@media only screen and (max-width: 767px) {
  .pb-30 { padding-bottom: 25px; }
  .pb-35 { padding-bottom: 30px; }
  .pb-40, .pb-45, .pb-50 { padding-bottom: 30px; }
  .pb-55, .pb-60, .pb-65 { padding-bottom: 30px; }
  .pb-70, .pb-75, .pb-80, .pb-85 { padding-bottom: 35px; }
  .pb-90, .pb-95 { padding-bottom: 40px; }
  .pb-100, .pb-105 { padding-bottom: 60px; }
  .pb-110, .pb-115, .pb-120, .pb-125, .pb-130,
  .pb-135, .pb-140, .pb-145, .pb-150, .pb-160,
  .pb-170, .pb-180 { padding-bottom: 60px; }
  .pb-190, .pb-200 { padding-bottom: 100px; }
}

@media only screen and (max-width: 991px) {
  .pb-55, .pb-60, .pb-65 { padding-bottom: 40px; }
  .pb-70, .pb-75, .pb-80 { padding-bottom: 50px; }
  .pb-85 { padding-bottom: 60px; }
  .pb-100, .pb-105 { padding-bottom: 90px; }
  .pb-110, .pb-115, .pb-120, .pb-125, .pb-130,
  .pb-135, .pb-140, .pb-145, .pb-150, .pb-160,
  .pb-170, .pb-180 { padding-bottom: 90px; }
  .pb-190, .pb-200 { padding-bottom: 120px; }
}

@media only screen and (max-width: 1199px) {
  .pb-90, .pb-95 { padding-bottom: 70px; }
  .pb-110, .pb-115 { padding-bottom: 100px; }
  .pb-190, .pb-200 { padding-bottom: 150px; }
}

@media only screen and (max-width: 1399px) {
  .pb-110, .pb-115, .pb-120, .pb-125, .pb-130,
  .pb-135, .pb-140, .pb-145, .pb-150, .pb-160,
  .pb-170, .pb-180 { padding-bottom: 120px; }
}

/* --- Padding Top --- */
.pt-10  { padding-top: 10px; }
.pt-15  { padding-top: 15px; }
.pt-20  { padding-top: 20px; }
.pt-25  { padding-top: 25px; }
.pt-30  { padding-top: 30px; }
.pt-35  { padding-top: 35px; }
.pt-40  { padding-top: 40px; }
.pt-45  { padding-top: 45px; }
.pt-50  { padding-top: 50px; }
.pt-55  { padding-top: 55px; }
.pt-60  { padding-top: 60px; }
.ptf-60 { padding-top: 60px; }
.pt-65  { padding-top: 65px; }
.pt-70  { padding-top: 70px; }
.pt-75  { padding-top: 75px; }
.pt-80  { padding-top: 80px; }
.ptf-80 { padding-top: 80px; }
.pt-85  { padding-top: 85px; }
.pt-90  { padding-top: 90px; }
.pt-95  { padding-top: 95px; }
.pt-100 { padding-top: 100px; }
.pt-105 { padding-top: 105px; }
.pt-110 { padding-top: 110px; }
.pt-115 { padding-top: 115px; }
.pt-120 { padding-top: 120px; }
.pt-125 { padding-top: 125px; }
.pt-130 { padding-top: 130px; }
.pt-135 { padding-top: 135px; }
.pt-140 { padding-top: 140px; }
.pt-145 { padding-top: 145px; }
.pt-150 { padding-top: 150px; }
.pt-160 { padding-top: 160px; }
.pt-170 { padding-top: 170px; }
.pt-180 { padding-top: 180px; }
.pt-190 { padding-top: 190px; }
.pt-200 { padding-top: 200px; }
.pt-210 { padding-top: 210px; }
.pt-230 { padding-top: 230px; }
.pt-250 { padding-top: 250px; }

@media only screen and (max-width: 767px) {
  .pt-30 { padding-top: 25px; }
  .pt-35 { padding-top: 30px; }
  .pt-40, .pt-45, .pt-50 { padding-top: 30px; }
  .pt-55, .pt-60, .pt-65 { padding-top: 30px; }
  .pt-70, .pt-75, .pt-80, .pt-85 { padding-top: 35px; }
  .pt-90, .pt-95 { padding-top: 40px; }
  .pt-100, .pt-105 { padding-top: 60px; }
  .pt-110, .pt-115, .pt-120, .pt-125, .pt-130,
  .pt-135, .pt-140, .pt-145, .pt-150, .pt-160,
  .pt-170, .pt-180 { padding-top: 60px; }
  .pt-190, .pt-200 { padding-top: 100px; }
  .pt-210 { padding-top: 130px; }
  .pt-230 { padding-top: 150px; }
  .pt-250 { padding-top: 160px; }
}

@media only screen and (max-width: 991px) {
  .pt-55, .pt-60, .pt-65 { padding-top: 40px; }
  .pt-70, .pt-75, .pt-80 { padding-top: 50px; }
  .pt-85 { padding-top: 60px; }
  .pt-100, .pt-105 { padding-top: 90px; }
  .pt-110, .pt-115, .pt-120, .pt-125, .pt-130,
  .pt-135, .pt-140, .pt-145, .pt-150, .pt-160,
  .pt-170, .pt-180 { padding-top: 90px; }
  .pt-190, .pt-200 { padding-top: 120px; }
  .pt-210 { padding-top: 150px; }
  .pt-230 { padding-top: 170px; }
  .pt-250 { padding-top: 190px; }
}

@media only screen and (max-width: 1199px) {
  .pt-90, .pt-95 { padding-top: 70px; }
  .pt-110, .pt-115 { padding-top: 100px; }
  .pt-190, .pt-200 { padding-top: 150px; }
  .pt-210 { padding-top: 160px; }
  .pt-230 { padding-top: 180px; }
  .pt-250 { padding-top: 200px; }
}

@media only screen and (max-width: 1399px) {
  .pt-110, .pt-115, .pt-120, .pt-125, .pt-130,
  .pt-135, .pt-140, .pt-145, .pt-150, .pt-160,
  .pt-170, .pt-180 { padding-top: 120px; }
}

@media only screen and (max-width: 1919px) {
  .pt-210 { padding-top: 170px; }
  .pt-230 { padding-top: 190px; }
  .pt-250 { padding-top: 200px; }
}

/* --- Padding Inline Start (Left) --- */
.pl-5  { padding-inline-start: 5px; }
.pl-10 { padding-inline-start: 10px; }
.pl-15 { padding-inline-start: 15px; }
.pl-20 { padding-inline-start: 20px; }
.pl-25 { padding-inline-start: 25px; }
.pl-30 { padding-inline-start: 30px; }
.pl-35 { padding-inline-start: 35px; }
.pl-40 { padding-inline-start: 40px; }
.pl-45 { padding-inline-start: 45px; }
.pl-50 { padding-inline-start: 50px; }
.pl-55 { padding-inline-start: 55px; }
.pl-60 { padding-inline-start: 60px; }
.pl-65 { padding-inline-start: 65px; }
.pl-70 { padding-inline-start: 70px; }
.pl-75 { padding-inline-start: 75px; }
.pl-80 { padding-inline-start: 80px; }
.pl-85 { padding-inline-start: 85px; }
.pl-90 { padding-inline-start: 90px; }
.pl-100 { padding-inline-start: 100px; }

@media only screen and (max-width: 767px) {
  .pl-5, .pl-10, .pl-15, .pl-20, .pl-25, .pl-30,
  .pl-35, .pl-40, .pl-45, .pl-50, .pl-55, .pl-60,
  .pl-65, .pl-70, .pl-75, .pl-80, .pl-85, .pl-90,
  .pl-100 { padding-inline-start: 0; }
}

/* --- Padding Inline (Both Sides) --- */
.plr-50  { padding-inline-start: 50px;  padding-inline-end: 50px;  }
.plr-100 { padding-inline-start: 100px; padding-inline-end: 100px; }
.plr-150 { padding-inline-start: 150px; padding-inline-end: 150px; }
.plr-200 { padding-inline-start: 200px; padding-inline-end: 200px; }
.plr-250 { padding-inline-start: 250px; padding-inline-end: 250px; }

@media only screen and (max-width: 767px) {
  .plr-50  { padding-inline-start: 15px; padding-inline-end: 15px; }
  .plr-100 { padding-inline-start: 15px; padding-inline-end: 15px; }
  .plr-150 { padding-inline-start: 15px; padding-inline-end: 15px; }
  .plr-200 { padding-inline-start: 15px; padding-inline-end: 15px; }
  .plr-250 { padding-inline-start: 15px; padding-inline-end: 15px; }
}

@media only screen and (max-width: 991px) {
  .plr-50 { padding-inline-start: 30px; padding-inline-end: 30px; }
}

@media only screen and (max-width: 1199px) {
  .plr-200 { padding-inline-start: 30px; padding-inline-end: 30px; }
  .plr-250 { padding-inline-start: 30px; padding-inline-end: 30px; }
}

@media only screen and (max-width: 1919px) {
  .plr-100 { padding-inline-start: 30px;  padding-inline-end: 30px;  }
  .plr-150 { padding-inline-start: 30px;  padding-inline-end: 30px;  }
  .plr-200 { padding-inline-start: 50px;  padding-inline-end: 50px;  }
  .plr-250 { padding-inline-start: 50px;  padding-inline-end: 50px;  }
}

/* --- Margin Top --- */
.mt-10  { margin-top: 10px; }
.mt-15  { margin-top: 15px; }
.mt-20  { margin-top: 20px; }
.mt-25  { margin-top: 25px; }
.mt-30  { margin-top: 30px; }
.mt-35  { margin-top: 35px; }
.mt-40  { margin-top: 40px; }
.mt-45  { margin-top: 45px; }
.mt-50  { margin-top: 50px; }
.mt-55  { margin-top: 55px; }
.mt-60  { margin-top: 60px; }
.mt-65  { margin-top: 65px; }
.mt-70  { margin-top: 70px; }
.mt-75  { margin-top: 75px; }
.mt-80  { margin-top: 80px; }
.mt-85  { margin-top: 85px; }
.mt-90  { margin-top: 90px; }
.mt-95  { margin-top: 95px; }
.mt-100 { margin-top: 100px; }
.mt-105 { margin-top: 105px; }
.mt-110 { margin-top: 110px; }
.mt-115 { margin-top: 115px; }
.mt-120 { margin-top: 120px; }
.mt-125 { margin-top: 125px; }
.mt-130 { margin-top: 130px; }
.mt-135 { margin-top: 135px; }
.mt-140 { margin-top: 140px; }
.mt-145 { margin-top: 145px; }
.mt-150 { margin-top: 150px; }
.mt-160 { margin-top: 160px; }
.mt-170 { margin-top: 170px; }
.mt-180 { margin-top: 180px; }
.mt-190 { margin-top: 190px; }
.mt-200 { margin-top: 200px; }

/* --- Margin Bottom --- */
.mb-10  { margin-bottom: 10px; }
.mb-15  { margin-bottom: 15px; }
.mb-20  { margin-bottom: 20px; }
.mb-25  { margin-bottom: 25px; }
.mb-30  { margin-bottom: 30px; }
.mb-35  { margin-bottom: 35px; }
.mb-40  { margin-bottom: 40px; }
.mb-45  { margin-bottom: 45px; }
.mb-50  { margin-bottom: 50px; }
.mb-55  { margin-bottom: 55px; }
.mb-60  { margin-bottom: 60px; }
.mb-65  { margin-bottom: 65px; }
.mb-70  { margin-bottom: 70px; }
.mb-75  { margin-bottom: 75px; }
.mb-80  { margin-bottom: 80px; }
.mb-85  { margin-bottom: 85px; }
.mb-90  { margin-bottom: 90px; }
.mb-95  { margin-bottom: 95px; }
.mb-100 { margin-bottom: 100px; }
.mb-105 { margin-bottom: 105px; }
.mb-110 { margin-bottom: 110px; }
.mb-115 { margin-bottom: 115px; }
.mb-120 { margin-bottom: 120px; }
.mb-125 { margin-bottom: 125px; }
.mb-130 { margin-bottom: 130px; }
.mb-135 { margin-bottom: 135px; }
.mb-140 { margin-bottom: 140px; }
.mb-145 { margin-bottom: 145px; }
.mb-150 { margin-bottom: 150px; }
.mb-160 { margin-bottom: 160px; }
.mb-170 { margin-bottom: 170px; }
.mb-180 { margin-bottom: 180px; }
.mb-190 { margin-bottom: 190px; }
.mb-200 { margin-bottom: 200px; }
.mbm-1  { margin-bottom: -1px; }

/* --- Margin Left --- */
.ml-5   { margin-left: 5px; }
.ml-10  { margin-left: 10px; }
.ml-15  { margin-left: 15px; }
.ml-20  { margin-left: 20px; }
.ml-25  { margin-left: 25px; }
.ml-30  { margin-left: 30px; }
.ml-35  { margin-left: 35px; }
.ml-40  { margin-left: 40px; }
.ml-45  { margin-left: 45px; }
.ml-50  { margin-left: 50px; }
.ml-55  { margin-left: 55px; }
.ml-60  { margin-left: 60px; }
.ml-65  { margin-left: 65px; }
.ml-70  { margin-left: 70px; }
.ml-75  { margin-left: 75px; }
.ml-80  { margin-left: 80px; }
.ml-85  { margin-left: 85px; }
.ml-90  { margin-left: 90px; }
.ml-100 { margin-left: 100px; }
.mlr-200 { margin-left: 200px !important; margin-right: 200px !important; }

/* --- Small Screen Margin/Padding Helpers --- */
@media only screen and (max-width: 767px) {
  .sm-pb-30 { padding-bottom: 30px; }
  .sm-pb-40 { padding-bottom: 40px; }
}


/* ============================================================
   04. BASE / RESET
   ============================================================ */
:root {
  --font_kanit:   "Kanit", sans-serif;
  --font_awesome: "Font Awesome 6 Free";
}

* {
  margin:  0;
  padding: 0;
}

body {
  font-family: var(--font_kanit);
  line-height: 1;
  background-color: #f5f5f5;
  color: var(--secondary);
}

.dark body {
  background-color: #121212;
}

html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin:  0;
  color:   var(--primary);
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 18px; }

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

li { list-style: none; }

a {
  text-decoration: none;
  transition:      all 0.3s;
  color:           inherit;
}

a:hover { color: var(--primary); }

button {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
}

p {
  padding:     0;
  margin:      0;
  line-height: 1.41;
  font-weight: 400;
  font-size:   18px;
  color:       var(--secondary);
}

strong { font-weight: 500; }

video, iframe, img { margin: 0; padding: 0; }
img { max-width: 100%; }

.medium { font-weight: 600; }
.bold   { font-weight: 700; }

main {
  display: inline-block;
  width:   100%;
}

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

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

/* Body Wrapper */
.body-wrapper { background-color: var(--white); overflow: hidden; }
.dark .body-wrapper { background-color: var(--black); }

/* Body Overlay */
.body-overlay {
  position:          fixed;
  z-index:           9;
  pointer-events:    none;
  top:               0;
  opacity:           1;
  inset-inline-start: 0;
  width:             100vw;
  height:            100vh;
  background-repeat:   repeat;
  background-position: top left;
  background-image: url(../imgs/writer/body-bg.webp);
}

/* Container Overrides */
.container-xl    { max-width: 1550px; }

@media screen and (min-width: 1550px) {
  .container.large   { max-width: 1520px; }
  .container-large   { max-width: 1630px; }
  .container-x-large { max-width: 1790px; }
  .container-hd      { max-width: 1920px; margin-left: auto; margin-right: auto; }
}

/* Box Layout */
.box-layout { max-width: 1600px; margin: 0 auto; overflow: hidden !important; }


/* ============================================================
   05. CUSTOM FONTS (@font-face)
   ============================================================ */
@font-face {
  font-family: "recoleta";
  src: url("../fonts/recoleta/Latinotype - Recoleta Medium.otf");
  font-display: swap;
}

@font-face {
  font-family: "beatricetrial";
  src: url("../fonts/Beatrice/BeatriceTRIAL-Regular-BF64829e8f591fb.ttf");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "beatricetrial";
  src: url("../fonts/Beatrice/BeatriceTRIAL-Medium-BF64829e8f63463.ttf");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "getaway";
  src: url("../fonts/getaway/getaway.otf");
  font-display: swap;
}

@font-face {
  font-family: "canelatrial";
  src: url("../fonts/Canela-Medium-Trial/Canela-Thin-Trial.otf");
  font-display: swap;
}

@font-face {
  font-family: "bonvivant";
  src: url("../fonts/BonVivant/BonVivant-Regular.ttf");
  font-display: swap;
}


/* ============================================================
   06. FONT FAMILY VARIABLES & HEADING FONT CLASSES
   ============================================================ */
:root {
  --font_recoleta:        "recoleta";
  --font_teko:            "Teko", sans-serif;
  --font_dmsans:          "DM Sans", sans-serif;
  --font_plusjakartasans: "Plus Jakarta Sans", sans-serif;
  --font_beatricetrial:   "beatricetrial";
  --font_khand:           "Khand", sans-serif;
  --font_getaway:         "getaway";
  --font_instrumentsans:  "Instrument Sans", sans-serif;
  --font_spacegrotesk:    "Space Grotesk", sans-serif;
  --font_canelatrial:     "canelatrial";
  --font_bonvivant:       "bonvivant";
}

.font-heading-recoleta-medium h1,
.font-heading-recoleta-medium h2,
.font-heading-recoleta-medium h3,
.font-heading-recoleta-medium h4,
.font-heading-recoleta-medium h5,
.font-heading-recoleta-medium h6 {
  font-family: var(--font_recoleta);
  font-weight: 500;
  line-height: 1.05;
}

.font-heading-teko-bold h1,
.font-heading-teko-bold h2,
.font-heading-teko-bold h3,
.font-heading-teko-bold h4,
.font-heading-teko-bold h5,
.font-heading-teko-bold h6 {
  font-family: var(--font_teko);
  font-weight: 700;
  line-height: 0.94;
}

.font-heading-dmsans-medium h1,
.font-heading-dmsans-medium h2,
.font-heading-dmsans-medium h3,
.font-heading-dmsans-medium h4,
.font-heading-dmsans-medium h5,
.font-heading-dmsans-medium h6 {
  font-family: var(--font_dmsans);
  font-weight: 500;
  line-height: 1;
}

.font-heading-plusjakartasans-regular h1,
.font-heading-plusjakartasans-regular h2,
.font-heading-plusjakartasans-regular h3,
.font-heading-plusjakartasans-regular h4,
.font-heading-plusjakartasans-regular h5,
.font-heading-plusjakartasans-regular h6 {
  font-family: var(--font_plusjakartasans);
  font-weight: 400;
  line-height: 1;
}

.font-heading-plusjakartasans-regular-2 h1,
.font-heading-plusjakartasans-regular-2 h2,
.font-heading-plusjakartasans-regular-2 h3,
.font-heading-plusjakartasans-regular-2 h4,
.font-heading-plusjakartasans-regular-2 h5,
.font-heading-plusjakartasans-regular-2 h6 {
  font-family: var(--font_plusjakartasans);
  font-weight: 400;
  line-height: 1.08;
}

.font-heading-beatricetrial-regular h1,
.font-heading-beatricetrial-regular h2,
.font-heading-beatricetrial-regular h3,
.font-heading-beatricetrial-regular h4,
.font-heading-beatricetrial-regular h5,
.font-heading-beatricetrial-regular h6 {
  font-family: var(--font_beatricetrial);
  font-weight: 400;
  line-height: 1.07;
}

.font-heading-beatricetrial-medium h1,
.font-heading-beatricetrial-medium h2,
.font-heading-beatricetrial-medium h3,
.font-heading-beatricetrial-medium h4,
.font-heading-beatricetrial-medium h5,
.font-heading-beatricetrial-medium h6 {
  font-family: var(--font_beatricetrial);
  font-weight: 500;
  line-height: 1.08;
}

.font-heading-khand-bold h1,
.font-heading-khand-bold h2,
.font-heading-khand-bold h3,
.font-heading-khand-bold h4,
.font-heading-khand-bold h5,
.font-heading-khand-bold h6 {
  font-family: var(--font_khand);
  font-weight: 700;
  line-height: 0.88;
}

.font-heading-instumentsans-medium h1,
.font-heading-instumentsans-medium h2,
.font-heading-instumentsans-medium h3,
.font-heading-instumentsans-medium h4,
.font-heading-instumentsans-medium h5,
.font-heading-instumentsans-medium h6 {
  font-family: var(--font_instrumentsans);
  font-weight: 500;
  line-height: 1;
}

.font-heading-instumentsans-semibold h1,
.font-heading-instumentsans-semibold h2,
.font-heading-instumentsans-semibold h3,
.font-heading-instumentsans-semibold h4,
.font-heading-instumentsans-semibold h5,
.font-heading-instumentsans-semibold h6 {
  font-family: var(--font_instrumentsans);
  font-weight: 600;
  line-height: 1;
}

.font-heading-spacegrotesk-bold h1,
.font-heading-spacegrotesk-bold h2,
.font-heading-spacegrotesk-bold h3,
.font-heading-spacegrotesk-bold h4,
.font-heading-spacegrotesk-bold h5,
.font-heading-spacegrotesk-bold h6 {
  font-family: var(--font_spacegrotesk);
  font-weight: 700;
  line-height: 1;
}

.font-heading-canelatrial-thin h1,
.font-heading-canelatrial-thin h2,
.font-heading-canelatrial-thin h3,
.font-heading-canelatrial-thin h4,
.font-heading-canelatrial-thin h5,
.font-heading-canelatrial-thin h6 {
  font-family: var(--font_canelatrial);
  font-weight: 300;
  line-height: 1.2;
}


/* ============================================================
   07. ANIMATIONS & KEYFRAMES
   ============================================================ */
@keyframes wcBubble {
  0%   { scale: 1; }
  50%  { scale: 1.5; }
  100% { scale: 1; }
}

@keyframes wcZoom {
  0%   { scale: 1; }
  50%  { scale: 0.5; }
  100% { scale: 1; }
}

@keyframes wcZoom_2 {
  0%   { scale: 1; }
  50%  { scale: 0.9; }
  100% { scale: 1; }
}

@keyframes wcSlideBottom {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(50px); }
  100% { transform: translateY(0); }
}

@keyframes reveal {
  to { opacity: 1; filter: blur(0px); }
}

@keyframes wcfadeUp {
  0%   { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes spinner {
  to { transform: rotateZ(360deg); }
}

@keyframes characters {
  0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); }
  25%, 50%      { opacity: 1; transform: rotateY(0deg); }
}

@keyframes sheen {
  50% { transform: translateY(-20px); color: var(--primary); }
}

@keyframes mask_animation {
  from { -webkit-mask-position: 0 0;    mask-position: 0 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

@keyframes mask_animation_2 {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* Animated image/text reveal helpers */
.img_anim_reveal {
  visibility: hidden;
  overflow:   hidden;
}

.img_anim_reveal img {
  object-fit:       cover;
  transform-origin: left;
}

.anim-reveal      { overflow: hidden; }
.anim-reveal-line { overflow: hidden; }
.cf_parallax_image { overflow: hidden; }


/* ============================================================
   08. GLOBAL UTILITIES
   ============================================================ */

/* Colors */
.color-white     { color: var(--white); }
.color-black     { color: var(--black); }
.color-primary   { color: var(--primary); }
.color-secondary { color: var(--secondary); }

/* Backgrounds */
.wc-bg-white       { background-color: var(--white); }
.wc-bg-black       { background-color: var(--black); }
.wc-bg-primary     { background-color: var(--primary); }
.wc-bg-secondary   { background-color: var(--secondary); }
.wc-bg-transparent { background-color: rgba(0, 0, 0, 0) !important; }

/* Z-Index */
.zi-1  { z-index: 1; }
.zi-2  { z-index: 2; }
.zi-0  { z-index: 0; }
.zi--1 { z-index: -1; }

/* Positioning */
.pos-abs    { position: absolute; }
.p-relative { position: relative; }
.p-absolute { position: absolute; }
.fix        { overflow: hidden; }
.pos-center {
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  z-index:   1;
}

/* Full Background Image Utility */
.bg-full {
  position: absolute;
  width:    100%;
  height:   100%;
  top:      0;
  left:     0;
}
.bg-full img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #d6d6d6; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Text Utilities */
.text-underline {
  text-decoration:          underline;
  text-decoration-thickness: 1px;
  text-underline-offset:    4px;
}

.text-indent-40 { text-indent: 40px; }
.text-indent-50 { text-indent: 50px; }

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

/* Border Utilities */
.border-e-0 { border-inline-end:   0 !important; }
.border-s-0 { border-inline-start: 0 !important; }
.b-radius   { border-radius: 12px; }

/* Border-Line Decorators */
.has-top-line {
  position:    relative;
  padding-top: 10px;
}
.has-top-line:before {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           1px;
  background-color: currentColor;
  top:              0;
  left:             0;
}

.has-bottom-line {
  position:       relative;
  padding-bottom: 10px;
}
.has-bottom-line:after {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           1px;
  background-color: currentColor;
  bottom:           0;
  left:             0;
}

.has-left-line {
  position:          relative;
  padding-inline-start: 35px;
  display:           inline-block;
}
.has-left-line:before {
  position:         absolute;
  content:          "";
  width:            30px;
  height:           1px;
  background-color: currentColor;
  inset-inline-start: 0;
  top:              50%;
  transform:        translateY(-50%);
}

.has-right-line {
  position:        relative;
  padding-inline-end: 35px;
  display:         inline-block;
}
.has-right-line:after {
  position:         absolute;
  content:          "";
  width:            30px;
  height:           1px;
  background-color: currentColor;
  inset-inline-end: 0;
  top:              50%;
  transform:        translateY(-50%);
}

/* Lines Background Grid */
.line-area {
  position: relative;
  z-index:  1;
}

.lines {
  width:           100%;
  height:          100%;
  position:        absolute;
  top:             0;
  left:            0;
  display:         flex;
  justify-content: space-between;
  z-index:        -1;
}

.lines .line {
  width:            1px;
  height:           100%;
  background-color: var(--border);
  display:          inline-block;
  position:         relative;
  z-index:          1;
}

/* Dark / Light Mode Show/Hide */
.show-light            { display: inline-block; }
.dark .show-light      { display: none; }
.show-dark             { display: none; }
.dark .show-dark       { display: inline-block; }

/* RTL Direction */
.dir-rtl { direction: rtl; }

/* Misc */
.line-divider-sm       { height: 0.5px; background-color: var(--black-9); }
.dark .line-divider-sm { background-color: #e9e9e9; }

/* Admin bar offset */
.admin-bar header,
.admin-bar .body-wrapper { margin-top: 32px; }

/* Swiper RTL Fix */
.swiper,
.swiper-container { direction: ltr; }

/* Circle Text */
.circle-text {
  width:           140px;
  height:          140px;
  position:        relative;
  border-radius:   100px;
  background-color: rgba(0, 0, 0, 0);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         14px;
  overflow:        hidden;
}

@media only screen and (max-width: 991px) {
  .circle-text { width: 120px; height: 120px; }
}

.circle-text .text {
  animation: spinner 5s infinite linear;
  padding:   2px;
}

.circle-text .icon {
  position:  absolute;
  left:      50%;
  top:       50%;
  transform: translate(-50%, -50%);
}

.circle-text:before {
  position:     absolute;
  content:      "";
  width:        100%;
  height:       100%;
  border:       37px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
}

/* Play Button */
.wc-btn-play {
  width:           56px;
  height:          56px;
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  border:          1.5px solid currentColor;
  color:           var(--primary);
  border-radius:   50%;
  transition:      all 0.5s;
  font-size:       14px;
}

@media only screen and (max-width: 767px) {
  .wc-btn-play { width: 50px; height: 50px; font-size: 12px; border-width: 1px; }
}

.wc-btn-play:hover      { color: var(--theme, --action); }
.wc-btn-play.light      { color: var(--white); }
.wc-btn-play.light:hover { color: var(--white); }
.wc-btn-play.dark       { color: var(--black); }
.wc-btn-play.dark:hover  { color: var(--black); }

/* Play Button 5 */
.play_btn_5 {
  height:          100px;
  width:           100px;
  border-radius:   50%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid var(--white);
}

@media only screen and (max-width: 991px) {
  .play_btn_5 { height: 80px; width: 80px; }
}

.play_btn_5:hover { border-color: var(--primary); }
.play_btn_5 i     { font-size: 20px; color: var(--white); }
.dark .play_btn_5 i   { color: var(--black); }
.dark .play_btn_5 img { filter: brightness(0); }

/* Wc Btn Icon */
.wc-btn-icon i {
  transform:  rotate(-45deg);
  transition: all 0.3s;
  font-size:  20px;
  color:      var(--primary);
}

.dir-rtl .wc-btn-icon i { transform: rotate(-135deg); }
.wc-btn-icon:hover i    { transform: rotate(0); }
.dir-rtl .wc-btn-icon:hover i { transform: rotate(-180deg); }

/* Lists */
.list-check li {
  position:           relative;
  padding-inline-start: 30px;
  font-size:          18px;
  font-weight:        400;
  line-height:        1.4;
  margin-bottom:      10px;
}

.list-check li::before {
  content:           "";
  position:          absolute;
  inset-inline-start: 0;
  background-image:  url("../imgs/electrician/check-mark.webp");
  background-repeat: no-repeat;
  width:             14px;
  height:            14px;
  top:               4px;
  transform:         rotateY(0deg);
}

.dir-rtl .list-check li::before { transform: rotateY(180deg); }
.list-check li:last-child        { margin-bottom: 0; }

.list-plus li {
  position:           relative;
  padding-inline-start: 30px;
  font-size:          18px;
  font-weight:        400;
  line-height:        1.4;
  display:            inline-block;
  width:              100%;
}

.list-plus li::before {
  content:  "+";
  position: absolute;
  inset-inline-start: 0;
  top:      -10px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.list-plus li:not(:last-child) { margin-bottom: 10px; }

/* Pagination */
.pagination.style-1 {
  display: flex;
  gap:     20px;
}

.pagination.style-1 li:last-child { padding-inline-start: 20px; }

.pagination.style-1 li a {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.dir-rtl .pagination.style-1 li a img { transform: rotate(180deg); }
.pagination.style-1 li a.current      { color: #999; }

/* Pagination with Dash */
.pagination-with-dash {
  font-size:   14px;
  display:     flex;
  gap:         10px;
  color:       var(--primary);
  align-items: center;
}

.pagination-with-dash .dash {
  width:            100px;
  height:           1px;
  background-color: var(--primary);
}

.pagination-with-dash .swiper-pagination-current,
.pagination-with-dash .swiper-pagination-total {
  display:     flex;
  gap:         5px;
  align-items: center;
}

/* Toggle Switcher */
.wcf__toggle_switcher .slide-toggle-wrapper {
  display:         flex;
  justify-content: center;
}

.wcf__toggle_switcher .slide-toggle-btn {
  --switcher-width:           40px;
  --switcher-border-width:    2px;
  --switcher-indicator-width: 16px;
  background-color: #f0f7f8;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              10px;
  user-select:      none;
}

.wcf__toggle_switcher .slide-toggle-btn input { display: none; }

.wcf__toggle_switcher .before_label,
.wcf__toggle_switcher .after_label {
  cursor:    pointer;
  font-size: 18px;
  color:     var(--primary);
}

.wcf__toggle_switcher .toggle-pane      { display: none; }
.wcf__toggle_switcher .toggle-pane.show { display: block; }

.wcf__toggle_switcher.style-1 .switcher {
  display:          inline-block;
  width:            var(--switcher-width);
  height:           20px;
  background-color: #999;
  border:           var(--switcher-border-width) solid #999;
  border-radius:    10px;
  position:         relative;
  cursor:           pointer;
}

.wcf__toggle_switcher.style-1 .switcher::before {
  content:          "";
  position:         absolute;
  top:              50%;
  left:             0;
  width:            var(--switcher-indicator-width);
  height:           var(--switcher-indicator-width);
  background-color: #fff;
  border-radius:    50%;
  transition:       transform 0.3s;
  transform:        translate(0px, -50%);
}

.wcf__toggle_switcher.style-1 input:checked + .switcher::before {
  transform: translate(
    calc(var(--switcher-width) - (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))),
    -50%
  );
}

.wcf__toggle_switcher.style-1 input:checked + .switcher {
  background-color: #000;
  border-color:     #000;
}

.wcf__toggle_switcher.style-2 .before_label,
.wcf__toggle_switcher.style-2 .after_label {
  padding:   22px 38px;
  position:  relative;
  z-index:   2;
  font-size: 16px;
  line-height: 1;
  color:     var(--primary);
}

.wcf__toggle_switcher.style-2 .before_label:after,
.wcf__toggle_switcher.style-2 .after_label:after {
  content:          "";
  width:            100%;
  height:           100%;
  border-radius:    60px;
  position:         absolute;
  left:             0;
  top:              0;
  background-color: var(--theme);
  z-index:          -1;
  opacity:          0;
  visibility:       hidden;
  transition:       transform 0.3s;
}

.wcf__toggle_switcher.style-2 .before_label.active:after,
.wcf__toggle_switcher.style-2 .after_label.active:after {
  opacity:    1;
  visibility: visible;
  transform:  translatex(0);
}

.wcf__toggle_switcher.style-2 .before_label:after { transform: translatex(100%); }
.wcf__toggle_switcher.style-2 .after_label:after  { transform: translatex(-100%); }

.wcf__toggle_switcher.style-2 .slide-toggle-btn {
  gap:           0;
  border-radius: 60px;
}

/* Register / Login Form Boxes */
.register-form-box,
.login-form-box {
  background-color: var(--white);
  border-radius:    30px;
  width:            420px;
  padding:          70px 45px 80px;
  position:         relative;
  text-align:       center;
}

@media only screen and (max-width: 767px) {
  .register-form-box,
  .login-form-box {
    margin:  0 10px;
    padding: 50px 25px 60px;
    width:   calc(100% - 20px);
  }
}

.register-form-box .close-btn,
.login-form-box .close-btn {
  width:         45px;
  height:        45px;
  border:        1px solid var(--border);
  border-radius: 50%;
}

.register-form-box .btn-wrapper,
.login-form-box .btn-wrapper {
  position: absolute;
  right:    10px;
  top:      10px;
}

.register-form-box .title,
.login-form-box .title { font-size: 30px; }

.register-form-box .title span,
.login-form-box .title span { font-weight: 400; color: var(--primary); }

.register-form-box .icon,
.login-form-box .icon { margin-top: 20px; margin-bottom: 45px; }

.register-form-box .input-field input,
.login-form-box .input-field input {
  width:         100%;
  height:        60px;
  border:        1px solid var(--border);
  border-radius: 30px;
  padding:       0 30px;
  outline:       none;
}

.register-form-box .input-field input:focus,
.login-form-box .input-field input:focus { border-color: var(--theme); }

.register-form-box .input-field:not(:first-child),
.login-form-box .input-field:not(:first-child) { margin-top: 12px; }

.register-form-box .policy-field {
  margin-top:    20px;
  margin-bottom: 42px;
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
}

.login-form-box .policy-field {
  margin-top:    15px;
  margin-bottom: 42px;
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
}

.register-form-box .policy-field label,
.login-form-box .policy-field label { font-size: 14px; }

.register-form-box .policy-field label a,
.login-form-box .policy-field label a { font-weight: 600; text-decoration: underline; }

.register-form-box .note,
.login-form-box .note { margin-top: 15px; text-align: start; }

.register-form-box .note p,
.login-form-box .note p { font-size: 14px; }

.register-form-box .note p a,
.login-form-box .note p a { font-weight: 600; text-decoration: underline; }

.register-form-box button,
.login-form-box button { width: 100%; }

.register-form-box .alternative-title {
  font-size:  16px;
  position:   relative;
  margin-top: 38px;
}

.register-form-box .alternative-title::before {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           1px;
  background-color: var(--border);
  left:             0;
  top:              50%;
  transform:        translateY(-50%);
}

.register-form-box .alternative-title span {
  padding:          0 18px;
  background-color: var(--white);
  display:          inline-block;
  position:         relative;
}

.register-form-box .social-links {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             10px;
  margin-top:      37px;
}

.register-form-box .social-links a {
  width:           60px;
  height:          60px;
  background-color: #f5f5f5;
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  border-radius:   50%;
  color:           var(--primary);
}

.register-form-box .social-links a:hover { background-color: var(--theme); }

.login-form-box .forget-password {
  font-size:   14px;
  color:       var(--theme);
  margin-left: auto;
}

/* Progress Item */
.progress__item p.title,
.progress__item-2 p.title {
  padding:        0;
  font-weight:    500;
  font-size:      15px;
  line-height:    25px;
  color:          var(--white);
  padding-bottom: 15px;
  text-transform: uppercase;
}

.progress__item-2 { padding-bottom: 25px; }

.light .progress__item p.title,
.light .progress__item-2 p.title { color: var(--black); }

.light .developer-skill__resume .sonny_progressbar .progress-percent { color: var(--black); }


/* ============================================================
   09. THEME OVERRIDES
   ============================================================ */

/* Header / Sticky */
.header-area            { transition: 0.3s; }
.header-area.sticky     { position: fixed !important; background-color: var(--white); z-index: 9999; }
.dark .header-area.sticky { background-color: #121212; }
.header-area.sticky .header-area__inner { height: 70px !important; }
.header-area.sticky button i            { color: var(--primary); }

/* Bootstrap Overrides */
.modal           { z-index: 99999; }
.modal-content   { background-color: rgba(0, 0, 0, 0); border: 0; }
.btn-primary     { background-color: rgba(0, 0, 0, 0); color: unset; border: unset; outline: unset; }
.btn-primary:hover { background-color: unset; }
.btn-primary:focus { outline: unset; background-color: unset; border: unset; }
.modal           { background-color: var(--primary); }

/* Search Form */
.form-search {
  display:       flex;
  gap:           10px;
  border:        1px solid #19242b;
  border-radius: 70px;
  padding:       0 15px;
}

.form-search input {
  width:            100%;
  height:           55px;
  background:       rgba(0, 0, 0, 0);
  border:           0;
  color:            var(--white);
}

.form-search input:focus { outline: 0; }
.form-search button i    { color: var(--white); }

/* Close Button */
.btn-close {
  content:          "";
  font-family:      "icomoon";
  font-size:        16px;
  opacity:          1;
  filter:           brightness(100) contrast(0);
  border-radius:    50px;
  width:            2em;
  height:           2em;
  border:           1px solid var(--white);
  position:         absolute;
  inset-inline-end: 20px;
  top:              20px;
  transition:       unset;
}


/* ============================================================
   10. HOVER EFFECTS
   ============================================================ */
.hover-zoom li a:hover      { transform: scale(1.1); }

.hover-rotate li a i        { transition: all 1s; }
.hover-rotate li a:hover i  { transform: rotate(360deg); }

.hover-space li a:hover     { letter-spacing: 1px; }

.hover-border-move li a {
  position:   relative;
  transition: all 0.5s;
}

.hover-border-move li a::after {
  position:         absolute;
  content:          "";
  width:            0%;
  height:           1px;
  bottom:           0;
  left:             0;
  transition:       all 0.5s;
  background-color: currentColor;
}

.hover-border-move li a:hover::after { width: 100%; left: auto; right: 0; }

.menu-hover-default li a:hover { color: var(--primary); }
.menu-hover-space li a:hover   { letter-spacing: 1px; }

/* Blog image hover effects */
.blog-img-leftmove img { transform: scale(1.1); transition: all 0.5s; }
.blog-img-leftmove:hover img { transform: scale(1.1) translateX(4%); }

.blog-img-zoom         { overflow: hidden; }
.blog-img-zoom img     { transform: scale(1); transition: all 1s; }
.blog-img-zoom:hover img { transform: scale(1.1); }

.anim_img_zoom         { overflow: hidden; }  /* alias */
.anim_img_zoom img     { transform: scale(1); transition: all 1s; }
.anim_img_zoom:hover img { transform: scale(1.1); }

/* Title hover flip */
.title-hover-flip { overflow: hidden; perspective: 1000px; }

.title-hover-flip strong {
  font-weight:       400;
  position:          relative;
  display:           inline-block;
  transition:        transform 0.5s;
  transform-origin:  50% 0;
  transform-style:   preserve-3d;
}

.title-hover-flip strong:before {
  position:         absolute;
  top:              100%;
  left:             0;
  width:            100%;
  height:           100%;
  content:          attr(data-hover);
  transition:       all 0.5s;
  transform:        rotateX(-90deg);
  transform-origin: 50% 0;
}

.title-hover-flip:hover strong { transform: rotateX(90deg) translateY(-22px); }

/* Service hover rollover effects */
.service-hover-default:hover { background-color: var(--white-6); }

.service-rollover-right { position: relative; transition: all 0.5s; }
.service-rollover-right::after {
  position:         absolute;
  content:          "";
  width:            0%;
  height:           100%;
  top:              0;
  left:             0;
  background-color: var(--white-6);
  transition:       all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-right:hover::after { width: 100%; left: auto; right: 0%; }

.service-rollover-left { position: relative; transition: all 0.5s; }
.service-rollover-left::after {
  position:         absolute;
  content:          "";
  width:            0%;
  height:           100%;
  top:              0;
  right:            0;
  background-color: var(--white-6);
  transition:       all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  z-index:         -1;
}
.service-rollover-left:hover::after { width: 100%; right: auto; left: 0%; }

.service-rollover-top { position: relative; transition: all 0.5s; }
.service-rollover-top::after {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           0%;
  left:             0;
  bottom:           0;
  background-color: var(--white-6);
  transition:       all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-top:hover::after { height: 100%; bottom: auto; top: 0%; }

.service-rollover-bottom { position: relative; transition: all 0.5s; }
.service-rollover-bottom::after {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           0%;
  top:              0;
  left:             0;
  background-color: var(--white-6);
  transition:       all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-bottom:hover::after { height: 100%; top: auto; bottom: 0%; }


/* ============================================================
   11. PRELOADER
   ============================================================ */
.container-preloader {
  align-items:     center;
  cursor:          none;
  display:         flex;
  height:          100%;
  justify-content: center;
  position:        fixed;
  left:            0;
  top:             0;
  width:           100%;
  z-index:         900;
}

.container-preloader .animation-preloader { position: absolute; z-index: 100; }

.container-preloader .animation-preloader .spinner {
  animation:    spinner 1s infinite linear;
  border-radius: 50%;
  height:        9em;
  width:         9em;
  border:        10px solid var(--white);
  border-top-color: var(--primary);
  margin:        0 auto 3.5em auto;
}

@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .spinner { margin: 0 auto 0.2em auto; }
}

.container-preloader .animation-preloader .txt-loading {
  font:        bold 5em "Montserrat", sans-serif;
  text-align:  center;
  user-select: none;
}

.container-preloader .animation-preloader .txt-loading .characters {
  color:    var(--white);
  position: relative;
  display:  inline-block;
}

.dark .container-preloader .animation-preloader .txt-loading .characters {
  color: rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 767px) {
  .container-preloader .animation-preloader .txt-loading .characters { font-size: 50px; }
}

.container-preloader .animation-preloader .txt-loading .characters:before {
  color:     var(--primary);
  content:   attr(data-text);
  animation: characters 4s infinite;
  left:      0;
  top:       0;
  opacity:   0;
  position:  absolute;
  transform: rotateY(-90deg);
}

.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before { animation-delay: 0.2s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before { animation-delay: 0.4s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before { animation-delay: 0.6s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before { animation-delay: 0.8s; }
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before { animation-delay: 1s;   }

.container-preloader .loader-section {
  background-color: var(--black);
  height:           100%;
  position:         fixed;
  top:              0;
  width:            calc(50% + 1px);
}

.dark .container-preloader .loader-section { background-color: var(--white); }

.container-preloader .loader-section.section-left  { left:  0; }
.container-preloader .loader-section.section-right { right: 0; }

.loaded .animation-preloader            { opacity: 0; transition: 0.3s ease-out; }
.loaded .loader-section.section-left    { transform: translateX(-101%); transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1); }
.loaded .loader-section.section-right   { transform: translateX(101%);  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1); }


/* ============================================================
   12. SCROLL UTILITIES
   ============================================================ */

/* Scroll Down */
.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; } }

/* Light variant */
.light .scroll__down p         { color: var(--black); }
.light .scroll__down span      { border-color: var(--white-3); }
.light .scroll__down span i    { color: var(--black); }

/* Scroll to Top */
.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 style */
.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;
}

.dark .go-top-writer {
  color:            var(--black);
  background-image: url(../imgs/writer/go-top-light.webp);
}

.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 */
.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(15px);
  transition: all 200ms linear;
}

.progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); }

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

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

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

/* Light progress wrap */
.light.go-top-writer {
  color:            var(--black);
  background-color: rgba(0, 0, 0, 0);
  background-image: url(../imgs/writer/go-top-light.webp);
}

.light.progress-wrap { margin: 0; background-color: rgba(0, 0, 0, 0); }
.light.progress-wrap svg path { fill: var(--black); }
.light.progress-wrap::after   { color: var(--white); }


/* ============================================================
   13. BUTTONS
   ============================================================ */
.wc-btn { display: inline-flex; transition: all 0.3s; }

/* Default */
.wc-btn-default {
  font-size:      14px;
  font-weight:    500;
  line-height:    1;
  color:          var(--white);
  text-transform: capitalize;
  background:     rgba(0, 0, 0, 0);
  border-radius:  100px;
  padding:        17px 35px;
  display:        inline-flex;
  gap:            10px;
  align-items:    center;
  border:         1px solid var(--border);
  overflow:       hidden;
  transition:     all 0.3s;
}

.wc-btn-default:hover        { color: var(--white); }
.dark .wc-btn-default        { color: var(--black); }
.dark .wc-btn-default:hover  { color: var(--black); }
.dir-rtl .wc-btn-default i   { transform: rotateY(180deg); }

/* Border */
.wc-btn-border {
  gap:            10px;
  display:        inline-flex;
  align-items:    center;
  color:          var(--white);
  font-size:      16px;
  font-weight:    500;
  line-height:    1.5;
  padding:        16px 30px;
  border:         1px solid var(--white);
  overflow:       hidden;
  transition:     all 0.3s;
  z-index:        1;
  position:       relative;
}

.wc-btn-border:hover       { color: var(--white); }
.dark .wc-btn-border       { color: var(--black); border-color: var(--black); }
.dark .wc-btn-border:hover { color: var(--black); }

/* Primary */
.wc-btn-primary {
  padding:         21px 30px;
  font-weight:     700;
  font-size:       16px;
  line-height:     1;
  color:           var(--white);
  background-color: var(--primary);
  border:          1px solid var(--primary);
  border-radius:   15px;
  text-transform:  capitalize;
  transition:      all 0.3s;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  z-index:         1;
  gap:             30px;
  white-space:     nowrap;
}

@media only screen and (max-width: 991px) {
  .wc-btn-primary { padding: 16px 25px; }
}

.dark .wc-btn-primary { color: var(--black); }

.wc-btn-primary:hover {
  color:            var(--white);
  background-color: var(--primary);
  border-color:     var(--primary);
}

.wc-btn-primary.bordered {
  border-color:     var(--primary);
  background-color: rgba(0, 0, 0, 0);
  color:            var(--primary);
}

.wc-btn-primary.bordered:hover {
  border-color:     var(--primary);
  background-color: var(--primary);
  color:            var(--white);
}

.dark .wc-btn-primary.bordered:hover { color: var(--black); }
.dir-rtl .wc-btn-primary i           { transform: rotateY(180deg); }

/* Circle */
.wc-btn-circle {
  text-align:      center;
  width:           170px;
  height:          170px;
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  background-color: rgba(0, 0, 0, 0);
  border:          1px solid var(--border);
  border-radius:   50%;
  color:           var(--primary);
  font-size:       18px;
  font-weight:     400;
  line-height:     1.05;
}

.wc-btn-circle:hover       { background-color: rgba(0, 0, 0, 0); color: var(--white); }
.dark .wc-btn-circle:hover { color: var(--black); }

/* Oval */
.wc-btn-oval {
  font-weight:   500;
  font-size:     16px;
  line-height:   1.5;
  color:         var(--white);
  border:        1px solid #3f3a36;
  display:       inline-block;
  padding:       32px 52px;
  text-align:    center;
  transition:    all 0.3s;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

.dark .wc-btn-oval  { color: var(--black); }
.wc-btn-oval:hover  { color: var(--primary); }

/* Light variant */
.wc-btn-light             { color: var(--white) !important; border-color: var(--white) !important; }
.wc-btn-light:hover       { color: var(--black) !important; }
.wc-btn-light span        { background-color: var(--white) !important; }

/* Ellipse */
.wc-btn-ellipse {
  font-size:     16px;
  font-weight:   500;
  color:         var(--white);
  padding:       45px 45px;
  position:      relative;
  display:       inline-block;
  background-color: var(--white);
  border-radius: 100%;
  border-top-left-radius:      200%;
  border-bottom-right-radius:  200%;
  z-index:       1;
}

.dark .wc-btn-ellipse { color: var(--black); background-color: var(--black); }

.wc-btn-ellipse:before {
  position:         absolute;
  content:          "";
  width:            calc(100% - 14px);
  height:           calc(100% - 2px);
  background-color: var(--black);
  z-index:         -1;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  border-radius:    100%;
  border-top-left-radius:      200%;
  border-bottom-right-radius:  200%;
}

.dark .wc-btn-ellipse:before { background-color: #ededed; }

/* Appointment */
.wc-btn-appointment {
  font-weight:     500;
  font-size:       20px;
  line-height:     24px;
  color:           var(--blue-6);
  text-align:      center;
  border:          1px solid currentColor;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  height:          215px;
  width:           215px;
  padding:         20px;
}

@media only screen and (max-width: 1199px) { .wc-btn-appointment { width: 200px; height: 200px; } }
@media only screen and (max-width: 991px)  { .wc-btn-appointment { width: 170px; height: 170px; font-size: 18px; } }

.wc-btn-appointment i       { font-size: 24px; margin-bottom: 10px; }
.wc-btn-appointment:hover   { color: var(--blue-3); }

/* Link */
.wc-btn-link {
  font-weight:    500;
  font-size:      14px;
  line-height:    1.7;
  color:          var(--white);
  display:        inline-flex;
  text-transform: uppercase;
  transition:     all 0.3s;
  align-items:    center;
  gap:            10px;
}

.dark .wc-btn-link      { color: var(--black); }
.wc-btn-link i          { transform: rotate(-45deg); transition: all 0.3s; }
.wc-btn-link:hover      { color: var(--primary); }
.wc-btn-link:hover i    { transform: rotate(0); color: var(--primary); }

/* Underline */
.wc-btn-underline {
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0;
  color:          var(--primary);
  position:       relative;
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  padding-bottom: 4px;
  white-space:    nowrap;
  text-transform: uppercase;
}

.wc-btn-underline:hover::before { width: 0; }

.wc-btn-underline::before {
  position:         absolute;
  content:          "";
  inset-inline-start: 0;
  bottom:           0px;
  width:            100%;
  height:           2px;
  background-color: currentColor;
  transition:       0.3s;
}

.wc-btn-underline i,
.wc-btn-underline img { font-size: 10px; }

.dir-rtl .wc-btn-underline i,
.dir-rtl .wc-btn-underline img { transform: rotateY(180deg); }

/* Normal */
.wc-btn-normal {
  display:     inline-flex;
  position:    relative;
  color:       var(--secondary);
  font-size:   18px;
  font-weight: 500;
  align-items: center;
  gap:         5px;
}

.wc-btn-normal:hover { color: var(--theme); }
.wc-btn-normal i     { font-size: 14px; }
.dir-rtl .wc-btn-normal i { transform: rotateY(180deg); }

/* Link None */
.wc-btn-link-none {
  color:          var(--primary);
  font-size:      13px;
  font-weight:    700;
  line-height:    1.85;
  text-transform: uppercase;
  display:        inline-flex;
  align-items:    center;
  gap:            30px;
}

.wc-btn-link-none:hover { color: var(--action); }

/* About / Readmore */
.about-btn {
  display:          inline-block;
  padding:          15px 30px;
  background-color: var(--primary);
  color:            var(--black);
  font-weight:      500;
  font-size:        16px;
  line-height:      26px;
  text-align:       center;
}

.about-btn img   { padding-left: 15px; }
.readmore-btn img { margin-bottom: 3px; }

/* Get Touch */
.get-touch {
  font-weight:   500;
  font-size:     14px;
  line-height:   1.5;
  color:         var(--white-11);
  padding:       13px 18px;
  display:       inline-block;
  text-transform: uppercase;
  border:        1px solid var(--white);
  margin-inline-end: 40px;
}

.get-touch:hover { color: var(--white); }

@media only screen and (max-width: 767px) {
  .get-touch { padding: 12px 10px; margin-inline-end: 12px; }
}

/* Button Group */
.wc-btns-group {
  text-align:     center;
  display:        flex;
}

@media only screen and (max-width: 991px) { .wc-btns-group { flex-direction: column; } }

@media only screen and (max-width: 767px) {
  .wc-btns-group { padding: 40px 0; }
  .wc-btns-group br { display: block; }
}

.wc-btns-group .btn-wrapper a {
  width:           140px;
  height:          140px;
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  background:      var(--white);
  border-radius:   50%;
  color:           var(--black);
  font-weight:     500;
}

@media only screen and (max-width: 1199px) {
  .wc-btns-group .btn-wrapper a { width: 110px; height: 110px; }
}

.wc-btns-group .btn-wrapper:first-child a {
  margin-inline-end: -15px;
  background-color:  var(--primary);
}

@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:first-child a { margin-inline-end: 0; }
}

.wc-btns-group .btn-wrapper:first-child a span { background-color: var(--white); }

.wc-btns-group .btn-wrapper:last-child a { margin-inline-start: -15px; }

.dark .wc-btns-group .btn-wrapper:last-child a {
  background: var(--black);
  color:      var(--white);
}

@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:last-child a { margin-inline-start: 0; margin-top: -15px; }
}

.wc-btns-group .btn-wrapper:last-child a:hover { border: 0; }
.wc-btns-group .btn-wrapper:last-child a span  { background-color: var(--primary); }

.wc-btns-group-wrap {
  height:          425px;
  display:         flex;
  justify-content: center;
  align-items:     center;
  border-bottom:   1px solid var(--black-6);
}

.dark .wc-btns-group-wrap { border-color: #f3f2f2; }

@media only screen and (max-width: 1399px) { .wc-btns-group-wrap { height: 380px; } }
@media only screen and (max-width: 1199px) { .wc-btns-group-wrap { height: 350px; } }
@media only screen and (max-width: 767px)  { .wc-btns-group-wrap { height: auto;  } }

.wc-btns-group a:hover { border: 0; }
.wc-btns-group a span  { background-color: var(--white); }

/* Btn Text Flip */
.btn-text-flip { perspective: 1000px; }

.btn-text-flip:hover span { transform: rotateX(90deg) translateY(-12px); color: inherit; }

.btn-text-flip span {
  position:         relative;
  display:          inline-block;
  padding:          0;
  transition:       transform 0.5s;
  transform-origin: 50% 0;
  transform-style:  preserve-3d;
}

.btn-text-flip span:before {
  position:         absolute;
  top:              100%;
  left:             0;
  width:            100%;
  height:           100%;
  content:          attr(data-text);
  transition:       color 0.5s;
  transform:        rotateX(-90deg);
  transform-origin: 50% 0;
  text-align:       center;
}

/* Btn Group (scale) */
.wc-btn-group { display: flex; width: fit-content; }
.wc-btn-group > *:nth-child(1) { transform: scale3d(0.5, 0.5, 1); margin-inline-end: -40px; }
.wc-btn-group > *:nth-child(2) { transform: scale3d(1, 1, 1); }
.wc-btn-group > *:nth-child(3) { transform: scale3d(1, 1, 1); margin-inline-start: 0; }

.wc-btn-group:hover > *:nth-child(1) { transform: scale3d(1, 1, 1); margin-inline-end: 0; }
.wc-btn-group:hover > *:nth-child(2) { transform: scale3d(1, 1, 1); }
.wc-btn-group:hover > *:nth-child(3) { transform: scale3d(0.5, 0.5, 1); margin-inline-start: -40px; }


/* ============================================================
   14. BUTTON ANIMATIONS
   ============================================================ */

/* Hover Default */
.btn-hover-default          { transition: all 0.5s; }
.btn-hover-default:hover    { color: var(--black); background-color: var(--white); }

/* BG Change */
.btn-hover-bgchange {
  overflow:  hidden;
  position:  relative;
  z-index:   5;
}

.btn-hover-bgchange span {
  position:         absolute;
  content:          "";
  width:            0;
  height:           0;
  left:             50%;
  top:              50%;
  z-index:         -1;
  border-radius:    100%;
  transition:       all 1s;
  background-color: var(--primary);
  transform:        translate(-50%, -50%);
}

.btn-hover-bgchange:hover          { color: var(--black); border: 1px solid var(--primary); }
.btn-hover-bgchange:hover span     { width: 400px; height: 400px; }

/* Cross Fill */
.btn-hover-cross {
  overflow:  hidden;
  position:  relative;
  transition: all 1s;
}

.btn-hover-cross::after {
  position:         absolute;
  content:          "";
  width:            150%;
  height:           0%;
  left:             50%;
  top:              50%;
  background-color: var(--primary);
  transform:        translateX(-50%) translateY(-50%) rotate(0deg);
  transition:       all 0.75s;
  opacity:          0.5;
  z-index:         -1;
}

.btn-hover-cross:hover          { border-color: var(--primary); background-color: rgba(0, 0, 0, 0); }
.btn-hover-cross:hover::after   { height: 120%; opacity: 1; }

/* Divide Fill */
.btn-hover-divide {
  overflow:  hidden;
  position:  relative;
  transition: all 1s;
  z-index:   1;
}

.btn-hover-divide::after {
  position:         absolute;
  content:          "";
  width:            150%;
  height:           0%;
  left:             50%;
  top:              50%;
  background-color: var(--primary);
  transform:        translateX(-50%) translateY(-50%) rotate(90deg);
  transition:       all 0.75s;
  opacity:          0.5;
  z-index:         -1;
}

.btn-hover-divide:hover        { border-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0) !important; }
.btn-hover-divide:hover::after { height: 400%; opacity: 1; }

/* Cropping Fill */
.btn-hover-cropping {
  overflow:  hidden;
  position:  relative;
  transition: all 1s;
}

.btn-hover-cropping::after {
  position:         absolute;
  content:          "";
  width:            150%;
  height:           0%;
  left:             50%;
  top:              50%;
  background-color: var(--primary);
  transform:        translateX(-50%) translateY(-50%) rotate(25deg);
  transition:       all 0.75s;
  opacity:          0.5;
  z-index:         -1;
}

.btn-hover-cropping:hover        { border-color: var(--primary); background-color: rgba(0, 0, 0, 0); }
.btn-hover-cropping:hover::after { height: 400%; opacity: 1; }

/* Mask */
.btn-hover-mask {
  gap:            10px;
  display:        inline-flex;
  align-items:    center;
  padding:        15px 30px;
  position:       relative;
  overflow:       hidden;
  transition:     all 0.5s;
  border-radius:  5px;
  color:          var(--white);
  font-weight:    400;
  font-size:      16px;
  border:         1px solid var(--white);
  z-index:        1;
}

.btn-hover-mask::after {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--black);
  position:         absolute;
  content:          attr(data-text);
  cursor:           pointer;
  width:            100%;
  height:           100%;
  left:             0;
  top:              0;
  background-color: var(--white);
  -webkit-mask:     url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  mask:             url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  -webkit-mask-size: 2300% 100%;
  mask-size:        2300% 100%;
  animation:        mask_animation_2 0.7s steps(22) forwards;
}

.btn-hover-mask:hover        { color: var(--white); }
.btn-hover-mask:hover::after { animation: mask_animation 0.7s steps(22) forwards; }

.dark .btn-hover-mask        { border-color: var(--black); }
.dark .btn-hover-mask::after { z-index: -1; color: var(--white); background-color: var(--black); }
.dark .btn-hover-mask:hover  { color: var(--black); }

/* Rollover Top */
.btn-rollover-top {
  position:  relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-top:before {
  position:         absolute;
  left:             0px;
  bottom:           0px;
  height:           0px;
  width:            100%;
  z-index:         -1;
  content:          "";
  background-color: var(--primary);
  transition:       all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-top:hover         { border-color: var(--primary); background-color: rgba(0, 0, 0, 0); }
.btn-rollover-top:hover::before { top: 0%; bottom: auto; height: 100%; }

/* Rollover Left */
.btn-rollover-left {
  position:  relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-left::before {
  position:         absolute;
  top:              0px;
  right:            0px;
  height:           100%;
  width:            0px;
  z-index:         -1;
  content:          "";
  background-color: var(--primary);
  transition:       all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.btn-rollover-left:hover         { border-color: var(--primary); background-color: rgba(0, 0, 0, 0); }
.btn-rollover-left:hover::before { left: 0%; right: auto; width: 100%; }

/* Rollover Cross */
.btn-rollover-cross {
  overflow:  hidden;
  position:  relative;
  transition: all 0.5s;
}

.btn-rollover-cross::before {
  position:     absolute;
  content:      "";
  width:        100%;
  height:       100%;
  bottom:       100%;
  left:         100%;
  opacity:      0;
  border-bottom: 3px solid var(--primary);
  border-left:   3px solid var(--primary);
  transition:   all 0.75s;
}

.btn-rollover-cross::after {
  position:     absolute;
  content:      "";
  width:        100%;
  height:       100%;
  top:          100%;
  right:        100%;
  opacity:      0;
  border-top:   3px solid var(--primary);
  border-right: 3px solid var(--primary);
  transition:   all 0.75s;
}

.btn-rollover-cross:hover         { border-color: rgba(0, 0, 0, 0); color: var(--primary); }
.btn-rollover-cross:hover::before { bottom: 0; left: 0; opacity: 1; width: 100%; height: 100%; }
.btn-rollover-cross:hover::after  { top: 0;  right: 0; opacity: 1; width: 100%; height: 100%; }

/* Parallel Border */
.btn-parallal-border {
  overflow:  hidden;
  position:  relative;
  transition: all 0.5s;
}

.btn-parallal-border::before {
  position:     absolute;
  content:      "";
  width:        0%;
  height:       0%;
  bottom:       0;
  left:         0;
  opacity:      0;
  border-bottom: 3px solid var(--primary);
  border-left:   3px solid var(--primary);
  border-radius: 5px;
  transition:   all 0.75s;
}

.btn-parallal-border::after {
  position:     absolute;
  content:      "";
  width:        0%;
  height:       0%;
  top:          0;
  right:        0;
  opacity:      0;
  border-top:   3px solid var(--primary);
  border-right: 3px solid var(--primary);
  border-radius: 5px;
  transition:   all 0.75s;
}

.btn-parallal-border:hover         { border-color: rgba(0, 0, 0, 0); color: var(--primary); }
.btn-parallal-border:hover::before { opacity: 1; width: 100%; height: 100%; }
.btn-parallal-border:hover::after  { opacity: 1; width: 100%; height: 100%; }


/* ============================================================
   15. NAVIGATION / MENU
   ============================================================ */

/* Main Menu */
.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: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%;
  visibility:         visible;
}

.main-menu li { position: relative; }

.main-menu li a {
  display:        flex;
  align-items:    center;
  font-weight:    400;
  font-size:      16px;
  line-height:    1;
  color:          var(--primary);
  padding:        37px 15px;
  text-transform: uppercase;
}

/* Dropdown Menu */
.main-menu ul.dp-menu {
  background-color:   #232529;
  padding:            18px 0px;
  width:              240px;
  position:           absolute;
  inset-inline-start: 10px;
  opacity:            0;
  pointer-events:     none;
  z-index:            10;
  transition:         all 0.5s;
}

.main-menu ul.dp-menu ul {
  background:         #232529;
  padding:            18px 0px;
  width:              230px;
  position:           absolute;
  inset-inline-start: calc(100% + 10px);
  top:                0;
  opacity:            0;
  z-index:            10;
  transition:         all 0.5s;
  visibility:         hidden;
}

.main-menu ul.dp-menu li { position: relative; padding: 0 25px; }

.main-menu ul.dp-menu li:hover > a { color: var(--white); background-color: rgba(0, 0, 0, 0); }
.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:        16px;
  font-weight:      500;
  color:            #999;
  padding:          10px 0;
  background-color: rgba(0, 0, 0, 0);
  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 ul.dp-menu.col-2 { column-count: 2; width: 500px; }

.main-menu .has-mega-menu { position: static; }

.main-menu li.menu-item-has-children > a:after {
  content: "";
  font-family:    var(--font_awesome);
  margin-inline-start: 5px;
  font-weight:    600;
  font-size:      14px;
}

/* Mega Menu */
.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:     16px;
  font-weight:   500;
  color:         #999;
  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;
}

/* Mega Style Variants */
.main-menu .mega-style-2 { padding: 0 15%; gap: 0; grid-template-columns: repeat(2, 1fr); }
.main-menu .mega-style-2 .title { height: 70px; padding-bottom: 0; margin-bottom: 0; position: relative; overflow: visible; padding-left: 30px; }
.main-menu .mega-style-2 .title:after { position: absolute; content: ""; width: 5000px; height: 1px; background-color: #333337; bottom: -1px; left: 50%; transform: translateX(-50%); }
.main-menu .mega-style-2 > li:not(:first-child) { border-left: 1px solid #333337; }
.main-menu .mega-style-2 ul { column-count: 2; position: relative; padding: 20px 0; }
.main-menu .mega-style-2 ul:after { position: absolute; content: ""; width: 1px; height: 700px; background-color: #333337; top: 0; left: 50%; z-index: 1; }
.main-menu .mega-style-2 ul li a { padding-left: 30px; }

.main-menu .mega-style-3 { padding: 0 0 0 20px; gap: 0; grid-template-columns: repeat(3, 1fr); }
.main-menu .mega-style-3 .title { height: 70px; padding-bottom: 0; margin-bottom: 0; position: relative; overflow: visible; padding-left: 30px; }
.main-menu .mega-style-3 .title:after { position: absolute; content: ""; width: 5000px; height: 1px; background-color: #333337; bottom: -1px; left: 50%; transform: translateX(-50%); }
.main-menu .mega-style-3 > li:not(:first-child) { border-left: 1px solid #333337; }
.main-menu .mega-style-3 > li:last-child { border: none; width: 36vw; }
@media only screen and (max-width: 1399px) { .main-menu .mega-style-3 > li:last-child { width: 32vw; } }
.main-menu .mega-style-3 ul { column-count: 2; position: relative; padding: 20px 0; column-gap: 0; }
.main-menu .mega-style-3 ul:after { position: absolute; content: ""; width: 1px; height: 700px; background-color: #333337; top: 0; left: 50%; z-index: 1; }
.main-menu .mega-style-3 ul li { margin: 0 10px; }
.main-menu .mega-style-3 ul li a { padding-left: 20px; }

/* Grid variants */
.main-menu .mega-grid-6 { grid-template-columns: repeat(6, 1fr); }
.main-menu .mega-grid-2 { grid-template-columns: repeat(2, 1fr); row-gap: 60px; }
.main-menu .list-3-column ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 50px; }
@media only screen and (max-width: 1399px) { .main-menu .list-3-column ul { column-gap: 30px; } }
.main-menu .span-first-item ul li:first-child { grid-column: 1 / -1; column-span: all; }

/* New Badge */
.main-menu .new {
  font-size:        10px;
  font-weight:      600;
  background:       #ffa38e;
  color:            var(--black);
  padding:          3px 7px;
  line-height:      1;
  border-radius:    2px;
  margin-inline-start: 8px;
  display:          inline-block;
}

/* Mega Menu Thumb */
.mega-menu-thumb {
  width:    108%;
  aspect-ratio: 100/83;
  position: absolute;
  right:    0;
  bottom:   0;
  z-index: -1;
}

@media only screen and (max-width: 1199px) {
  .mega-menu-thumb { width: 100%; height: 100%; }
}

.mega-menu-thumb:after {
  position:   absolute;
  content:    "";
  width:      76%;
  height:     100%;
  top:        0;
  left:       0;
  background: linear-gradient(270deg, rgba(28, 29, 32, 0) 0%, #1C1D20 100%);
}

.mega-menu-thumb .laptop-view {
  width:          70%;
  aspect-ratio:   100/114;
  object-fit:     cover;
  object-position: center top;
  position:       absolute;
  right:          70px;
  bottom:         0;
}

.mega-menu-counter__item {
  text-align: center;
  display:    inline-block;
  margin-top: 35%;
  margin-left: 17%;
  position:   relative;
}

@media only screen and (max-width: 1199px) {
  .mega-menu-counter__item { margin: 30px auto 50px; }
}

.mega-menu-counter__text p { font-size: 30px; line-height: 28px; color: var(--white); font-weight: 500; }

.mega-menu-counter__number {
  font-size:   150px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 24px;
  color:       var(--white);
  background:  linear-gradient(136deg, #9479FF 0%, #FFA6D6 47.92%, #FFFCE3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

/* Menu with Numbers */
@media only screen and (max-width: 1199px) { .menu-with-number { display: none; } }

.menu-with-number li { display: inline-block; }

.menu-with-number li a {
  font-weight:    500;
  font-size:      14px;
  line-height:    1.5;
  color:          var(--white);
  padding:        34px 40px;
  display:        inline-block;
  text-transform: uppercase;
}

.menu-with-number li a:hover span          { color: var(--white); }
.menu-with-number li a:hover span::before  { background-color: var(--white); }
.menu-with-number li a.active span         { color: var(--white); }

.menu-with-number li a.active span::before {
  position:         absolute;
  content:          "";
  width:            35px;
  height:           1px;
  right:            20px;
  top:              50%;
  background-color: var(--white);
}

.menu-with-number li a span {
  display:     block;
  font-weight: 500;
  font-size:   12px;
  line-height: 10px;
  text-align:  right;
  color:       #999;
  position:    relative;
  transition:  all 0.5s;
}

.menu-with-number li a span::before {
  position:         absolute;
  content:          "";
  width:            35px;
  height:           1px;
  right:            20px;
  top:              50%;
  transition:       all 0.5s;
  background-color: var(--black-6);
}

/* Light menu overrides */
.light .main-menu li a:hover               { color: var(--primary); }
.light .main-menu-2 li a                   { color: var(--black); }
.light .main-menu-2 li a:hover             { color: var(--primary); }
.light .main-menu-3 li a                   { color: var(--black); }
.light .main-menu-3 li a:hover             { color: var(--primary); }
.light .sidebar-menu li a                  { color: var(--black); }
.light .sidebar-menu li a:hover            { color: var(--primary); }
.light .menu-with-number li a              { color: var(--black); }
.light .menu-with-number li a:hover span   { color: var(--black); }
.light .menu-with-number li a:hover span::before { background-color: var(--black); }
.light .menu-with-number li a span         { color: var(--black-9); }
.light .menu-with-number li a span::before { background-color: var(--black-9); }
.light .menu-with-number li a.active span  { color: var(--black); }
.light .menu-with-number li a.active span::before { background-color: var(--black); }

/* Secondary Menu Styles */
@media only screen and (max-width: 1199px) { .main-menu-2 { display: none; } }

.main-menu-2 li         { display: inline-block; padding: 0 10px; }
.main-menu-2 li a       { display: block; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--white); padding: 10px; text-transform: capitalize; }
.main-menu-2 li a:hover { color: var(--primary); }

@media only screen and (max-width: 1399px) { .main-menu-2 li a { padding: 5px 0; } }

.main-menu-3 li           { display: inline-block; margin-right: 45px; }
@media only screen and (max-width: 1199px) { .main-menu-3 li { margin-right: 25px; } }
.main-menu-3 li:last-child { margin-right: 0; }
.main-menu-3 li a          { color: var(--white); font-weight: 500; font-size: 18px; line-height: 26px; }
.main-menu-3 li a:hover    { color: var(--primary); }

.main-menu-4 li       { display: inline-block; margin-right: 50px; }
.main-menu-4 li a     { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--white); text-transform: uppercase; }
.main-menu-4 li a:hover { color: var(--primary); }

/* Sidebar Menu */
.sidebar-menu li           { display: block; padding-bottom: 15px; }
@media only screen and (max-width: 1919px) { .sidebar-menu li { padding-bottom: 10px; } }
.sidebar-menu li a         { display: block; font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--white); padding: 10px 0; text-transform: uppercase; }
.sidebar-menu li a:hover,
.sidebar-menu li a.active  { color: var(--primary); }
@media only screen and (max-width: 1399px) { .sidebar-menu li a { padding: 5px 0; } }

/* Off-canvas Mean Menu */
.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;
}

.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  color:        var(--black);
  border-color: var(--white-4);
}

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

.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  background-color: var(--white-4);
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand { right: 275px; }

@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; }
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover { background-color: var(--white-4); }

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child { border-top: 1px solid var(--black-4); }
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child { border-color: var(--white-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; }
.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar      { width: 0; }
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal                 { display: none !important; }


/* ============================================================
   16. MODAL
   ============================================================ */
.modal__dialog {
  width:      760px;
  max-width:  100%;
  margin-top: 100px;
}

@media only screen and (max-width: 991px) { .modal__dialog { width: 700px; margin-top: 80px; } }
@media only screen and (max-width: 767px) { .modal__dialog { width: 350px; } }

.modal__content        { height: 500px; }
@media only screen and (max-width: 767px) { .modal__content { height: 300px; } }
.modal__content iframe { width: 100%; height: 100%; }

.modal__close {
  position:      absolute;
  width:         40px;
  height:        40px;
  top:           -15px;
  right:         -15px;
  z-index:       9;
  border-radius: 50px;
  font-size:     20px;
  color:         var(--white);
  background:    var(--black);
  transition:    all 0.3s;
}

.modal__close:hover { color: var(--primary); }

.modal__sfluence {
  width:   100%;
  height:  100%;
  padding: 60px;
}

@media only screen and (max-width: 767px) { .modal__sfluence { padding: 20px 10px; } }

.modal__sfluence-area {
  width:      100vw;
  height:     100vh;
  background: var(--black);
  position:   fixed;
  top:        0;
  left:       0;
  z-index:    9;
  opacity:    0;
  visibility: hidden;
  transition: all 0.5s;
  transform:  scale(0.5);
}

.modal__sfluence-area.showed { opacity: 1; visibility: visible; transform: scale(1); }

.modal__sfluence-area .close_btn {
  position:        absolute;
  width:           60px;
  height:          60px;
  top:             0px;
  right:           20px;
  z-index:         9;
  border-radius:   50px;
  font-size:       30px;
  color:           var(--white);
  transition:      all 0.3s;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.modal__sfluence-area .close_btn:hover { color: var(--primary); }

@media only screen and (max-width: 767px) { .modal__sfluence-area .close_btn { right: 0; } }

.modal__sfluence-area iframe,
.modal__sfluence-area video { width: 100%; height: 100%; }

@media only screen and (max-width: 767px) {
  .modal__sfluence-area iframe,
  .modal__sfluence-area video {
    height:      300px;
    object-fit:  cover;
    margin-top:  45%;
  }
}


/* ============================================================
   17. CURSOR
   ============================================================ */
.cursor {
  position:        fixed;
  pointer-events:  none;
  font-weight:     500;
  font-size:       16px;
  line-height:     23px;
  color:           var(--white);
  background:      var(--black);
  text-transform:  capitalize;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100px;
  height:          100px;
  border-radius:   100%;
  transform:       translate(-50%, -50%);
  z-index:         999;
  opacity:         0;
  mix-blend-mode:  hard-light;
  transition:      all 0.3s;
}

.cursor.large { width: 180px; height: 180px; text-align: center; font-size: 19px; font-weight: 400; }

.cursor1 {
  position:      fixed;
  width:         40px;
  height:        40px;
  border:        1px solid var(--primary);
  border-radius: 50%;
  left:          0;
  top:           0;
  pointer-events: none;
  transform:     translate(-50%, -50%);
  transition:    0.15s;
  z-index:       999;
}

@media (max-width: 1200px) { .cursor1 { display: none; } }

.cursor2 {
  position:         fixed;
  width:            8px;
  height:           8px;
  background-color: var(--primary);
  border-radius:    50%;
  left:             0;
  top:              0;
  pointer-events:   none;
  transform:        translate(-50%, -50%);
  transition:       0.2s;
  z-index:          999;
}

@media (max-width: 1200px) { .cursor2 { display: none; } }

.cursor-testi {
  position:         fixed;
  width:            80px;
  height:           80px;
  background-color: var(--black);
  border-radius:    50%;
  left:             0;
  top:              0;
  pointer-events:   none;
  transform:        translate(-50%, -50%);
  transition:       0.2s;
  z-index:          999;
}

@media (max-width: 1200px) { .cursor-testi { display: none; } }

/* WC Cursor */
.wc-cursor {
  position:      fixed;
  top:           0;
  left:          0;
  z-index:       150;
  contain:       layout style size;
  pointer-events: none;
  will-change:   transform;
  color:         var(--primary);
  transition:    opacity 0.3s, color 0.4s;
}

.wc-cursor:before {
  content:       "";
  position:      absolute;
  top:           -24px;
  left:          -24px;
  display:       block;
  width:         48px;
  height:        48px;
  transform:     scale(0);
  background:    currentColor;
  border-radius: 50%;
  transition:    transform 0.3s ease-in-out, opacity 0.1s;
}

.wc-cursor-text {
  position:        absolute;
  top:             -30px;
  left:            -30px;
  width:           60px;
  height:          60px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transform:       scale(0) rotate(10deg);
  opacity:         0;
  color:           var(--white);
  font-size:       16px;
  line-height:     20px;
  text-align:      center;
  letter-spacing:  -0.01em;
  transition:      opacity 0.4s, transform 0.3s;
}

.wc-cursor.text .wc-cursor-text { opacity: 1; transform: scale(1); }

/* Cursor State Classes */
@supports (mix-blend-mode: exclusion) {
  .wc-cursor.exclusion:before,
  .wc-cursor.opaque:before { background: var(--white); }
}

.wc-cursor.normal:before,
.wc-cursor.text:before  { background: currentColor; }

.wc-cursor.inverse      { color: var(--white); }
.wc-cursor.visible:before { transform: scale(0.2); }
.wc-cursor.visible.active:before { transform: scale(0.23); transition-duration: 0.2s; }
.wc-cursor.pointer:before { transform: scale(0.15); }
.wc-cursor.text:before  { opacity: 0.85; transform: scale(1.7); }
.wc-cursor.text.active:before { transform: scale(1.6); transition-duration: 0.2s; }
.wc-cursor.opaque:before { transform: scale(1.32); }
.wc-cursor.opaque.active:before { transform: scale(1.2); }
.wc-cursor.sm:before    { transform: scale(1.25); }
.wc-cursor.md:before    { transform: scale(1.5); }
.wc-cursor.lg:before    { transform: scale(2); }
.wc-cursor.xl:before    { transform: scale(2.5); }
.wc-cursor.xxl:before   { transform: scale(3); }
.wc-cursor.xxxl:before  { transform: scale(3.5); }
.wc-cursor.hidden:before { transform: scale(0); }


/* ============================================================
   18. PROGRESS BAR
   ============================================================ */
.progress__item p.title,
.progress__item-2 p.title {
  font-weight:    500;
  font-size:      15px;
  line-height:    25px;
  color:          var(--white);
  padding-bottom: 15px;
  text-transform: uppercase;
}

.progress__item-2 { padding-bottom: 25px; }

.light .progress__item p.title,
.light .progress__item-2 p.title { color: var(--black); }


/* ============================================================
   19. CTA SECTION
   ============================================================ */
.cf-cta__text-wrapper {
  display:         grid;
  grid-template-columns: auto auto;
  align-items:     center;
  justify-content: space-between;
  grid-gap:        45px;
}

@media only screen and (max-width: 991px) {
  .cf-cta__text-wrapper { grid-template-columns: 1fr; }
}

.cf-cta__btn .wc-btn-default {
  font-size:        18px;
  font-weight:      600;
  padding:          35px 75px;
  background-color: var(--white);
  color:            var(--black);
  text-transform:   uppercase;
  border-width:     0;
}

.dark .cf-cta__btn .wc-btn-default { background-color: var(--black); color: var(--white); }

@media only screen and (max-width: 1199px) {
  .cf-cta__btn .wc-btn-default { padding: 20px 40px; font-weight: 500; }
}

.dark .cf-cta__btn .wc-btn-default:hover { color: var(--black); }

.cf-cta__text {
  max-width:        250px;
  position:         absolute;
  inset-inline-end: -30px;
  top:              47%;
  transform:        translateY(-50%);
}

@media only screen and (max-width: 1199px) { .cf-cta__text { inset-inline-end: -130px; max-width: 270px; } }
@media only screen and (max-width: 991px)  { .cf-cta__text { inset-inline-end: 0; max-width: 270px; } }
@media only screen and (max-width: 767px)  { .cf-cta__text { position: static; transform: none; } }

.cf-cta__text p          { font-size: 18px; }
.dark .cf-cta__text p    { color: #555; }

.cf-cta__sec-title-wrapper { position: relative; }

@media only screen and (max-width: 767px) {
  .cf-cta__sec-title-wrapper .sec-title-18 { margin-bottom: 20px; font-size: 40px; }
}


/* ============================================================
   20. SWITCHER
   ============================================================ */
.switcher__area {
  position:  relative;
  direction: ltr;
}

@media only screen and (max-width: 767px) { .switcher__area { display: none; } }

.switcher__icon {
  position:       fixed;
  width:          50px;
  height:         50px;
  background:     var(--white);
  right:          0;
  top:            40%;
  transform:      translateY(-50%);
  z-index:        999;
  transition:     all 0.3s;
  mix-blend-mode: exclusion;
}

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

.switcher__icon button {
  font-size:       24px;
  color:           var(--black);
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          100%;
  width:           100%;
  transition:      all 0.3s;
}

.switcher__icon button:hover        { color: var(--white-2); }
.switcher__icon button#switcher_open { animation: wcSpinner 5s infinite linear; }

.switcher__items {
  width:     280px;
  padding:   50px 30px;
  background: var(--black);
  position:  fixed;
  right:     -280px;
  top:       40%;
  z-index:   99;
  transform: translateY(-50%);
  font-family: var(--font_primary);
  transition: all 0.3s;
}

.switcher__items .wc-col-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; }

.switcher__item { margin-bottom: 30px; }

@media only screen and (max-width: 1399px) {
  .switcher__item:nth-child(3) { display: none; }
}

.switcher__item:last-child { margin-bottom: 0; }

.switcher__title {
  font-weight:    500;
  font-size:      20px;
  line-height:    1.5;
  color:          var(--white) !important;
  text-transform: capitalize;
  padding-bottom: 10px;
}

.switcher__btn button {
  display:          inline-block;
  font-weight:      500;
  font-size:        14px;
  line-height:      1.5;
  color:            var(--white-2);
  background:       #2b2b2f;
  border-radius:    4px;
  padding:          10px 15px;
  text-transform:   capitalize;
}

.switcher__btn button:hover,
.switcher__btn button.active { color: var(--white); }

.switcher__btn select {
  font-weight:    400;
  font-size:      14px;
  line-height:    1.5;
  color:          var(--white-2);
  width:          100%;
  border:         none;
  padding:        9px 10px;
  border-radius:  4px;
  background:     #2b2b2f;
  text-transform: capitalize;
  outline:        none;
  cursor:         pointer;
}

#switcher_close { display: none; }

.overlay-switcher-close {
  position:         fixed;
  z-index:          99;
  height:           100%;
  width:            100%;
  background-color: rgba(0, 0, 0, 0);
  display:          none;
}

.overlay-switcher-close.show-overlay { display: block; }


/* ============================================================
   21. OFF-CANVAS
   ============================================================ */
.offcanvas-3__area {
  background: var(--primary);
  position:   fixed;
  width:      100%;
  height:     100%;
  padding:    50px 50px 100px;
  z-index:    100000;
  overflow:   hidden;
}

@media (max-height: 500px) { .offcanvas-3__area { padding: 40px; } }

.offcanvas-3__inner {
  display:               grid;
  grid-template-columns: 340px 1fr;
  height:                100%;
}

@media only screen and (max-width: 991px) { .offcanvas-3__inner { grid-template-columns: 260px 1fr; } }

@media only screen and (max-width: 767px) {
  .offcanvas-3__inner {
    overflow-y:     scroll;
    display:        flex;
    flex-direction: column;
  }
}

@media (max-height: 500px) { .offcanvas-3__inner { overflow-y: scroll; } }
.offcanvas-3__inner::-webkit-scrollbar { width: 0; }

.offcanvas-3__meta li {
  font-size:      18px;
  line-height:    20px;
  color:          var(--white);
  text-transform: uppercase;
}

.offcanvas-3__meta li:not(:last-child) { margin-bottom: 19px; }
.offcanvas-3__meta li a:hover          { color: var(--secondary); }

.offcanvas-3__meta-wrapper {
  display:         flex;
  flex-direction:  column;
  gap:             50px;
  justify-content: space-between;
}

.offcanvas-3__social .title {
  font-size:      18px;
  font-weight:    600;
  line-height:    20px;
  color:          var(--white);
  text-transform: uppercase;
  margin-bottom:  10px;
}

.offcanvas-3__social-links     { display: flex; gap: 20px; }
.offcanvas-3__social-links a   { font-size: 18px; color: var(--white); }
.offcanvas-3__social-links a:hover { color: var(--secondary); }

.offcanvas-3__menu             { position: relative; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; }
.offcanvas-3__menu ul          { position: relative; }

.offcanvas-3__menu ul:before {
  position:         absolute;
  content:          "";
  width:            1px;
  height:           100%;
  background:       #333337;
  inset-inline-start: 8px;
  top:              0;
}

@media only screen and (max-width: 767px) { .offcanvas-3__menu ul:before { display: none; } }
@media (max-height: 500px) { .offcanvas-3__menu ul:before { height: 100%; } }

.offcanvas-3__menu li { padding-inline-start: 58px; position: relative; }

@media only screen and (max-width: 767px) { .offcanvas-3__menu li { padding-left: 0; } }

.offcanvas-3__menu li:hover > a   { color: var(--white); }
.offcanvas-3__menu li:hover:before { opacity: 1; visibility: visible; }

.offcanvas-3__menu li:before {
  position:         absolute;
  content:          "";
  width:            17px;
  height:           17px;
  background:       var(--white);
  border-radius:    50%;
  border:           4px solid var(--black-2);
  inset-inline-start: 0;
  top:              38%;
  transform:        translateY(-50%);
  opacity:          0;
  visibility:       hidden;
  transition:       0.5s;
}

@media only screen and (max-width: 767px) { .offcanvas-3__menu li:before { display: none; } }

.offcanvas-3__menu li:not(:last-child)         { margin-bottom: 26px; }
@media only screen and (max-width: 991px) {
  .offcanvas-3__menu li:not(:last-child) { margin-bottom: 20px; }
}

.offcanvas-3__menu li a {
  font-size:          120px;
  font-size:          8vh;
  color:              var(--secondary);
  text-transform:     uppercase;
  line-height:        0.9;
  position:           relative;
  transition:         all 0.5s cubic-bezier(0, 0, 0.23, 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background-image:   linear-gradient(90deg, #fff, #ddd 50%, #666 0);
  background-size:    200% 100%;
  background-position: 100%;
  transform:          perspective(359px) rotateY(-18deg);
}

.offcanvas-3__menu li a:hover { background-position: 0; color: #fff; letter-spacing: 1.5px; }

@media only screen and (max-width: 1399px) { .offcanvas-3__menu li a { font-size: 7vh; } }
@media only screen and (max-width: 1199px) { .offcanvas-3__menu li a { font-size: 6vh; } }

@media only screen and (max-width: 991px) {
  .offcanvas-3__menu li a {
    font-size:              2.5vh;
    color:                  rgba(255, 255, 255, 0.67);
    background-image:       unset;
    -webkit-text-fill-color: unset;
  }
}

.offcanvas-3__menu-wrapper { display: flex; align-items: flex-end; overflow-y: hidden; }

/* Off-canvas open/close animation states */
.offcanvas-3__area                  { left: 0%; opacity: 0; visibility: hidden; transform: perspective(359px) rotateY(50deg); }
.offcanvas-3__menu ul li            { opacity: 0; top: -100px; position: relative; transform: perspective(359px) rotateX(50deg); }
.offcanvas-3__meta                  { opacity: 0; top: -30px; position: relative; }
.offcanvas-3__social                { opacity: 0; top: -30px; position: relative; }

/* Close Button */
.close-button {
  width:            70px;
  height:           70px;
  border-radius:    100%;
  background-color: var(--black-2);
  position:         relative;
  border:           1px solid #333337;
  transition:       all 0.5s;
}

@media only screen and (max-width: 767px) { .close-button { width: 50px; height: 50px; } }

.close-button:hover         { background-color: var(--secondary); }
.close-button:hover span    { background-color: var(--primary); }

.close-button span {
  width:            26px;
  height:           1px;
  display:          inline-block;
  background-color: var(--white);
  position:         absolute;
  left:             50%;
  top:              50%;
  transition:       all 0.5s;
}

@media only screen and (max-width: 767px) { .close-button span { width: 20px; } }

.close-button span:first-child { transform: translateX(-50%) rotate(45deg); }
.close-button span:last-child  { transform: translateX(-50%) rotate(-45deg); }


/* ============================================================
   22. FEATURE COMPONENTS
   ============================================================ */

/* Feature Style 1 */
.cf_feature.style-1 .thumb          { margin-bottom: 50px; }
@media only screen and (max-width: 1199px) { .cf_feature.style-1 .thumb { margin-bottom: 30px; } }
.cf_feature.style-1 .title         { font-size: 22px; font-weight: 700; line-height: 1.15; margin-bottom: 20px; }
.cf_feature.style-1 .title:hover   { color: var(--action); }
.cf_feature.style-1 .text          { color: var(--primary); }
.cf_feature.style-1 .btn-wrapper   { display: none; }

/* Feature Text Design */
.cf_feature.text-design {
  padding:      60px;
  padding-left: 70px;
  padding-right: 0;
  border-left:  1px solid rgba(18, 18, 18, 0.06);
}

@media only screen and (max-width: 1199px) { .cf_feature.text-design { padding-left: 30px; } }
@media only screen and (max-width: 991px)  { .cf_feature.text-design { border: 0; padding-left: 0; } }
@media only screen and (max-width: 767px)  { .cf_feature.text-design { padding-top: 30px; padding-bottom: 30px; } }

.cf_feature.text-design .thumb       { margin-bottom: 30px; }
.cf_feature.text-design .title-2     { font-size: 30px; font-weight: 600; line-height: 1.16; text-decoration-line: underline; margin-bottom: 40px; }

@media only screen and (max-width: 1199px) {
  .cf_feature.text-design .title-2 { font-size: 22px; margin-bottom: 20px; }
}

/* Feature Style 2 */
.cf_feature.style-2 {
  padding:      60px;
  border-right: 1px solid rgba(18, 18, 18, 0.06);
}

@media only screen and (max-width: 1199px) { .cf_feature.style-2 { padding: 30px; } }
@media only screen and (max-width: 767px)  { .cf_feature.style-2 { padding-left: 0; } }

.cf_feature.style-2:first-child { padding-left: 0; }
.cf_feature.style-2:last-child  { border-right: 0; padding-right: 0; }

/* Feature Style 3 */
.cf_feature.style-3 {
  border-right: 1px solid #f1f1f1;
  border-top:   1px solid #f1f1f1;
  padding:      50px;
  padding-bottom: 0;
}

@media only screen and (max-width: 1199px) { .cf_feature.style-3 { padding: 30px; } }
@media only screen and (max-width: 991px)  { .cf_feature.style-3 { flex-basis: 45%; border: 0; padding-left: 0; } }
@media only screen and (max-width: 767px)  { .cf_feature.style-3 { padding-left: 0; margin-bottom: 0; flex-basis: 100%; padding-bottom: 20px; } }

.cf_feature.style-3:first-child { padding-left: 0; }
.cf_feature.style-3:last-child  { border-right: 0; }

.cf_feature.style-3:hover .title          { padding-left: 15px; }
.cf_feature.style-3:hover .title::before  { left: 0; }

.cf_feature.style-3 .content { overflow: hidden; }

.cf_feature.style-3 .count-title {
  color:       var(--primary);
  font-size:   14px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 25px;
}

.cf_feature.style-3 .title {
  color:       var(--primary);
  font-size:   24px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 25px;
  transition:  0.3s;
  position:    relative;
}

.cf_feature.style-3 .title::before {
  content:          "";
  position:         absolute;
  left:             -10px;
  top:              0;
  height:           100%;
  width:            1px;
  background-color: var(--primary);
}

.cf_feature.style-3 .title:hover { color: var(--action); }

.cf_feature.style-3 .text      { margin-bottom: 100px; }
@media only screen and (max-width: 991px) { .cf_feature.style-3 .text { margin-bottom: 50px; } }
@media only screen and (max-width: 767px) { .cf_feature.style-3 .text { margin-bottom: 20px; } }

.cf_feature.style-3 .btn-underline {
  font-size:      16px;
  font-weight:    600;
  letter-spacing: 0;
  color:          var(--primary);
  text-transform: capitalize;
}


/* ============================================================
   23. PAGE — WEB AGENCY SECTIONS
   ============================================================ */

/* Page-level theme override */
/*:root { --theme: #C8F31D; }*/


/* --- Section Titles & Global Spacing --- */
.section-subtitle {
  font-size:      16px;
  line-height:    1;
  font-weight:    700;
  text-transform: uppercase;
  color:          var(--primary);
  display:        inline-block;
}

.section-title {
  text-transform: uppercase;
  font-size:      80px;
}

@media only screen and (max-width: 1919px) { .section-title { font-size: 65px; } }
@media only screen and (max-width: 1199px) { .section-title { font-size: 50px; } }
@media only screen and (max-width: 991px)  { .section-title { font-size: 40px; } }
@media only screen and (max-width: 767px)  { .section-title { font-size: 35px; } }

.section-title span       { color: var(--white-2); }
.dark .section-title span { color: #414141; }

.section-spacing {
  padding-top:    140px;
  padding-bottom: 140px;
}

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

.section-spacing-top {
  padding-top: 140px;
}

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

.section-spacing-bottom {
  padding-bottom: 140px;
}

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


/* --- Header --- */
.header-area {
  position:           absolute;
  top:                0;
  inset-inline-start: 0;
  inset-inline-end:   0;
  width:              100%;
  border-bottom:      1px solid var(--border);
  background-color:   var(--white);
}

.dark .header-area { background-color: var(--black); }

.header-area .header-area__inner {
  display:     flex;
  align-items: center;
  gap:         20px;
  position:    relative;
  height:      100px;
}

@media only screen and (max-width: 1919px) {
  .header-area .header-area__inner { height: 80px; }
}

.header-area .header-area__inner > *:first-child { margin-inline-end: auto; }

.header-area .main-menu li a {
  font-size:      22px;
  font-weight:    400;
  font-family:    var(--font_teko);
  text-transform: uppercase;
}

.header-area .search-icon { color: var(--primary); }

@media (max-width: 575px) { .header-area .header__meta { display: none; } }

.header-area .wc-btn-primary { padding: 14px 25px; }
@media only screen and (max-width: 991px) { .header-area .wc-btn-primary { padding: 11px 20px; } }

.dir-rtl .header-area .header__navicon img { transform: rotateY(180deg); }


/* --- Hero Area --- */
.hero-area-inner {
  padding-top:      200px;
  padding-bottom:   115px;
  position:         relative;
  margin-inline-end: -140px;
  padding-inline-end: 240px;
  z-index:          1;
}

@media only screen and (max-width: 1919px) {
  .hero-area-inner { margin-inline-end: 0; padding-inline-end: 190px; padding-top: 150px; }
}

@media only screen and (max-width: 1399px) { .hero-area-inner { padding-bottom: 85px; } }
@media only screen and (max-width: 991px)  { .hero-area-inner { padding-inline-end: 0; } }
@media only screen and (max-width: 767px)  { .hero-area-inner { padding-bottom: 55px; } }

.box-layout .hero-area-inner { margin-inline-end: 0; padding-inline-end: 140px; }

.hero-area-inner .info-text {
  border-inline-start: 1px solid var(--border);
  position:           absolute;
  inset-inline-end:   0;
  width:              140px;
  line-height:        1.8;
  height:             100%;
  padding-inline-start: 30px;
  top:                0;
  padding-top:        200px;
  font-size:          16px;
  color:              var(--primary);
}

@media only screen and (max-width: 1919px) { .hero-area-inner .info-text { padding-top: 150px; } }
@media only screen and (max-width: 991px)  { .hero-area-inner .info-text { display: none; } }

.hero-area-inner .area-shape-1 {
  position:         absolute;
  bottom:           0;
  inset-inline-end: calc(100% - 200px);
  width:            410px;
  z-index:         -1;
}

@media only screen and (max-width: 1919px) { .hero-area-inner .area-shape-1 { width: 330px; } }
.dir-rtl .hero-area-inner .area-shape-1 img { transform: rotateY(180deg); }

/* Hero Title */
.hero-area .section-title { font-size: 190px; line-height: 0.90; }

@media only screen and (max-width: 1919px) { .hero-area .section-title { font-size: 140px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-title { font-size: 110px; } }
@media only screen and (max-width: 991px)  { .hero-area .section-title { font-size: 70px;  } }

/* Marked text */
.hero-area .section-title .marked {
  font-size:    42px;
  line-height:  0.83;
  font-weight:  600;
  display:      inline-block;
  position:     relative;
  padding-bottom: 27px;
  transform:    translateY(-36px);
  color:        var(--primary);
}

@media only screen and (max-width: 1919px) { .hero-area .section-title .marked { font-size: 34px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-title .marked { font-size: 24px; padding-bottom: 10px; transform: translateY(-17px); } }

.hero-area .section-title .marked:before,
.hero-area .section-title .marked:after {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           1px;
  background-color: var(--theme);
  inset-inline-start: 0;
}

.hero-area .section-title .marked:before { bottom: 0; }
.hero-area .section-title .marked:after  { bottom: 4px; }
.hero-area .section-title .marked br     { display: block; }

/* Rotated text */
.hero-area .section-title .rotated {
  font-size:     30px;
  line-height:   0.66;
  text-transform: lowercase;
  font-weight:   400;
  width:         120px;
  height:        120px;
  background-color: var(--theme);
  display:       inline-flex;
  align-items:   center;
  padding-top:   19px;
  border-radius: 47px;
  writing-mode:  vertical-lr;
  transform:     rotate(180deg);
  color:         var(--primary);
}

@media only screen and (max-width: 1919px) { .hero-area .section-title .rotated { font-size: 22px; width: 90px;  height: 90px;  border-radius: 34px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-title .rotated { font-size: 18px; width: 70px;  height: 70px;  border-radius: 24px; padding-top: 9px; } }

/* Shape-1 */
.hero-area .section-title .shape-1 {
  display:           inline-flex;
  height:            120px;
  margin-inline-start: -30px;
  position:          relative;
}

@media only screen and (max-width: 1919px) { .hero-area .section-title .shape-1 { height: 90px; margin-inline-start: -25px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-title .shape-1 { height: 70px; margin-inline-start: -20px; } }

/* Hero Content */
.hero-area .section-content {
  display:               grid;
  gap:                   50px 60px;
  grid-template-columns: 1fr 520px;
  justify-content:       space-between;
}

@media only screen and (max-width: 1919px) { .hero-area .section-content { grid-template-columns: 1fr 420px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-content { grid-template-columns: 1fr 370px; } }
@media only screen and (max-width: 991px)  { .hero-area .section-content { grid-template-columns: 1fr 260px; } }
@media only screen and (max-width: 767px)  { .hero-area .section-content { grid-template-columns: 1fr; } }

.hero-area .section-content .text { font-size: 20px; line-height: 1.37; max-width: 380px; }

@media only screen and (max-width: 1399px) { .hero-area .section-content .text { font-size: 18px; } }

.hero-area .section-content .content-bottom {
  margin-inline-start: 315px;
  position:            relative;
  margin-top:          65px;
}

@media only screen and (max-width: 1919px) { .hero-area .section-content .content-bottom { margin-top: 35px; } }
@media only screen and (max-width: 1399px) { .hero-area .section-content .content-bottom { margin-inline-start: 110px; } }
@media only screen and (max-width: 767px) { .hero-area .section-content .content-bottom { margin-inline-start: 0px; } }

.hero-area .section-content .btn-wrapper   { margin-top: 48px; }

.hero-area .section-content .scroll-down {
  position:         absolute;
  top:              0;
  inset-inline-end: calc(100% + 60px);
  width:            max-content;
}

.hero-area .section-content .content-first { margin-top: 50px; }
@media only screen and (max-width: 767px)  { .hero-area .section-content .content-first { margin-top: 0; } }

/* Hero Thumbnails */
.hero-area .hero-thumb { display: flex; align-items: flex-start; }

.hero-area .hero-thumb .thumb-1 {
  margin-top:           160px;
  position:             relative;
  -webkit-mask-image:   url(../imgs/radius-half-left.webp);
  -webkit-mask-size:    contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat:  no-repeat;
}

.dir-rtl .hero-area .hero-thumb .thumb-1 { transform: rotateY(180deg); }

.hero-area .hero-thumb .thumb-1:after {
  position:         absolute;
  content:          "";
  width:            100%;
  height:           100%;
  /*background-color: red;*/
  top:              0;
  inset-inline-start: 0;
  mix-blend-mode:   multiply;
}

.hero-area .hero-thumb .thumb-2 {
  -webkit-mask-image:   url(../imgs/radius-half-right.webp);
  -webkit-mask-size:    contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat:  no-repeat;
}

.dir-rtl .hero-area .hero-thumb .thumb-2 { transform: rotateY(180deg); }

.hero-area .thumb-wrapper { position: relative; }

.hero-area .thumb-wrapper .shape-1 {
  position:           absolute;
  top:                46px;
  inset-inline-start: 67px;
}

.dir-rtl .hero-area .thumb-wrapper .shape-1 img { transform: rotateY(180deg); }

/* Customer Wrapper */
.hero-area .customer-wrapper     { display: inline-block; margin-inline-start: auto; }
.dir-rtl .hero-area .customer-wrapper .icon img { transform: rotateY(180deg); }
.hero-area .customer-wrapper .thumb { margin-top: 30px; }
.hero-area .customer-wrapper .text  { font-size: 18px; line-height: 1.22; margin-top: 15px; }
.hero-area .customer-wrapper .text span { color: var(--primary); }
.hero-area .customer-wrapper .text br   { display: block; }

.hero-area .customer-wrapper-box { margin-top: 41px; display: flex; justify-content: flex-end; }

/* Video Button */
.hero-area .video-btn { display: flex; align-items: center; gap: 12px; }

.hero-area .video-btn .wc-btn-circle {
  width:            100px;
  height:           100px;
  border:           5px solid var(--white);
  background-color: var(--black);
  color:            var(--white);
}

.dark .hero-area .video-btn .wc-btn-circle {
  border-color:     var(--black);
  background-color: var(--white);
  color:            var(--black);
}

.hero-area .video-btn .text {
  font-size:      14px;
  font-weight:    500;
  text-transform: uppercase;
  line-height:    1.14;
  display:        inline-block;
  color:          var(--primary);
}

.hero-area .video-btn .text br { display: block; }

.hero-area .video-btn-box {
  position:         absolute;
  inset-inline-end: 0;
  z-index:          1;
  top:              66%;
}


/* --- Clients Area --- */
.clients-area { background-color: var(--black); }
.dark .clients-area { background-color: #1b1b1b; }

.clients-area-inner {
  padding:            55px 0;
  position:           relative;
  padding-inline-start: 120px;
  margin-inline-end:  calc((100vw - var(--container-max-widths)) / -2);
}

@media only screen and (max-width: 1399px) { .clients-area-inner { padding: 35px 0; padding-inline-start: 80px; } }
@media only screen and (max-width: 991px)  { .clients-area-inner { padding-inline-start: 0; margin-inline-end: 0; } }

.clients-area-inner .shape-1 {
  width:    max-content;
  position: absolute;
  top:      0;
  inset-inline-end: 100%;
  height:   100%;
  overflow: hidden;
}

@media only screen and (max-width: 991px) { .clients-area-inner .shape-1 { display: none; } }
.clients-area-inner .shape-1 img { width: 100%; height: 100%; object-fit: cover; }
.dir-rtl .clients-area-inner .shape-1 img { transform: rotateY(180deg); }

.client-slider-active .swiper-slide { width: auto; }
.client-slider .swiper-wrapper       { transition-timing-function: linear; }
.client-box img                       { opacity: 0.4; }


/* --- About Area --- */
.about-area-inner { position: relative; }

.about-area-inner .shape-1 { position: absolute; top: 254px; inset-inline-end: 0; }

@media only screen and (max-width: 1399px) { .about-area-inner .shape-1 { top: 154px; } }
@media only screen and (max-width: 1199px) { .about-area-inner .shape-1 { top: 94px;  } }
@media only screen and (max-width: 991px)  { .about-area-inner .shape-1 { display: none; } }

.dir-rtl .about-area-inner .shape-1 img { transform: rotateY(180deg); }

.about-area .section-title { max-width: 850px; text-indent: 220px; }

@media only screen and (max-width: 1919px) { .about-area .section-title { max-width: 760px; } }
@media only screen and (max-width: 1399px) { .about-area .section-title { max-width: 750px; } }
@media only screen and (max-width: 767px)  { .about-area .section-title { text-indent: 0; font-size:70px; } }

.about-area .section-content .subtitle-wrapper { margin-bottom: -40px; }

@media only screen and (max-width: 1919px) { .about-area .section-content .subtitle-wrapper { margin-bottom: -32px; } }
@media only screen and (max-width: 1199px) { .about-area .section-content .subtitle-wrapper { margin-bottom: -26px; } }
@media only screen and (max-width: 767px)  { .about-area .section-content .subtitle-wrapper { margin-bottom: 15px;  } }

.about-area .section-content .content-bottom { margin-top: 80px; display: flex; gap: 225px; }

@media only screen and (max-width: 1399px) { .about-area .section-content .content-bottom { gap: 125px; margin-top: 60px; } }
@media only screen and (max-width: 991px)  { .about-area .section-content .content-bottom { gap: 65px;  margin-top: 40px; } }
@media only screen and (max-width: 767px)  { .about-area .section-content .content-bottom { flex-direction: column; } }

/* Clients wrapper number */
.about-area .clients-wrapper .number {
  font-size:      24px;
  line-height:    30px;
  font-weight:    600;
  writing-mode:   vertical-lr;
  transform:      rotate(180deg);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-area .clients-wrapper .text { font-size: 16px; line-height: 20px; max-width: 100px; }
.about-area .clients-wrapper .info { display: flex; gap: 11px; margin-top: 18px; }

.about-area .info-wrapper {
  padding-inline-start: 80px;
  border-inline-start:  1px solid #ececec;
}

.dark .about-area .info-wrapper    { border-color: #252525; }
@media only screen and (max-width: 767px) { .about-area .info-wrapper { padding-inline-start: 40px; } }
@media (max-width: 575px) { .about-area .info-wrapper { padding-inline-start: 0; border-inline-start: 0; } }

.about-area .info-wrapper .text       { max-width: 410px; }
.about-area .info-wrapper .btn-wrapper { margin-top: 53px; }

/* About Gallery */
.about-gallery-wrapper {
  display:         flex;
  gap:             30px 60px;
  padding-inline-start: 90px;
  justify-content: space-between;
  margin-top:      -170px;
}

@media only screen and (max-width: 1199px) { .about-gallery-wrapper { padding-inline-start: 0; margin-top: -80px; } }
@media only screen and (max-width: 991px)  { .about-gallery-wrapper { margin-top: 40px; } }
@media only screen and (max-width: 767px)  { .about-gallery-wrapper { flex-direction: column; } }

.about-gallery-wrapper .thumb-1 { margin-top: 330px; }

@media only screen and (max-width: 1199px) { .about-gallery-wrapper .thumb-1 { margin-top: 230px; } }
@media only screen and (max-width: 767px)  { .about-gallery-wrapper .thumb-1 { margin-top: 0; } }

.about-gallery-wrapper .thumb-2 {
  padding-top:      80px;
  padding-inline-end: 130px;
  position:         relative;
}

@media (max-width: 575px) { .about-gallery-wrapper .thumb-2 { padding-top: 0; padding-inline-end: 0; } }

/* About Service Box */
.about-service-box {
  background-color: #f9f9f9;
  padding:          60px 60px 55px;
  width:            300px;
  position:         absolute;
  top:              0;
  inset-inline-end: 0;
}

.dark .about-service-box { background-color: #1b1b1b; }

@media only screen and (max-width: 991px) { .about-service-box { padding: 40px 40px 35px; width: 260px; } }
@media (max-width: 575px) { .about-service-box { position: static; margin-top: 30px; } }

.dir-rtl .about-service-box .thumb img { transform: rotateY(180deg); }

.about-service-box .text   { margin-top: 23px; }
.about-service-box .counts { margin-top: 39px; }

.about-service-box .counts .number {
  font-size:   120px;
  font-family: var(--font_teko);
  font-weight: 600;
  line-height: 0.8;
  display:     inline-block;
  color:       var(--primary);
}

.about-service-box .counts .x {
  font-size:   48px;
  font-weight: 600;
  line-height: 0.8;
  display:     inline-block;
  color:       var(--primary);
}

.about-service-box .counts .text {
  font-size:      21px;
  line-height:    24px;
  font-family:    var(--font_teko);
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--primary);
  display:        block;
  margin-top:     -3px;
}


/* --- Feature Area --- */
.feature-area { background-color: var(--theme); }

.feature-area .section-title      { max-width: 730px; margin-inline: auto; color: var(--black); }
@media only screen and (max-width: 1399px) { .feature-area .section-title { max-width: 610px; } }
@media only screen and (max-width: 1199px) { .feature-area .section-title { max-width: 460px; } }
@media only screen and (max-width: 991px)  { .feature-area .section-title { max-width: 460px; margin: 0; font-size: 70px; } }

.feature-area .section-header .text { max-width: 300px; margin-inline-start: 580px; color: var(--black); }
@media only screen and (max-width: 1399px) { .feature-area .section-header .text { margin-inline-start: 520px; } }
@media only screen and (max-width: 1199px) { .feature-area .section-header .text { margin-inline-start: 430px; } }
@media only screen and (max-width: 991px)  { .feature-area .section-header .text { max-width: 460px; margin: 0; } }

.feature-area .section-header .text-wrapper       { margin-top: 22px; }
@media only screen and (max-width: 1199px) { .feature-area .section-header .text-wrapper { margin-top: 12px; } }

.feature-area .section-header .section-title-wrapper { position: relative; }

.feature-area .section-header .section-title-wrapper .shape-1 {
  position:           absolute;
  width:              93px;
  top:                -60px;
  inset-inline-start: 43%;
  z-index:            99;
}

@media only screen and (max-width: 1199px) { .feature-area .section-header .section-title-wrapper .shape-1 { display: none; } }

.feature-area .features-wrapper-box { margin-top: 73px; overflow: hidden; }
@media only screen and (max-width: 1199px) { .feature-area .features-wrapper-box { margin-top: 53px; } }

.feature-area .features-wrapper {
  display:               grid;
  gap:                   0;
  grid-template-columns: repeat(3, 1fr);
  margin:                0 -100px;
}

@media only screen and (max-width: 1399px) { .feature-area .features-wrapper { margin: 0 -80px; } }
@media only screen and (max-width: 1199px) { .feature-area .features-wrapper { margin: 0 -30px; } }
@media only screen and (max-width: 767px)  { .feature-area .features-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)                  { .feature-area .features-wrapper { grid-template-columns: repeat(1, 1fr); } }

.feature-box {
  /*padding:      0 100px 132px;
  border-inline-end: 1px solid rgba(0, 0, 0, 0.12);*/
  padding: 0 100px 60px;
  border-inline-end: 1px solid rgba(255, 255, 255, .12);
}

@media only screen and (max-width: 1399px) { .feature-box { padding: 0 80px 72px; } }
@media only screen and (max-width: 1199px) { .feature-box { padding: 0 30px 52px; } }

.feature-box .title {
  font-size:      36px;
  line-height:    0.88;
  font-weight:    600;
  text-transform: uppercase;
  color:          var(--black);
}

@media only screen and (max-width: 1199px) { .feature-box .title { font-size: 28px; } }

.feature-box .content { margin-top: 48px; }
@media only screen and (max-width: 1199px) { .feature-box .content { margin-top: 38px; } }

.feature-box .text { margin-top: 19px; color: var(--black); }

.feature-area { background-color: var(--theme); margin-bottom:60px; }
.feature-area .section-title {
    max-width: 1200px;
    /*margin-inline: auto;*/
    color: var(--primary);
    text-align: center;
}
/*.feature-box {
    padding: 0 100px 60px;
    border-inline-end: 1px solid rgba(255, 255, 255, .12);
}*/
.feature-box .title, .feature-box .text {
    color: var(--primary);
}
.feature-box .content { margin-top: 25px; }


/* --- Skill Area --- */
.skill-area .section-title { max-width: 660px; }

.skill-area .section-header {
  display:               grid;
  gap:                   20px 60px;
  grid-template-columns: auto auto;
  justify-content:       space-between;
}

@media only screen and (max-width: 991px) { .skill-area .section-header { grid-template-columns: auto; } }

.skill-area .section-header .text { max-width: 300px; }

.skill-area .skills-wrapper-box { margin-top: 59px; }

.skill-area .skills-wrapper {
  display:               grid;
  gap:                   40px 60px;
  grid-template-columns: 420px auto;
  justify-content:       space-between;
}

@media only screen and (max-width: 991px) { .skill-area .skills-wrapper { grid-template-columns: auto; } }

.skill-area .skills-wrapper .nav {
  border-inline-start:  1px solid #ececec;
  padding-inline-start: 18px;
  margin-inline-start:  1px;
}

.skill-area .skills-wrapper .nav .nav-link {
  background-color: rgba(0, 0, 0, 0);
  position:         relative;
  padding:          0;
  text-align:       start;
  padding-top:      18px;
}

.skill-area .skills-wrapper .nav .nav-link.active:before {
  position:         absolute;
  content:          "";
  width:            3px;
  height:           100%;
  background-color: var(--theme);
  top:              0;
  inset-inline-start: -20px;
}

.skill-area .skills-wrapper .nav .nav-link.active .icon { background-color: var(--theme); }

.skill-area .skills-wrapper .nav li:not(:first-child) { margin-top: 20px; }

.skill-thumb {
  padding-top:          45px;
  padding-inline-start: 80px;
  position:             relative;
}

.skill-thumb .small-image {
  position:           absolute;
  top:                0;
  inset-inline-start: 0;
  max-width:          740px;
  margin-inline-start: auto;
}

.skill-nav { display: flex; gap: 20px; align-items: flex-start; position: relative; }

.skill-nav .icon {
  width:           65px;
  height:          65px;
  background-color: rgba(18, 18, 18, 0.0196);
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  min-width:       65px;
  border-radius:   50%;
}

.skill-nav .title {
  font-size:      36px;
  line-height:    0.88;
  text-transform: uppercase;
  padding-top:    19px;
}

@media only screen and (max-width: 1199px) { .skill-nav .title { font-size: 30px; padding-top: 0; } }
@media only screen and (max-width: 991px)  { .skill-nav .title { font-size: 24px; } }

.skill-nav .text { margin-top: 8px; }


/* --- Enterprise / Expertise Area --- */
.enterprise-area .section-header             { text-align: center; }
.enterprise-area .section-header .text       { font-size: 21px; }

.enterprise-area .expertise-wrapper-box { margin-top: 64px; }
@media only screen and (max-width: 1399px) { .enterprise-area .expertise-wrapper-box { margin-top: 44px; } }
@media only screen and (max-width: 1199px) { .enterprise-area .expertise-wrapper-box { margin-top: 34px; } }

.enterprise-area .expertise-wrapper          { display: flex; justify-content: space-between; }
@media only screen and (max-width: 767px) { .enterprise-area .expertise-wrapper { flex-wrap: wrap; justify-content: center; } }

.enterprise-area .expertise-wrapper > *:not(:first-child) { margin-inline-start: -100px; }
@media only screen and (max-width: 767px) { .enterprise-area .expertise-wrapper > *:not(:first-child) { margin-inline-start: 0; } }

.expertise-box {
  width:           300px;
  height:          300px;
  border:          1px solid #ececec;
  border-radius:   100%;
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-direction:  column;
}

.dark .expertise-box { border-color: #252525; }

@media only screen and (max-width: 1399px) { .expertise-box { width: 250px; height: 250px; } }
@media only screen and (max-width: 1199px) { .expertise-box { width: 200px; height: 200px; } }
@media only screen and (max-width: 991px)  { .expertise-box { width: 160px; height: 160px; } }

.expertise-box .icon img  { max-height: 100px; }
@media only screen and (max-width: 1399px) { .expertise-box .icon img { max-height: 90px; } }
@media only screen and (max-width: 1199px) { .expertise-box .icon img { max-height: 70px; } }
@media only screen and (max-width: 991px)  { .expertise-box .icon img { max-height: 50px; } }

.expertise-box .name { font-size: 26px; margin-top: 32px; line-height: 1; }
@media only screen and (max-width: 1399px) { .expertise-box .name { font-size: 24px; margin-top: 17px; } }
@media only screen and (max-width: 991px)  { .expertise-box .name { font-size: 20px; } }


/* --- Work / Portfolio Area --- */
.work-area [dir=rtl] { direction: rtl; }
.work-area .works-wrapper { display: grid; gap: 10px; }

.work-slider-active .swiper-slide   { width: auto; }
.work-slider-active .swiper-wrapper { transition-timing-function: linear; }

.work-box { position: relative; max-width: 880px; }

@media only screen and (max-width: 1919px) { .work-box { max-width: 780px; } }
@media only screen and (max-width: 1399px) { .work-box { max-width: 680px; } }
@media only screen and (max-width: 1199px) { .work-box { max-width: 580px; } }
@media only screen and (max-width: 991px)  { .work-box { max-width: 480px; } }
@media only screen and (max-width: 767px)  { .work-box { max-width: 380px; } }

.work-box:hover .content { opacity: 1; visibility: visible; }

.work-box .content {
  position:         absolute;
  width:            100%;
  height:           100%;
  top:              0;
  inset-inline-start: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display:          flex;
  flex-direction:   column;
  justify-content:  end;
  padding:          45px 45px 50px;
  opacity:          0;
  visibility:       hidden;
  transition:       all 0.5s;
  direction:        ltr;
}

.work-box .icon            { position: absolute; inset-inline-end: 45px; top: 45px; }
.work-box .title           { font-size: 30px; text-transform: uppercase; color: var(--black); }
.work-box .meta            { font-size: 14px; display: inline-block; margin-top: 8px; color: var(--black-2); }


/* --- Service Area --- */
.service-area .section-title { max-width: 740px; margin-inline: auto; }

@media only screen and (max-width: 1919px) { .service-area .section-title { max-width: 630px; } }
@media only screen and (max-width: 1199px) { .service-area .section-title { max-width: 460px; } }
@media only screen and (max-width: 991px)  { .service-area .section-title { max-width: 460px; margin: 0; } }

.service-area .section-header .text { max-width: 300px; margin-inline-start: 580px; }

@media only screen and (max-width: 1399px) { .service-area .section-header .text { margin-inline-start: 520px; } }
@media only screen and (max-width: 1199px) { .service-area .section-header .text { margin-inline-start: 430px; } }
@media only screen and (max-width: 991px)  { .service-area .section-header .text { max-width: 460px; margin: 0; } }

.service-area .section-header .text-wrapper       { margin-top: 22px; }
@media only screen and (max-width: 1199px) { .service-area .section-header .text-wrapper { margin-top: 12px; } }

.service-area .section-header .section-title-wrapper { position: relative; }

.service-area .section-header .section-title-wrapper .shape-1 {
  position:           absolute;
  width:              93px;
  top:                -60px;
  inset-inline-start: 43%;
  z-index:            99;
}

@media only screen and (max-width: 1199px) { .service-area .section-header .section-title-wrapper .shape-1 { display: none; } }

.service-area .services-wrapper-box { margin-top: 73px; }
@media only screen and (max-width: 1919px) { .service-area .services-wrapper-box { margin-top: 53px; } }
@media only screen and (max-width: 1199px) { .service-area .services-wrapper-box { margin-top: 33px; } }

.service-box {
  border-bottom:         1px solid #ececec;
  padding:               44px 0;
  display:               grid;
  gap:                   20px 60px;
  grid-template-columns: 160px 1fr 100px;
}

.dark .service-box { border-color: #252525; }

@media only screen and (max-width: 1199px) { .service-box { padding: 24px 0; grid-template-columns: 100px 1fr 100px; } }
@media only screen and (max-width: 767px)  { .service-box { grid-template-columns: auto; } }

.service-box:first-child { border-top: 1px solid #ececec; }
.dark .service-box:first-child { border-color: #252525; }

.service-box .number {
  font-size:   30px;
  font-family: var(--font_teko);
  font-weight: 600;
  color:       var(--primary);
}

@media only screen and (max-width: 1199px) { .service-box .number { font-size: 22px; } }

.service-box .title {
  font-size:      36px;
  text-transform: uppercase;
  line-height:    0.88;
}

@media only screen and (max-width: 1199px) { .service-box .title { font-size: 26px; } }

.service-box .text          { max-width: 340px; }
.service-box .feature-list  { margin-top: 18px; }
.service-box .feature-list li { font-size: 18px; line-height: 1.41; color: var(--primary); }

.service-box .icon {
  width:           88px;
  height:          115px;
  border:          1px solid #ececec;
  border-radius:   44px;
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
}

.dark .service-box .icon { border-color: #252525; }

.service-box .content {
  display:               grid;
  gap:                   20px 60px;
  grid-template-columns: 360px 1fr;
}

@media only screen and (max-width: 1399px) { .service-box .content { grid-template-columns: 300px 1fr; } }
@media only screen and (max-width: 1199px) { .service-box .content { grid-template-columns: 210px 1fr; } }
@media only screen and (max-width: 991px)  { .service-box .content { grid-template-columns: auto; } }


/* --- Testimonials Area --- */
.testimonial-area-inner {
  display:               grid;
  gap:                   40px 60px;
  grid-template-columns: auto 340px;
  justify-content:       space-between;
}

@media only screen and (max-width: 767px) { .testimonial-area-inner { grid-template-columns: auto; } }

.testimonial-area .section-title            { max-width: 630px; }
.testimonial-area .section-content .text   { max-width: 330px; }
.testimonial-area .section-content .text-wrapper { margin-top: 19px; }
.testimonial-area .section-content .btn-wrapper  { margin-top: 53px; }

.testimonial-area .testimonial-wrapper { max-width: 340px; }
@media (max-width: 575px) { .testimonial-area .testimonial-wrapper { max-width: 290px; } }

.testimonial-area .nav-icon {
  width:           35px;
  height:          35px;
  border:          1px solid var(--border);
  border-radius:   50%;
  display:         flex;
  justify-content: center;
  align-items:     center;
  transition:      all 0.5s;
  font-size:       12px;
}

.testimonial-area .nav-icon:hover { background-color: var(--primary); color: var(--white); border-color: rgba(0, 0, 0, 0); }
.dark .testimonial-area .nav-icon:hover { color: var(--black); }

.testimonial-area .slider-nav { display: flex; gap: 10px; justify-content: end; margin-top: 15px; }
.dir-rtl .testimonial-area .slider-nav { flex-direction: row-reverse; }
@media only screen and (max-width: 767px) { .testimonial-area .slider-nav { justify-content: start; } }

.testimonial-box { width: 340px; }
@media (max-width: 575px) { .testimonial-box { width: 290px; } }

.testimonial-box .rating {
  font-size:   36px;
  line-height: 0.88;
  font-family: var(--font_teko);
  font-weight: 600;
  color:       var(--black);
  display:     inline-flex;
  align-items: center;
  gap:         2px;
}

.testimonial-box .rating-label { font-size: 16px; color: var(--white-2); }

.testimonial-box .text {
  font-size:   21px;
  line-height: 1.23;
  font-weight: 500;
  color:       var(--black-2);
  margin-top:  49px;
}

.testimonial-box .icon       { text-align: end; margin-top: 74px; }
.testimonial-box .avatar     { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }

.testimonial-box .author {
  display:          flex;
  gap:              15px;
  align-items:      center;
  padding:          25px 30px;
  background-color: #1b1b1b;
}

.testimonial-box .name     { font-size: 21px; line-height: 24px; font-weight: 500; color: var(--white); }
.testimonial-box .meta-title { font-size: 16px; color: var(--white-2); }

.testimonial-box .content {
  padding:          45px 30px 40px;
  background-color: #f9f9f9;
}


/* --- Team Area --- */
.team-area             { background-color: var(--black); }
.dark .team-area       { background-color: #1b1b1b; }

.team-area .section-title { max-width: 740px; margin-inline: auto; color: var(--white); }

@media only screen and (max-width: 1919px) { .team-area .section-title { max-width: 630px; } }
@media only screen and (max-width: 1199px) { .team-area .section-title { max-width: 460px; } }
@media only screen and (max-width: 991px)  { .team-area .section-title { max-width: 460px; margin: 0; } }

.team-area .section-header .text { max-width: 300px; margin-inline-start: 580px; color: var(--white-2); }

@media only screen and (max-width: 1399px) { .team-area .section-header .text { margin-inline-start: 520px; } }
@media only screen and (max-width: 1199px) { .team-area .section-header .text { margin-inline-start: 430px; } }
@media only screen and (max-width: 991px)  { .team-area .section-header .text { max-width: 460px; margin: 0; } }

.team-area .section-header .text-wrapper { margin-top: 22px; }
@media only screen and (max-width: 1199px) { .team-area .section-header .text-wrapper { margin-top: 12px; } }

.team-area .team-wrapper-box { margin-top: 73px; }
@media only screen and (max-width: 1399px) { .team-area .team-wrapper-box { margin-top: 63px; } }
@media only screen and (max-width: 1199px) { .team-area .team-wrapper-box { margin-top: 43px; } }

.team-area .team-wrapper {
  display:               grid;
  gap:                   40px 30px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px)  { .team-area .team-wrapper { grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 767px)  { .team-area .team-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)                  { .team-area .team-wrapper { grid-template-columns: repeat(1, 1fr); } }

.team-area .team-wrapper > *:nth-child(2n+1) { margin-top: 70px; }
@media only screen and (max-width: 991px) { .team-area .team-wrapper > *:nth-child(2n+1) { margin-top: 0; } }

.team-box:hover .thumb img { transform: scale(1.1); }
.team-box .thumb           { overflow: hidden; }
.team-box .thumb img       { width: 100%; transition: all 0.5s; }

.team-box .title {
  font-size:      24px;
  line-height:    1;
  text-transform: uppercase;
  color:          var(--white);
}

@media only screen and (max-width: 1199px) { .team-box .title { font-size: 20px; } }

.team-box .text {
  font-size:      16px;
  font-weight:    500;
  text-transform: uppercase;
  font-family:    var(--font_teko);
  margin-top:     7px;
  color:          var(--white-2);
}

@media only screen and (max-width: 1199px) { .team-box .text { margin-top: 3px; } }

.team-box .content { margin-top: 37px; }
@media only screen and (max-width: 1399px) { .team-box .content { margin-top: 27px; } }


/* --- FAQ Area --- */
.faq-area-inner {
  display:               grid;
  gap:                   30px 60px;
  grid-template-columns: 1fr 740px;
}

@media only screen and (max-width: 1399px) { .faq-area-inner { grid-template-columns: 1fr 600px; } }
@media only screen and (max-width: 1199px) { .faq-area-inner { grid-template-columns: 1fr 540px; } }
@media only screen and (max-width: 991px)  { .faq-area-inner { grid-template-columns: 1fr; } }

.faq-area .section-title              { max-width: 390px; }
.faq-area .section-content .text     { max-width: 266px; }
.faq-area .section-content .text-wrapper { margin-top: 22px; }

.faq-area .accordion .accordion-button {
  font-size:         24px;
  line-height:       1;
  color:             var(--primary);
  padding-top:       24px;
  padding-bottom:    18px;
  padding-inline-start: 0;
  padding-inline-end:   0;
  background-color:  rgba(0, 0, 0, 0);
  box-shadow:        none;
  text-align:        start;
  font-weight:       500;
  text-transform:    uppercase;
}

@media only screen and (max-width: 1399px) { .faq-area .accordion .accordion-button { font-size: 22px; } }

.faq-area .accordion .accordion-button::after {
  content:             "+";
  color:               var(--primary);
  background-image:    none;
  line-height:         1;
  width:               auto;
  height:              auto;
  font-size:           25px;
  margin-inline-start: auto;
  margin-inline-end:   0;
}

.faq-area .accordion .accordion-button:not(.collapsed) { pointer-events: none; }
.faq-area .accordion .accordion-button:not(.collapsed)::after { content: "-"; }

.faq-area .accordion .accordion-item {
  border-bottom:    1px solid #ececec;
  background-color: rgba(0, 0, 0, 0);
  border-radius:    0px;
}

.dark .faq-area .accordion .accordion-item { border-color: #252525; }

.faq-area .accordion .accordion-item:first-child { border-top: 1px solid #ececec; }
.dark .faq-area .accordion .accordion-item:first-child { border-color: #252525; }

.faq-area .accordion .accordion-body {
  font-size:         18px;
  line-height:       1.44;
  padding-inline-start: 0px;
  padding-inline-end:   0px;
  padding-bottom:    24px;
  padding-top:       0;
  color:             var(--secondary);
}

@media only screen and (max-width: 991px) { .faq-area .accordion .accordion-body { padding-bottom: 23px; } }


/* --- Contact Area --- */
.contact-area-inner {
  padding-inline:   30px;
  background-color: var(--black);
  position:         relative;
  z-index:          1;
  overflow:         hidden;
}

.dark .contact-area-inner { background-color: #1b1b1b; }

.contact-area-inner .shape-1 {
  position:         absolute;
  inset-inline-end: -6%;
  top:              -15%;
  z-index:         -1;
  width:            440px;
}

@media only screen and (max-width: 1399px) { .contact-area-inner .shape-1 { top: -45%; } }
@media only screen and (max-width: 1199px) { .contact-area-inner .shape-1 { width: 340px; } }
@media only screen and (max-width: 991px)  { .contact-area-inner .shape-1 { width: 270px; top: -35%; } }
@media only screen and (max-width: 767px)  { .contact-area-inner .shape-1 { display: none; } }

.dir-rtl .contact-area-inner .shape-1 img { transform: rotateY(180deg); }

.contact-area .section-title { max-width: 830px; margin-inline: auto; color: var(--white); }

@media only screen and (max-width: 1919px) { .contact-area .section-title { max-width: 730px; } }
@media only screen and (max-width: 1199px) { .contact-area .section-title { max-width: 580px; } }
@media only screen and (max-width: 991px)  { .contact-area .section-title { max-width: 450px; } }

.contact-area .section-content               { text-align: center; }
.contact-area .section-content .btn-wrapper  { margin-top: 24px; }
@media only screen and (max-width: 991px) { .contact-area .section-content .btn-wrapper { margin-top: 14px; } }
.contact-area .section-content .wc-btn-underline { color: var(--white); }


/* --- Blog Area --- */
.blog-area .section-header {
  display:               grid;
  gap:                   10px 60px;
  grid-template-columns: auto auto;
  justify-content:       space-between;
}

.blog-area .section-header .section-title { max-width: 540px; }
.blog-area .section-header .text          { max-width: 300px; }
.blog-area .section-header .btn-wrapper   { margin-top: 28px; }

.blog-area .blogs-wrapper-box { margin-top: 55px; }

.blog-area .blogs-wrapper {
  display:               grid;
  gap:                   30px;
  grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 991px) { .blog-area .blogs-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 767px) { .blog-area .blogs-wrapper { grid-template-columns: repeat(1, 1fr); } }

.blog {
  padding:          43px 45px 42px;
  background-color: var(--black);
  transition:       all 0.5s;
  overflow:         hidden;
}

.dark .blog { background-color: #1b1b1b; }

@media only screen and (max-width: 1399px) { .blog { padding: 33px 35px 32px; } }
@media only screen and (max-width: 1199px) { .blog { padding: 28px 25px 26px; } }

.blog:hover              { background-color: var(--theme); }
.blog:hover .thumb img   { transform: scale(1.1); }
.blog:hover .title       { color: var(--black); }
.blog:hover .text        { color: var(--black); }
.blog:hover .name        { color: var(--black); }
.blog:hover .meta        { color: var(--black-2); }

.blog .title {
  font-size:      36px;
  line-height:    0.88;
  color:          var(--white);
  text-transform: uppercase;
  font-weight:    600;
  transition:     all 0.5s;
}

@media only screen and (max-width: 1399px) { .blog .title { font-size: 28px; } }
@media only screen and (max-width: 1199px) { .blog .title { font-size: 24px; } }

.blog .thumb {
  margin-top:      38px;
  margin-inline-end: -45px;
  overflow:        hidden;
}

@media only screen and (max-width: 1199px) { .blog .thumb { margin-top: 28px; } }

.blog .thumb img   { width: 100%; transition: all 0.5s; }
.blog .text        { margin-top: 20px; color: var(--white-2); transition: all 0.5s; }

.blog .name {
  font-size:      24px;
  color:          var(--white);
  text-transform: uppercase;
  margin-top:     20px;
  font-weight:    600;
  transition:     all 0.5s;
}

@media only screen and (max-width: 1199px) { .blog .name { font-size: 20px; } }

.blog .meta {
  font-size:      16px;
  font-weight:    500;
  text-transform: uppercase;
  font-family:    var(--font_teko);
  display:        inline-block;
  margin-top:     8px;
  transition:     all 0.5s;
}


/* --- CTA Area --- */
.cta-area             { background-color: var(--black); }
/*.dark .cta-area       { background-color: #1b1b1b; }*/

.cta-area .section-subtitle {
  font-size:      40px;
  font-weight:    700;
  line-height:    1;
  font-family:    var(--font_teko);
  text-transform: uppercase;
  color:          var(--white);
}

@media only screen and (max-width: 1399px) { .cta-area .section-subtitle { font-size: 30px; } }
.cta-area .section-subtitle img { margin-top: -6px; }

.cta-area .section-title {
  font-size:   190px;
  line-height: 0.82;
  max-width:   800px;
  margin:      0 auto;
  color:       var(--white);
}

@media only screen and (max-width: 1919px) { .cta-area .section-title { font-size: 150px; } }
@media only screen and (max-width: 1399px) { .cta-area .section-title { font-size: 130px; } }
@media only screen and (max-width: 1199px) { .cta-area .section-title { font-size: 100px; max-width: 500px; } }
@media only screen and (max-width: 991px)  { .cta-area .section-title { font-size: 60px;  } }
@media (max-width: 575px)                  { .cta-area .section-title { font-size: 40px;  } }

.cta-area .section-header              { text-align: center; }
.cta-area .section-header .title-wrapper { margin-top: 42px; }
@media only screen and (max-width: 1399px) { .cta-area .section-header .title-wrapper { margin-top: 32px; } }
.cta-area .section-header .btn-wrapper { margin-top: 18px; }

.cta-area .section-header .wc-btn-underline {
  font-size:      50px;
  padding-bottom: 8px;
  text-transform: none;
  color:          var(--white);
  font-weight:    400;
}

@media only screen and (max-width: 1919px) { .cta-area .section-header .wc-btn-underline { font-size: 35px; } }
@media only screen and (max-width: 1399px) { .cta-area .section-header .wc-btn-underline { font-size: 28px; } }
@media only screen and (max-width: 1199px) { .cta-area .section-header .wc-btn-underline { font-size: 22px; padding-bottom: 5px; } }

.cta-area .section-header .wc-btn-underline::before { height: 3px; }
@media only screen and (max-width: 1199px) { .cta-area .section-header .wc-btn-underline::before { height: 2px; } }


/* --- Footer Area --- */
.footer-area             { background-color: var(--black); }
.dark .footer-area       { background-color: #1b1b1b; }

.footer-area .footer-nav-list { display: flex; gap: 45px; }
@media only screen and (max-width: 1199px) { .footer-area .footer-nav-list { gap: 30px; } }

.footer-area .footer-nav-list li a {
  font-size:      22px;
  color:          var(--white);
  font-family:    var(--font_teko);
  text-transform: uppercase;
  line-height:    1;
}

@media only screen and (max-width: 1919px) { .footer-area .footer-nav-list li a { font-size: 20px; } }
@media only screen and (max-width: 1399px) { .footer-area .footer-nav-list li a { font-size: 18px; } }

.footer-area .footer-nav-list li a:hover { color: var(--secondary); }

.footer-area .social-links     { display: flex; gap: 20px; }
.footer-area .social-links li  { line-height: 1; }

.footer-area .social-links li a {
  font-size: 17px;
  color:     var(--white);
}

@media only screen and (max-width: 1199px) { .footer-area .social-links li a { font-size: 14px; } }

.footer-area .social-links li a:hover { color: var(--secondary); }

.footer-area .copyright-text .text {
  font-size:      22px;
  color:          var(--white);
  font-family:    var(--font_teko);
  text-transform: uppercase;
  line-height:    1;
}

@media only screen and (max-width: 1919px) { .footer-area .copyright-text .text { font-size: 20px; } }
@media only screen and (max-width: 1399px) { .footer-area .copyright-text .text { font-size: 18px; } }

.footer-area .copyright-text .text a { color: var(--white); }

.footer-area .copyright-area-inner {
  display:         flex;
  flex-wrap:       wrap;
  gap:             10px 60px;
  justify-content: space-between;
  padding:         0 0 38px;
}

@media only screen and (max-width: 1919px) { .footer-area .copyright-area-inner { padding: 0 0 28px; } }
@media only screen and (max-width: 767px)  { .footer-area .copyright-area-inner { flex-direction: column; align-items: center; } }