@charset "UTF-8";
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
:root {
  --white: #ffffff;
  --black: #000000;
  --primary: #09090B;
  --secondary: #62626B; /* WCAG AA: 5.1:1 on --body (was #71717A = 4.1:1, failed normal text) */
  --brand: #F26B21;
  --neutral-50: #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;
  --neutral-950: #09090B;
  --body: #E2E0DD;
}

[data-color-primary=color-primary-1] {
  --brand: #F26B21;
}

[data-color-primary=color-primary-2] {
  --brand: #f8c736;
}

[data-color-primary=color-primary-3] {
  --brand: #f5772e;
}

[data-color-primary=color-primary-4] {
  --brand: #2ac6f8;
}

[data-color-primary=color-primary-5] {
  --brand: #8dca37;
}

[data-color-primary=color-primary-6] {
  --brand: #6c34fa;
}

[data-color-primary=color-primary-7] {
  --brand: #f14444;
}

[data-color-primary=color-primary-8] {
  --brand: #e14392;
}

/*------------ Core CSS ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Elements
-------------------------------------------------------------- */
html {
  margin-right: 0 !important;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Urbanist", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary);
  background-color: var(--body);
}
body::-webkit-scrollbar {
  width: 0px;
}
body::-webkit-scrollbar-thumb {
  cursor: grab;
  background-color: var(--primary);
}

img {
  max-width: 100%;
  height: auto;
  transform: scale(1);
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ul,
li {
  list-style-type: none;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

table {
  width: 100%;
  overflow-x: auto;
  table-layout: auto;
  border-collapse: collapse;
}

td,
th {
  padding: 12px 16px;
}
@media (min-width: 1200px) {
  td,
  th {
    padding: 16px 24px;
  }
}

svg path {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

button {
  background: transparent;
  border: 0;
  display: inline-flex;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

select,
option {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Since FF19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder {
  color: var(--secondary);
}

b,
strong {
  font-weight: bolder;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-family: "Urbanist", sans-serif;
  color: var(--primary);
}
a:focus, a:hover {
  outline: 0;
}

p {
  display: block;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

[data-grid=grid-1] {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

[data-grid=grid-2] {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr;
}

[data-grid=grid-3] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

[data-grid=grid-4] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}

[data-grid=grid-5] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(5, 1fr);
}

[data-grid=grid-6] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(6, 1fr);
}

[data-grid=grid-7] {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(7, 1fr);
}

.grid-template-columns-2 {
  grid-template-columns: 1fr 1fr;
}

.tf-row-flex {
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  row-gap: 30px;
}

.overflow-unset {
  overflow: unset !important;
}

.sticky-top {
  position: sticky !important;
  z-index: 50;
  top: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.wmax {
  width: max-content !important;
}

#scroll-top {
  position: fixed;
  display: block;
  width: 48px;
  height: 48px;
  line-height: 50px;
  border-radius: 4px;
  z-index: 1;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  overflow: hidden;
  z-index: 100;
  background-color: var(--main);
  border: 0;
  bottom: 92px;
  right: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#scroll-top.show {
  opacity: 1;
  visibility: visible;
}
#scroll-top.type-1 {
  bottom: 140px;
}
#scroll-top:hover {
  transform: translateY(-5px);
  background-color: var(--primary);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.br-line {
  width: 100%;
  height: 1px;
  display: inline-flex;
  background-color: var(--white-16);
}
.br-line.type-vertical {
  width: 1px;
  height: 16px;
}

.br-dot {
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: 0px 0px 2px 1px rgba(var(--primary-rgb), 0.2), 0px 0px 6px 4px rgba(var(--primary-rgb), 0.2);
}

@media (max-width: 991px) {
  br {
    display: none;
  }
}
.line {
  border: 1px solid var(--white-16);
}

.tf-swiper .swiper-slide {
  height: auto;
}
.tf-swiper .swiper-slide > * {
  height: 100%;
}

.initial-child-container {
  flex: 0 0 auto;
  display: flex;
  min-width: auto;
  flex-direction: row;
  align-items: center;
}

.marquee-wrapper {
  display: flex;
  animation: infiniteScroll 7s linear infinite;
  align-items: center;
  transition: animation-duration 300ms;
}

@media (min-width: 1200px) {
  .flex-xl-1 {
    flex: 1 !important;
  }
}

@media (min-width: 576px) {
  .flex-sm-1 {
    flex: 1 !important;
  }
}

.h-unset {
  height: unset !important;
}

@media (min-width: 576px) {
  .h-sm-100 {
    height: 100% !important;
  }
}
@media (min-width: 1200px) {
  .gap-xl-64 {
    gap: 64px !important;
  }
  .gap-xl-40 {
    gap: 40px !important;
  }
  .h-xl-unset {
    height: unset !important;
  }
}
@media (min-width: 1440px) {
  .text-xxl-nowrap {
    white-space: nowrap !important;
  }
}
@media (min-width: 1600px) {
  .d-xxxl-flex {
    display: flex !important;
  }
}
.w-maxcontent {
  width: max-content !important;
}

.justify-items-end {
  justify-items: end;
}

.h-8 {
  height: 8px;
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
/* Typography
============================================================== */
/* Heading */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Urbanist", sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: 0;
  color: var(--black);
}

h1,
.h1 {
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  h1,
  .h1 {
    font-size: 36px;
    line-height: 44px;
  }
}

h2,
.h2 {
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  h2,
  .h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

h3,
.h3 {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  h3,
  .h3 {
    font-size: 28px;
    line-height: 36px;
  }
}

h4,
.h4 {
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  h4,
  .h4 {
    font-size: 26px;
    line-height: 34px;
  }
}

h5,
.h5 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  h5,
  .h5 {
    font-size: 22px;
    line-height: 28px;
  }
}

h6,
.h6 {
  font-size: 24px;
  line-height: 32px;
}
@media (max-width: 767px) {
  h6,
  .h6 {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Font custom */
.font-main {
  font-family: "Urbanist", sans-serif;
}

.text-display-1 {
  font-size: 128px;
  line-height: 128px;
  letter-spacing: -0.03em;
}
@media (max-width: 767px) {
  .text-display-1 {
    font-size: 60px;
    line-height: 60px;
  }
}

.text-display-2 {
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -0.03em;
}
@media (max-width: 991px) {
  .text-display-2 {
    font-size: 60px;
    line-height: 66px;
  }
}
@media (max-width: 767px) {
  .text-display-2 {
    font-size: 32px;
    line-height: 40px;
  }
}

.text-sub-heading {
  font-size: 20px;
  line-height: 28px;
}

.text-body-1 {
  font-size: 18px;
  line-height: 28px;
}

.text-body-2 {
  font-size: 16px;
  line-height: 24px;
}

.text-body-3 {
  font-size: 14px;
  line-height: 20px;
}

.text-caption {
  font-size: 12px;
  line-height: 16px;
}

/* Text Font */
.text-24 {
  font-size: 24px;
  line-height: 24px;
}
@media (max-width: 767px) {
  .text-24 {
    font-size: 18px;
    line-height: 18px;
  }
}

.text-64 {
  font-size: 64px;
  line-height: 64px;
}
@media (max-width: 767px) {
  .text-64 {
    font-size: 36px;
    line-height: 36px;
  }
}

.text-80 {
  font-size: 80px;
  line-height: 88px;
}
@media (max-width: 767px) {
  .text-80 {
    font-size: 40px;
    line-height: 48px;
  }
}

/* Font size */
.fs-4 {
  font-size: 4px !important;
}

.fs-8 {
  font-size: 8px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.fs-35 {
  font-size: 35px !important;
}

/* Line height */
.lh-8 {
  line-height: 8px !important;
}

.lh-10 {
  line-height: 10px !important;
}

.lh-11 {
  line-height: 11px !important;
}

.lh-13 {
  line-height: 13px !important;
}

.lh-19 {
  line-height: 19px !important;
}

.lh-20 {
  line-height: 20px !important;
}

.lh-24 {
  line-height: 24px !important;
}

.lh-26 {
  line-height: 26px !important;
}

.lh-28 {
  line-height: 28px !important;
}

.lh-30 {
  line-height: 30px !important;
}

.lh-32 {
  line-height: 32px !important;
}

/* Letter spacing */
.letter-space-0 {
  letter-spacing: 0px !important;
}

.letter-space--1 {
  letter-spacing: -0.01em !important;
}

.letter-space--2 {
  letter-spacing: -0.02em !important;
}

.letter-space--3 {
  letter-spacing: -0.03em !important;
}

.letter-space--4 {
  letter-spacing: -0.03em !important;
}

/* Responsive */
@media (min-width: 1440px) {
  .lh-xxl-11 {
    line-height: 11px !important;
  }
  .lh-xxl-19 {
    line-height: 19px !important;
  }
  .lh-xxl-22 {
    line-height: 22px !important;
  }
  .lh-xxl-56 {
    line-height: 56px !important;
  }
}
@media (min-width: 1200px) {
  .lh-xl-54 {
    line-height: 54px !important;
  }
  .lh-xl-36 {
    line-height: 36px !important;
  }
}
@media (min-width: 992px) {
  .lh-lg-56 {
    line-height: 56px !important;
  }
}
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
/* General
============================================================== */
/* Margin */
.mb-2 {
  margin-bottom: 2px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mb-7 {
  margin-bottom: 7px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-14 {
  margin-bottom: 14px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-18 {
  margin-bottom: 18px !important;
}

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

.mb-21 {
  margin-bottom: 21px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mt-30 {
  margin-top: 30px;
}

/* Padding */
.pt-30 {
  padding-top: 30px;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Gap */
.gap-2 {
  gap: 2px !important;
}

.gap-4 {
  gap: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px;
}

.gap-10 {
  gap: 10px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-13 {
  gap: 13px !important;
}

.gap-14 {
  gap: 14px !important;
}

.gap-15 {
  gap: 15px;
}

.gap-16 {
  gap: 16px !important;
}

.gap-20 {
  gap: 20px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-28 {
  gap: 28px !important;
}

.gap-30 {
  gap: 30px;
}

.gap-32 {
  gap: 32px;
}

/* Spacing */
.flat-spacing {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 1439px) {
  .flat-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .flat-spacing {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .flat-spacing {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.flat-spacing-2 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.flat-spacing-bottom {
  margin-bottom: 88px;
}
@media (max-width: 1199px) {
  .flat-spacing-bottom {
    margin-bottom: 60px;
  }
}

/* Orther */
.text-white {
  color: var(--white) !important;
}

.text-black {
  color: var(--black) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-brand {
  color: var(--brand) !important;
}

.text-neutral-200 {
  color: var(--neutral-200) !important;
}

.text-neutral-300 {
  color: var(--neutral-300) !important;
}

.text-neutral-400 {
  color: var(--neutral-400) !important;
}

.text-neutral-600 {
  color: var(--neutral-600) !important;
}

.text-neutral-700 {
  color: var(--neutral-700) !important;
}

.text-neutral-800 {
  color: var(--neutral-800) !important;
}

.text-gradient-1 {
  background: linear-gradient(132.09deg, #43484D 11.15%, #292C2E 79.01%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 0px transparent;
  -webkit-text-fill-color: transparent;
}

.text-gradient-2 {
  background: linear-gradient(360deg, rgba(41, 44, 46, 0) 0%, #292C2E 100%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 0px transparent;
  -webkit-text-fill-color: transparent;
}

.text-gradient-3 {
  background: linear-gradient(95.5deg, #61666A 1.91%, #292C2E 43.92%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 0px transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 7px;
  margin-bottom: -7px;
}

@keyframes bghover {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.link {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link:hover {
  color: var(--primary) !important;
}

.link1 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.link1:hover {
  color: var(--brand) !important;
}

.cl-line-2 {
  border-color: var(--line-2) !important;
}

.link-underline {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-decoration: underline;
  text-decoration-color: var(--primary);
}
.link-underline:hover {
  text-decoration-color: var(--brand);
}

.lt-sp-nor {
  letter-spacing: -0.32px;
}

.letter-space-0 {
  letter-spacing: 0px !important;
}

.text-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.cs-pointer {
  cursor: pointer;
}

.max-width_1 {
  max-width: 1424px;
  width: 100%;
}

.gap-x-10 {
  column-gap: 10px !important;
}

.radius-0 {
  border-radius: 0px !important;
}

.radius-3 {
  border-radius: 3px !important;
}

.radius-5 {
  border-radius: 5px !important;
}

.radius-10 {
  border-radius: 10px !important;
}

.radius-12 {
  border-radius: 12px !important;
}

.radius-16 {
  border-radius: 16px !important;
}

.radius-20 {
  border-radius: 20px !important;
}

.text-line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  overflow: hidden;
}

.text-line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.text-line-clamp-3 {
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.aspect-ratio-0 {
  aspect-ratio: 0 !important;
}

.aspect-ratio-1 {
  aspect-ratio: 1/1 !important;
}

.z-1 {
  z-index: 1;
}

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

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-auto {
  cursor: auto;
}

.min-w-unset {
  min-width: unset !important;
}

.flex-1 {
  flex: 1;
}

.bg-primary {
  background-color: var(--primary) !important;
}

.cursor-pointer {
  cursor: pointer;
}

@media (min-width: 992px) {
  .h-lg-100 {
    height: 100% !important;
  }
}
@media (max-width: 991px) {
  .lg-mb-24 {
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .md-mb-24 {
    margin-bottom: 24px;
  }
}
@keyframes move1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
.updown {
  -webkit-animation-name: move1;
  animation-name: move1;
  animation: move1 10s infinite linear;
}

@keyframes move2 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  50% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
.leftright {
  -webkit-animation-name: move2;
  animation-name: move2;
  animation: move2 10s infinite linear;
}

@keyframes move3 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
.rightleft {
  -webkit-animation-name: move3;
  animation-name: move3;
  animation: move3 10s infinite linear;
}

.overflow-hidden {
  overflow: visible !important;
}

/*------------ Component ---------------- */
/*------------ Layout ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.tf-grid-layout {
  display: grid;
  column-gap: 24px;
  row-gap: 32px;
}
.tf-grid-layout.tf-col-2 {
  grid-template-columns: 1fr 1fr;
}
.tf-grid-layout.tf-col-3 {
  grid-template-columns: repeat(3, 1fr);
}
.tf-grid-layout.tf-col-4 {
  grid-template-columns: repeat(4, 1fr);
}
.tf-grid-layout.tf-col-5 {
  grid-template-columns: repeat(5, 1fr);
}
.tf-grid-layout.tf-col-6 {
  grid-template-columns: repeat(6, 1fr);
}
.tf-grid-layout.tf-col-7 {
  grid-template-columns: repeat(7, 1fr);
}
.tf-grid-layout .wd-full {
  grid-column: 1/-1;
}
.tf-grid-layout .wd-2-cols {
  grid-column: span 2;
}
@media (min-width: 576px) {
  .tf-grid-layout.sm-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.sm-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.sm-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.sm-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.sm-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.sm-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 768px) {
  .tf-grid-layout.md-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.md-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.md-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.md-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.md-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.md-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 992px) {
  .tf-grid-layout.lg-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.lg-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.lg-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.lg-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.lg-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.lg-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 1200px) {
  .tf-grid-layout {
    column-gap: 30px;
    row-gap: 40px;
  }
  .tf-grid-layout.row-xl-gap-40 {
    row-gap: 40px;
  }
  .tf-grid-layout.row-xl-gap-56 {
    row-gap: 56px;
  }
  .tf-grid-layout.xl-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.xl-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.xl-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.xl-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.xl-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.xl-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (min-width: 1440px) {
  .tf-grid-layout.xxl-col-2 {
    grid-template-columns: 1fr 1fr;
  }
  .tf-grid-layout.xxl-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-grid-layout.xxl-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .tf-grid-layout.xxl-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .tf-grid-layout.xxl-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .tf-grid-layout.xxl-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

.row {
  margin-right: -12px;
  margin-left: -12px;
}
.row > * {
  padding-left: 12px;
  padding-right: 12px;
}

.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 12px;
  padding-left: 12px;
  width: 1320px;
  max-width: 100%;
}

/*------------ Header ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
header {
  position: sticky;
  z-index: 100;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
header.header-sticky {
  background-color: var(--black);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.tf-header {
  padding-top: 48px;
  margin-bottom: -116px;
}
.tf-header .header-inner {
  max-width: 739px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 8px 32px;
  border-radius: 999px;
  /* Keep the glass capsule visually consistent over every page hero. */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(44px);
  backdrop-filter: blur(44px);
}
.tf-header .mobile-menu {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
}
.tf-header.header2 .header-inner {
  max-width: 807px;
}
@media (max-width: 991px) {
  .tf-header .box-navigation {
    display: none;
  }
}
@media (max-width: 991px) {
  .tf-header {
    margin-bottom: -104px;
  }
  .tf-header .header-inner {
    max-width: unset !important;
    margin: 0 32px;
  }
}

.nav-menu-main {
  display: flex;
  align-items: center;
  gap: 24px;
}

.item-link {
  display: flex;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  position: relative;
}
.item-link::before {
  position: absolute;
  content: "";
  bottom: 0;
  height: 1px;
  background-color: var(--brand);
  left: auto;
  right: 0;
  width: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.item-link:hover, .item-link.active {
  color: var(--brand);
}
.item-link:hover::before, .item-link.active::before {
  left: 0;
  right: auto;
  width: 100%;
}

.box-nav-icon {
  display: flex;
  align-items: center;
  gap: 30px;
}
.box-nav-icon .br-line {
  height: 30px;
  width: 1px;
  background-color: var(--line);
}
@media (min-width: 1440px) {
  .box-nav-icon {
    padding-right: 30px;
  }
}
@media (min-width: 1600px) {
  .box-nav-icon {
    gap: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 1199px) {
  .box-nav-icon {
    gap: 16px;
  }
}

.nav-icon-list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-icon-list li {
  display: flex;
}
@media (max-width: 1199px) {
  .nav-icon-list {
    gap: 12px;
  }
}

.nav-icon-item {
  font-size: 24px;
  display: flex;
  aspect-ratio: 1;
  position: relative;
}
.nav-icon-item .number-count {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background-color: var(--primary);
  border-radius: 50%;
}
.nav-icon-item.has-num {
  margin-right: 8px;
}
.nav-icon-item.has-num .number-count {
  position: absolute;
  top: -5.75px;
  right: -8px;
}
@media (max-width: 1199px) {
  .nav-icon-item {
    font-size: 20px;
  }
}

.box-nav-support {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--secondary);
  padding: 20px 40px;
  margin-right: -40px;
  border-radius: 0px 100px 100px 0px;
}
.box-nav-support .ic-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
}
.box-nav-support .ic-wrap .icon {
  color: var(--white);
  font-size: 32px;
}
.box-nav-support .title {
  margin-bottom: 4px;
}

.btn-mobile-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--white);
}
.btn-mobile-menu .icon {
  aspect-ratio: 1;
}

/*-- Menu Mobile --*/
.mb-menu-link {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 550;
  position: relative;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  font-size: 40px;
  line-height: 53px;
}
.mb-menu-link > * {
  pointer-events: all;
}
.mb-menu-link .infiniteSlide_text_main {
  position: absolute;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mb-menu-link .infiniteSlide_text_main .infiniteSlide_text {
  gap: 40px;
}
.mb-menu-link .infiniteSlide_text_main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}
.mb-menu-link .text {
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (min-width: 576px) {
  .mb-menu-link:hover .text {
    color: var(--brand);
  }
  .mb-menu-link:hover .infiniteSlide_text_main {
    opacity: 1;
    visibility: visible;
    top: 50%;
  }
}

.nav-ul-mb {
  display: grid;
}
.nav-ul-mb li {
  text-align: end;
}
.nav-ul-mb .has-sub-menu {
  display: grid;
  place-items: flex-end;
  width: 100%;
}
.nav-ul-mb .has-sub-menu .mb-menu-link {
  position: relative;
}
.nav-ul-mb .has-sub-menu .mb-menu-link .ic {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  line-height: 1;
  display: flex;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav-ul-mb .has-sub-menu .mb-menu-link .ic .icon {
  aspect-ratio: 1;
  font-size: 24px;
}
.nav-ul-mb .has-sub-menu .mb-menu-link:not(.collapsed) {
  margin-bottom: 5px;
}
.nav-ul-mb .has-sub-menu .mb-menu-link:not(.collapsed) .ic {
  transform: rotate(180deg);
}
.nav-ul-mb .has-sub-menu .sub-nav-menu {
  display: grid;
  gap: 4px;
}

.offcanvas-menu {
  height: 100vh !important;
  backdrop-filter: blur(4px);
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5607843137);
  z-index: 3000;
}
.offcanvas-menu .offcanvas-content {
  padding-top: 36px;
  padding-bottom: 60px;
  height: 100%;
}
.offcanvas-menu .offcanvas-content_wrapin {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}
.offcanvas-menu .canvas_head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}
.offcanvas-menu .canvas_center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding-right: 5px;
}
.offcanvas-menu .canvas_center::-webkit-scrollbar {
  width: 2px;
}
.offcanvas-menu .canvas_center::-webkit-scrollbar-thumb {
  background-color: var(--neutral-400);
}
.offcanvas-menu .canvas_foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}
.offcanvas-menu .canvas_foot .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offcanvas-menu .canvas_foot .right {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}
.offcanvas-menu.style-2 .infiniteSlide_text_main {
  display: none;
}
@media (max-width: 1199px) {
  .offcanvas-menu .offcanvas-content {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .offcanvas-menu .canvas_foot .right {
    gap: 24px;
  }
}

.offcanvas-menu {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  top: 100%;
}
.offcanvas-menu .canvas_head {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
}
.offcanvas-menu .nav-ul-mb li {
  overflow: hidden;
}
.offcanvas-menu .nav-ul-mb .item {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);
  display: flex;
}
.offcanvas-menu .canvas_foot {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.offcanvas-menu.show {
  top: 0;
}
.offcanvas-menu.show .canvas_head {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.5s;
}
.offcanvas-menu.show .canvas_foot {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.offcanvas-menu.show .nav-ul-mb li .item {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(1) .item {
  transition-delay: 0.5s;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(2) .item {
  transition-delay: 0.6s;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(3) .item {
  transition-delay: 0.7s;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(4) .item {
  transition-delay: 0.8s;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(5) .item {
  transition-delay: 1s;
}
.offcanvas-menu.show .nav-ul-mb li:nth-child(6) .item {
  transition-delay: 1.2s;
}

/*-- Landing --*/
.header-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 40px 0px;
}
@media (max-width: 1199px) {
  .header-area {
    padding: 30px 15px 0px;
  }
}

.humberg-menu {
  width: 18px;
  height: 18px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.humberg-menu:hover {
  transform: rotate(45deg);
}

.humberg-menu span {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--dark);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--white);
}

.humberg-menu span:nth-child(4),
.humberg-menu span:nth-child(3) {
  top: auto;
  bottom: 0;
}

.humberg-menu span:nth-child(4),
.humberg-menu span:nth-child(2) {
  left: auto;
  right: 0;
}

.demo-box {
  border: 1px solid rgb(31, 31, 31);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.demo-box .img-box {
  position: relative;
  overflow: hidden;
}
.demo-box .img-box img {
  max-height: 350px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: none;
  transition: object-position 1s ease;
}

.demo-box:hover .img-box img {
  object-position: bottom;
  transition-duration: 15s;
}

.demo-box .content-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  background: rgb(10, 10, 10);
  border-top: 1px solid rgb(31, 31, 31);
}

.demo-box .content-box h4 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  font-family: var(--font_instrument);
  font-weight: 600;
  text-transform: uppercase;
}

.demo-box .content-box p {
  color: rgb(148, 148, 148);
  font-size: 18px;
  line-height: 20px;
  margin: 0;
  letter-spacing: 0;
  font-family: var(--font_instrument);
  font-weight: 500;
}

.demo-box .content-box .view {
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font_instrument);
  display: block;
  line-height: 20px;
  font-weight: 500;
  background: rgb(10, 11, 11);
  border: 1px solid rgb(31, 31, 31);
  border-radius: 60px;
  backdrop-filter: blur(20px);
  padding: 10px 20px;
  font-size: 16px;
}

.menu-item.has-child {
  position: relative;
  cursor: pointer;
}
.menu-item.has-child > .item-link {
  z-index: 1;
}
.menu-item.has-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: 0;
  display: none;
}
.menu-item:hover .sub-menu,
.menu-item:focus-within .sub-menu {
  pointer-events: all;
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}
.menu-item:hover.has-child::after,
.menu-item:focus-within.has-child::after {
  display: block;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 20px);
  background-color: var(--neutral-100);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 20px 0px;
  min-width: 150px;
  left: -31px;
  border-radius: 8px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  padding: 12px 0px;
}
.sub-menu .item-link::before {
  display: none;
}
.sub-menu li > a {
  padding: 4px 16px;
}

/*------------ Blog ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.article-blog {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--white-16);
}
.article-blog .blog-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
}
.article-blog .btn-action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--white-16);
  flex-shrink: 0;
}
.article-blog .btn-action .icon {
  font-size: 20px;
}
.article-blog .btn-action:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.article-blog .infor_sub {
  margin-bottom: 8px;
}
.article-blog .infor_name {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box !important;
  overflow: hidden;
}
@media (min-width: 426px) {
  .article-blog.style-horizontal {
    display: flex;
  }
  .article-blog.style-horizontal .blog-image {
    max-width: 300px;
  }
  .article-blog.style-horizontal .blog-image img {
    aspect-ratio: 1.5;
  }
}
@media (min-width: 1200px) {
  .article-blog .btn-action {
    width: 50px;
    height: 50px;
  }
}

.wg-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.wg-pagination .pagination-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: 16px;
  background-color: #272727;
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.wg-pagination .pagination-item.active, .wg-pagination .pagination-item:hover {
  color: var(--brand);
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 50px;
}
.blog-sidebar .sidebar-title {
  font-weight: 600;
  margin-bottom: 16px;
}
@media (min-width: 1200px) {
  .blog-sidebar {
    gap: 32px;
  }
}

.list-relatest-post .relatest-post-item:not(:last-child) {
  margin-bottom: 10px;
}

.relatest-post-item {
  display: flex;
  gap: 20px;
  align-items: center;
}
.relatest-post-item .image {
  width: 80px;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.relatest-post-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.relatest-post-item .title {
  font-weight: 600;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.sidebar-categories {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sidebar-categories .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.list-tags a {
  display: flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 99px;
  color: var(--neutral-300);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-600);
}
.list-tags a:hover {
  color: var(--brand);
}

.blog-single-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.blog-single-wrap .image img {
  width: 100%;
  border-radius: 16px;
}

.meta-list {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}
.meta-list .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.meta-list .meta-item .icon {
  color: var(--primary);
  font-size: 24px;
}

.entry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.entry-footer .tags-links {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 420px;
}

.blockquote-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 74px 39px 80px 56px;
  background-color: var(--neutral-950);
  box-shadow: 0px 0px 20px 0px rgba(103, 103, 103, 0.25) inset;
}
.blockquote-wrap svg {
  position: absolute;
  bottom: 0px;
  right: 56px;
}
@media (max-width: 767px) {
  .blockquote-wrap {
    padding: 40px 30px 50px;
  }
}

.social-links {
  display: flex;
  gap: 8px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1019607843);
  box-shadow: 0px 0px 15px 0px rgba(221, 221, 221, 0.1490196078) inset;
  backdrop-filter: blur(6px);
  font-size: 16px;
}
.social-links a:hover {
  background-color: #fff;
  color: #151515;
}

.comment-wrap .heading {
  margin-bottom: 25px;
}
.comment-wrap .author {
  position: relative;
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--neutral-300);
}
.comment-wrap .author:not(:last-child) {
  margin-bottom: 20px;
}
.comment-wrap .author.type-reply {
  margin-left: 20px;
}
.comment-wrap .name {
  margin-bottom: 5px;
  margin-top: -7px;
}
.comment-wrap .image {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50% !important;
  overflow: hidden;
  filter: grayscale(100%);
}
.comment-wrap .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-wrap .time {
  margin-bottom: 20px;
}
.comment-wrap .reply {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 5px;
  align-items: center;
}
@media (min-width: 992px) {
  .comment-wrap .author {
    gap: 18px;
  }
  .comment-wrap .author.type-reply {
    margin-left: 66px;
  }
}

.post-comment .heading {
  margin-bottom: 35px;
}
.post-comment .text {
  margin-bottom: 25px;
}
.post-comment .form-cta .form-content {
  gap: 24px;
  margin-bottom: 40px;
}
.post-comment .form-cta textarea {
  height: 100px;
}

/*------------ Element ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
@keyframes sliderShape {
  0%, 100% {
    border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  34% {
    border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
  }
  50% {
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  67% {
    border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
  }
}
@keyframes tf-animate-zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ripple-line {
  to {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes shine-reverse {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
@-webkit-keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes spinner-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ani-zoom {
  animation: tf-animate-zoom-in-out 30s linear infinite;
}

@keyframes iconBounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes float1 {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-5deg);
  }
}
@keyframes float2 {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(5px) rotate(10deg);
  }
}
@keyframes float3 {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(-8deg);
  }
}
@keyframes float4 {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px);
  }
}
@keyframes float5 {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(5deg) scale(1.05);
  }
  75% {
    transform: rotate(-5deg) scale(1.05);
  }
}
@keyframes bgMove {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0% 0;
  }
}
@keyframes effect-send {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translate3d(42px, -39px, 38px);
    opacity: 0;
  }
  50% {
    transform: translate3d(-42px, 39px, 38px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moveUp {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -1000px;
  }
}
@keyframes objPosition {
  0% {
    object-fit: top;
  }
  100% {
    object-fit: bottom;
  }
}
/* Hidden initial state applies ONLY when JS animation is active (html.anim-ready,
   set by gsapAnimation.js). Without JS the element stays visible, so content is
   never stuck invisible. With JS, GSAP hides then reveals it on scroll. */
.anim-ready .effectFade {
  opacity: 0;
}

.slick-slide,
.slick-track,
.flip-image,
.element,
.textFadeUp,
.textFadeUp2,
.textFadeUp3,
.scroll-fadeZoom,
.effectFade,
.animate-box,
.image-2,
.overflow-hidden > * {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.hover-img .img-style {
  overflow: hidden;
}
.hover-img .img-style > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
  transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18);
}
.hover-img:hover .img-style > img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.hover-img .img-style2 {
  overflow: hidden;
  border-radius: 10px;
}
.hover-img .img-style2 .img-hv {
  width: 100%;
  object-fit: cover;
  -webkit-transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
  transition: all 1s cubic-bezier(0.3, 1, 0.35, 1) 0s;
  transition: transform 500ms ease;
}

.hover-img2 .img-style2 {
  overflow: hidden;
  border-radius: 8px;
}
.hover-img2 .img-style2 .img2 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.hover-img2:hover .img2 {
  transform: scale(1.1) rotate(3deg);
}

.hover-img3 .img-style3 {
  border-radius: 8px;
  overflow: hidden;
}
.hover-img3 .img-style3 img {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.hover-img3:hover img {
  transform: scale(1.075);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hover-img4 .img-style4 {
  position: relative;
  overflow: hidden;
}
.hover-img4 .img-style4:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
}
.hover-img4 .img-style4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s;
}
.hover-img4:hover .img-style4:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.hover-img4:hover .img-style4 img {
  transform: scale(1.1);
}

.pagi2 .swiper-pagination2:hover .box-img .icon-practice,
.swiper-button-next2:hover .box-img .icon-practice,
.swiper-button-prev2:hover .box-img .icon-practice,
.hv-one:hover .box-img .icon-practice {
  opacity: 1;
  z-index: 99;
  top: 50%;
  transition-delay: 0.5s;
}
.pagi2 .swiper-pagination2:hover .img-style::before,
.swiper-button-next2:hover .img-style::before,
.swiper-button-prev2:hover .img-style::before,
.hv-one:hover .img-style::before {
  opacity: 1;
}
.pagi2 .swiper-pagination2 .img-style,
.swiper-button-next2 .img-style,
.swiper-button-prev2 .img-style,
.hv-one .img-style {
  border-radius: 10px;
  overflow: hidden;
}
.pagi2 .swiper-pagination2 .img-style::before,
.swiper-button-next2 .img-style::before,
.swiper-button-prev2 .img-style::before,
.hv-one .img-style::before {
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5019607843);
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 99;
  opacity: 0;
  border-radius: 10px;
}
.pagi2 .swiper-pagination2 .img-style.s-one::before,
.swiper-button-next2 .img-style.s-one::before,
.swiper-button-prev2 .img-style.s-one::before,
.hv-one .img-style.s-one::before {
  border-radius: 50%;
}

.hv-one2:hover .img-style2::before {
  opacity: 1;
  visibility: visible;
}
.hv-one2 .img-style2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  border-radius: 10px;
}

.hv-tool {
  position: relative;
  transition: all 0.3s ease;
}

.hover-tooltip {
  position: relative;
}
.hover-tooltip .tooltip {
  position: absolute;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 2px;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  color: var(--white);
  background-color: var(--black);
  transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
  z-index: 5;
  font-size: 12px;
  line-height: 22px;
  font-weight: 400;
  border-radius: 8px;
  text-align: center;
  font-family: "Urbanist", sans-serif;
  display: none;
}
.hover-tooltip .tooltip::before {
  content: "";
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  top: 26px;
  position: absolute;
  background: var(--black);
  width: 9px;
  height: 9px;
  z-index: -1;
}
@media (min-width: 1200px) {
  .hover-tooltip .tooltip {
    font-size: 16px;
    line-height: 22px;
    display: block;
  }
}
.hover-tooltip .tooltip.bg-primary::before {
  background: var(--primary);
}
.hover-tooltip:hover .tooltip {
  opacity: 1;
  visibility: visible;
}
.hover-tooltip.tooltip-bot .tooltip {
  top: calc(100% + 10px);
  bottom: unset;
}
.hover-tooltip.tooltip-bot .tooltip::before {
  top: -4px;
}
.hover-tooltip.tooltip-left .tooltip {
  right: 100%;
  bottom: auto;
  transform: translateX(0px);
  left: unset;
}
.hover-tooltip.tooltip-left .tooltip::before {
  top: 50%;
  left: auto;
  transform: translateY(-50%) rotate(45deg);
  right: -4px;
}
.hover-tooltip.tooltip-left:hover .tooltip {
  transform: translateX(-12px);
}
.hover-tooltip.tooltip-right .tooltip {
  left: 100%;
  bottom: auto;
  transform: translateX(0px);
}
.hover-tooltip.tooltip-right .tooltip::before {
  top: 50%;
  right: auto;
  transform: translateY(-50%) rotate(45deg);
  left: -4px;
}
.hover-tooltip.tooltip-right:hover .tooltip {
  transform: translateX(8px);
}

.hover-overlay {
  position: relative;
}
.hover-overlay::before {
  position: absolute;
  z-index: 2;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  transition: 0.4s ease 0.1s;
  opacity: 0;
  visibility: hidden;
}
.hover-overlay:hover::before {
  opacity: 1;
  visibility: visible;
}

.hover-cursor-img .hover-image {
  display: none;
}
@media (min-width: 1200px) {
  .hover-cursor-img {
    position: relative;
  }
  .hover-cursor-img .hover-image {
    position: fixed;
    display: block;
    transform: scale(0);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
  }
  .hover-cursor-img .hover-image img {
    border-radius: 50%;
    max-width: 150px;
    box-shadow: 0px 10px 25px 0px rgba(43, 52, 74, 0.1215686275);
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tf-social-icon {
  display: inline-flex;
  gap: 16px;
  --facebook-cl: rgb(59, 89, 152);
  --x-cl: rgb(85, 85, 85);
  --instagram-cl: linear-gradient(#8a3ab9, #e95950, #fccc63);
  --threads-cl: rgb(224, 53, 102);
  --youtube-cl: rgb(205, 32, 31);
  --tiktok-cl: linear-gradient(#25f4ee, #000, #fe2c55);
  --tiktok-cl2: rgb(254, 44, 85);
  --pinterest-cl: rgb(203, 32, 39);
  --tumblr-cl: rgb(55, 69, 92);
  --vimeo-cl: rgb(26, 183, 234);
  --snapchat-cl: rgb(255, 221, 0);
  --whatsapp-cl: rgb(0, 230, 118);
  --linked_in-cl: rgb(23, 106, 255);
  --wechat-cl: rgb(26, 173, 24);
  --reddit-cl: rgb(255, 69, 0);
  --line-cl: rgb(0, 195, 77);
  --spotify-cl: rgb(30, 125, 96);
}
.tf-social-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--line);
  position: relative;
}
.tf-social-icon a .icon {
  display: inline-flex;
  position: relative;
  z-index: 1;
  font-size: 16px;
}
.tf-social-icon a::after {
  content: "";
  border-radius: 50%;
  position: absolute;
  background: transparent;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  z-index: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.tf-social-icon.style-2 a {
  border-color: var(--line-3);
  color: var(--white);
}
.tf-social-icon .social-facebook::after {
  background: var(--facebook-cl);
}
.tf-social-icon .social-facebook:hover {
  color: var(--white);
}
.tf-social-icon .social-facebook:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-instagram::after {
  background: var(--instagram-cl);
}
.tf-social-icon .social-instagram:hover {
  color: var(--white);
}
.tf-social-icon .social-instagram:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-x::after {
  background: var(--x-cl);
}
.tf-social-icon .social-x:hover {
  color: var(--white);
}
.tf-social-icon .social-x:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-snapchat::after {
  background: var(--snapchat-cl);
}
.tf-social-icon .social-snapchat:hover {
  color: var(--white);
}
.tf-social-icon .social-snapchat:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-pinterest::after {
  background: var(--pinterest-cl);
}
.tf-social-icon .social-pinterest:hover {
  color: var(--white);
}
.tf-social-icon .social-pinterest:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-linkin::after {
  background: var(--linked_in-cl);
}
.tf-social-icon .social-linkin:hover {
  color: var(--white);
}
.tf-social-icon .social-linkin:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon .social-tiktok::after {
  background: var(--tiktok-cl);
}
.tf-social-icon .social-tiktok:hover {
  color: var(--white);
}
.tf-social-icon .social-tiktok:hover::after {
  opacity: 1;
  visibility: visible;
}
.tf-social-icon.style-white a {
  color: var(--white);
  border-color: var(--line);
}

.tf-social-icon-2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-social-icon-2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--primary);
}
.tf-social-icon-2 a:hover {
  background-color: var(--line);
}
.tf-social-icon-2 .icon {
  font-size: 24px;
}

.tf-link-icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tf-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 99px;
  font-size: 24px;
  color: var(--white);
  background: linear-gradient(0deg, #272727, #272727), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
}
.social-item:hover {
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
}

.tf-social-1 {
  display: flex;
  gap: 10px 24px;
  align-items: center;
  flex-wrap: wrap;
}
.tf-social-1 a {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  border-radius: 24px;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.tf-social-1 a .social-item {
  width: 32px;
  height: 32px;
  font-size: 16px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
}
.tf-social-1 a .social-item .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-social-1 a:hover {
  color: var(--brand);
}
.tf-social-1 a:hover .icon {
  color: var(--brand);
}
@media (max-width: 767px) {
  .tf-social-1 a {
    padding: 12px 28px;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
/*-- CSS Boostrap --*/
.offcanvas {
  border: none !important;
  color: var(--white);
  z-index: 3000;
  background-color: rgba(0, 0, 0, 0.5607843137);
}
.offcanvas .icon-close-popup {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  padding: 10px;
  border: none;
  color: var(--black);
  z-index: 10;
}
.offcanvas .icon-close-popup:hover {
  color: var(--primary);
}
.offcanvas .icon-close-popup.type-right {
  top: 16px;
  right: 16px;
}
.offcanvas .offcanvas-content {
  height: 100%;
}
.offcanvas.offcanvas-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  opacity: 0;
  visibility: hidden;
  max-width: calc(100vw - 30px);
}
.offcanvas.offcanvas-center.show {
  visibility: visible;
  opacity: 1;
}

.offcanvas-backdrop {
  z-index: 2999;
  cursor: url(../images/cursor-close.svg), auto;
}

.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
  width: 0px;
}

.modal {
  cursor: url(../images/cursor-close.svg), auto;
}
.modal .icon-close-popup {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  padding: 16px;
  border: none;
  color: var(--black);
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}
.modal .icon-close-popup:hover {
  color: var(--primary);
}
@media (min-width: 576px) {
  .modal .icon-close-popup {
    top: 10px;
    right: 10px;
  }
}
.modal .modal-content {
  border: 0;
}
.modal .modal-body {
  padding: 0;
}
.modal.fullRight .modal-dialog {
  transform: translate(100%, 0);
  min-width: 100%;
  height: 100%;
  margin: 0;
  transition: transform 1s ease-out;
}
.modal.fullRight .modal-dialog .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 0;
}
.modal.fullRight .modal-dialog .modal-content .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullRight.show .modal-dialog {
  transform: none;
  transition: transform 0.4s ease-out;
}
.modal.fullLeft .modal-dialog {
  transform: translate(-100%, 0) !important;
  min-width: 100%;
  height: 100%;
  margin: 0;
  transition: all 0.3s !important;
}
.modal.fullLeft .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  padding: 0;
}
.modal.fullLeft .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullLeft.show .modal-dialog {
  transform: translate(0, 0) !important;
}
.modal.fullBottom .modal-dialog {
  transform: translate(0, 100%);
  min-width: 100%;
  height: 100%;
  max-height: unset;
  margin: 0;
  transition: transform 0.3s linear !important;
}
.modal.fullBottom .modal-content {
  border-radius: 0;
  border: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  max-height: max-content;
}
.modal.fullBottom .modal-body {
  overflow: auto;
  padding: 0;
  padding-bottom: 30px;
}
.modal.fullBottom.show .modal-dialog {
  transform: translate(0, 0);
}
.modal.modalCentered .modal-dialog {
  margin: 15px auto;
  padding-left: 15px;
  padding-right: 15px;
  transform: translate(0, 0) !important;
}
.modal.fade:not(.show) {
  opacity: 0;
}
.modal .modal-content {
  cursor: default !important;
  border-radius: 0px;
}

.modal-heading {
  position: relative;
  margin-bottom: 30px;
}
.modal-heading .icon-close-popup {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  left: unset;
  font-size: 24px;
}
@media (min-width: 992px) {
  .modal-heading {
    margin-bottom: 40px;
  }
}

.canvas-wrapper {
  padding: 0;
  isolation: isolate;
  height: 100%;
  width: 100%;
  max-height: none;
  display: grid;
  grid-auto-rows: auto minmax(0, 1fr) auto;
  align-content: start;
}

.canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  position: relative;
  text-transform: capitalize;
}
.canvas-header .icon-close-popup {
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .canvas-header {
    padding: 32px;
  }
}

.canvas-body {
  background-color: var(--white);
  padding: 10px 24px;
  overscroll-behavior-y: contain;
  overflow-y: auto;
  flex: 1;
}
.canvas-body::-webkit-scrollbar {
  width: 5px;
}
.canvas-body::-webkit-scrollbar-track {
  background-color: var(--white);
}
.canvas-body::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}
@media (min-width: 1200px) {
  .canvas-body {
    padding: 12px 32px 15px;
  }
}

.canvas-footer,
.canvas-bottom {
  padding: 16px 24px 24px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

/*-- Css --*/
.offcanvas-color .offcanvas-content {
  display: flex;
  flex-direction: column;
}
.offcanvas-color .offcanvas-content,
.offcanvas-color .canvas-body {
  background-color: var(--neutral-950);
}
.offcanvas-color .icon-close-popup {
  color: var(--white);
  aspect-ratio: 1;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
}
.offcanvas-color .title {
  margin-bottom: 20px;
}
@media (min-width: 1200px) {
  .offcanvas-color {
    width: 1043px !important;
  }
  .offcanvas-color .offcanvas-content {
    padding: 134px;
  }
}
@media (max-width: 575px) {
  .offcanvas-color {
    max-width: 325px;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.flat-animate-tab .tab-content {
  position: relative;
}
.flat-animate-tab .tab-pane {
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  transition-timing-function: ease-in;
  transition-duration: 0.2s;
}
.flat-animate-tab .tab-pane.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  transition-timing-function: ease-out;
  transition-duration: 0.3s;
  transition-delay: 0.3s;
}

.pricing-tab_btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-tab_btn li {
  width: 100%;
  white-space: nowrap;
}
.pricing-tab_btn .tf-btn-tab {
  display: grid;
  place-items: center;
  gap: 16px;
  color: var(--white-64);
  text-align: center;
}
.pricing-tab_btn .tf-btn-tab.active {
  color: var(--white);
}
.pricing-tab_btn .tf-btn-tab.active .dot-active {
  background: var(--primary);
  box-shadow: 0px 0px 2px 1px rgba(5, 148, 29, 0.3019607843), 0px 0px 6px 4px rgba(5, 148, 29, 0.1803921569);
}
.pricing-tab_btn .dot-active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--white-32);
}
@media (min-width: 576px) {
  .pricing-tab_btn {
    gap: 12px;
  }
  .pricing-tab_btn li {
    max-width: 206px;
    width: 100%;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
form {
  position: relative;
  z-index: 30;
}
form textarea,
form input[type=text],
form input[type=password],
form input[type=datetime],
form input[type=datetime-local],
form input[type=date],
form input[type=month],
form input[type=time],
form input[type=week],
form input[type=number],
form input[type=email],
form input[type=url],
form input[type=search],
form input[type=tel],
form input[type=color] {
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  padding: 0 0 11px 0px;
  border: 0;
  border-bottom: 1px solid var(--neutral-300);
  background-color: transparent;
  color: var(--primary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
form textarea::placeholder,
form input[type=text]::placeholder,
form input[type=password]::placeholder,
form input[type=datetime]::placeholder,
form input[type=datetime-local]::placeholder,
form input[type=date]::placeholder,
form input[type=month]::placeholder,
form input[type=time]::placeholder,
form input[type=week]::placeholder,
form input[type=number]::placeholder,
form input[type=email]::placeholder,
form input[type=url]::placeholder,
form input[type=search]::placeholder,
form input[type=tel]::placeholder,
form input[type=color]::placeholder {
  color: var(--secondary);
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
  background-color: transparent;
  overflow: hidden;
  padding: 0;
}
form textarea {
  height: 150px;
  border-radius: 32px;
  resize: none;
}
form .form-content {
  display: grid;
  gap: 20px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  padding: 0;
  padding-bottom: 16px;
  padding-left: 16px;
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid var(--white-16);
  color: var(--white-64);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 18px;
  letter-spacing: -0.18px;
}
/* The native dropdown popup is its own surface floating over the page, so we keep
   it white with near-black text for readability on any form (light or dark). */
select option {
  background-color: #ffffff;
  color: #09090b;
  padding: 10px 14px;
  font-size: 16px;
  letter-spacing: -0.1px;
}
/* The currently selected row gets a soft brand tint; the placeholder is muted. */
select option:checked {
  background-color: #fdece2;
  color: #09090b;
  font-weight: 600;
}
select option:disabled,
select option[value=""] {
  color: #8a8a93;
}

.password-wrapper {
  position: relative;
}
.password-wrapper .toggle-pass {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.tf-check {
  position: relative;
  background: transparent;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--line);
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-check:checked {
  border-color: var(--black);
  background-color: var(--black);
}
.tf-check:checked::before {
  opacity: 1;
  transform: scale(1);
}
.tf-check::before {
  font-weight: 500;
  font-family: "icomoon";
  content: "\e930";
  position: absolute;
  color: var(--white);
  opacity: 0;
  font-size: 16px;
  transform: scale(0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tf-check.style-white {
  background-color: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox-wrap input {
  padding: 0;
}
.checkbox-wrap label {
  cursor: pointer;
}

.tf-field {
  position: relative;
}
.tf-field .tf-lable {
  cursor: text;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 14px;
  pointer-events: none;
  color: var(--white-64);
}
@media (min-width: 576px) {
  .tf-field .tf-input:not(:placeholder-shown) ~ .tf-lable, .tf-field .tf-input:focus ~ .tf-lable {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }
  .tf-field .tf-input::placeholder {
    color: transparent;
  }
  .tf-field .tf-lable {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 575px) {
  .tf-field {
    display: grid;
  }
  .tf-field .tf-lable {
    order: -1;
  }
  .tf-field .tf-input {
    padding-top: 0;
  }
}

.form-cta .form-content {
  gap: 40px;
  margin-bottom: 88px;
}
.form-cta .form-content input {
  letter-spacing: -0.01em;
}
.form-cta .tf-grid-layout {
  gap: 40px;
}
.form-cta .form-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
@media (min-width: 576px) {
  .form-cta .form-content input {
    font-size: 18px;
    line-height: 22px;
  }
  .form-cta .nice-select .current {
    color: var(--white-64);
    font-size: 18px;
    line-height: 22px;
  }
}
@media (max-width: 1199px) {
  .form-cta .form-content {
    gap: 32px;
    margin-bottom: 40px;
  }
  .form-cta .tf-grid-layout {
    gap: 32px;
  }
}
@media (max-width: 991px) {
  .form-cta .form-content {
    gap: 24px;
  }
  .form-cta .tf-grid-layout {
    gap: 24px;
  }
}
@media (max-width: 575px) {
  .form-cta .nice-select {
    padding-bottom: 3px;
  }
}

.form-search {
  position: relative;
}
.form-search fieldset input {
  padding-right: 30px;
}
.form-search button {
  position: absolute;
  right: 5px;
  top: 0%;
  transform: rotateY(180deg);
}
.form-search button .icon {
  color: var(--primary);
}

.form-contact {
  padding: 56px;
  border-radius: 40px;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.form-contact .heading {
  margin-bottom: 35px;
}
.form-contact textarea {
  height: 114px;
  border-radius: 0;
}
.form-contact .attachment {
  padding: 16px 0;
  margin-bottom: 38px;
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.tf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--white);
  border-radius: 99px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 14px 24px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275);
  overflow: hidden;
}
.tf-btn:hover {
  box-shadow: 0px -3px 0px 0px rgb(8, 8, 8) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.14), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15), 0px 100px 80px 0px rgba(0, 0, 0, 0.15), 0px 3px 3px 0px rgba(0, 0, 0, 0.14), 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12);
  background: radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #272727, #272727);
}

.tf-btn-2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--white);
  border-radius: 99px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 14px 24px;
  color: var(--primary);
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #F5F5F5, #F5F5F5);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  overflow: hidden;
}
.tf-btn-2:hover {
  color: var(--brand);
}

.animate-btn {
  position: relative;
  overflow: hidden;
}
.animate-btn:hover::after {
  animation: shine-reverse 1s forwards;
}

.animate-btn:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
  top: 0;
  left: -100%;
  opacity: 0.6;
}

button.animate-btn::after,
.animate-btn.tf-btn::after {
  background-image: linear-gradient(120deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0) 70%);
}

.animate-btn.animate-dark::after {
  background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent);
}

.tf-loading {
  font-size: 14px;
  line-height: 20px;
  width: auto;
  height: 42px;
  min-width: 118px;
  padding: 10px;
}
.tf-loading.loadmore .spinner-circle {
  display: none;
}
.tf-loading.loadmore.loading .spinner-circle {
  display: block;
}
.tf-loading.loadmore.loading .text {
  display: none;
}
.tf-loading.loadmore:hover .spinner-child::before {
  background-color: var(--white);
}
.tf-loading.loadmore .spinner-child::before {
  background-color: var(--main);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.spinner-circle {
  width: 24px;
  height: 24px;
  position: relative;
}
.spinner-circle .spinner-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.spinner-circle .spinner-child::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: var(--white);
  border-radius: 100%;
  -webkit-animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
  animation: spinner-circleBounceDelay 1s infinite ease-in-out both;
}
.spinner-circle .spinner-circle2 {
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
.spinner-circle .spinner-circle2::before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner-circle .spinner-circle3 {
  -webkit-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  transform: rotate(80deg);
}
.spinner-circle .spinner-circle3::before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner-circle .spinner-circle4 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.spinner-circle .spinner-circle4::before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner-circle .spinner-circle5 {
  -webkit-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  transform: rotate(160deg);
}
.spinner-circle .spinner-circle5::before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner-circle .spinner-circle6 {
  -webkit-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  transform: rotate(200deg);
}
.spinner-circle .spinner-circle6::before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner-circle .spinner-circle7 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.spinner-circle .spinner-circle7::before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.spinner-circle .spinner-circle8 {
  -webkit-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  transform: rotate(280deg);
}
.spinner-circle .spinner-circle8::before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.spinner-circle .spinner-circle9 {
  -webkit-transform: rotate(320deg);
  -ms-transform: rotate(320deg);
  transform: rotate(320deg);
}
.spinner-circle .spinner-circle9::before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.heading-section .heading-sub {
  display: flex;
  position: relative;
  width: max-content;
  border-radius: 8px;
  color: var(--brand);
  padding: 6px 16px 6px 30px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #F5F5F5, #F5F5F5);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  margin-bottom: 32px;
}
.heading-section .heading-sub::before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--brand);
}
.heading-section .heading-sub.style-1 {
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, var(--neutral-900, #18181B), var(--Neutral-900, #18181B));
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset;
}
.heading-section .heading-title {
  font-weight: 600;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.03em;
}
@media (max-width: 767px) {
  .heading-section .heading-title {
    font-size: 40px;
    line-height: 48px;
  }
  .heading-section .heading-title br {
    display: none;
  }
}
.heading-section.center {
  text-align: center;
}
.heading-section.center .heading-sub {
  margin-left: auto;
  margin-right: auto;
}
.heading-section.mb-48 {
  margin-bottom: 48px;
}
.heading-section.mb-64 {
  margin-bottom: 64px;
}
.heading-section.mb-70 {
  margin-bottom: 70px;
}
.heading-section.mb-80 {
  margin-bottom: 80px;
}
@media (max-width: 767px) {
  .heading-section.mb-48 {
    margin-bottom: 20px;
  }
  .heading-section.mb-64 {
    margin-bottom: 24px;
  }
  .heading-section.mb-70 {
    margin-bottom: 30px;
  }
  .heading-section.mb-80 {
    margin-bottom: 34px !important;
  }
}

.tf-list {
  display: flex;
  gap: 4px;
}
.tf-list.vertical {
  display: grid;
}

.section-hero {
  padding: 16px 16px 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}
.section-hero .hero-image {
  position: absolute;
  inset: 16px 16px 0 16px;
  border-radius: 40px;
  background-image: url(./../images/section/hero-1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.section-hero .hero-image video,
.section-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}
.section-hero .content-wrap {
  padding: 180px 0 160px;
}
.section-hero .content-wrap .sub {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 6px 16px;
  color: var(--brand);
  border-radius: 8px;
  background: linear-gradient(0deg, #F5F5F5, #F5F5F5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
.section-hero .content-wrap .sub svg {
  color: var(--brand);
}
.section-hero .content-wrap .title {
  margin-bottom: 33px;
}
.section-hero .content-wrap .title .title2 {
  margin-top: 13px;
}
.section-hero .content-wrap .title-icon {
  position: relative;
  height: 155px;
}
.section-hero .content-wrap .title-icon .box {
  display: flex;
  width: 255px;
  height: 80px;
  border-radius: 999px;
  background: linear-gradient(180deg, #D95E12 0%, #F47C22 100%);
  box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.0862745098), 0px 22.91px 37.08px 0px rgba(255, 59, 0, 0.1647058824), 0px 76px 123px 0px rgba(255, 59, 0, 0.0509803922), 0px 5.05px 8.18px 0px rgba(255, 59, 0, 0.1019607843), 0px 16.98px 27.47px 0px rgba(255, 59, 0, 0.0470588235), 0px 56px 83px 0px rgba(255, 59, 0, 0.2509803922), 0px 14px 34px 0px rgba(255, 59, 0, 0.2509803922), 0px 1px 2px 0px rgba(255, 59, 0, 0.4);
}
.section-hero .content-wrap .title-icon .title-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 255px;
  height: 177px;
  overflow: hidden;
}
.section-hero .content-wrap .title-icon .img-1 {
  position: absolute;
  left: 49px;
  top: 0;
}
.section-hero .content-wrap .title-icon .img-2 {
  position: absolute;
  left: 136px;
  top: 28px;
}
.section-hero .content-wrap .title-icon .img-3 {
  position: absolute;
  left: 66px;
  top: 83px;
}
.section-hero .content-wrap .text {
  margin-bottom: 24px;
}
.section-hero .content-wrap .bot-btns {
  display: flex;
  gap: 11px;
  justify-content: center;
  align-items: center;
}
.section-hero.v1 {
  min-height: unset;
}
.section-hero.v1 .content-wrap {
  padding: 180px 0 76px;
}
.section-hero.v1 .content-wrap .title {
  margin-bottom: 5px;
}
.section-hero.v2 {
  min-height: unset;
}
.section-hero.v2 .content-wrap {
  padding: 180px 0 446px;
}
.section-hero.v2 .content-wrap .title {
  margin-bottom: 5px;
}
@media (min-width: 1200px) {
  .section-hero .col-right .top {
    padding-top: 24px;
  }
}
@media (max-width: 991px) {
  .section-hero {
    min-height: unset;
  }
}
@media (max-width: 767px) {
  .section-hero .content-wrap {
    padding: 125px 0 100px;
  }
  .section-hero .content-wrap .bot-btns {
    flex-direction: column;
  }
  .section-hero .hero-image {
    border-radius: 24px;
  }
  .section-hero.v1 .content-wrap {
    padding: 125px 0 35px;
  }
  .section-hero.v2 .content-wrap {
    padding: 125px 0 100px;
  }
}

.section-about-us .heading-section {
  margin-bottom: -17px;
}
.section-about-us .col-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  text-align: center;
  border-radius: 40px;
  padding: 48px 0 0px;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, var(--neutral-900, #18181B), var(--neutral-900, #18181B));
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px #2E2E2E inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.3019607843) inset;
  overflow: hidden;
}
.section-about-us .col-left .sub {
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neutral-700);
  border-radius: 99px;
  width: max-content;
  padding: 6px 15px 5px 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}
.section-about-us .col-left .sub .dot {
  position: relative;
  display: flex;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background-color: var(--brand);
}
.section-about-us .col-left .sub .dot::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(253, 58, 37, 0.2509803922);
  border-radius: 50%;
  animation: rippleFade 1.8s ease-out infinite;
}
.section-about-us .col-left .title {
  margin-bottom: 16px;
  letter-spacing: 0;
}
.section-about-us .col-left img {
  width: 100%;
  border-radius: 38px;
  margin-top: -25px;
}
.section-about-us .review-box {
  background-color: var(--neutral-100);
  border-radius: 40px;
  padding: 32px 36px 26px;
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.section-about-us .review-box .desc {
  margin-bottom: 26px;
}
.section-about-us .review-box .text {
  font-family: "Roboto";
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
}
.section-about-us .review-box .counter {
  font-weight: 600;
  font-size: 104px;
  line-height: 104px;
  letter-spacing: -0.03em;
  margin-bottom: -12px;
  margin-right: 5px;
}
@media (max-width: 1199px) {
  .section-about-us .review-box .counter {
    font-size: 100px;
    line-height: 100px;
  }
}
@media (max-width: 767px) {
  .section-about-us .review-box .counter {
    font-size: 65px;
    line-height: 65px;
  }
}
.section-about-us .box-quotes {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 26px 16px 22px 32px;
  background-color: var(--neutral-100);
  border-radius: 40px;
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.section-about-us .box-quotes .image {
  display: flex;
  width: 150px;
  height: 200px;
  flex-shrink: 0;
  border-radius: 24px;
  box-shadow: 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.section-about-us .box-quotes .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
.section-about-us .box-quotes .desc {
  margin-bottom: 16px;
}
.section-about-us .box-quotes .cite {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-about-us .box-quotes .cite .line {
  display: flex;
  width: 1px;
  height: 16px;
  background-color: var(--neutral-400);
}
.section-about-us .box-quotes .content {
  margin-top: -13px;
}
.section-about-us .mission-box {
  background-color: var(--neutral-100);
  border-radius: 40px;
  padding: 40px 40px 45px;
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.section-about-us .mission-box .line {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
@media (max-width: 1439px) {
  .section-about-us {
    min-height: 100vh;
  }
}
@media (max-width: 767px) {
  .section-about-us .mission-box,
  .section-about-us .review-box {
    padding-left: 24px;
    padding-right: 24px;
  }
  .section-about-us .box-quotes {
    padding-left: 24px;
    padding-right: 24px;
    flex-direction: column;
  }
}

@keyframes rippleFade {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}
.partner-wrap {
  display: flex;
  align-items: center;
  gap: 24px 98px;
  padding: 60px 0;
  position: relative;
}
.partner-wrap .text {
  min-width: 114px;
}
.partner-wrap .infiniteslide_wrap {
  position: relative;
}
.partner-wrap .infiniteslide_wrap::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, #EDECEC 0%, rgba(237, 236, 236, 0) 25%, rgba(237, 236, 236, 0) 75%, #EDECEC 100%);
}
.partner-wrap .infiniteSlide_partner {
  gap: 64px;
}
.partner-wrap::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
@media (max-width: 767px) {
  .partner-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

.box-white {
  background-color: var(--neutral-50);
  border-radius: 40px;
  margin-left: 16px;
  margin-right: 16px;
}
@media (max-width: 991px) {
  .box-white {
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media (max-width: 767px) {
  .box-white {
    border-radius: 24px;
  }
}

.box-black {
  position: relative;
  background-color: var(--neutral-950);
  border-radius: 40px;
  margin-left: 16px;
  margin-right: 16px;
  overflow: hidden;
}
.box-black .light-box {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 891px;
  height: 350px;
  clip-path: polygon(14.2% 0%, 85.8% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(56px);
}
.box-black .light-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.box-black .light-bot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .box-black {
    margin-left: 12px;
    margin-right: 12px;
  }
  .box-black .light-bot,
  .box-black .light-top {
    width: 200px;
  }
  .box-black .light-box {
    width: 274px;
    height: 97px;
  }
}
@media (max-width: 767px) {
  .box-black {
    border-radius: 24px;
  }
}

.services-image {
  max-width: 416px;
  height: 240px;
  position: absolute;
  bottom: 0;
}
.services-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
@media (max-width: 991px) {
  .services-image {
    position: unset;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }
}

.stack-element {
  position: relative;
  z-index: 1;
}
.stack-element + * {
  position: relative;
  z-index: 2;
  background: var(--neutral-50);
}

.featured-works-list {
  display: grid;
  gap: 32px;
}

.featured-works-item {
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-100);
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0px -8px 0px 0px #EAEAEA inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.featured-works-item .image {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
}
.featured-works-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s;
}
.featured-works-item .image:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
}
.featured-works-item .image .view-project {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  letter-spacing: 0.01em;
  color: var(--white);
  padding: 16px 24px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(44px);
  opacity: 0;
  visibility: hidden;
}
.featured-works-item .image .view-project .icon {
  font-size: 24px;
}
.featured-works-item .image .view-project:hover {
  color: var(--brand);
}
.featured-works-item .content {
  flex-shrink: 0;
  padding: 32px 40px 16px;
}
.featured-works-item .content .pagi-dot {
  display: flex;
  gap: 10px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--neutral-300);
  margin-bottom: 24px;
}
.featured-works-item .content .pagi-dot span {
  display: flex;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--neutral-300);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.featured-works-item .content .pagi-dot span.active {
  background-color: var(--brand);
}
.featured-works-item .content .bot {
  display: flex;
  gap: 24px;
}
.featured-works-item .content .bot .heading {
  width: 39.765%;
}
.featured-works-item .content .grid-text {
  width: 58.22%;
  display: flex;
  gap: 12px 40px;
}
.featured-works-item .content .grid-text .item:nth-child(1) {
  width: 42.363%;
}
.featured-works-item .content .grid-text .item:nth-child(2) {
  width: 23%;
}
.featured-works-item .content .grid-text .item:nth-child(3) {
  width: 23%;
}
.featured-works-item:hover .image:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.featured-works-item:hover .image img {
  transform: scale(1.1);
}
.featured-works-item:hover .image .view-project {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1199px) {
  .featured-works-item .content {
    padding: 32px 20px 16px;
  }
}
@media (max-width: 767px) {
  .featured-works-item {
    border-radius: 24px;
  }
  .featured-works-item .image {
    border-radius: 14px;
  }
  .featured-works-item .image .view-project {
    top: 15px !important;
    left: 15px !important;
    transform: none;
    gap: 5px;
    padding: 7px 13px;
    opacity: 1;
    visibility: visible;
    font-size: 14px;
    line-height: 20px;
  }
  .featured-works-item .image .view-project .icon {
    font-size: 14px;
  }
  .featured-works-item .content {
    padding: 16px 10px 16px;
  }
  .featured-works-item .content .bot {
    gap: 12px;
    flex-direction: column;
  }
  .featured-works-item .content .bot .heading {
    width: 100%;
  }
  .featured-works-item .content .grid-text {
    width: 100%;
    flex-direction: column;
  }
  .featured-works-item .content .grid-text .item {
    width: unset !important;
  }
}

.process-heading {
  align-content: center;
}
@media (max-width: 991px) {
  .process-heading .group-btn-slider {
    margin-bottom: 34px;
  }
}

@media (min-width: 992px) {
  .process-slide {
    margin-left: -16px;
  }
}

.process-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 40px;
  background-color: var(--neutral-100);
  box-shadow: 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.process-card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 32px;
  color: var(--white);
  border-radius: 16px;
  background: linear-gradient(180deg, #D95E12 0%, #F47C22 100%);
  box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.0862745098), 0px 22.91px 37.08px 0px rgba(255, 59, 0, 0.1647058824), 0px 76px 123px 0px rgba(255, 59, 0, 0.0509803922), 0px 5.05px 8.18px 0px rgba(255, 59, 0, 0.1019607843), 0px 16.98px 27.47px 0px rgba(255, 59, 0, 0.0470588235), 0px 56px 83px 0px rgba(255, 59, 0, 0.2509803922), 0px 14px 34px 0px rgba(255, 59, 0, 0.2509803922), 0px 1px 2px 0px rgba(255, 59, 0, 0.4), 0px -3px 0px 0px rgba(0, 0, 0, 0.0588235294) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset;
  margin-bottom: 96px;
}
.process-card .content {
  flex-grow: 1;
  margin-bottom: 96px;
}
.process-card .content .title {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.process-card .content .title::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
.process-card .bot {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.process-card .bot .time {
  padding: 8px 15px 7px 15px;
  border-radius: 99px;
  border: 1px solid var(--neutral-300);
  letter-spacing: 0.03em;
}
.process-card .bot .number {
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: 600;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.03px;
}
@media (max-width: 767px) {
  .process-card {
    padding: 20px;
  }
  .process-card .icon {
    margin-bottom: 36px;
  }
  .process-card .content {
    margin-bottom: 36px;
  }
}

.cursor-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}
@media (max-width: 1199px) {
  .cursor-trail {
    display: none;
  }
}

.section-about-me {
  position: relative;
}
.section-about-me .s-img-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.section-about-me .s-img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-about-me .s-img-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4392156863);
  z-index: 1;
}
.section-about-me .col-left {
  position: relative;
  margin-bottom: 50px;
}
.section-about-me .col-left .badget {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0px 0.25px 0.25px 0px rgba(255, 255, 255, 0.3215686275) inset, 0px 0.75px 0.25px 0px rgba(255, 255, 255, 0.1215686275) inset, 0px 4px 16px 0px rgba(255, 255, 255, 0.1607843137) inset, 0px -12px 16px 0px rgba(255, 255, 255, 0.0588235294) inset, 0px 0px 0px 0.75px rgba(0, 0, 0, 0.5607843137), 0px 3px 6px 0px rgba(0, 0, 0, 0.1882352941), 0px 10px 10px 0px rgba(0, 0, 0, 0.0588235294), 0px 12px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 23px 14px 0px rgba(0, 0, 0, 0.0588235294);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.section-about-me .col-left .badget img {
  animation: spin 10s linear infinite;
}
.section-about-me .col-left .signature {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.section-about-me .davies-video {
  position: relative;
  display: flex;
}
.section-about-me .davies-video .video {
  background-blend-mode: luminosity;
  max-height: 666px;
  aspect-ratio: 0.8003003003;
  filter: grayscale(100%);
}
.section-about-me .davies-video .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.section-about-me .davies-video .overlay.mark-1 {
  background: linear-gradient(270deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%);
}
.section-about-me .davies-video .overlay.mark-2 {
  background: linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%);
}
.section-about-me .col-right .br-line {
  background-color: rgba(255, 255, 255, 0.1607843137);
  display: flex;
  margin-bottom: 40px;
  margin-top: 40px;
}
@media (min-width: 1200px) {
  .section-about-me .col-left .badget {
    transform: translate(50%, -50%);
    right: 0;
  }
  .section-about-me .col-left .signature {
    bottom: 40px;
  }
  .section-about-me .col-right .br-line {
    margin-bottom: 88px;
    margin-top: 88px;
  }
}
@media (max-width: 1199px) {
  .section-about-me .badget {
    max-width: 100px;
  }
}

.experience-list {
  display: grid;
  gap: 16px;
}
.experience-list li {
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.experience-list li:first-child {
  color: var(--white-64);
}
.experience-list .exp_name {
  flex: 1;
}
.experience-list .exp_year {
  color: var(--white-64);
  min-width: 109px;
  text-align: end;
}

.section-about-me-v2 .davies-video {
  position: relative;
  display: flex;
}
.section-about-me-v2 .davies-video .video {
  background-blend-mode: luminosity;
  min-height: 500px;
  aspect-ratio: 1.7777777778;
  filter: grayscale(100%);
  z-index: 0;
}
.section-about-me-v2 .davies-video .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.section-about-me-v2 .davies-video .overlay.mark {
  background: linear-gradient(270deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%), linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%);
}
.section-about-me-v2 .davies-video .overlay.bg-effect {
  background: var(--white);
  mix-blend-mode: color-burn;
}
.section-about-me-v2 .about-main {
  position: relative;
}
.section-about-me-v2 .about-main .content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section-about-me-v2 .about-main .top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.section-about-me-v2 .about-main .text-color-change {
  max-width: 642px;
}
.section-about-me-v2 .award-main {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}
.section-about-me-v2 .award-main .badget img {
  animation: spin 10s linear infinite;
}
.section-about-me-v2 .award-main .experience-list {
  max-width: 533px;
  width: 100%;
}

.mini-title {
  margin-bottom: 24px;
}
@media (min-width: 1200px) {
  .mini-title {
    margin-bottom: 40px;
  }
}

.section-brand {
  /*-- min, between, max --*/
}
.section-brand .tf-grid-layout {
  gap: 0;
}
.section-brand .img-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0.64;
}
.section-brand .img-brand img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform: scale(1);
}
.section-brand .img-brand:hover {
  opacity: 1;
}
.section-brand .img-brand:hover img {
  transform: scale(1.1);
}
.section-brand .brand-list {
  display: grid;
}
.section-brand .brand-list .img-brand {
  border-bottom: 1px solid var(--white-16);
  border-right: 1px solid var(--white-16);
}
.section-brand .brand-list.type-line-2 .img-brand {
  border-color: #C4C4C4 !important;
}
@media (min-width: 768px) {
  .section-brand .brand-list {
    grid-template-columns: repeat(5, 1fr);
  }
  .section-brand .brand-list .img-brand:nth-child(-n+5) {
    border-top: 1px solid var(--white-16);
  }
  .section-brand .brand-list .img-brand:nth-child(5n+1) {
    border-left: 1px solid var(--white-16);
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .section-brand .brand-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .section-brand .brand-list .img-brand:nth-child(-n+3) {
    border-top: 1px solid var(--white-16);
  }
  .section-brand .brand-list .img-brand:nth-child(3n+1) {
    border-left: 1px solid var(--white-16);
  }
}
@media (max-width: 575px) {
  .section-brand .brand-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .section-brand .brand-list .img-brand:nth-child(-n+2) {
    border-top: 1px solid var(--white-16);
  }
  .section-brand .brand-list .img-brand:nth-child(2n+1) {
    border-left: 1px solid var(--white-16);
  }
}

.section-award {
  position: relative;
  overflow: hidden;
}
.section-award .col-right {
  padding-bottom: 492px;
}
.section-award .award-list {
  display: grid;
  gap: 4px;
}
.section-award .award-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-award .award-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white-32);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-award .tf-swiper {
  height: 152px;
}
.section-award .tf-swiper .swiper-slide.swiper-slide-active .award-item {
  color: var(--white);
}
.section-award .tf-swiper.swiper-t2 .award-item {
  color: var(--black-32);
}
.section-award .tf-swiper.swiper-t2 .swiper-slide.swiper-slide-active .award-item {
  color: var(--black);
}
@media (max-width: 767px) {
  .section-award .tf-swiper {
    height: 86px;
  }
}
@media (max-width: 425px) {
  .section-award .col-right {
    padding-bottom: 400px;
  }
}

.wrap-flip-image {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wrap-flip-image .container {
  height: 100%;
}
@media (max-width: 425px) {
  .wrap-flip-image {
    padding-top: 120px;
  }
}

.flip-image-list {
  position: relative;
  height: 100%;
}

.flip-image {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  transform: translateX(150vw);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all;
}
.flip-image img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.flip-image:hover img {
  transform: translateY(-20px);
}
@media (max-width: 767px) {
  .flip-image {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 992px) {
  .section-service {
    position: relative;
    overflow: hidden;
  }
  .section-service .services-wrapper {
    display: flex;
    flex-direction: row;
    width: 300%;
  }
  .section-service .wg-service {
    width: 100vw;
    flex-shrink: 0;
  }
}

.indicator-wrap {
  position: relative;
  padding-bottom: 30px;
}
.indicator-wrap .wg-indicator {
  margin-bottom: 40px;
}
.indicator-wrap .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0.5;
}
.indicator-wrap .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
}
@media (min-width: 992px) {
  .indicator-wrap {
    padding-bottom: 90px;
  }
}

.section-cta {
  position: relative;
}
.section-cta .bg-img {
  position: absolute;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
}
.section-cta .bg-img img {
  width: 100%;
  transform: translateY(-35%);
}
@media (min-width: 1440px) {
  .section-cta {
    padding-bottom: 180px;
  }
}

.logo-custom {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.0509803922);
  position: relative;
}
.logo-custom .logo-site {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
}
.logo-custom .logo-site-sv {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.logo-custom .logo-site-sv path {
  fill: var(--primary);
}
.logo-custom .line-vertical {
  width: 1px;
  height: 254px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(0, 0, 0, 0) 100%);
}
.logo-custom .line-vertical.left {
  left: 0;
}
.logo-custom .line-vertical.right {
  right: 0;
}
.logo-custom .line-horizontal {
  width: 254px;
  height: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(0, 0, 0, 0) 100%);
}
.logo-custom .line-horizontal.top {
  top: 0;
}
.logo-custom .line-horizontal.bottom {
  bottom: 0;
}
@media (max-width: 991px) {
  .logo-custom .line-vertical {
    height: 127px;
  }
  .logo-custom .line-horizontal {
    width: 127px;
  }
}

.section-selected-work {
  position: relative;
}
.section-selected-work .image-award {
  margin-top: 40px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.section-selected-work .image-award.active {
  opacity: 1;
  visibility: visible;
}
.section-selected-work .btn-thumbs-group.stt-2 .btn-thumbs {
  display: none;
}
.section-selected-work .btn-thumbs-group.stt-2.number-order-3 .btn-thumbs:last-child {
  display: block;
}
.section-selected-work .swiper-btn-hor {
  max-height: 258px;
}
.section-selected-work .bg-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.section-selected-work .bg-img img {
  width: 100%;
  object-fit: cover;
}
.section-selected-work .group-btn-slider {
  margin-top: 24px;
}
.section-selected-work .content-wrap-1 .col-left,
.section-selected-work .content-wrap-1 .col-right {
  margin-bottom: 35px;
}
.section-selected-work .content-wrap-2 {
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
}
.section-selected-work .content-wrap-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  z-index: 0;
}
.section-selected-work .content-wrap-2 .col-right {
  display: flex;
  justify-content: end;
}
.section-selected-work .group-btn {
  gap: 8px 16px;
  flex-wrap: wrap;
}
.section-selected-work .slider-content-thumb .image {
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.0509803922) inset;
}
.section-selected-work .slider-content-thumb .image img {
  min-height: 350px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .section-selected-work .group-btn-slider {
    gap: 40px;
  }
  .section-selected-work .content-wrap-2 .col-right {
    transform: translateY(-50%);
  }
}
@media (max-width: 767px) {
  .section-selected-work .group-btn-slider {
    justify-content: flex-start;
    margin: 0;
  }
  .section-selected-work .content-wrap-2 .row {
    align-items: center;
  }
  .section-selected-work .image-award {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
  }
}

.work-wheel {
  position: relative;
  overflow: hidden;
}
.work-wheel li {
  color: var(--white-64);
  transition: color 0.3s ease;
}
.work-wheel li span {
  display: block;
}
.work-wheel li.active {
  color: var(--white);
}
.work-wheel li.style-2 {
  transform: matrix(1, 0, -0.53, 0.85, 0, 0);
}
.work-wheel li.style-2 span {
  transform: matrix(1, 0, 0.53, 1, 0, 0);
}
.work-wheel li.style-3 {
  transform: matrix(1, 0, -0.71, 0.7, 0, 0);
}
.work-wheel li.style-3 span {
  transform: matrix(1, 0, 0.71, 1, 0, 0);
}
.work-wheel.number-order-3 {
  margin-bottom: 40px;
}
.work-wheel::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.work-wheel.number-order-1::before {
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.08) 100%);
}
.work-wheel.number-order-2::before {
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.08) 50%, #000000 100%);
}
.work-wheel.number-order-3::before {
  background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.08) 100%);
}

.work-tag {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 108px;
}
.work-tag li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.work-tag li.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 1;
  position: relative;
}

.smooth-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.smooth-content {
  position: absolute;
  width: 100%;
}

.section-selected-work-v2 {
  padding-top: 60px;
}
.section-selected-work-v2 .work-list {
  margin-bottom: 60px;
}
.section-selected-work-v2 .work-list .element:not(:last-child) {
  margin-bottom: 60px;
}
@media (min-width: 1200px) {
  .section-selected-work-v2 .work-list {
    margin-bottom: 88px;
  }
  .section-selected-work-v2 .work-list .element:not(:last-child) {
    margin-bottom: 88px;
  }
}

.infiniteSlide_select_work > * {
  margin-left: 12px;
  margin-right: 12px;
}
@media (max-width: 991px) {
  .infiniteSlide_select_work .icon-app {
    max-width: 80px;
  }
}

.section-tech-stack {
  padding-top: 60px;
}

.section-tech-stack-v2 .tf-grid-layout {
  gap: 12px;
  place-items: center;
}
.section-tech-stack-v2 .wg-tech-v2 {
  max-width: 400px;
  width: 100%;
}
@media (min-width: 1200px) {
  .section-tech-stack-v2 .tf-grid-layout {
    gap: 24px;
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (min-width: 1440px) {
  .section-feature {
    padding-top: 180px;
  }
}

.section-testimonial {
  padding-bottom: 0;
  position: relative;
}
.section-testimonial .bg-img-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  display: flex;
  justify-content: center;
  z-index: -1;
  opacity: 0.5;
}
.section-testimonial .bg-img-item img {
  width: 100%;
}
@media (min-width: 992px) {
  .section-testimonial {
    padding-bottom: 60px;
  }
}

.section-service-v2 .br-line {
  margin-bottom: 40px;
}

.section-blog .tf-grid-layout {
  gap: 30px;
}

.section-page-title {
  padding-top: 60px;
  padding: 180px 0 120px;
  background-image: url(./../images/section/hero-1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.section-page-title .page-title {
  margin-bottom: 20px;
}
.section-page-title .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.section-404 {
  padding: 180px 0 120px;
}
.section-404 .title {
  margin-bottom: 40px;
}
.section-404 .desc {
  margin-bottom: 30px;
}
.section-404 .tf-btn {
  max-width: 180px;
  width: 100%;
}

.section-faq.type-2 .s-header .text {
  gap: 0px 16px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 767px) {
  .section-faq.type-2 .s-header .title {
    display: grid;
    place-items: center;
  }
  .section-faq.type-2 .s-header .title br {
    display: none;
  }
  .section-faq.type-2 .s-header .text {
    gap: 8px;
  }
  .section-faq.type-2 .s-header .icon {
    width: 40px;
    aspect-ratio: 1;
  }
}

.main-mouse-hover {
  position: relative;
}
.main-mouse-hover .tf-mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.main-mouse-hover .tf-mouse.hover {
  opacity: 1;
}

@media (min-width: 992px) {
  .stack-element-2 {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  .stack-element-2 .stack {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .stack-element-2 .element {
    position: absolute;
    inset: 0;
  }
  .stack-element-2 .element1 {
    z-index: 1;
  }
  .stack-element-2 .element2 {
    z-index: 2;
  }
  .stack-element-2 .element3 {
    z-index: 3;
  }
}

.wg-service-2 {
  display: flex;
  gap: 121px;
  position: relative;
  /*-- min, between, max --*/
}
.wg-service-2 .main-image {
  position: relative;
  max-width: 424px;
  width: 100%;
}
.wg-service-2 .main-image .action {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}
.wg-service-2 .title {
  margin-bottom: 16px;
}
.wg-service-2 .desc {
  margin-bottom: 40px;
}
.wg-service-2 .br-line {
  margin-bottom: 40px;
}
.wg-service-2 .tf-list {
  margin-bottom: 60px;
  gap: 16px;
}
.wg-service-2 .image-simu {
  width: 212px;
  flex-shrink: 0;
  align-self: center;
  background-color: var(--white);
  display: none;
}
.wg-service-2 .image-2 {
  align-self: center;
  display: none;
}
.wg-service-2 .image-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1200px) {
  .wg-service-2 .image-2 {
    width: 212px;
    position: absolute;
    left: calc(100% - 212px);
    top: 50%;
    transform: translateY(-50%);
    display: block;
  }
  .wg-service-2 .image-simu {
    display: block;
  }
}
@media (max-width: 1439px) {
  .wg-service-2 {
    gap: 80px;
  }
}
@media (max-width: 1199px) {
  .wg-service-2 {
    gap: 60px;
  }
  .wg-service-2:not(:last-child) {
    margin-bottom: 60px;
  }
  .wg-service-2 .image {
    height: 100%;
  }
  .wg-service-2 .br-line {
    margin-bottom: 32px;
  }
  .wg-service-2 .tf-list {
    margin-bottom: 40px;
    gap: 8px;
  }
  .wg-service-2 .main-image {
    max-width: unset;
    width: 50%;
  }
  .wg-service-2 .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wg-service-2 .center {
    width: 50%;
    align-self: center;
  }
}
@media (max-width: 767px) {
  .wg-service-2 .desc {
    margin-bottom: 28px;
  }
  .wg-service-2 .br-line {
    margin-bottom: 28px;
  }
  .wg-service-2 .tf-list {
    margin-bottom: 32px;
  }
}
@media (max-width: 575px) {
  .wg-service-2 {
    flex-direction: column;
    gap: 30px;
  }
  .wg-service-2:not(:last-child) {
    margin-bottom: 50px;
  }
  .wg-service-2 > * {
    width: 100% !important;
  }
  .wg-service-2 .desc {
    margin-bottom: 20px;
  }
  .wg-service-2 .br-line {
    margin-bottom: 20px;
  }
  .wg-service-2 .tf-list {
    margin-bottom: 20px;
  }
  .wg-service-2 .image img {
    max-height: 350px;
  }
  .wg-service-2 .action {
    display: none;
  }
}
@media (min-width: 576px) and (max-width: 1199px) {
  .wg-service-2 .desc {
    margin-bottom: 32px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

.section-tools {
  position: relative;
  padding: 192px 0;
}
.section-tools > img {
  position: absolute;
  box-shadow: 4.29817px 18.6254px 28.6545px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}
.section-tools .img-1 {
  top: 22%;
  left: 22.22%;
  width: 103px;
  transform: scale(1) rotate(30deg);
}
@media (max-width: 1439px) {
  .section-tools .img-1 {
    left: 12.22%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-1 {
    width: 50px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-1 {
    top: 10%;
  }
}
.section-tools .img-2 {
  top: 44%;
  left: 15.347%;
  width: 80px;
  transform: scale(1) rotate(-12deg);
}
@media (max-width: 1439px) {
  .section-tools .img-2 {
    left: 5.347%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-2 {
    width: 40px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-2 {
    top: 73%;
  }
}
.section-tools .img-3 {
  top: 62%;
  left: 22.7%;
  width: 92px;
  transform: scale(1) rotate(-15deg);
}
@media (max-width: 1439px) {
  .section-tools .img-3 {
    left: 12.7%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-3 {
    width: 40px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-3 {
    top: 82%;
    left: 20.7%;
  }
}
.section-tools .img-4 {
  top: 28%;
  right: 22.5%;
  width: 92px;
  transform: scale(1) rotate(-15deg);
}
@media (max-width: 1439px) {
  .section-tools .img-4 {
    right: 12.5%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-4 {
    width: 40px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-4 {
    top: 10%;
  }
}
.section-tools .img-5 {
  top: 49%;
  right: 16.95%;
  width: 80px;
  transform: scale(1) rotate(15deg);
}
@media (max-width: 1439px) {
  .section-tools .img-5 {
    right: 6.95%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-5 {
    width: 40px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-5 {
    top: 72%;
  }
}
.section-tools .img-6 {
  top: 63%;
  right: 22.92%;
  width: 103px;
  transform: scale(1) rotate(30deg);
}
@media (max-width: 1439px) {
  .section-tools .img-6 {
    right: 12.92%;
  }
}
@media (max-width: 991px) {
  .section-tools .img-6 {
    width: 50px;
  }
}
@media (max-width: 767px) {
  .section-tools .img-6 {
    top: 82%;
    right: 17.92%;
  }
}
.section-tools.v2 {
  padding-top: 120px;
  padding-bottom: 196px;
}
.section-tools .text {
  margin-bottom: 32px;
}
@media (max-width: 1199px) {
  .section-tools {
    padding: 100px 0 !important;
  }
}
@media (max-width: 767px) {
  .section-tools {
    padding: 50px 0 !important;
  }
}
@media (min-width: 768px) {
  .section-tools.v2 .image {
    margin-top: -167px;
    margin-bottom: -132px;
  }
}

.section-statistic {
  position: relative;
  padding: 64px 0;
}
.section-statistic .heading-section {
  margin-left: 4px;
}
.section-statistic::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 0;
  width: 100%;
  max-width: 1324px;
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}
.section-statistic::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 1324px;
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}
.section-statistic > .line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}
.section-statistic .statistic-slider {
  max-width: 526px;
  margin-left: 37px;
}
.section-statistic .statistic-slider .text {
  min-height: 228px;
}
.section-statistic .swiper .group-slider {
  margin-bottom: 24px;
}
.section-statistic .swiper .title {
  color: var(--white);
  margin-bottom: 20px;
}
.section-statistic .swiper .statistic-number {
  display: flex;
  font-size: 240px;
  line-height: 240px;
  letter-spacing: -0.03em;
}
.section-statistic .swiper .statistic-number .prefix {
  font-size: 232px;
}
@media (max-width: 767px) {
  .section-statistic .swiper .statistic-number {
    font-size: 70px;
    line-height: 70px;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 67px;
  }
}
@media (max-width: 1199px) {
  .section-statistic .swiper .statistic-number {
    font-size: 160px;
    line-height: 160px;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 150px;
  }
}
@media (max-width: 991px) {
  .section-statistic .swiper .statistic-number {
    font-size: 110px;
    line-height: 110px;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .section-statistic {
    padding: 34px 0;
  }
  .section-statistic > .line {
    display: none;
  }
  .section-statistic .statistic-slider {
    margin-left: 0;
    max-width: unset;
  }
  .section-statistic .statistic-slider .text {
    min-height: unset;
    margin-bottom: 40px;
  }
  .section-statistic .swiper .statistic-number {
    font-size: 150px;
    font-size: 40vw;
    line-height: 150px;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 40vw;
  }
}

.section-contact {
  position: relative;
  padding: 48px;
}
.section-contact .form-contact {
  margin-left: 8px;
  margin-right: -8px;
}
.section-contact .contact-image {
  position: absolute;
  inset: 0 16px;
  border-radius: 40px;
}
.section-contact .contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}
.section-contact .col-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 0;
}
.section-contact .contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-contact .contact-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 28px;
  border-radius: 16px;
  background: linear-gradient(0deg, #F5F5F5, #F5F5F5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
}
@media (max-width: 1199px) {
  .section-contact .form-contact {
    margin-left: 0;
    margin-right: 0;
    padding: 30px;
  }
  .section-contact .form-contact .heading {
    margin-bottom: 20px;
  }
  .section-contact .form-contact .attachment {
    padding: 10px 0;
    margin-bottom: 24px;
  }
}
@media (max-width: 767px) {
  .section-contact {
    padding: 24px 12px;
  }
  .section-contact .contact-image {
    inset: 0 12px;
    border-radius: 24px;
  }
  .section-contact .contact-image img {
    border-radius: 24px;
  }
  .section-contact .col-left {
    padding: 0 0 24px 0;
  }
  .section-contact .form-contact {
    padding: 18px;
    border-radius: 24px;
  }
}

.features-wrap {
  display: flex;
  align-items: center;
}
.features-wrap .features-col {
  display: grid;
  gap: 32px;
  width: 32%;
}
@media (max-width: 991px) {
  .features-wrap {
    flex-direction: column;
  }
  .features-wrap .features-center {
    display: none;
  }
  .features-wrap .features-col {
    width: 100%;
    gap: 24px;
  }
}

.tool-wrap {
  max-width: 886px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.tool-wrap .tool-image-box {
  margin: -169px 0 -162px;
  width: 100%;
  height: 506px;
}
.tool-wrap .img-item {
  position: absolute;
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  border-radius: 8px;
  z-index: 2;
}
.tool-wrap .img-item-1 {
  top: 0;
  left: 32px;
}
.tool-wrap .img-item-2 {
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
}
.tool-wrap .img-item-3 {
  bottom: 0;
  left: 40px;
}
.tool-wrap .img-item-4 {
  top: 6px;
  right: 38px;
}
.tool-wrap .img-item-5 {
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}
.tool-wrap .img-item-6 {
  bottom: -6px;
  right: 33px;
}
.tool-wrap .image-center {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.1197), 0px 3px 3px rgba(0, 0, 0, 0.14), 0px 100px 80px rgba(0, 0, 0, 0.15), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.1503), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.1417), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.135), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.1283), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.1197);
  border-radius: 8px;
  z-index: 2;
}
.tool-wrap .image-center img {
  width: 100%;
}
.tool-wrap .line-1 {
  position: absolute;
  top: 66px;
  left: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-1 {
    width: 25%;
    top: -9px;
    left: 59px;
  }
}
.tool-wrap .line-2 {
  position: absolute;
  top: 50%;
  left: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-2 {
    width: 50%;
    left: 0;
  }
}
.tool-wrap .line-3 {
  position: absolute;
  bottom: 66px;
  left: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-3 {
    width: 25%;
    bottom: 0px;
    left: 59px;
  }
}
.tool-wrap .line-4 {
  position: absolute;
  top: 66px;
  right: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-4 {
    width: 25%;
    top: -9px;
    right: 59px;
  }
}
.tool-wrap .line-5 {
  position: absolute;
  top: 50%;
  right: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-5 {
    width: 50%;
    right: 0;
  }
}
.tool-wrap .line-6 {
  position: absolute;
  bottom: 66px;
  right: 66px;
}
@media (max-width: 767px) {
  .tool-wrap .line-6 {
    width: 25%;
    bottom: 0px;
    right: 59px;
  }
}
@media (max-width: 1199px) {
  .tool-wrap .tool-image-box {
    margin: -70px 0;
  }
}
@media (max-width: 767px) {
  .tool-wrap .tool-image-box {
    margin: 0;
    height: 238px;
  }
  .tool-wrap .image-center {
    width: 100px;
  }
  .tool-wrap .img-item-5,
  .tool-wrap .img-item-2 {
    width: 40px;
  }
  .tool-wrap .img-item-3,
  .tool-wrap .img-item-4 {
    width: 46px;
  }
  .tool-wrap .img-item-1,
  .tool-wrap .img-item-6 {
    width: 52px;
  }
}

.side-line-main {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  bottom: 15%;
  z-index: 0;
}
.side-line-main .side-line-wrap {
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.side-line-main div:not(.link-break-center) {
  height: 100%;
}
.side-line-main .link-break-line {
  width: 66px;
  border: 1px solid #D4D4D8;
  height: 100%;
  border-radius: 0px 20px 20px 0px;
  border-left: 0;
  position: relative;
  overflow: hidden;
}
.side-line-main .link-break-line::after {
  content: "";
  position: absolute;
  inset: 0 1px 1.5px 0px;
  background: var(--neutral-50);
  border-radius: 0px 20px 20px 0px;
}
.side-line-main .link-break-line.right {
  transform: rotate(180deg);
}
.side-line-main .link-break-line .item {
  position: absolute;
  left: 0;
  right: 0;
  margin-right: -1px;
  width: 100%;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-delay: 1.3s;
}
.side-line-main .link-break-line .item.top {
  background: radial-gradient(circle at top right, var(--brand) 0%, transparent 90%);
  animation-name: lineRunTop;
}
.side-line-main .link-break-line .item.bottom {
  background: radial-gradient(circle at bottom right, var(--brand) 0%, transparent 90%);
  animation-name: lineRunBottom;
}
.side-line-main .link-break-center {
  border: 1.5px solid #D4D4D8;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
.side-line-main .link-break-center::before, .side-line-main .link-break-center::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background: #D5D0D4;
  z-index: 2;
}
.side-line-main .link-break-center::before {
  left: 60px;
}
.side-line-main .link-break-center::after {
  right: 60px;
}
.side-line-main .simu-electric {
  position: absolute;
  height: 1.5px;
  width: 50px;
  top: 50%;
  transform: translateY(-50%);
}
.side-line-main .simu-electric.left {
  background: linear-gradient(to right, var(--brand) 0%, transparent 100%);
  animation-name: left50To0;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.side-line-main .simu-electric.right {
  background: linear-gradient(to left, var(--brand) 0%, transparent 100%);
  animation-name: right50To0;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.side-line-main.style-1 {
  position: absolute;
  top: 15%;
  left: 100px;
  right: 100px;
  bottom: 15%;
  z-index: 0;
}
.side-line-main.style-1 .link-break-line::after {
  background-color: var(--body);
}
@media (max-width: 575px) {
  .side-line-main.style-1 {
    left: 55px;
    right: 55px;
  }
  .side-line-main.style-1 .link-break-line {
    width: 30px;
  }
  .side-line-main.style-1 .link-break-center::before {
    left: 25px;
  }
  .side-line-main.style-1 .link-break-center::after {
    right: 25px;
  }
}

@keyframes lineRunBottom {
  0% {
    bottom: 50%;
    height: 0px;
  }
  30% {
    height: 66px;
  }
  100% {
    bottom: -30%;
  }
}
@keyframes lineRunTop {
  0% {
    top: 50%;
    height: 0px;
  }
  30% {
    height: 66px;
  }
  100% {
    top: -30%;
  }
}
@keyframes left50To0 {
  0% {
    left: 50%;
  }
  100% {
    left: -10%;
  }
}
@keyframes right50To0 {
  0% {
    right: 50%;
  }
  100% {
    right: -10%;
  }
}
.section-testimonials .col-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-services .col-left {
  margin-bottom: 260px;
}
.section-services .top {
  margin-bottom: 59px;
}
@media (max-width: 991px) {
  .section-services .col-left {
    margin-bottom: 20px;
  }
}

.section-services-single {
  margin-top: -100px;
}
.section-services-single .heading {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  .section-services-single .heading {
    font-size: 32px;
    line-height: 40px;
  }
}
.section-services-single .top-image {
  background-color: var(--white);
  border-radius: 19px;
  padding: 10px;
}
.section-services-single .top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 19px;
}
.section-services-single .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
}
@media (min-width: 768px) {
  .section-services-single {
    margin-top: -371px;
  }
  .section-services-single .bot-image {
    margin-left: -11px;
  }
}

.delay-wrap {
  border-top: 1px solid var(--neutral-200);
  position: relative;
}
@media (min-width: 768px) {
  .delay-wrap::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 1px;
    left: 40.58642%;
    background-color: var(--neutral-200);
  }
}

.delay-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0 23px;
  border-bottom: 1px solid var(--neutral-200);
}
.delay-item .left {
  width: 41%;
}
.delay-item .right {
  width: 58.3%;
}
.delay-item .delay-progress {
  height: 88px;
  width: 100%;
  background-color: var(--neutral-100);
  position: relative;
  border-radius: 24px;
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}
.delay-item .delay-progress .progress-line {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #18181B;
  box-shadow: 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.delay-item .delay-progress .number-progress {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .delay-item {
    flex-direction: column;
  }
  .delay-item > * {
    width: 100% !important;
  }
}

.testimonials-v2-wrap {
  display: flex;
  justify-content: space-between;
  gap: 98px;
  padding: 50px;
  border-radius: 40px;
  background: linear-gradient(0deg, #18181B, #18181B), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px #111111 inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.1019607843) inset;
}
.testimonials-v2-wrap .col-left {
  width: 44%;
  height: unset;
}
.testimonials-v2-wrap .col-right {
  width: 47.826%;
}
.testimonials-v2-wrap .swiper-testimonial_wrap {
  padding-bottom: 24px;
}
.testimonials-v2-wrap .testimonial-image-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
@media (max-width: 1199px) {
  .testimonials-v2-wrap {
    border-radius: 24px;
    padding: 30px;
    gap: 30px;
  }
}
@media (max-width: 767px) {
  .testimonials-v2-wrap {
    padding: 18px;
    flex-direction: column;
  }
  .testimonials-v2-wrap .col-right,
  .testimonials-v2-wrap .col-left {
    width: 100%;
  }
}

.section-work-single {
  margin-top: -100px;
}
.section-work-single .heading {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {
  .section-work-single .heading {
    font-size: 32px;
    line-height: 40px;
  }
}
.section-work-single .wrap-image {
  background-color: var(--white);
  border-radius: 19px;
  padding: 10px;
}
.section-work-single .wrap-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 19px;
}
.section-work-single .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}
@media (min-width: 768px) {
  .section-work-single {
    margin-top: -379px;
  }
}

.wg-map {
  display: flex;
  margin: 0 16px;
  padding: 12px;
  border-radius: 40px;
  background: #F4F4F5;
  box-shadow: 0px -8px 0px 0px #EAEAEA inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.wg-map iframe {
  border-radius: 32px;
  width: 100%;
}

.box-contact-item {
  text-align: center;
  padding: 40px;
  border-radius: 32px;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.box-contact-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  font-size: 40px;
  color: var(--white);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  border-radius: 16px;
  background: linear-gradient(0deg, #272727, #272727), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.box-contact-item .title {
  margin-bottom: 8px;
}
@media (max-width: 991px) {
  .box-contact-item {
    padding: 24px !important;
    border-radius: 24px;
  }
}

.section-pricing .tf-switch-check {
  margin-bottom: -20px;
}
@media (max-width: 991px) {
  .section-pricing .tf-switch-check {
    margin-top: 18px;
  }
}
@media (max-width: 767px) {
  .section-pricing .tf-switch-check {
    margin-top: 8px;
    margin-bottom: -7px;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.sw-dot-default {
  margin-top: 24px;
  display: inline-flex;
}
.sw-dot-default .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0.32;
  margin-left: 4px;
  margin-right: 4px;
}
.sw-dot-default .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.sw-dot-default.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--white);
}
.sw-dot-default.style-white .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: var(--white);
}
.sw-dot-default.style-white .swiper-pagination-bullet::before {
  background-color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 1200px) {
  .sw-dot-default {
    margin-top: 40px;
  }
}

.swiper-box-shadow {
  padding: 20px;
  margin: -20px;
}

.group-btn-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.group-btn-slider .sw-dot-default {
  width: auto;
  margin: 0;
}
.group-btn-slider .nav-prev-swiper,
.group-btn-slider .nav-next-swiper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--secondary);
  border-radius: 99px;
  background: linear-gradient(0deg, #F5F5F5, #F5F5F5), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.group-btn-slider .nav-prev-swiper .icon,
.group-btn-slider .nav-next-swiper .icon {
  font-size: 24px;
  position: relative;
  z-index: 1;
}
.group-btn-slider .nav-prev-swiper::before,
.group-btn-slider .nav-next-swiper::before {
  position: absolute;
  content: "";
  bottom: 150%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(0deg, #272727, #272727), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.group-btn-slider .nav-prev-swiper:hover,
.group-btn-slider .nav-next-swiper:hover {
  color: var(--white);
}
.group-btn-slider .nav-prev-swiper:hover::before,
.group-btn-slider .nav-next-swiper:hover::before {
  bottom: 0;
}
.group-btn-slider .nav-prev-swiper.swiper-button-disabled,
.group-btn-slider .nav-next-swiper.swiper-button-disabled {
  opacity: 0.32;
  pointer-events: none;
}
@media (max-width: 767px) {
  .group-btn-slider .nav-prev-swiper,
  .group-btn-slider .nav-next-swiper {
    width: 44px;
    height: 44px;
  }
}

.btn-thumbs {
  cursor: pointer;
}

.btn-nav-swiper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hover-wrap {
  position: absolute;
  top: 0;
  bottom: 40px;
  z-index: 2;
  overflow: hidden;
}
.hover-wrap .action {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  opacity: 0;
}
.hover-wrap .action.hover {
  opacity: 1;
}
.hover-wrap .action:not(.hover) {
  opacity: 0;
}
.hover-wrap.left {
  right: 50%;
  left: 0;
}
.hover-wrap.right {
  right: 0;
  left: 50%;
}
@media (max-width: 1199px) {
  .hover-wrap {
    display: none;
  }
}

.slider_effect_fade .swiper-slide.swiper-slide-active .fade-item {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.slider_effect_fade .swiper-slide.swiper-slide-active .scale-item {
  transform: scale(1);
}
.slider_effect_fade .swiper-slide.swiper-slide-active .width-item {
  width: 100%;
}
.slider_effect_fade .fade-item {
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider_effect_fade .fade-item.fade-box {
  transition-delay: 0.4s;
  transform: translateY(0px);
}
.slider_effect_fade .fade-item.fade-item-1 {
  transition-delay: 0.5s;
}
.slider_effect_fade .fade-item.fade-item-2 {
  transition-delay: 0.6s;
}
.slider_effect_fade .fade-item.fade-item-3 {
  transition-delay: 0.7s;
}
.slider_effect_fade .fade-item.fade-item-4 {
  transition-delay: 0.8s;
}
.slider_effect_fade .scale-item {
  transform: scale(1.2);
  transition: all 0.5s linear;
}
.slider_effect_fade .scale-item.scale-item-1 {
  transition-delay: 0.3s;
}
.slider_effect_fade .width-item {
  width: 1%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slider_effect_fade .width-item.width-item-3 {
  transition-delay: 0.7s;
}

/*-- Slick Slide --*/
.slick-list {
  padding: 0 !important;
  /* xóa padding auto */
}

.slick-nav .slick-slide {
  border: 0;
}
.slick-nav .slick-slide .text-slide {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.slick-nav .slick-slide:not(.slick-center) .text-slide {
  color: var(--white-32);
}

.slick-nav {
  perspective: 1000px;
}
.slick-nav .slick-slide {
  transition: transform 0.6s, opacity 0.6s;
  transform-origin: center center;
  opacity: 0.4;
  transform: rotateX(0deg) translateZ(0px);
}
.slick-nav .slick-slide:not(.slick-current) {
  transform: rotateX(45deg) translateY(-120px) translateZ(-120px);
}
.slick-nav .slick-current {
  opacity: 1;
}
.slick-nav .slick-current + .slick-slide {
  transform: rotateX(45deg) translateY(-120px) translateZ(-120px);
}
.slick-nav .slick-current ~ .slick-slide:last-child {
  transform: rotateX(-45deg) translateY(120px) translateZ(-120px);
}

.group-slider {
  display: flex;
  gap: 40px;
  align-items: center;
}
.group-slider .swiper-pagination {
  position: relative;
  width: 100%;
  height: 2px;
  bottom: unset;
  top: unset;
  left: unset;
  background: rgba(255, 255, 255, 0.2);
}
.group-slider .swiper-pagination .swiper-pagination-bullet {
  position: absolute;
  inset: 0;
  width: unset;
  height: unset;
  opacity: 1;
  margin: 0;
  background: transparent;
}
.group-slider .swiper-pagination .swiper-pagination-bullet::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  transition: all 1s ease-in-out;
}
.group-slider .swiper-pagination .swiper-pagination-bullet-active::after {
  width: 100%;
  background: var(--brand);
}
.group-slider .group-btn-slider {
  display: flex;
  gap: 8px;
}
.group-slider .group-btn-slider .btn-slider {
  display: flex;
}
.group-slider .group-btn-slider .btn-slider:hover .icon {
  color: var(--brand);
}
.group-slider .group-btn-slider .icon {
  font-size: 24px;
  color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: visible;
}

.progress-fill {
  position: absolute;
  height: 100%;
  width: 0%;
  background: var(--brand);
  box-shadow: 0px 2px 12px 0px var(--brand);
  transition: width 0.06s linear;
}

.swiper-testimonial_wrap .top-icon {
  font-size: 20px;
  color: var(--brand);
  margin-bottom: 16px;
}
.swiper-testimonial_wrap .desc {
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.swiper-testimonial_wrap .cite {
  position: relative;
  padding: 8px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
}
.swiper-testimonial_wrap .cite .line-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.swiper-testimonial_wrap .cite .line {
  display: flex;
  width: 1px;
  height: 16px;
  background-color: var(--neutral-600);
}
.swiper-testimonial_wrap .group-slider {
  position: relative;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.swiper-testimonial_wrap .group-slider::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 0;
  width: 100%;
  max-width: 1324px;
  transform: translateX(-50%);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
}
.swiper-testimonial_wrap .group-slider .group-btn-slider {
  display: flex;
  gap: 12px;
}
.swiper-testimonial_wrap .group-slider .icon {
  color: var(--primary);
}
.swiper-testimonial_wrap .group-slider .btn-slider:hover .icon {
  color: var(--white);
}
.swiper-testimonial_wrap .group-slider .testimonials-pagination {
  width: max-content;
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.01px;
  color: var(--neutral-700);
}
.swiper-testimonial_wrap .group-slider .testimonials-pagination .swiper-pagination-current {
  color: var(--neutral-400);
}

.testimonial-image {
  padding: 32px;
  border-radius: 40px;
  background: linear-gradient(0deg, var(--neutral-900, #18181B), var(--neutral-900, #18181B)), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px #111111 inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.1019607843) inset;
}
.testimonial-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 24px;
  border: 0.38px solid rgba(255, 255, 255, 0.2509803922);
}
@media (max-width: 767px) {
  .testimonial-image {
    padding: 16px 12px;
    border-radius: 28px;
  }
}

.progressbar-line {
  position: relative;
  flex-grow: 1;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
}
.progressbar-line .progressbar-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background-color: var(--brand);
  box-shadow: 0px 2px 12px 0px #F26B21;
  animation: progressbar 2s infinite;
}

@keyframes progressbar {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.testimonial-v01 {
  padding: 48px;
  border: 1px solid var(--white-16);
  display: grid;
  gap: 40px;
}
.testimonial-v01 .tes-author {
  position: relative;
}
.testimonial-v01 .author_image {
  position: relative;
}
.testimonial-v01 .author_image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%), linear-gradient(180deg, #000 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #000 100%);
  mix-blend-mode: luminosity;
}
.testimonial-v01 .author_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100);
}
.testimonial-v01 .author_info {
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  text-align: center;
}
.testimonial-v01 .tes-text {
  text-align: center;
}
@media (max-width: 1199px) {
  .testimonial-v01 {
    padding: 30px;
    gap: 30px;
  }
}
@media (max-width: 991px) {
  .testimonial-v01 {
    padding: 20px 15px;
    gap: 24px;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.group-btn {
  display: flex;
  align-items: center;
}

.text-has-dot {
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (min-width: 1200px) {
  .text-has-dot {
    gap: 12px;
  }
}

.wg-feature-v01 {
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.0509803922) inset;
  position: relative;
  display: grid;
}
.wg-feature-v01 .feature-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 28px 28px 28px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.wg-feature-v01 .feature-content .tag {
  margin-bottom: 8px;
}
.wg-feature-v01 .feature-content > * {
  position: relative;
  z-index: 1;
}
.wg-feature-v01 .feature-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  backdrop-filter: blur(2px);
  z-index: 0;
}

.wg-process {
  border: 1px solid var(--white-16);
  padding: 28px;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: var(--black);
}
.wg-process .bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  display: flex;
}
.wg-process .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wg-process .img-icon {
  margin-bottom: 30px;
}
.wg-process .title {
  margin-bottom: 24px;
}
.wg-process .br-line {
  background-color: var(--white-16);
  display: flex;
  margin-bottom: 24px;
}
.wg-process .bot {
  display: flex;
  align-items: end;
  gap: 24px;
}
.wg-process .bot .img-item {
  flex-shrink: 0;
}
.wg-process .content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wg-process:hover {
  border-color: var(--primary);
}
.wg-process:hover .bg-img {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 992px) {
  .wg-process .desc {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
  .wg-process .content {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .wg-process {
    aspect-ratio: 1;
  }
}
@media (max-width: 1199px) {
  .wg-process {
    padding: 20px 15px;
  }
  .wg-process .img-icon {
    max-width: 80px;
  }
}
@media (max-width: 767px) {
  .wg-process .bot {
    flex-wrap: wrap;
    gap: 12px;
  }
}

.wg-service {
  position: relative;
}
.wg-service .bg-image {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.wg-service .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.wg-service .bg-image .img-item {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5607843137);
  backdrop-filter: blur(24px);
}
.wg-service .image {
  position: relative;
}
.wg-service .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 530px;
}
.wg-service .image,
.wg-service .image-2 {
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.0509803922) inset;
}
.wg-service .action {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
.wg-service .action.active-2 {
  right: 100%;
}
.wg-service .title {
  margin-bottom: 16px;
}
.wg-service .br-line {
  margin-top: 40px;
  margin-bottom: 40px;
}
.wg-service .tf-list {
  gap: 16px;
  margin-bottom: 60px;
}
@media (max-width: 1199px) {
  .wg-service .br-line {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .wg-service .tf-list {
    margin-bottom: 40px;
  }
}
@media (max-width: 991px) {
  .wg-service .image {
    margin-bottom: 30px;
  }
  .wg-service .action {
    right: 55px;
  }
}
@media (max-width: 575px) {
  .wg-service .image img {
    max-height: 300px;
  }
}

.wg-tech {
  padding: 24px 0px 23px;
  border-bottom: 1px solid var(--white-16);
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wg-tech .tech_text {
  color: var(--white-32);
  display: flex;
  justify-content: center;
  gap: 8px;
}
.wg-tech > .tech_text {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.wg-tech .infiniteSlide_tech_main {
  position: absolute;
  inset: 0;
  background: rgba(var(--primary-rgb), 0.08);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
}
.wg-tech .infiniteSlide_tech > * {
  margin-left: 20px;
  margin-right: 20px;
}
.wg-tech .infiniteSlide_tech .tech_text .text {
  color: var(--white);
}
.wg-tech .infiniteSlide_tech .tech_text .process {
  color: var(--primary);
}
.wg-tech .app_icon {
  box-shadow: 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.3215686275) inset, 0px 1px 0.5px 0px rgba(255, 255, 255, 0.1215686275) inset, 0px 4px 16px 0px rgba(255, 255, 255, 0.1607843137) inset, 0px -12px 16px 0px rgba(255, 255, 255, 0.0588235294) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.5607843137), 0px 3px 6px 0px rgba(0, 0, 0, 0.1882352941), 0px 10px 10px 0px rgba(0, 0, 0, 0.0588235294), 0px 12px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 23px 14px 0px rgba(0, 0, 0, 0.0588235294);
  backdrop-filter: blur(12px);
  border-radius: 999px;
}
.wg-tech:hover, .wg-tech.active {
  border-color: rgba(var(--primary-rgb), 0.16);
}
.wg-tech:hover .infiniteSlide_tech_main, .wg-tech.active .infiniteSlide_tech_main {
  opacity: 1;
  visibility: visible;
}
.wg-tech:hover > .tech_text, .wg-tech.active > .tech_text {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 991px) {
  .wg-tech .infiniteSlide_tech > * {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.wg-indicator {
  text-align: center;
}
.wg-indicator .indicate-title {
  margin-bottom: 24px;
}
.wg-indicator .indicate-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
@media (min-width: 1200px) {
  .wg-indicator .indicate-title {
    margin-bottom: 40px;
  }
}

.wg-work {
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.0509803922) inset;
  position: relative;
}
.wg-work .work-image img,
.wg-work .work-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}
.wg-work .work-content {
  position: absolute;
  inset: 0;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wg-work .work_top,
.wg-work .work_bottom {
  display: flex;
  justify-content: space-between;
}
.wg-work .work_bottom {
  align-items: end;
}
@media (min-width: 1200px) {
  .wg-work .work-content {
    padding: 32px;
  }
  .wg-work .work-content .tf-list {
    gap: 16px;
  }
}

.wg-tech-v2 {
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid var(--white-32);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.wg-tech-v2 .tech-name {
  margin-bottom: 24px;
}
.wg-tech-v2 .tech-desc {
  margin-bottom: 32px;
  color: var(--white-64);
}
.wg-tech-v2 .tech-content {
  position: relative;
  z-index: 2;
}
.wg-tech-v2 > canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
}
.wg-tech-v2:hover {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)), linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(65.62% 65.62% at 50% 50%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.3215686275) inset, 0px 1px 0.5px 0px rgba(255, 255, 255, 0.1215686275) inset, 0px 4px 16px 0px rgba(255, 255, 255, 0.1607843137) inset, 0px -12px 16px 0px rgba(255, 255, 255, 0.0588235294) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.5607843137), 0px 3px 6px 0px rgba(0, 0, 0, 0.1882352941), 0px 10px 10px 0px rgba(0, 0, 0, 0.0588235294), 0px 12px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 23px 14px 0px rgba(0, 0, 0, 0.0588235294);
}
@media (min-width: 1200px) {
  .wg-tech-v2 .tech-name {
    margin-bottom: 40px;
  }
  .wg-tech-v2 .tech-desc {
    margin-bottom: 52px;
  }
}
@media (max-width: 1199px) {
  .wg-tech-v2 > canvas {
    display: none;
  }
}

/*-- Button Go Top --*/
#goTop {
  position: fixed;
  padding: 0;
  bottom: 40px;
  right: 20px;
  width: 38px;
  height: 38px;
  background: var(--black);
  color: var(--white);
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  border: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  border-radius: 99px;
  box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.1019607843);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#goTop .border-progress {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 99px;
  border: 1px solid var(--brand);
  mask-image: conic-gradient(var(--brand) var(--progress-angle, 0deg), transparent 0);
  -webkit-mask-image: conic-gradient(var(--brand) var(--progress-angle, 0deg), transparent 0);
  content: "";
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#goTop.show {
  opacity: 1;
  visibility: visible;
}
#goTop .icon {
  font-size: 22px;
  color: var(--white);
  aspect-ratio: 1;
}
#goTop .ic-wrap {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  animation: iconBounce 2s linear 0s infinite;
  display: flex;
}
#goTop:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
@media (min-width: 992px) {
  #goTop {
    right: 40px;
  }
}

.tf-left-bar {
  position: fixed;
  left: 15px;
  top: 120px;
  z-index: 1001;
}
.tf-left-bar .btn-setting-color {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--white);
  border-radius: 50%;
  background-color: #272727;
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.tf-left-bar .btn-setting-color .icon {
  animation: spin 10s infinite linear;
}
@media (max-width: 767px) {
  .tf-left-bar {
    display: none;
  }
}

.settings-color {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.settings-color .choose-item {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
}
.settings-color .choose-item:nth-child(1) {
  background: #F26B21;
}
.settings-color .choose-item:nth-child(2) {
  background: #f8c736;
}
.settings-color .choose-item:nth-child(3) {
  background: #f5772e;
}
.settings-color .choose-item:nth-child(4) {
  background: #2ac6f8;
}
.settings-color .choose-item:nth-child(5) {
  background: #8dca37;
}
.settings-color .choose-item:nth-child(6) {
  background: #6c34fa;
}
.settings-color .choose-item:nth-child(7) {
  background: #f14444;
}
.settings-color .choose-item:nth-child(8) {
  background: #e14392;
}
.settings-color .choose-item::before {
  position: absolute;
  content: "";
  border: 1px solid #fff;
  border-radius: 50%;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.settings-color .choose-item.active::before {
  opacity: 1;
}

.logo-site .icon {
  font-size: 40px;
  color: var(--primary);
}

.benefits-box {
  padding: 48px;
  border-radius: 40px;
  height: 100%;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.benefits-box .content .title {
  margin-bottom: 8px;
}
/* Fast-delivery shield: continuous card flip (right to left), whips fast then
   eases to a rest each half-turn, and speeds up while the cursor is over it.
   Two faces keep the shield upright (never mirrored) through the full turn. */
.benefits-box.benefits-secure .shield-flip {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  animation: shield-flip 4.5s infinite;
  will-change: transform;
}
.benefits-box.benefits-secure .shield-flip img {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: none;
  transition: none;
}
.benefits-box.benefits-secure .shield-flip .shield-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.benefits-box.benefits-secure:hover .shield-flip {
  animation-duration: 1.4s;
}
@keyframes shield-flip {
  0%   { transform: perspective(900px) rotateY(0deg);    animation-timing-function: cubic-bezier(0.2, 0.85, 0.3, 1); }
  50%  { transform: perspective(900px) rotateY(-180deg); animation-timing-function: cubic-bezier(0.2, 0.85, 0.3, 1); }
  100% { transform: perspective(900px) rotateY(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .benefits-box.benefits-secure .shield-flip { animation: none; transform: none; }
}
@media (max-width: 991px) {
  .benefits-box {
    margin-bottom: 24px;
    height: unset;
  }
}
@media (max-width: 767px) {
  .benefits-box {
    padding: 30px 20px;
  }
}

.benefits-secure-inner {
  margin-top: -15px;
  margin-bottom: -26px;
}

.benefits-progress-inner {
  margin-bottom: 40px;
  display: grid;
  gap: 12px;
}
.benefits-progress-inner .benefits-progress-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.benefits-progress-inner .benefits-progress-item .progress-line {
  height: 40px;
  width: 0%;
  background-color: var(--neutral-100);
  position: relative;
  border-radius: 12px;
  box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.benefits-progress-inner .benefits-progress-item .progress-text {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  background-color: var(--neutral-50);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -4px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.benefits-progress-inner .benefits-progress-item .progress-text .icon {
  font-size: 24px;
  color: var(--neutral-500);
}

.benefits-step {
  height: 100%;
}
.benefits-step .benefits-step-inner {
  height: 100px;
  margin-top: 44px;
  margin-bottom: 92px;
}
@media (max-width: 767px) {
  .benefits-step .benefits-step-inner {
    margin-top: 24px;
    margin-bottom: 44px;
  }
}

.benefits-step-inner {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.benefits-step-inner .line-step {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 29px;
  border-radius: 8px;
  background-color: var(--neutral-100);
  box-shadow: 0px -2px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.benefits-step-inner .step-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background-color: var(--neutral-50);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -4px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}
.benefits-step-inner .step-item .icon {
  font-size: 48px;
  color: #151515;
}
.benefits-step-inner .step-item:hover {
  box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.0588235294), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.0588235294), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.0588235294), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.0588235294), 0px 100px 80px 0px rgba(0, 0, 0, 0.0588235294);
}
@media (max-width: 767px) {
  .benefits-step-inner {
    height: 60px !important;
  }
  .benefits-step-inner .step-item {
    width: 60px;
    height: 60px;
  }
  .benefits-step-inner .step-item .icon {
    font-size: 24px;
  }
}

.benefits-design .benefits-design-inner {
  text-align: end;
  margin-right: 16px;
  margin-top: -12px;
  position: relative;
}
.benefits-design .benefits-design-inner .item-img-2 {
  position: absolute;
  top: 24px;
  right: 226px;
}
.benefits-design .benefits-design-inner .item-img-3 {
  position: absolute;
  bottom: -24px;
  right: -65px;
}
.benefits-design .content {
  position: relative;
  width: 65%;
  margin-top: -112px;
}
@media (max-width: 767px) {
  .benefits-design .benefits-design-inner {
    margin-right: 30px;
  }
  .benefits-design .content {
    width: 100%;
    margin-top: 0px;
  }
}
@media (max-width: 575px) {
  .benefits-design .benefits-design-inner {
    text-align: center;
  }
  .benefits-design .benefits-design-inner .item-img-2 {
    display: none;
  }
  .benefits-design .benefits-design-inner .item-img-3 {
    right: calc(50% - 180px);
  }
}

/* "Craft in every detail" card: a real device/process photo replaces the
   placeholder shapes. Centered, framed, with the text sitting below it. */
.benefits-design .benefits-design-inner {
  text-align: center;
  margin-right: 0;
  margin-top: 0;
}
.benefits-design .benefits-design-inner .item-img-1 {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}
.benefits-design .benefits-design-inner .item-img-2,
.benefits-design .benefits-design-inner .item-img-3 {
  display: none;
}
.benefits-design .content {
  width: 100%;
  margin-top: 24px;
}

.features-item {
  padding: 32px;
  border-radius: 32px;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.features-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 32px;
  color: var(--white);
  margin-bottom: 32px;
  border-radius: 16px;
  background-color: #272727;
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
}
.features-item .title {
  margin-bottom: 8px;
}
.features-item.style-2 {
  padding: 40px;
}
.features-item.style-2 .icon {
  width: 80px;
  height: 80px;
  margin-bottom: 40px;
}
@media (max-width: 991px) {
  .features-item {
    padding: 24px !important;
    border-radius: 24px;
  }
}

.features-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 30px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--neutral-200, #ececee);
  box-shadow: 0 26px 60px rgba(9, 9, 11, 0.18);
}
.features-center img {
  height: 44px;
  width: auto;
}

.team-item {
  padding: 40px;
  border-radius: 40px;
  text-align: center;
  background: linear-gradient(0deg, var(--neutral-900, #18181B), var(--neutral-900, #18181B)), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px #111111 inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.1019607843) inset;
}
.team-item .image {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.2509803922);
  border-radius: 24px;
  box-shadow: 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.1294117647), 0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.1333333333), 0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.1411764706), 0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.1490196078), 0px 100px 80px 0px rgba(0, 0, 0, 0.1490196078);
  margin-bottom: 28px;
}
.team-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
.team-item .name {
  display: flex;
  justify-content: center;
  color: var(--white);
  margin-bottom: 4px;
}
.team-item .name:hover {
  color: var(--brand);
}
.team-item .sub {
  color: var(--neutral-400);
  margin-bottom: 36px;
}
.team-item.style-1 {
  text-align: start;
}
.team-item.style-1 .top {
  display: block;
  margin-bottom: 16px;
}
/* Full-width photo (was a tiny 126px avatar) so the person's face is clearly
   visible. Square crop, biased toward the top so the face is never cut off. */
.team-item.style-1 .top .image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}
.team-item.style-1 .top .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.team-item.style-1 .name {
  justify-content: start;
  margin-bottom: 0;
}
.team-item.style-1 .sub {
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .team-item {
    padding: 28px;
  }
}
@media (max-width: 767px) {
  .team-item {
    padding: 20px;
    border-radius: 28px;
  }
}

.awards-item {
  display: flex;
  gap: 12px 0;
  border-radius: 24px;
  border: 1px solid var(--neutral-800);
  padding: 0 39px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.awards-item > div {
  width: 100%;
  padding: 8px 0;
  min-height: 98px;
  align-content: center;
}
.awards-item .year {
  text-align: end;
}
.awards-item:hover {
  background: linear-gradient(0deg, var(--neutral-900, #18181B), var(--Neutral-900, #18181B)), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -4px 0px 0px #111111 inset, 0px 2px 0px 0px rgba(255, 255, 255, 0.1019607843) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
@media (min-width: 992px) {
  .awards-item {
    margin-right: -5px;
  }
}
@media (max-width: 1199px) {
  .awards-item {
    gap: 12px;
  }
}
@media (max-width: 991px) {
  .awards-item {
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .awards-item {
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: column;
  }
  .awards-item > div {
    padding: 4px 0;
    min-height: unset;
    align-content: center;
  }
  .awards-item .year {
    text-align: start;
  }
}

.pricing-item {
  padding: 40px 40px 49px;
  border-radius: 40px;
  background: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.pricing-item .top {
  display: flex;
  gap: 12px;
  margin-bottom: 27px;
}
.pricing-item .top .line {
  display: flex;
  width: 1px;
  height: 20px;
  background-color: var(--neutral-300);
}
.pricing-item .heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.pricing-item .heading .price-number {
  font-weight: 700;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.03em;
}
@media (max-width: 767px) {
  .pricing-item .heading .price-number {
    font-size: 40px;
    line-height: 48px;
  }
}
.pricing-item .heading .price-per {
  color: var(--secondary);
}
.pricing-item > .line {
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
.pricing-item .content {
  display: flex;
  gap: 18px 40px;
}
.pricing-item .content .text {
  color: var(--secondary);
  font-size: 14px;
  line-height: 20px;
}
.pricing-item .content > * {
  width: 50%;
}
.pricing-item.style-black {
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, var(--neutral-900, #18181B), var(--neutral-900, #18181B));
  box-shadow: 0px -8px 0px 0px #2E2E2E inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}
.pricing-item.style-black .top .icon,
.pricing-item.style-black .top .text {
  color: var(--white);
}
.pricing-item.style-black .top .line {
  background-color: var(--neutral-600);
}
.pricing-item.style-black .heading .price-number {
  color: var(--white);
}
.pricing-item.style-black .heading .price-per {
  color: var(--neutral-400);
}
.pricing-item.style-black .content .text {
  color: var(--neutral-400);
}
.pricing-item.style-black .content .title {
  color: var(--white);
}
.pricing-item.style-black .content .list-text li {
  color: var(--white);
}
.pricing-item.style-black .content .list-text li .icon {
  color: var(--white);
  background-color: var(--neutral-700);
}
@media (max-width: 767px) {
  .pricing-item {
    border-radius: 28px;
    padding: 24px 20px 29px;
  }
  .pricing-item .heading {
    flex-wrap: wrap;
    align-items: unset;
    gap: 18px;
  }
  .pricing-item > .line {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .pricing-item .content {
    flex-direction: column;
  }
  .pricing-item .content > * {
    width: 100%;
  }
}

.list-text.type-check {
  display: grid;
  gap: 8px;
}
.list-text.type-check li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.list-text.type-check li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  color: var(--black);
  background-color: var(--neutral-200);
  width: 20px;
  height: 20px;
  font-size: 10px;
  flex-shrink: 0;
}

.tf-switch-check {
  position: relative;
  width: 160px;
  height: 80px;
  -webkit-appearance: none;
  background-color: var(--neutral-300);
  border-radius: 99px;
  transition: 0.3s;
}
.tf-switch-check::before {
  content: "";
  border-radius: 99px;
  width: 64px;
  height: 64px;
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--white);
  box-shadow: 0px -3px 0px 0px #E9E9E9 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6980392157) inset;
  transition: 0.2s;
}
.tf-switch-check:checked {
  background: linear-gradient(180deg, #D95E12 0%, #F47C22 100%);
  box-shadow: 0px 3.44px 5.57px 0px rgba(0, 0, 0, 0.0862745098), 0px 22.91px 37.08px 0px rgba(255, 59, 0, 0.1647058824), 0px 76px 123px 0px rgba(255, 59, 0, 0.0509803922), 0px 5.05px 8.18px 0px rgba(255, 59, 0, 0.1019607843), 0px 16.98px 27.47px 0px rgba(255, 59, 0, 0.0470588235), 0px 56px 83px 0px rgba(255, 59, 0, 0.2509803922), 0px 14px 34px 0px rgba(255, 59, 0, 0.2509803922), 0px 1px 2px 0px rgba(255, 59, 0, 0.4);
}
.tf-switch-check:checked::before {
  left: 88px;
}
.tf-switch-check.style-small {
  width: 80px;
  height: 40px;
  box-shadow: none;
}
.tf-switch-check.style-small::before {
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
}
.tf-switch-check.style-small:checked::before {
  left: 44px;
}
@media (max-width: 767px) {
  .tf-switch-check {
    width: 80px;
    height: 40px;
  }
  .tf-switch-check::before {
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
  }
  .tf-switch-check:checked::before {
    left: 44px;
  }
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border: 1px solid #E5E5EA;
  border-radius: 3px;
  padding: 10px 20px;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  /* float: left; */
  font-size: 16px;
  font-weight: 400;
  /* text-transform: capitalize; */
  outline: none;
  position: relative;
  transition: all linear 0.2s;
  user-select: none;
  white-space: nowrap;
  width: 100%;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
  border-color: #999;
}

.nice-select:after {
  border-bottom: 1.7px solid #3A3A3C;
  border-right: 1.7px solid #3A3A3C;
  content: "";
  height: 8px;
  width: 8px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
}

.nice-select.open .list {
  opacity: 1;
  z-index: 10;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  width: 100%;
  -moz-transform: scale(1) translateY(0);
  -o-transform: scale(1) translateY(0);
}

.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}

.nice-select.disabled:after {
  border-color: #cccccc;
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  left: auto;
  right: 0;
}

.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}

.nice-select.small:after {
  height: 4px;
  width: 4px;
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}

.nice-select .list {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
  width: 100%;
  font-size: 14px;
  max-height: 160px;
  overflow: auto;
}

.nice-select .list.style {
  max-height: unset;
}

.nice-select .list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .list::-webkit-scrollbar-thumb {
  background-color: #a7a7a7;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .list::-webkit-scrollbar {
  width: 6px;
  height: 4px;
  background-color: #f5f5f5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}

.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: #f6f6f6;
}

.nice-select .option.selected {
  font-weight: 600;
  color: #111;
}

.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
  pointer-events: none;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

/*-- CSS Custom --*/
.nice-select {
  background-color: transparent;
  border: 0;
  padding: 0;
  border-bottom: 1px solid var(--white-16);
  padding-bottom: 15px;
}
.nice-select .list {
  background-color: var(--black);
  border-radius: 0;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.15);
}
.nice-select::after {
  content: none;
}
.nice-select::before {
  content: "\e906";
  font-family: "icomoon";
  position: absolute;
  right: 9px;
  top: 7px;
  font-size: 10px;
  line-height: 1;
  color: var(--white-64);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nice-select .option {
  background-color: transparent !important;
  color: var(--white-64);
}
.nice-select .option.selected {
  color: var(--primary);
}
.nice-select .option:hover {
  color: var(--primary);
}
.nice-select.open {
  border-color: var(--primary);
}
.nice-select.open::before {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
.ic-accordion-custom {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s linear;
}
.ic-accordion-custom::after, .ic-accordion-custom::before {
  content: "";
  position: absolute;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.ic-accordion-custom::before {
  height: 100%;
  width: 2px;
}
.ic-accordion-custom::after {
  height: 2px;
  width: 100%;
}

.accordion-faq_item {
  position: relative;
  padding: 40px;
  background-color: var(--neutral-100);
  border-radius: 40px;
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}
.accordion-faq_item .accordion-title {
  width: 100%;
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--secondary);
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (max-width: 767px) {
  .accordion-faq_item .accordion-title {
    font-size: 26px;
    line-height: 34px;
  }
}
.accordion-faq_item .accordion-title br {
  display: none;
}
.accordion-faq_item .accordion-action {
  padding-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.accordion-faq_item .accordion-action::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px -8px 0px 0px #2E2E2E inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background: radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #18181B;
}
.accordion-faq_item .accordion-action.collapsed::before {
  bottom: 110%;
}
.accordion-faq_item .accordion-action:not(.collapsed) .accordion-title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.02em;
  color: var(--white);
}
@media (max-width: 767px) {
  .accordion-faq_item .accordion-action:not(.collapsed) .accordion-title {
    font-size: 26px;
    line-height: 34px;
  }
}
.accordion-faq_item .accordion-action:not(.collapsed) .accordion-title br {
  display: block;
}
.accordion-faq_item .accordion-action:not(.collapsed) .accordion-title .icon {
  transform: rotate(45deg);
  color: var(--white);
  border-color: var(--neutral-700);
}
.accordion-faq_item .accordion-action:not(.collapsed) .accordion-title .num {
  letter-spacing: 0;
}
.accordion-faq_item .accordion-action:not(.collapsed)::before {
  bottom: 0;
}
.accordion-faq_item .accordion-content {
  position: relative;
  z-index: 1;
}
.accordion-faq_item .accordion-content .text {
  padding-top: 24px;
  padding-bottom: 96px;
}
.accordion-faq_item .accordion-text {
  width: 100%;
  max-width: 642px;
}
.accordion-faq_item.style-1 .accordion-title {
  gap: 10px;
}
.accordion-faq_item.style-1 .accordion-title .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 18px;
  border-radius: 50%;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-faq_item.style-1 .accordion-title .icon:hover {
  color: var(--brand);
}
.accordion-faq_item.style-1 .accordion-content {
  display: flex;
  gap: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--neutral-600);
  margin-top: 40px;
}
.accordion-faq_item.style-1 .accordion-content .image {
  width: 47.2%;
  flex-shrink: 0;
}
.accordion-faq_item.style-1 .accordion-content .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.accordion-faq_item.style-1 .accordion-content .content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  padding: 3px 0;
}
.accordion-faq_item.style-1 .accordion-content .content .text {
  padding: 0;
}
.accordion-faq_item.style-1 .accordion-content .content .num {
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.02em;
  color: var(--neutral-700);
}
@media (max-width: 1439px) {
  .accordion-faq_item {
    border-radius: 24px;
    padding: 30px;
  }
  .accordion-faq_item .accordion-content .text {
    padding-top: 14px;
    padding-bottom: 36px;
  }
}
@media (max-width: 991px) {
  .accordion-faq_item.style-1 .accordion-content {
    gap: 30px;
    padding-top: 20px;
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .accordion-faq_item.style-1 .accordion-content {
    flex-direction: column;
  }
  .accordion-faq_item.style-1 .accordion-content .image {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .accordion-faq_item {
    padding: 24px;
  }
}

.accordion-faq_list {
  display: grid;
  gap: 8px;
}
.accordion-faq_list.gap-32 {
  gap: 32px;
}

.accordion-asked {
  display: grid;
  gap: 16px;
}
.accordion-asked .accordion-asked-item {
  padding: 24px 40px;
  border-radius: 24px;
  background-color: var(--neutral-100);
  box-shadow: 0px 7.77px 16px 0px rgba(0, 0, 0, 0.0588235294), 0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843), 0px -8px 0px 0px rgba(0, 0, 0, 0.0509803922) inset, 0px 4px 0px 0px rgba(255, 255, 255, 0.6) inset;
}
.accordion-asked .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-asked .accordion-button:hover {
  color: var(--brand);
}
.accordion-asked .accordion-button::after {
  display: none;
}
.accordion-asked .accordion-button span {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(0deg, #272727, #272727), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.1215686275), 0px 3px 3px 0px rgba(0, 0, 0, 0.1411764706);
}
.accordion-asked .accordion-button span::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 1px;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-asked .accordion-button span::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 11px;
  background-color: var(--white);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.accordion-asked .accordion-button:not(.collapsed) span::after {
  opacity: 0;
}
.accordion-asked .accordion-body {
  padding-top: 32px;
  position: relative;
}
.accordion-asked .accordion-body::before {
  position: absolute;
  content: "";
  top: 14px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
@media (max-width: 767px) {
  .accordion-asked .accordion-asked-item {
    padding: 24px 20px;
  }
}

/*------------ Footer ---------------- */
/* ---------------------------------------------------------
    * Name: Aigocy - AI Agency
    * Version: 1.0.0
    * Author: WPRiver
    * Author URI: http://wpriverthemes.com 

	* Abstracts variable

    * Core CSS

    * Components
        * Blog
        * Layout
        * Header
        * Accordion
        * Animation
        * Box Icon
        * Button
        * Carousel
        * Form
        * Hover
        * Nice Select
        * Popup
        * Section
        * Slider
        * Tabs
        * Testimonial
        * Widget
        * Footer

 ------------------------------------------------------------------------------ */
/*--------- Abstracts variable ---------- */
footer {
  position: relative;
  padding: 43px 0 0;
}
footer .footer-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  width: 1296px;
}
footer .footer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
footer .footer-content {
  text-align: center;
  padding-bottom: 125px;
}
footer .footer-content .footer-logo {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}
footer .footer-content .title {
  margin-bottom: 10px;
}
footer .footer-content .text {
  margin-bottom: 48px;
}
footer .footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}
footer .footer-bottom > * {
  width: 100%;
}
footer .footer-bottom::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 212, 216, 0) 0%, #D4D4D8 50%, rgba(212, 212, 216, 0) 100%);
}
@media (max-width: 767px) {
  footer .footer-bottom {
    flex-wrap: wrap;
    gap: 12px;
  }
  footer .footer-bottom > * {
    justify-content: center !important;
  }
}
@media (max-width: 767px) {
  footer .footer-content {
    padding-bottom: 60px;
  }
  footer .footer-content .text {
    margin-bottom: 28px;
  }
  footer .tf-social-1 {
    display: grid;
    column-gap: 8px;
    grid-template-columns: 1fr 1fr;
  }
  footer .tf-social-1 a {
    gap: 7px;
    padding: 12px 7px;
  }
}

/* ---- InVision Network: contact form states ---- */
.form-contact .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #3F3F46;
}
.form-contact .form-consent input {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}
.form-contact .form-status {
  margin-top: 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
  min-height: 1px;
}
.form-contact .form-status.is-loading {
  color: var(--neutral-500);
}
.form-contact .form-status.is-success {
  color: #16794c;
}
.form-contact .form-status.is-error {
  color: #c0362c;
}
.form-contact button[type=submit]:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- InVision Network: logo sizing (full wordmark) ---- */
.tf-header .logo-site img {
  height: 34px;
  width: auto;
}
@media (max-width: 575px) {
  .tf-header .logo-site img,
  .canvas_head .logo-site img {
    height: 28px;
  }
}

/* ---- InVision Network: accessibility ---- */
.skip-to-content {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 3000;
  background: #18181B;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 16px;
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
#wrapper:focus,
#wrapper:focus-visible {
  outline: none;
}

/* ---- InVision Network: floating contact widget ---- */
.floating-contact {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #18181B;
  color: #ffffff;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.floating-contact:hover,
.floating-contact:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(242, 107, 33, 0.45);
}
.floating-contact i {
  color: var(--brand);
  font-size: 18px;
}
@media (max-width: 575px) {
  .floating-contact {
    left: 16px;
    bottom: 16px;
    padding: 15px;
  }
  .floating-contact span {
    display: none;
  }
  .floating-contact i {
    font-size: 20px;
  }
}

/* ---- InVision Network: floating Call / Email / Get-in-touch stack ---- */
.floating-contact-stack {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.floating-contact-stack .floating-contact {
  position: static;
  left: auto;
  bottom: auto;
}
@media (max-width: 575px) {
  .floating-contact-stack { left: 16px; bottom: 16px; gap: 8px; }
}

/* ---- InVision Network: typography polish ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Balanced line breaks + more presence on display headings */
.heading-section .heading-title,
.section-hero .title,
.text-display-1,
.text-display-2 {
  text-wrap: balance;
}
.heading-section .heading-title {
  font-weight: 700;
}
.section-hero .title span {
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* (The hero headline rotator was removed — the hero now carries one fixed
   headline, so its crossfade + reduced-motion rules were deleted with it.) */

/* Confident marketing lead paragraphs under section headings */
.heading-section p {
  font-size: 18px;
  line-height: 1.62;
  max-width: 620px;
}
.heading-section.center p {
  margin-left: auto;
  margin-right: auto;
}
/* Easier reading for longer body copy */
.entry-content p,
.single-content p,
.service-content p,
.box-text p {
  line-height: 1.65;
}
/* Stronger, more deliberate calls to action */
.tf-btn,
.tf-btn-2 {
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ---- InVision Network: home hero photographic treatment ----
   The homepage hero is a THEME-SWITCHED photo (day = hero-day.jpg, night =
   hero-night.jpg) with exactly ONE scrim per mode. Those photo + scrim rules live
   in the theme-scoped hero blocks lower in this file (body:not(.iv-dark) /
   body.iv-dark). The old mode-agnostic light horizontal scrim that used to sit
   here was removed so a single scrim paints per mode (no stacked double-scrim).
   Only the mobile subject-shift stays here (mode-agnostic). */
@media (max-width: 767px) {
  /* Phone: push the subject right so the full-width copy lands over the calmer
     side; each theme block adds its own vertical scrim for legibility. */
  .section-hero:not(.v1):not(.v2) .hero-image { background-position: 70% center !important; }
}
.section-hero:not(.v1):not(.v2) .hero-image {
  overflow: hidden;
  background-attachment: scroll;
  isolation: isolate;
}
/* The hero is one static photograph now (it is the LCP element — no motion).
   The 5-slide crossfade, its @keyframes and its reduced-motion block are gone;
   only the slide's positioning/sizing remains. */
.section-hero:not(.v1):not(.v2) .hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.section-hero:not(.v1):not(.v2) .container {
  position: relative;
  z-index: 2;
}
.section-hero:not(.v1):not(.v2) .title span {
  -webkit-text-fill-color: #111111 !important;
  color: #111111 !important;
  background: none !important;
}
/* `.text` is deliberately NOT in this list any more: the hero subcopy is now
   coloured #3F3F46 by the hero-copy block in index.html, and an !important here
   would silently beat it (that rule is unlayered + higher specificity). Any
   non-.hero-copy hero text still gets the dark forcing colour below. */
.section-hero:not(.v1):not(.v2) .sub,
.section-hero:not(.v1):not(.v2) .content-wrap:not(.hero-copy) .text,
.section-hero:not(.v1):not(.v2) .tf-btn-2 {
  color: #18181B !important;
}


/* ---- InVision Network: footer reorganised ---- */
.footer-content .footer-bigtext {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto 18px;
}
.footer-content .title {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.footer-content .footer-meta {
  font-size: 13px;
  margin-bottom: 26px;
}

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

/* Keep footer links on one line each (prevent "AI Safety" wrapping) */
.footer-links a{white-space:nowrap;}

.footer-links{flex-wrap:wrap;row-gap:8px;}

/* ============================================================
   InVision consistency layer  (v5)
   One unified standard + readable contrast in dark feature bands
   ============================================================ */

/* Dark feature bands reuse the light .benefits-box card, so force a
   premium translucent-dark card with light text for strong contrast. */
.box-black .heading-title { color: #ffffff; }
.box-black .heading-sub { color: #F26B21; }
.box-black > .flat-spacing .text,
.box-black > .flat-spacing p,
.box-black > .flat-spacing li { color: rgba(255,255,255,0.80); }
.box-black .text-secondary,
.box-black .text-neutral-300,
.box-black .text-neutral-400 { color: rgba(255,255,255,0.72) !important; }

.box-black .benefits-box {
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  color: rgba(255,255,255,0.80);
}
.box-black .benefits-box .title,
.box-black .benefits-box h3,
.box-black .benefits-box h4 { color: #ffffff; }
.box-black .benefits-box .text,
.box-black .benefits-box p { color: rgba(255,255,255,0.72); }
.box-black .benefits-box .num { color: rgba(255,255,255,0.55); }
.box-black .benefits-box .heading-sub { color: #F26B21; }

/* Unified rhythm: equal-height cards keep their inner content full height
   so groups in a row line up cleanly. */
.benefits-box .content { height: 100%; }

/* Footer links: all on one line (own full-width row) on desktop; wrap on small screens */
footer .footer-bottom { flex-wrap: wrap; row-gap: 24px; }
footer .footer-bottom .footer-links { width: 100%; flex: 0 0 100%; justify-content: center; gap: 16px; }
footer .footer-bottom .coppy-rights { width: auto; }
footer .footer-bottom .action-go-top { width: auto; }
@media (min-width: 992px) { footer .footer-bottom .footer-links { flex-wrap: nowrap; } }
@media (max-width: 991px) { footer .footer-bottom .footer-links { flex-wrap: wrap; } }

/* Bigger footer wordmark with letters fading out at the bottom */
.footer-content .footer-bigtext {
  max-width: 1480px;
  margin-bottom: 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,0) 96%);
          mask-image: linear-gradient(to bottom, #000 42%, rgba(0,0,0,0) 96%);
}
@media (max-width: 991px) { .footer-content .footer-bigtext { max-width: 100%; } }

/* Copyright centered at the bottom; back-to-top floats right (desktop), centers on mobile */
footer .footer-bottom { justify-content: center; }
footer .footer-bottom .coppy-rights { width: 100%; flex: 0 0 100%; text-align: center; }
footer .footer-bottom .action-go-top { position: absolute; right: 0; bottom: 40px; width: auto; }
@media (max-width: 767px) {
  footer .footer-bottom .action-go-top { position: static; width: 100%; justify-content: center; margin-top: 4px; }
}

/* Stable two-column media: the right photo can transition but never expands the
   row, so the left caption stays put. Scoped to the testimonial split. */
.section-testimonials .sw-main-image .testimonial-image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 24px;
}
.section-testimonials .sw-main-image .testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-testimonials .row { align-items: flex-start; }

/* Services section: when the right accordion expands, the left caption must NOT
   stretch/spread. Top-align the columns and let the left keep its natural height.
   (The service image is already fixed-size + absolute, so photos transition without expanding.) */
.section-services .row { align-items: flex-start; }
.section-services .row .d-flex.flex-column { height: auto; justify-content: flex-start; }

/* Cards in the same row: equal size and height, with buttons aligned to the bottom
   so widgets line up in one clean row. Excludes the homepage's special widgets. */
.benefits-box:not(.benefits-progress):not(.benefits-step):not(.benefits-secure):not(.benefits-design) .content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.benefits-box:not(.benefits-progress):not(.benefits-step):not(.benefits-secure):not(.benefits-design) .content > .tf-btn {
  margin-top: auto;
  align-self: flex-start;
}
/* Keep equal-height behavior reliable: every card column stretches its card full height */
.row > [class*="col-"] > .benefits-box.h-100 { height: 100%; }

/* Home hero: the background photo is set per-mode in the theme-scoped hero blocks
   (body:not(.iv-dark) -> hero-day.jpg, body.iv-dark -> hero-night.jpg). The old
   single hero-bg.jpg was removed from here so the photo is theme-switched. */
.section-hero:not(.v1):not(.v2) .hero-image .hero-slide { display: none; }

/* Adjustable header logo (the tweak panel writes these variables) */
:root { --logo-h: 50px; --logo-scale: 1.3; }
.tf-header .logo-site img {
  height: var(--logo-h) !important;
  width: auto !important;
  transform: scale(var(--logo-scale));
  transform-origin: left center;
}

/* Trimmed logo: clean default size */
:root { --logo-h: 42px; --logo-scale: 1; }

/* ===== Announcement bar ===== */
.announce-bar{background:#09090B;color:#fff;font-size:13px;position:relative;z-index:1001;}
.announce-inner{max-width:1320px;margin:0 auto;padding:9px 44px 9px 20px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;}
.announce-bar a{color:var(--brand,#F26B21);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.announce-bar a:hover{color:#fff;}
.announce-close{position:absolute;top:50%;right:14px;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.65;padding:0 4px;}
.announce-close:hover{opacity:1;}
@media (max-width:575px){.announce-inner{font-size:12px;padding:8px 38px 8px 14px;}}

/* ===== Assistant demo ===== */
.section-assistant .ass-demo-tag{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--brand,#F26B21);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle;text-transform:uppercase;}
.assistant-box{background:#fff;border:1px solid #ECECEE;border-radius:24px;padding:28px;box-shadow:0 24px 60px rgba(9,9,11,.06);}
.assistant-box textarea{width:100%;border:1px solid #E4E4E7;border-radius:14px;padding:16px;font-family:inherit;font-size:15px;line-height:1.6;color:var(--neutral-950,#09090B);resize:vertical;min-height:96px;outline:none;transition:border-color .2s;}
.assistant-box textarea:focus{border-color:var(--brand,#F26B21);}
.assistant-box .tf-btn{margin-top:16px;cursor:pointer;}
.assistant-result{margin-top:22px;border-top:1px solid #EFEFF1;padding-top:20px;}
.assistant-result .ass-level{display:inline-block;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;margin-bottom:14px;}
.assistant-result .ass-low{background:#E7F6EC;color:#1B7A43;}
.assistant-result .ass-medium{background:#FDF1E3;color:#B5651D;}
.assistant-result .ass-high{background:#FBE6E6;color:#B42318;}
.assistant-result ul{margin:0 0 14px;padding-left:20px;}
.assistant-result li{margin-bottom:8px;color:var(--neutral-950,#09090B);line-height:1.55;}
.assistant-result .ass-step{margin:0;color:var(--secondary,#71717A);line-height:1.6;}
.assistant-note{margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--secondary,#71717A);}

/* ===== Footer disclaimer ===== */
footer .footer-disclaimer{max-width:940px;margin:0 auto;padding:0 16px 6px;text-align:center;}
footer .footer-disclaimer p{margin:0;font-size:12.5px;line-height:1.7;color:var(--secondary,#71717A);}
footer .footer-disclaimer a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
footer .footer-disclaimer a:hover{color:var(--brand,#F26B21);}

/* ===== Services accordion: fix dark-on-dark title + keep left image static ===== */
/* Title is a link; make it follow the card colour (gray when closed, white when open) */
.accordion-faq_item .accordion-title a{color:inherit;text-decoration:none;transition:color .3s ease;}
.accordion-faq_item .accordion-title a:hover{color:inherit;opacity:.82;}
/* Left image sits in normal flow under the caption, so opening an item never shifts it */
.section-services .services-image{position:static;bottom:auto;max-width:416px;height:240px;margin-top:16px;}
.section-services .services-image img{transition:opacity .25s ease;}
@media (max-width:991px){.section-services .services-image{margin-left:0;margin-right:auto;margin-top:30px;}}

/* ===== Dark band (box-black) edges: full-width top & bottom glow =====
   Replace the centered light-top/light-bot/light-box "tab" with a clean
   edge-to-edge glow so the top and bottom read as finished horizontally. */
.box-black .light-top,
.box-black .light-box { display: none !important; }
/* Keep the white bottom transition: re-show the bottom "tab" so the dark band
   finishes with a clean white design where it meets the next section. */
.box-black .light-bot {
  display: block !important;
  width: 100%;
  max-width: 1100px;
  height: auto;
  z-index: 2;
}
.box-black > * { position: relative; z-index: 1; }
.box-black::before,
.box-black::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}
.box-black::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 38%, rgba(255,255,255,0) 100%);
}
.box-black::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 42%, rgba(255,255,255,0) 100%);
}
@media (max-width: 767px){
  .box-black::before, .box-black::after { height: 120px; }
}

/* ===== Hero readability: soft light scrim behind hero text over photo bg =====
   The headline is a dark gradient; busy photo backgrounds reduce contrast.
   A top-weighted white fade calms the area behind the text and fades to clear
   so the photo still shows in the lower portion. */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.46) 38%, rgba(255,255,255,0.14) 66%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ===== Contact section readability =====
   The email/phone block fades in from opacity:0 via a scroll reveal. If that reveal
   does not fire, the text stays fully invisible. Force the whole contact text column
   visible, darken the photo background, and set the text white for strong contrast. */
html:not(.anim-ready) .section-contact .col-left .heading-section,
html:not(.anim-ready) .section-contact .col-left .heading-section *,
html:not(.anim-ready) .section-contact .col-left > div,
html:not(.anim-ready) .section-contact .contact-item,
html:not(.anim-ready) .section-contact .contact-item .content,
html:not(.anim-ready) .section-contact .contact-item .content * {
  opacity: 1 !important;
  transform: none !important;
}
/* darken the photo so the white text reads clearly */
.section-contact .contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(9, 9, 11, 0.88) 0%, rgba(9, 9, 11, 0.68) 44%, rgba(9, 9, 11, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
/* keep all text and the white form card above the overlay (photo version only) */
.section-contact:has(.contact-image) .container { position: relative; z-index: 2; }
/* white text ONLY where the contact section has the dark photo background */
.section-contact:has(.contact-image) .col-left .heading-title,
.section-contact:has(.contact-image) .col-left .heading-title.text-gradient-3 {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
.section-contact:has(.contact-image) .col-left p,
.section-contact:has(.contact-image) .col-left .text,
.section-contact:has(.contact-image) .col-left .text-secondary,
.section-contact:has(.contact-image) .col-left .contact-item .title,
.section-contact:has(.contact-image) .col-left .contact-item .text,
.section-contact:has(.contact-image) .col-left .contact-item .text a,
.section-contact:has(.contact-image) .col-left .contact-item .text a.link1 { color: #ffffff !important; }

/* contact sections WITHOUT a photo (e.g. contact.html) sit on the light page
   background, so their heading + text stay dark/black to remain readable */
.section-contact:not(:has(.contact-image)) .col-left .heading-title,
.section-contact:not(:has(.contact-image)) .col-left .heading-title.text-gradient-3 {
  background: none !important;
  -webkit-text-fill-color: #18181b !important;
  color: #18181b !important;
}
.section-contact:not(:has(.contact-image)) .col-left p,
.section-contact:not(:has(.contact-image)) .col-left .text { color: #18181b !important; }

/* ===== Tools: 6 tool icons orbiting the centered heading / text ===== */
.section-tools .tools-orbit-wrap {
  position: relative;
  max-width: 1180px;
  margin: 24px auto 0;
  padding: 40px 0 8px;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-tools .tools-center-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.section-tools .tools-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.section-tools .tool-node {
  position: absolute;
  width: 118px;
  height: 118px;
  object-fit: contain;
  background: #fff;
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 26px 55px rgba(9, 9, 11, 0.13);
}
/* arc: middle icons push out to the edges, top/bottom tuck in -> circular orbit */
.section-tools .tool-node--1 { top: 2%;  left: 9%;  transform: rotate(-15deg); }
.section-tools .tool-node--2 { top: 36%; left: 1%;  transform: rotate(-6deg); }
.section-tools .tool-node--3 { top: 70%; left: 10%; transform: rotate(-11deg); }
.section-tools .tool-node--4 { top: 6%;  right: 9%; transform: rotate(13deg); }
.section-tools .tool-node--5 { top: 38%; right: 1%; transform: rotate(7deg); }
.section-tools .tool-node--6 { top: 68%; right: 9%; transform: rotate(11deg); }

@media (max-width: 1199px) {
  .section-tools .tools-orbit-wrap { max-width: 980px; min-height: 540px; }
  .section-tools .tool-node { width: 100px; height: 100px; padding: 18px; border-radius: 24px; }
  .section-tools .tool-node--1 { left: 2%; }
  .section-tools .tool-node--3 { left: 3%; }
  .section-tools .tool-node--4 { right: 2%; }
  .section-tools .tool-node--6 { right: 3%; }
}
@media (max-width: 991px) {
  /* drop the orbit; lay the icons out in a tidy row under the text */
  .section-tools .tools-orbit-wrap { min-height: 0; flex-direction: column; padding: 8px 0 0; }
  .section-tools .tools-ring { position: static; display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 18px; margin-top: 40px; }
  .section-tools .tool-node { position: static !important; transform: none !important; width: 84px; height: 84px; padding: 16px; }
}
@media (max-width: 575px) {
  .section-tools .tool-node { width: 68px; height: 68px; padding: 12px; border-radius: 18px; }
}

/* ===== Clear-communication check tiles: success colors (blue, green, brand) ===== */
.benefits-step-inner .step-item:nth-child(2){ background:#2563EB; }
.benefits-step-inner .step-item:nth-child(3){ background:#16A34A; }
.benefits-step-inner .step-item:nth-child(4){ background:#F26B21; }
.benefits-step-inner .step-item:nth-child(2) .icon,
.benefits-step-inner .step-item:nth-child(3) .icon,
.benefits-step-inner .step-item:nth-child(4) .icon{ color:#ffffff; }

/* ===== Floating contact: quieter, smaller, less shouty ===== */
.floating-contact{
  padding:9px 15px !important;
  font-size:13px !important;
  gap:8px !important;
  background:rgba(24,24,27,0.86) !important;
  box-shadow:0 6px 16px rgba(0,0,0,0.12) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.floating-contact i{ font-size:15px !important; }
.floating-contact:hover,.floating-contact:focus-visible{ box-shadow:0 8px 20px rgba(242,107,33,0.30) !important; }

/* ============================================================
   Reliability failsafe: if JS/GSAP never runs (script blocked, failed to
   load, or errored), the reveal elements would be stuck hidden. In that case
   <html> has NO `anim-ready` class, so we force them to their final visible
   state. When GSAP IS active it adds `anim-ready`, these rules stop applying,
   and the scroll-reveal animations play normally on every device.
   ============================================================ */
html:not(.anim-ready) .effectFade,
html:not(.anim-ready) .fadeUp,
html:not(.anim-ready) .fadeRotateX,
html:not(.anim-ready) .fadeZoom,
html:not(.anim-ready) .textFadeUp,
html:not(.anim-ready) .textFadeUp2,
html:not(.anim-ready) .textFadeUp3,
html:not(.anim-ready) .scroll-fadeZoom,
html:not(.anim-ready) .animate-box,
html:not(.anim-ready) .image-2 {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ============================================================================
   A11Y FIX — homepage services accordion legibility.
   The 7 service descriptions apply the dark-theme utility `.text-neutral-300`
   (#D4D4D8) on a LIGHT #F4F4F5 panel = 1.34:1, effectively invisible, and the
   first item is expanded by default so it ships visible. Restore a legible dark
   neutral (#52525B = 7.03:1). Scoped to this section so genuine dark-background
   uses of the utility elsewhere are untouched.
   ============================================================================ */
.section-services .accordion-content .text-neutral-300 {
  color: var(--neutral-600) !important;
}

/* ============================================================================
   MOBILE RESPONSIVE SYSTEM — phones & small tablets (<= 991px).
   Layered on top of the desktop styles; desktop (>= 992px) is UNCHANGED.
   Goals: no horizontal scroll, fluid type via clamp(), >=44px tap targets,
   stacked full-width cards/forms, readable text (>=15px, 16px inputs),
   compressed section rhythm, reduced-motion support.
   Verified at 320 / 360 / 375 / 390 / 414 / 430 / 768 px.
   ============================================================================ */

/* 1) Safety nets: never scroll sideways; let flex/grid children shrink so a
   single wide child can't blow out the row. (overflow-x: clip doesn't break
   the fixed header or create a scroll container the way `hidden` can.) */
@media (max-width: 991px) {
  html, body { overflow-x: clip; }
  .container, .row, [class*="col-"] { min-width: 0; }
  img, svg, video, iframe, table, figure,
  .benefits-box, .review-box, .box-black, form, .tf-field, .tf-input,
  .wg-map, .map-wrap {
    max-width: 100%;
  }
  /* the partner logo marquee must keep fixed-width slides and scroll inside its
     own clipped track — do NOT shrink those images */
  .section-partner, .infiniteSlide { overflow: hidden; max-width: 100%; }
  .section-partner img, .infiniteSlide img { max-width: none; }
}
/* Narrow-desktop range (iPad Pro portrait 1024 + iPad landscape) hits the
   DESKTOP layout, which is tuned for >=1200 — the horizontal process/card rails
   peek past the edge and cause a sideways scroll. Same safe clip as above
   (clip never breaks the sticky header). Full-width coverage now. */
@media (min-width: 992px) {
  html, body { overflow-x: clip; }
}
/* Footer: the 13-link row is a single nowrap flex line that fit only on wide
   desktop — on tablet + iPad (768-1199) the last links (Terms/Security/Data
   Protection...) overflowed the edge and were CLIPPED OUT. Let them wrap so
   every link stays visible; on wide desktop they still sit on one line.
   (!important: something in the template pins the row to nowrap.) */
.footer-bottom .footer-links { flex-wrap: wrap !important; justify-content: center; row-gap: 10px; }

/* 2) Fluid typography (clamp) + comfortable reading rhythm. */
@media (max-width: 991px) {
  /* :not(.hero-headline) — the home hero headline carries its own fluid clamp
     (index.html hero-copy block). Without this exclusion the two rules tie on
     specificity and the winner depends on source order. Inner heroes keep this. */
  .section-hero .title:not(.hero-headline) { font-size: clamp(26px, 8.2vw, 44px); line-height: 1.12; }
  .heading-section .heading-title,
  .heading-section .heading-title.text-gradient-2,
  .heading-section .heading-title.text-gradient-3 {
    font-size: clamp(24px, 6.8vw, 40px); line-height: 1.18;
  }
  .text-display-1 { font-size: clamp(26px, 8vw, 44px); line-height: 1.15; }
  .text-display-2 { font-size: clamp(23px, 7vw, 40px); line-height: 1.18; }
  p, li, .text, .desc, blockquote, .text-body-1 {
    font-size: clamp(15px, 4.2vw, 16.5px); line-height: 1.6;
  }
  /* raise the 14px utility + form/consent text to the 15px floor */
  .text-body-3, .form-content span, form label span, .tf-field span {
    font-size: 15px; line-height: 1.55;
  }
  .assistant-note { font-size: 15px; line-height: 1.55; }
  /* legal/caption stays compact but not microscopic */
  .text-caption, .coppy-rights { font-size: 13px; line-height: 1.5; }
}

/* 3) Tap targets: >=44px for primary actions, comfortable inline links. */
@media (max-width: 991px) {
  .tf-btn, .tf-btn-2, .view-project, .action-go-top {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-ul-mb a, .mb-menu-link { min-height: 48px; display: flex; align-items: center; }
  footer .footer-links a, .footer-bottom a, .footer-meta a,
  .footer-content a, .tf-social-1 a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* 4) Forms: full-width, 16px inputs (prevents iOS zoom-on-focus), readable. */
@media (max-width: 991px) {
  .tf-field { width: 100%; }
  .tf-input, .tf-field input, .tf-field textarea, .tf-field select,
  select, .nice-select {
    width: 100%; font-size: 16px; min-height: 50px;
  }
  textarea.tf-input, .tf-field textarea { min-height: 130px; }
  .tf-lable, .tf-field label, form label { font-size: 15px; }
  .form-content [type="submit"], form .tf-btn { width: 100%; }
}

/* 5) Cards stack one per row, full width, consistent. (Grid already drops to
   col-12 on phones; this is the belt-and-suspenders.) */
@media (max-width: 767px) {
  .row { row-gap: 16px; }
  .benefits-box, .review-box, .service-item, .process-card, .feature-item,
  .team-item, .blog-item, .award-item, .pricing-item, .box-icon { width: 100%; }
}

/* 6) Targeted overflow fixes found in the 320px audit. */
@media (max-width: 767px) {
  /* about-us "globe" card: keep the overlaid text inside the column */
  .section-about-us .col-left { max-width: 100%; overflow: hidden; }
  .section-about-us .col-left .position-relative { max-width: 100%; }
  /* pills / sub-labels wrap instead of forcing a wide single line */
  .sub, .heading-sub { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  /* carousels never push the page sideways */
  .swiper, .swiper-wrapper { max-width: 100%; }
}

/* 7) Section rhythm — tighter on phones (compress without cramping). */
@media (max-width: 767px) {
  .flat-spacing { padding-top: 44px; padding-bottom: 44px; }
  /* Hero copy stays LEFT-aligned on phones; it just spans the full column.
     Specificity note: this must out-rank the old `:not(.v1):not(.v2)
     .content-wrap` (0,4,0) selector, which beat the hero-copy block in
     index.html (0,3,0) regardless of source order — hence .hero-copy here. */
  .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy {
    max-width: 100%;
    padding: 88px 0 64px;
  }
}
@media (max-width: 479px) {
  .flat-spacing { padding-top: 36px; padding-bottom: 36px; }
}

/* 8) Respect prefers-reduced-motion: stop decorative loops & transitions.
   (GSAP scroll-reveals are JS-driven, so content still appears — never stuck.) */
@media (prefers-reduced-motion: reduce) {
  .infiniteSlide { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Removed: site-wide `zoom: 0.8` on every `[class*="section-"]`. Zoom scales
   content AND layout, so every non-hero section rendered at 80% of native size
   — blurring raster imagery on retina, breaking type kerning, and compounding
   with user zoom. Content now renders at native scale. If future spacing needs
   tightening, tune padding/margin tokens instead of shrinking the whole layer.
   ============================================================================ */

/* ============================================================================
   PHONE + TABLET VIEW (<= 991px). App-like treatment for phones AND iPads:
   a floating bottom nav bar, a compact right-side menu drawer, and a cleaner
   hero. The bottom bar is width-capped + centered so it doesn't stretch across
   a tablet. Content card-stacking stays phone-only (≤767, separate block), so
   tablets keep their natural 2-column layout. Desktop (>= 992px) is unchanged.
   ============================================================================ */
.mobile-action-bar { display: none; }

@media (max-width: 991px) {
  /* zoom: 0.8 rule removed (see desktop block above — same reason applies at
     this breakpoint). Content renders at native scale. */

  /* ---- Floating bottom navigation — dark frosted glass with an animated
         raised brand-orange active circle. Home (house) sits in the center.
         Glass is used here deliberately: a bar floating over scrolling content
         is the one place it reads as material, not decoration. ---- */
  .mobile-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 14px; right: 14px; max-width: 460px; margin-inline: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    height: 66px;
    padding: 0 10px 8px;              /* bottom pad reserves room for the grabber */
    background: transparent; border: 0; box-shadow: none;
    overflow: visible;
    /* Auto-hide on scroll: fade + slide down, GPU-friendly. The .mab-hidden
       class is toggled by iv-mobile-nav.js (passive, rAF-throttled) so the bar
       gets out of the way while reading and never janks the scroll. */
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .mobile-action-bar.mab-hidden {
    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;   /* taps pass straight through to content beneath */
  }
  /* The visible pill surface. It is a ::before so the notch mask that scoops a
     semicircle out of the top-center never clips the raised center button. */
  .mobile-action-bar::before {
    content: ""; position: absolute; inset: 0;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 14px 40px rgba(15, 15, 18, 0.16), 0 2px 6px rgba(15, 15, 18, 0.08);
    -webkit-mask: radial-gradient(circle 37px at 50% 0, transparent 0 36px, #000 37px);
    mask: radial-gradient(circle 37px at 50% 0, transparent 0 36px, #000 37px);
  }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .mobile-action-bar::before { background: #ffffff; }
  }
  /* grabber / home-indicator line at the bottom-center */
  .mobile-action-bar::after {
    content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
    width: 118px; height: 4px; border-radius: 99px; background: rgba(24, 24, 27, 0.14);
  }
  .mobile-action-bar .mab-item {
    position: relative; z-index: 1;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; height: 100%;
    color: #9ca3af; text-decoration: none;
    font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-action-bar .mab-label {
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  /* visible keyboard focus on the white bar */
  .mobile-action-bar .mab-item:focus-visible {
    outline: 2px solid var(--brand, #F26B21); outline-offset: -5px; border-radius: 18px;
  }
  .mobile-action-bar .mab-ico {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: inherit;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
  }
  .mobile-action-bar .mab-ico svg { width: 22px; height: 22px; display: block; }
  .mobile-action-bar .mab-label { transition: color 0.25s ease; }
  /* Active tab: brand orange icon + bold dark label. No raise — the raise
     belongs to the fixed center button. */
  .mobile-action-bar .mab-item.active { color: #18181b; }
  .mobile-action-bar .mab-item.active .mab-ico { color: var(--brand, #F26B21); }
  .mobile-action-bar .mab-item.active .mab-label { color: #18181b; }
  .mobile-action-bar .mab-item:active .mab-ico { transform: scale(0.9); }

  /* CENTER (Home): always a raised dark circle nested in the top-center notch.
     The .mab-item.mab-home compound out-specifies .mab-item.active so the icon
     stays white even on the Home page (no color flip between routes). */
  .mobile-action-bar .mab-home { flex: 0 0 auto; width: 64px; }
  .mobile-action-bar .mab-item.mab-home .mab-ico {
    width: 54px; height: 54px;
    transform: translateY(-22px);
    background: #18181b; color: #fff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  }
  .mobile-action-bar .mab-home .mab-ico svg { width: 24px; height: 24px; }
  .mobile-action-bar .mab-home .mab-label { display: none; }
  .mobile-action-bar .mab-home:active .mab-ico { transform: translateY(-22px) scale(0.94); }

  /* Book keeps a subtle brand tint as the key CTA (no raise, no pulse now). */
  .mobile-action-bar .mab-book:not(.active) .mab-ico { color: #f26b21; }
  body:has(.offcanvas-menu.show) .mobile-action-bar { display: none; }
  footer { padding-bottom: 104px; } /* clearance so the floating bar never hides content */

  /* ---- Hero: remove the "Ohio AI + web company" badge, smaller buttons, cleaner ---- */
  .section-hero .content-wrap .sub { display: none; }
  /* Stacked full-width CTAs — proper thumb targets, primary first (48px). */
  .section-hero .bot-btns { gap: 10px; width: 100%; max-width: 340px; margin-inline: auto; align-items: stretch; }
  .section-hero .bot-btns .tf-btn,
  .section-hero .bot-btns .tf-btn-2 {
    padding: 14px 22px; font-size: 15px; min-height: 48px; width: 100%; align-self: stretch; justify-content: center;
  }
  /* ...but the home hero is left-aligned now, so its 340px stack hugs the left
     edge instead of centring (margin-inline:auto above would fight the layout). */
  .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy .bot-btns { margin-inline: 0; }
  .section-hero .content-wrap .text br { display: none; }
  .section-hero .content-wrap .text { margin-bottom: 20px; }
  .section-hero.v1 .content-wrap,
  .section-hero.v2 .content-wrap { padding-top: 90px; padding-bottom: 30px; }

  /* Inner-page hero backgrounds: scroll, not fixed — kills iOS Safari jank
     (the homepage hero already scrolls; this normalizes the .v1/.v2 heroes). */
  .hero-image { background-attachment: scroll !important; }

  /* Footer: a tidy 2-column link grid instead of a 13-link centered wrap,
     plus a tighter disclaimer — less crowding on a phone. (!important beats
     the Bootstrap .d-flex / .gap-24 utilities on the same element.) */
  .footer-bottom .footer-links {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px 16px !important;
    justify-items: center; max-width: 330px; margin: 0 auto 14px;
  }
  .footer-bottom .footer-links li { text-align: center; }
  .footer-disclaimer p { font-size: 12px; line-height: 1.55; }

  /* ---- Team: tighter spacing ---- */
  .section-team .row { row-gap: 10px; }
  .section-team .team-item { margin-bottom: 10px; }

  /* ---- Trim filler so the focus is on what we sell ---- */
  .section-partner { display: none; }

  /* ...except the hero trust strip. The pills (Trusted since 2017 / Kettering /
     Secure & encrypted / ...) now live inside .section-partner--hero, and the rule
     above would silently delete all four on every phone and tablet - the exact
     audience that needs the proof most, and invisible to anyone reviewing on a
     desktop. Keep the block, drop only the logo slider that made it filler. */
  .section-partner--hero { display: block; }
  .section-partner--hero .partner-wrap,
  .section-partner--hero .infiniteSlide_partner { display: none; }

  /* ---- Mobile menu drawer: a compact frosted-glass panel anchored top-right,
         reduced in height (not a full-screen takeover). Slides in from the right;
         the logo is forced white for the dark glass. ---- */
  .offcanvas-menu {
    top: 0 !important;
    inset: 0;
    height: 100% !important;
    background-color: rgba(8, 9, 12, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .offcanvas-menu.show { opacity: 1; visibility: visible; pointer-events: auto; }
  .offcanvas-menu .container { max-width: 100%; padding: 0; height: auto; }
  .offcanvas-menu .offcanvas-content {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; left: auto; bottom: auto;
    width: min(86vw, 320px); height: auto;
    max-height: min(74vh, 560px);
    padding: 18px 18px 20px;
    border-radius: 22px;
    background: rgba(16, 17, 22, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    transform: translateX(115%);
    opacity: 0;
    transform-origin: top right;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .offcanvas-menu .offcanvas-content { background: #14161b; }
  }
  .offcanvas-menu.show .offcanvas-content { transform: translateX(0); opacity: 1; }
  .offcanvas-menu .offcanvas-content_wrapin { height: auto; gap: 14px; }
  .offcanvas-menu .canvas_center { flex: 0 1 auto; justify-content: flex-start; overflow: visible; padding-right: 0; }
  /* show inner content immediately — the panel slide is the animation */
  .offcanvas-menu .canvas_head,
  .offcanvas-menu .canvas_foot,
  .offcanvas-menu .nav-ul-mb .item {
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; transition: none !important;
  }
  /* dark glass drawer → use the dark logo variant (keeps the brand orange). */
  .offcanvas-menu .canvas_head .logo-site img,
  .offcanvas-menu .canvas_head img {
    content: url("/assets/images/logo/logo-trim-dark.svg?v=1");
    height: 26px !important; width: auto;
  }
  .offcanvas-menu .canvas_head .close-mb-menu,
  .offcanvas-menu .canvas_head .btn-mobile-menu { color: rgba(255, 255, 255, 0.85); }
  .offcanvas-menu .nav-ul-mb .mb-menu-link { font-size: 17px; color: #ffffff; }
  .offcanvas-menu .nav-ul-mb .mb-menu-link:focus-visible,
  .offcanvas-menu .canvas_head .close-mb-menu:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.78); outline-offset: 3px; border-radius: 6px;
  }
  .offcanvas-menu .nav-ul-mb li .item { padding: 3px 0; }
  .offcanvas-menu .canvas_foot { font-size: 13px; }
  .offcanvas-menu .canvas_foot a,
  .offcanvas-menu .canvas_foot p,
  .offcanvas-menu .canvas_foot .text-caption { color: rgba(255, 255, 255, 0.72) !important; }
}

/* ============================================================================
   Sharper rendering. The reveal-animated elements carry a PERMANENT
   will-change (and a leftover transform) which keeps them on a GPU layer that
   renders text with the softer grayscale antialiasing. Drop the permanent
   will-change (gsapAnimation.js now clears the transform on reveal complete) so
   they leave the layer and text falls back to crisp subpixel rendering.
   ============================================================================ */
html { text-rendering: optimizeLegibility; }
.slick-slide, .slick-track, .flip-image, .element,
.textFadeUp, .textFadeUp2, .textFadeUp3, .scroll-fadeZoom,
.effectFade, .animate-box, .image-2, .overflow-hidden > * {
  will-change: auto;
}

/* ============================================================================
   PREMIUM POLISH LAYER (site-wide, additive). Refines edges, focus, motion and
   selection WITHOUT fighting the existing systems:
   - no `transform` transitions (GSAP drives transform + the magnetic buttons),
   - card hover uses an INSET ring (the .overflow-hidden reveal wrappers would
     clip an outset-only glow),
   - no forced font-smoothing (the sharpening block above keeps subpixel text).
   ============================================================================ */

/* Even heading line breaks; fewer prose orphans. */
h1, h2, h3, .heading-title, .text-display-1, .text-display-2 { text-wrap: balance; }
p, .text, .desc, .text-body-1, blockquote { text-wrap: pretty; }

/* On-brand text selection — bold and unmistakable. */
::selection { background: #f26b21; color: #ffffff; }
::-moz-selection { background: #f26b21; color: #ffffff; }

/* Accessible, on-brand keyboard focus. Mouse/touch interaction is unaffected. */
a:focus-visible,
button:focus-visible,
.tf-btn:focus-visible,
.tf-btn-2:focus-visible,
.view-project:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand, #F26B21);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Bold primary CTA: on-brand orange, reusing the base button's gloss + shape. */
.tf-btn.tf-btn-brand {
  background:
    radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 100%),
    var(--brand-strong);
  color: #fff;
}
.tf-btn.tf-btn-brand:hover {
  background:
    radial-gradient(62.56% 62.56% at 50% -13%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 100%),
    var(--brand-strong); /* AA: white on --brand-strong = 4.65:1 (raw --brand was 3.04:1, failed) */
  box-shadow:
    0px -3px 0px 0px rgba(170, 66, 8, 0.55) inset,
    0px 1px 0px 0px rgba(255, 255, 255, 0.35) inset,
    0px 14px 34px rgba(242, 107, 33, 0.42),
    0px 6px 14px rgba(242, 107, 33, 0.26);
}

/* Cards: a crisp brand edge on hover. The inset ring can't be clipped by the
   reveal wrappers, so the edge always reads; the soft drop shadow adds depth
   where it isn't clipped. */
.benefits-box, .service-item, .pricing-item, .review-box, .blog-item,
.box-icon, .process-card, .feature-item, .award-item {
  transition: box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease;
}
.benefits-box:hover, .service-item:hover, .pricing-item:hover, .review-box:hover,
.blog-item:hover, .box-icon:hover, .process-card:hover, .feature-item:hover,
.award-item:hover {
  border-color: rgba(242, 107, 33, 0.55);
  box-shadow: inset 0 0 0 2px rgba(242, 107, 33, 0.8),
              0 18px 46px rgba(242, 107, 33, 0.24),
              0 8px 20px rgba(15, 15, 18, 0.12);
}

/* Links + inputs: smooth, considered states. */
a { transition: color 0.2s ease; }
.tf-input, .tf-field input, .tf-field textarea, .tf-field select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tf-input:focus, .tf-field input:focus, .tf-field textarea:focus, .tf-field select:focus {
  box-shadow: 0 0 0 3px rgba(242, 107, 33, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  a, .tf-input, .benefits-box, .service-item, .pricing-item, .review-box,
  .blog-item, .box-icon, .process-card, .feature-item, .award-item {
    transition: none !important;
  }
}

/* ============================================================================
   Polish: give cards / widgets a defined edge so they stand out from the
   background (subtle dark edge on light cards, light edge on dark sections).
   ============================================================================ */
.benefits-box,
.review-box,
.mission-box,
.assistant-box,
.swiper-box,
.light-box,
.features-item,
.process-card,
.works-item,
.awards-item,
.wg-map {
  border: 1px solid rgba(17, 17, 24, 0.10);
}
/* Cards on dark sections (team, and any card on a .box-black panel): light edge */
.team-item,
.box-black .benefits-box,
.box-black .review-box,
.box-black .light-box {
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ============================================================================
   Lenis smooth scroll (required runtime CSS). Lenis v1 modulates native scroll,
   so fixed header/bottom-nav and screenshots are unaffected.
   ============================================================================ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================================
   Press feedback (Emil Kowalski: pressable elements must feel responsive).
   Scoped to non-magnetic buttons — GSAP drives the magnetic button's transform,
   so we never fight it. Press (not hover) feedback is good on touch too.
   ============================================================================ */
.tf-btn:not([data-magnetic]),
.tf-btn-2:not([data-magnetic]) {
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.tf-btn:not([data-magnetic]):active,
.tf-btn-2:not([data-magnetic]):active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .tf-btn:not([data-magnetic]):active,
  .tf-btn-2:not([data-magnetic]):active { transform: none; }
}

/* ============================================================================
   DECORATION LAYER — restrained premium flourish for widgets, forms & buttons.
   No gradient text, no decorative glass, no side stripes (impeccable bans).
   Clip-safe (inset highlights) and conflict-free with GSAP/magnetic transforms.
   ============================================================================ */

/* Widgets / cards: a subtle "lit-from-top" highlight for depth. */
.benefits-box, .service-item, .pricing-item, .review-box, .blog-item,
.box-icon, .process-card, .feature-item, .award-item, .mission-box,
.assistant-box, .light-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.box-black .benefits-box, .box-black .review-box, .box-black .light-box,
.team-item {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Buttons: a restrained light sheen that sweeps across once on hover. */
.tf-btn:not(.animate-btn), .tf-btn-2 { overflow: hidden; }
.tf-btn:not(.animate-btn)::before, .tf-btn-2::before {
  content: "";
  position: absolute;
  top: 0; left: -65%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .tf-btn:not(.animate-btn):hover::before, .tf-btn-2:hover::before {
    opacity: 1;
    animation: ivSheen 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@keyframes ivSheen { from { left: -65%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .tf-btn::before, .tf-btn-2::before { display: none; }
}

/* Forms: on-brand focus accent on the floating-label fields. */
.tf-field .tf-input:focus ~ .tf-lable { color: var(--brand, #F26B21); }
.tf-field .tf-input:focus { border-color: var(--brand, #F26B21); }


/* Trusted-by logo strip attached under the hero — full-width, uniform, clean.
   Colour tone unchanged: same body background, same logo + text colours; the
   edge fade is an alpha mask (no colour introduced). */
.section-partner--hero { position: relative; z-index: 2; }
.section-partner--hero .container { max-width: 100%; padding-inline: clamp(24px, 5vw, 96px); }
.section-partner--hero .partner-wrap { justify-content: center; align-items: center; gap: 20px 80px; padding: 40px 0; }
.section-partner--hero .partner-wrap .text { font-size: 13px; letter-spacing: .04em; line-height: 1.5; opacity: .9; }
.section-partner--hero .infiniteSlide_tech_main {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  /* Clip the marquee track itself. Before the jQuery infiniteslide plugin runs
     on DOM-ready (a visible window on a hard reload), the raw logo strip sits in
     this container with no clip — it spills / mis-lays until the plugin wraps it
     in its own overflow:hidden `.infiniteslide_wrap`. Clipping here bounds the
     pre-init strip exactly like the running marquee, so reloads no longer flash
     a broken frame. min-height reserves the logo row so late-loading SVGs can't
     collapse-then-jump. Logos stay visible throughout (no JS-gated hiding). */
  overflow: hidden;
  min-height: 48px;
}
.section-partner--hero .infiniteSlide_partner { gap: 84px; align-items: center; }
.section-partner--hero .infiniteSlide_partner img { height: 48px; width: auto; object-fit: contain; display: block; }
/* Plain .section-partner variant (about.html) — same pre-init clip. It has no
   --hero class, so the hero rules above never reached it: its raw logo track sat
   unclipped and spilled/collapsed on reload before the jQuery plugin wrapped it.
   Mirror the hero clip (overflow + reserved row height + defined logo height).
   The strip is desktop-only (display:none <=991), so this only needs to hold at
   >=992, but an unscoped rule is safe since it's hidden on mobile anyway. */
.section-partner .infiniteSlide_tech_main { overflow: hidden; min-height: 48px; }
.section-partner .infiniteSlide_partner img { height: 48px; width: auto; object-fit: contain; display: block; }
@media (max-width: 991px) {
  .section-partner--hero .partner-wrap { gap: 16px; padding: 28px 0; }
  .section-partner--hero .infiniteSlide_tech_main { min-height: 36px; }
  .section-partner--hero .infiniteSlide_partner { gap: 52px; }
  .section-partner--hero .infiniteSlide_partner img { height: 36px; }
}


/* ============================================================================
   IMPECCABLE ENHANCEMENT LAYER — site-wide craft pass (append-only, v1)
   Refines heading setting, motion easing, interaction feedback, and focus a11y
   ON TOP of the existing design. No changes to type sizes, colors, or layout;
   no GSAP interference; full reduced-motion coverage. One layer lifts all pages.
   InVision orange = #F26B21 (var --brand).
   ============================================================================ */

:root {
  /* Exponential ease-out curves (no bounce, no elastic) — the interaction system. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --iv-t-fast: 140ms;
  --iv-t: 220ms;
}

/* --- Typography setting: even heading lines, no single-word orphans in prose.
   Only affects WHERE lines break, never the sizes/spacing already designed. --- */
h1, h2, h3, h4,
.hero-title, .section-title, .heading-title, .sec-title, .title-heading, .heading {
  text-wrap: balance;
}
p, li, blockquote, figcaption,
.text, .desc, .description, .sub-heading, .lead {
  text-wrap: pretty;
}

/* Jumped-to in-page anchors clear the sticky header instead of hiding under it. */
:target { scroll-margin-top: clamp(80px, 12vh, 120px); }

/* Brand-tinted text selection (the one accent, applied with restraint). */
::selection    { background: rgba(242, 107, 33, 0.22); }
::-moz-selection { background: rgba(242, 107, 33, 0.22); }

/* Accessible, consistent brand focus ring for keyboard users.
   :where() carries ZERO specificity, so any existing focus styling still wins —
   this only fills gaps where an element had no visible focus indicator. */
:where(a, button, .btn, .btn-2, .btn-brand, .btns,
       input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand, #F26B21);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Button feedback: a quick, confident lift on hover, an honest press on
   click, both on an exponential ease-out. Bootstrap .btn has no base transform,
   so this is purely additive and won't fight the template. --- */
.btn, .btn-2, .btn-brand {
  transition: transform var(--iv-t-fast) var(--ease-out-quart),
              box-shadow var(--iv-t) var(--ease-out-quart),
              background-color var(--iv-t) var(--ease-out-quart),
              border-color var(--iv-t) var(--ease-out-quart),
              color var(--iv-t) var(--ease-out-quart);
}
.btn:hover, .btn-2:hover, .btn-brand:hover { transform: translateY(-2px); }
.btn:active, .btn-2:active, .btn-brand:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 90ms;
}

/* Motion is never mandatory. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn-2:hover, .btn-brand:hover,
  .btn:active, .btn-2:active, .btn-brand:active { transform: none; }
}

/* ============================================================================
   BRAND COLOR SHARPENING (append-only, identity-preserving).
   Keeps the EXACT brand hue (--brand) but derives a small tonal scale so brand
   surfaces render with richer darks, clean soft tints, and CONTROLLED contrast
   — no washed-out fills, no muddy undertones. Derived with color-mix() so every
   per-service accent theme ([data-color-primary=*]) sharpens consistently.
   Nothing here changes --brand, the neutrals, the type, or any radius/layout.
   ============================================================================ */
:root {
  /* sRGB mixes toward black/white = exact-hue shades/tints (zero hue shift), so
     identity is preserved to the letter while contrast + depth improve. */
  --brand-strong: color-mix(in srgb, var(--brand) 79%, #000);        /* resolves to #BF551A; white text = 4.65:1 (WCAG AA pass, needs >=4.5) */
  --brand-soft:   color-mix(in srgb, var(--brand) 14%, #fff);        /* clean warm tint for quiet brand backgrounds */
  --brand-wash:   color-mix(in srgb, var(--brand) 14%, transparent); /* hover halos, keeps the hue    */
  --brand-ink:    color-mix(in srgb, var(--brand) 58%, #1c0d04);     /* readable brand-coloured TEXT on light */
}
/* Fallback for engines without color-mix (keeps the exact sharpened values). */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root { --brand-strong: #BF551A; --brand-soft: #fdece1; --brand-wash: rgba(242,107,33,.14); --brand-ink: #b8500f; } /* #BF551A: white = 4.64:1 (was #d15614 = 4.16:1, failed AA) */
}

/* Brand-filled CONTROLS deepen on hover/focus — a controlled state change, and
   white label text clears AA on the deeper tone. Purely additive; only elements
   that are genuinely brand-filled are targeted. */
.btn-brand:hover, .btn-brand:focus-visible,
.ivtp-copy:hover, .ivbw-send:hover {
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
}

/* Brand LINKS: crisper, deeper hue on hover (no muddy grey drift). */
a.link1:hover, .link1:hover, .link-brand:hover { color: var(--brand-strong); }

/* Brand-filled pills/tags that carry WHITE text: deepen so the label is crisp
   (base orange + white was ~3:1, now ~4.4:1). Selectors match/beat the existing
   rule's specificity so the deepen actually wins. Non-text accents (dots, bars,
   borders) keep the pure brand hue. */
.section-assistant .ass-demo-tag, button.ivtp-copy { background-color: var(--brand-strong); }
/* ============================ end enhancement layer ======================== */


/* ============================================================================
   REDUCED-MOTION COVERAGE for the GSAP scroll layer (emil audit fix) — CSS-only,
   so it reaches EVERY page (including index.html's app-bundle) by overriding
   GSAP's inline styles with !important. Content stays fully visible; only the
   movement is removed. Applies ONLY when the visitor requests reduced motion, so
   the normal experience is 100% untouched.
   The core GSAP JS (gsapAnimation.js / app-bundle.js) has no reduced-motion path;
   this layer supplies it site-wide without editing the risky concat bundle.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Scroll reveals: show in place, no slide / rotate / zoom entrance. */
  html.anim-ready .effectFade,
  .effectFade, .fadeUp, .fadeDown, .fadeLeft, .fadeRight,
  .fadeRotateX, .fadeZoom, .textFadeUp, .textFadeUp2, .textFadeUp3,
  .scroll-fadeZoom, .animate-box, .image-2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  /* Scroll-tied parallax (scale / rotate / drift on scroll): hold still. */
  .img-transform-3,
  .img-grow-1, .img-grow-2, .img-grow-3, .img-grow-4, .img-grow-5, .img-grow-6,
  .grow-1 {
    transform: none !important;
  }
  /* Native smooth-scroll off too (Lenis is JS; this covers CSS anchor jumps). */
  html { scroll-behavior: auto !important; }
}
/* ====================== end reduced-motion coverage ======================= */


/* ============================================================================
   TOUCH SCREEN LAYER (append-only) - phones, tablets, touch laptops.
   Targets input capability (hover:none / pointer:coarse), not just width, so
   iPads and touch laptops are covered too. Fixes the classic touch pains:
   iOS zoom-on-focus, sticky :hover states, small tap targets, GPU-heavy
   reflections, and missing tap feedback. Desktop mouse behavior unchanged.
   ============================================================================ */
@media (hover: none), (pointer: coarse) {
  /* 1. iOS Safari zooms the page when a focused field is under 16px. */
  input, select, textarea, .ivbw-in, .ivtp-link {
    font-size: 16px !important;
  }

  /* 2. Hover states stick after a tap on touch screens - a tapped card stays
        "lifted" and sheened. Neutralize hover-only motion; keep layout. */
  .ivg-card:hover, .samples-card:hover, .team-item:hover,
  .ivtp-clickable:hover .image img,
  .ivg-card:hover .ivg-shot, .samples-card:hover .samples-shot {
    transform: none !important;
  }
  .ivg-card:hover::after, .samples-card:hover::after { display: none !important; }
  .ivg-card:hover::before { border-color: transparent !important; }

  /* 3. Real tap feedback instead: a quick, honest press. */
  .ivg-card:active, .samples-card:active, .team-item:active {
    transform: scale(0.985) !important;
    transition: transform .12s ease !important;
  }
  .tf-btn:active, .btn:active, .ivbw-btn:active, .ivbw-chip:active {
    transform: scale(0.97) !important;
    transition: transform .1s ease !important;
  }
  a, button { -webkit-tap-highlight-color: rgba(242, 107, 33, .18); }

  /* 4. Comfortable tap targets (44px minimum) on the small controls. */
  .tf-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  button[type="submit"], input[type="submit"] { min-height: 46px; }
  .ivtp-close, .ivbw-x, .ivbw-hbtn, .ivbw-mic, .ivbw-send, .ivg-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .ivtp-copy { min-height: 48px; }
  .ivbw-chip { padding: 10px 14px !important; }
  .ivbw-nav-go, .ivbw-nav-stay { padding: 11px 16px !important; }

  /* 5. The mirror reflection under gallery cards is GPU-expensive on mobile
        chips (the width-based rule missed iPads). Scrolling stays 60fps. */
  .ivg-card { -webkit-box-reflect: none !important; }

  /* 6. Smooth momentum scrolling inside overlays. */
  .ivtp-card, .ivbw-msgs { -webkit-overflow-scrolling: touch; }
}
/* ========================== end touch screen layer ======================== */

/* h1 conversions for SEO keep their class styling exactly. */
h1.heading-title, h1.title { margin: 0; }


/* ============================================================================
   MOBILE VIEWPORT STABILITY (append-only) - kills the empty strip / jump at
   the bottom of phone screens caused by the browser's collapsing URL bar.
   svh = smallest viewport height (stable); dvh tracks the live bar. Overscroll
   rubber-banding no longer reveals a mismatched background.
   ============================================================================ */
@media (max-width: 991px) {
  html { background: #17181b; } /* overscroll glow matches the dark chrome */
  body { min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none; }
  .section-hero { min-height: 100vh; min-height: 100svh; }
  .section-hero .hero-image,
  .section-hero .hero-image .hero-slide { height: 100%; min-height: 100%; bottom: 0; background-size: cover; }
}
/* Tablet/iPad: the 100svh above is for phones (URL-bar stability). On a tall
   iPad it marooned the short hero content in the middle with ~40% empty space
   on top. Cap the hero so the content sits comfortably near the top third. */
@media (min-width: 768px) and (max-width: 991px) {
  .section-hero { min-height: 620px; }
  /* Tablet has room: let the hero CTAs be content-width side-by-side instead
     of the phone's capped 340px stack (which made the label wrap to 2 lines).
     nowrap + no-shrink so each button hugs its label on one line. */
  .section-hero .bot-btns { max-width: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .section-hero .bot-btns .tf-btn,
  .section-hero .bot-btns .tf-btn-2 { width: auto; flex: 0 0 auto; white-space: nowrap; }
  /* Home hero reads left-to-right from the copy column — keep its CTAs on the
     left rail rather than centred (inner .v1/.v2 heroes stay centred). */
  .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy .bot-btns { justify-content: flex-start; }
}
/* ===================== end mobile viewport stability ====================== */


/* ============================================================================
   HEADER CAPSULE EDGE LINES (append-only) - a crisp edge on the nav pill plus a
   soft ring floating around it (outline-offset leaves a gap so the background
   shows through, never touching the pill). Applies site-wide for consistency.
   ============================================================================ */
.tf-header .header-inner {
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  outline: 1px solid rgba(20, 22, 26, 0.12);
  outline-offset: 6px;
  box-shadow: 0 12px 34px rgba(20, 22, 26, 0.10);
}
/* ===================== end header capsule edge lines ====================== */


/* ============================================================================
   MOBILE TAP + READABILITY POLISH (append-only) - phone-width refinements:
   comfortable thumb targets on the clickable team profiles, and a small-text
   readability floor so no label dips into hard-to-read territory. Desktop
   untouched (scoped to <=767px).
   ============================================================================ */
@media (max-width: 767px) {
  /* Clickable team member names: give the tap area real height. */
  .team-item .name {
    display: inline-block;
    padding: 12px 2px;
  }
  /* Readability floor - nothing smaller than 11.5px on a phone.
     (.ivtp-cue is styled by team-profiles.js, which injects its CSS after
     this stylesheet, so its size is set there — not here.) */
  .text-caption, .text-body-3 { font-size: 12px; line-height: 1.5; }
  .mab-label { font-size: 11.5px; }
}
/* =================== end mobile tap + readability polish ================== */

/* ================= FAQ two-column layout (side-by-side, equal split) =========
   The accordion-asked list flows as a 2-col grid on desktop: items auto-place
   left/right alternately, so counts stay equal. Items keep their exact compact
   sizing; the accordion's one-open-at-a-time behavior is unchanged. Single
   column again under 768px. */
.section-faqs .accordion-asked {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  align-items: start;
}
.section-faqs .accordion-asked .accordion-asked-item { break-inside: avoid; min-width: 0; }
@media (max-width: 767px) {
  .section-faqs .accordion-asked { grid-template-columns: 1fr; gap: 20px; }
}
/* ====================== end FAQ two-column layout ========================= */


/* ============================================================================
   INVISION DARK HOMEPAGE — additive token layer, scoped to body.iv-dark.
   Applied ONLY to public/index.html (which carries class="iv-dark"). Every rule
   below is prefixed body.iv-dark so the light marketing site (28 other pages) is
   completely untouched. Rollback = remove the class from the <body>.
   Contrast honoured per the approved ledger (WCAG 2.1 AA): never uses
   --iv-text-mut (#87919E, 4.41:1) for normal text on #252C35 cards.
   ============================================================================ */
body.iv-dark {
  /* surfaces */
  --iv-bg: #171B21; --iv-bg-2: #1E242C; --iv-bg-deep: #12161B; --iv-bg-sunken: #10141A;
  --iv-surface: #252C35; --iv-surface-2: #2C333D;
  /* borders */
  --iv-line: rgba(255,255,255,.08); --iv-line-2: rgba(255,255,255,.14); --iv-line-ui: rgba(255,255,255,.22);
  /* text */
  --iv-text: #F7F8FA; --iv-text-2: #B7C0CC; --iv-text-mut: #87919E;
  /* accent */
  --iv-accent: var(--brand); --iv-accent-strong: var(--brand-strong); --iv-accent-ink: #1F2327;
  --iv-accent-wash: rgba(242,107,33,.10); --iv-accent-line: rgba(242,107,33,.30);
  /* status */
  --iv-green: #22C55E; --iv-info: #38BDF8; --iv-warn: #F5B942; --iv-crit: #F26D5B;
  /* fluid type + rhythm */
  --iv-h1: clamp(38px,1.2rem + 4.2vw,76px); --iv-h2: clamp(30px,1.25rem + 2.6vw,52px);
  --iv-lead: clamp(17px,1.0625rem + 0.4vw,21px);
  --iv-section-y: clamp(72px,3rem + 6.4vw,160px);
  /* radii */
  --iv-r-sm: 10px; --iv-r-input: 12px; --iv-r-tile: 14px; --iv-r-card: 18px; --iv-r-xl: 24px; --iv-r-pill: 999px;
  /* elevation */
  --iv-shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.70);
  --iv-shadow-raised: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 64px -30px rgba(0,0,0,.85);
  --iv-glow-brand: 0 0 0 1px rgba(242,107,33,.35), 0 22px 56px -14px rgba(242,107,33,.38);
  /* motion */
  --iv-dur-fast: 160ms; --iv-dur: 240ms; --iv-dur-slow: 420ms;
  --iv-ease: cubic-bezier(.22,1,.36,1); --iv-ease-out: cubic-bezier(.16,1,.30,1);
  /* Remap ONLY the two text-role tokens (NOT the neutrals — those are also used
     as fills, and blanket-inverting them would break backgrounds). Section
     surfaces + cards are set explicitly below. */
  --primary: var(--iv-text);
  --secondary: var(--iv-text-2);
  background: var(--iv-bg);
  color: var(--iv-text);
  /* Belt-and-braces horizontal-overflow guard (the hero preview chips overhang
     their stage on desktop). Matches the vetted html,body overflow-x:clip guard
     used elsewhere for <=991. */
  overflow-x: clip;
}

/* ---- Base text defaults on the now-dark page ------------------------------- */
body.iv-dark h1, body.iv-dark h2, body.iv-dark h3,
body.iv-dark h4, body.iv-dark h5, body.iv-dark h6,
body.iv-dark .title, body.iv-dark .heading { color: var(--iv-text); }
body.iv-dark .desc, body.iv-dark .text-body-1, body.iv-dark .text-body-2,
body.iv-dark .text-body-3 { color: var(--iv-text-2); }
/* Light-on-light gradient headings go light on dark (both pass; plain light also OK). */
body.iv-dark .text-gradient-1,
body.iv-dark .text-gradient-2,
body.iv-dark .text-gradient-3 {
  background: linear-gradient(180deg, #FFFFFF 0%, #B7C0CC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Surface map ----------------------------------------------------------- */
body.iv-dark .box-white { background: var(--iv-bg); }
body.iv-dark .box-black { background: var(--iv-bg-deep); }
body.iv-dark .section-about-us,
body.iv-dark .section-tools,
body.iv-dark .iv-cta { background: var(--iv-bg-2); }
body.iv-dark #contact.flat-spacing { background: var(--iv-bg-2); }

/* ---- Announcement bar ------------------------------------------------------ */
body.iv-dark .announce-bar { background: var(--iv-bg-deep); color: var(--iv-text-2); }
body.iv-dark .announce-close { color: var(--iv-text-mut); }

/* ---- Header (glass capsule goes dark) -------------------------------------- */
body.iv-dark .tf-header .header-inner {
  background: rgba(21,26,32,.72);
  border: 1px solid var(--iv-line);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.70);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  backdrop-filter: blur(40px) saturate(140%);
}
/* Night header: swap to the dark logo VARIANT (dark parts lightened, brand orange
   kept) instead of flattening the logo to a white silhouette — owner wants the
   same logo at night. content:url() replaces the image in place, preserving the
   element's box + alt text. */
body.iv-dark .tf-header .logo-site img { content: url("/assets/images/logo/logo-trim-dark.svg?v=1"); }
body.iv-dark .tf-header .nav-menu-main .item-link { color: var(--iv-text-2); }
body.iv-dark .tf-header .nav-menu-main .item-link:hover,
body.iv-dark .tf-header .nav-menu-main .item-link.active { color: var(--iv-text); }
/* Dropdown panels */
body.iv-dark .sub-menu {
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-r-card);
  box-shadow: var(--iv-shadow-raised);
}
body.iv-dark .sub-menu li > a { color: var(--iv-text-2); border-radius: 8px; }
body.iv-dark .sub-menu li > a:hover { color: var(--iv-text); background: rgba(255,255,255,.04); }
/* Header CTA "Get in touch" + hamburger stay quiet-elevated so hero orange is the
   only loud CTA above the fold. */
body.iv-dark .tf-header .tf-btn {
  background: rgba(255,255,255,.08);
  color: var(--iv-text); -webkit-text-fill-color: var(--iv-text);
  border: 1px solid var(--iv-line-2); box-shadow: none;
}
body.iv-dark .tf-header .tf-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--iv-accent-line);
  color: var(--iv-accent); -webkit-text-fill-color: var(--iv-accent);
}

/* ---- Quiet-elevated button system (all non-brand tf-btn / tf-btn-2) --------- */
body.iv-dark .tf-btn:not(.tf-btn-brand),
body.iv-dark .tf-btn-2 {
  background: rgba(255,255,255,.06);
  color: var(--iv-text); -webkit-text-fill-color: var(--iv-text);
  border: 1px solid var(--iv-line-2); box-shadow: none;
}
body.iv-dark .tf-btn:not(.tf-btn-brand):hover,
body.iv-dark .tf-btn-2:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--iv-accent-line);
  color: var(--iv-accent); -webkit-text-fill-color: var(--iv-accent);
}

/* ---- Cards (shared dark surface) ------------------------------------------- */
body.iv-dark .benefits-box,
body.iv-dark .features-item,
body.iv-dark .review-box,
body.iv-dark .box-quotes,
body.iv-dark .form-contact,
body.iv-dark .idea-trust-band .itb-card {
  background: var(--iv-surface);
  border: 1px solid var(--iv-line-2);
  border-radius: var(--iv-r-card);
  box-shadow: var(--iv-shadow-card);
  color: var(--iv-text-2);
}
body.iv-dark .benefits-box .title, body.iv-dark .benefits-box h4, body.iv-dark .benefits-box h6,
body.iv-dark .features-item .title, body.iv-dark .idea-trust-band .itb-card .t { color: var(--iv-text); }
body.iv-dark .benefits-box .text, body.iv-dark .benefits-box p,
body.iv-dark .features-item .text-secondary, body.iv-dark .features-item p,
body.iv-dark .idea-trust-band .itb-card .d { color: var(--iv-text-2); }
body.iv-dark .features-item i,
body.iv-dark .benefits-box .icon,
body.iv-dark .benefits-progress-item .progress-text i { color: var(--iv-accent); }
body.iv-dark .benefits-progress-item .progress-text { color: var(--iv-text-2); }
body.iv-dark .line-step { background: var(--iv-line-2); }
/* Radial "Everything in One Site" centre mark: dark SVG -> light. */
body.iv-dark .features-center img { filter: brightness(0) invert(1); }
body.iv-dark .side-line-main .link-break-center { border-color: var(--iv-line-2); }

/* ---- Eyebrow budget: keep ONLY Hero (.sub), Services, Team, Contact --------- */
body.iv-dark .heading-sub { display: none; }
body.iv-dark .section-services .heading-section .heading-sub,
body.iv-dark .section-team .heading-section .heading-sub,
body.iv-dark .section-contact .heading-section .heading-sub {
  display: inline-flex;
  background: var(--iv-accent-wash);
  border: 1px solid var(--iv-accent-line);
  box-shadow: none;
  color: var(--iv-accent);
  border-radius: var(--iv-r-pill);
  font-size: 13px;
  letter-spacing: .02em;
}

/* ============================================================================
   HERO — theme-switched full-bleed photo (homepage only), NIGHT skin.
   ============================================================================ */
/* Night: a dark charcoal photo whose left ~50% is deep-charcoal negative space,
   with a single horizontal charcoal scrim under the left copy column. The
   `body.iv-dark ... .hero-image` selector out-specifies the base + homepage photo
   rules earlier in this file, so no !important is needed on the photo. */
body.iv-dark .section-hero { background: var(--iv-bg); }
body.iv-dark .section-hero:has(.hero-single) .hero-image {
  background-image: url(../images/section/hero-night.jpg?v=3);
  background-size: cover;
  background-position: right center;
  background-attachment: scroll;
  overflow: hidden;
}
/* The ONE night scrim: opaque #12161B under the left copy, clearing to nothing by
   70% so the photo reads unveiled on the right. Headline #F7F8FA over the .94 edge
   composites to ~16.9:1; subcopy #B7C0CC ~9.8:1 — both clear AA. */
body.iv-dark .section-hero:has(.hero-single) .hero-image::after {
  content: ""; position: absolute; inset: 0; border-radius: 40px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    rgba(18,22,27,.94) 0%,
    rgba(18,22,27,.88) 30%,
    rgba(18,22,27,.55) 50%,
    rgba(18,22,27,0) 70%);
}
/* Phone: full-width copy sits over the photo, so switch to a top-weighted vertical
   scrim (paired with the mode-agnostic 70%-center subject shift). */
@media (max-width: 767px) {
  body.iv-dark .section-hero:has(.hero-single) .hero-image::after {
    border-radius: 24px;
    background: linear-gradient(180deg,
      rgba(18,22,27,.94) 0%,
      rgba(18,22,27,.88) 52%,
      rgba(18,22,27,.55) 100%);
  }
}
body.iv-dark .section-hero .hero-image .hero-slide { display: none; }

/* Single left-aligned copy column; the photo carries the right half. Top padding
   clears the fixed header (same rhythm the old 2-col grid used). */
body.iv-dark .section-hero .hero-single {
  padding: clamp(132px,12vh,168px) 0 clamp(72px,8vw,120px);
}
body.iv-dark .section-hero .content-wrap.hero-copy {
  max-width: 560px; margin: 0; padding: 0; text-align: left;
}
/* Eyebrow pill (hero .sub). !important beats the light hero-forcing rule
   `.section-hero:not(.v1):not(.v2) .sub{color:#18181B!important}`. */
body.iv-dark .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy .sub {
  margin: 0 0 20px; width: max-content;
  background: var(--iv-accent-wash);
  border: 1px solid var(--iv-accent-line);
  box-shadow: none;
  color: var(--iv-accent) !important;
  border-radius: var(--iv-r-pill);
  padding: 7px 14px; font-size: 13px; letter-spacing: .02em;
}
body.iv-dark .section-hero .content-wrap.hero-copy .sub svg { color: var(--iv-accent); }
/* Headline: promote the visible line to the single real h1; accent the last word. */
body.iv-dark .section-hero .content-wrap.hero-copy .hero-headline {
  font-size: var(--iv-h1); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600;
  color: var(--iv-text); -webkit-text-fill-color: var(--iv-text);
  max-width: 12ch; text-wrap: balance; margin: 0 0 20px;
}
body.iv-dark .section-hero .content-wrap.hero-copy .hero-headline .iv-accent-word {
  color: var(--iv-accent) !important; -webkit-text-fill-color: var(--iv-accent) !important;
  font-weight: inherit; letter-spacing: inherit;
}
body.iv-dark .section-hero .content-wrap.hero-copy .text {
  font-size: var(--iv-lead); line-height: 1.6; color: var(--iv-text-2);
  max-width: 46ch; margin: 0 0 32px;
}
body.iv-dark .section-hero .content-wrap.hero-copy .bot-btns {
  justify-content: flex-start; gap: 12px; margin: 0;
}
/* Trust line (one muted sentence). --iv-text-mut on --iv-bg-2 = 4.89:1 (AA). */
body.iv-dark .section-hero .hero-trust {
  display: flex; align-items: center; gap: 8px; margin: 20px 0 0;
  font-size: 14px; color: var(--iv-text-mut);
}
body.iv-dark .section-hero .hero-trust svg { color: var(--iv-text-mut); flex: 0 0 auto; }
/* Hero secondary button label must be light (beats the light hero-forcing rule). */
body.iv-dark .section-hero .bot-btns .tf-btn-2 {
  color: var(--iv-text) !important; -webkit-text-fill-color: var(--iv-text) !important;
}
body.iv-dark .section-hero .bot-btns .tf-btn-2:hover {
  color: var(--iv-accent) !important; -webkit-text-fill-color: var(--iv-accent) !important;
}
/* Hero PRIMARY: brand-filled orange (charcoal ink 5.19:1); hover inverts to
   charcoal + white (15.8:1) + brand glow + lift. */
body.iv-dark .section-hero .tf-btn.tf-btn-brand {
  background: var(--iv-accent);
  color: var(--iv-accent-ink); -webkit-text-fill-color: var(--iv-accent-ink);
  border: 1px solid transparent; box-shadow: none;
  transition: background-color var(--iv-dur-fast) var(--iv-ease),
              color var(--iv-dur-fast) var(--iv-ease),
              box-shadow var(--iv-dur) var(--iv-ease),
              transform var(--iv-dur-fast) var(--iv-ease);
}
body.iv-dark .section-hero .tf-btn.tf-btn-brand:hover,
body.iv-dark .section-hero .tf-btn.tf-btn-brand:focus-visible {
  background: var(--iv-accent-ink);
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: var(--iv-glow-brand); transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  body.iv-dark .section-hero .tf-btn.tf-btn-brand { transition: none; }
  body.iv-dark .section-hero .tf-btn.tf-btn-brand:hover,
  body.iv-dark .section-hero .tf-btn.tf-btn-brand:focus-visible { transform: none; }
}


/* ============================================================================
   DAY-MODE HERO SKIN (homepage) — mirrors the night hero with a LIGHT photo.
   Additive + scoped to body:not(.iv-dark); the night hero block above is
   untouched. Same structure in both modes: a single left-aligned copy column over
   a theme-switched full-bleed photo.
   ============================================================================ */
/* Day: a bright light photo whose left ~50% is warm light negative space, with a
   single horizontal light scrim under the left copy column. Specificity beats the
   base + homepage photo rules that target .section-hero:not(.v1):not(.v2). */
body:not(.iv-dark) .section-hero:has(.hero-single) .hero-image {
  background-image: url(../images/section/hero-day.jpg?v=4);
  background-size: cover;
  background-position: right center;
  background-attachment: scroll;
  overflow: hidden;
}
/* BIG PHOTO FULL: the photo fills the whole hero under a tone overlay (like the
   other-page heroes), with the copy overlaid in LIGHT text — no empty half-page.
   Left-weighted so the copy stays legible while the right of the photo reads open. */
body:not(.iv-dark) .section-hero:has(.hero-single) .hero-image::after {
  content: ""; position: absolute; inset: 0; border-radius: 40px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(9,9,11,.72) 0%,
    rgba(9,9,11,.54) 34%,
    rgba(9,9,11,.36) 64%,
    rgba(9,9,11,.30) 100%);
}
/* Phone: full-width copy over the photo -> top-weighted vertical dark overlay. */
@media (max-width: 767px) {
  body:not(.iv-dark) .section-hero:has(.hero-single) .hero-image::after {
    border-radius: 24px;
    background: linear-gradient(180deg,
      rgba(9,9,11,.58) 0%,
      rgba(9,9,11,.68) 58%,
      rgba(9,9,11,.78) 100%);
  }
}
body:not(.iv-dark) .section-hero:has(.hero-single) .hero-image .hero-slide { display: none; }

/* Single left-aligned copy column; the photo carries the right half. */
body:not(.iv-dark) .section-hero .hero-single {
  padding: clamp(132px,12vh,168px) 0 clamp(72px,8vw,120px);
}
body:not(.iv-dark) .section-hero .content-wrap.hero-copy {
  max-width: 560px; margin: 0; padding: 0; text-align: left;
  position: relative; z-index: 2;
}
/* Phones: restore the shared hero-copy padding (these day rules outrank the
   unscoped @767 rule, so mirror it here to match the night hero on mobile). */
@media (max-width: 767px) {
  body:not(.iv-dark) .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy {
    max-width: 100%; padding: 88px 0 64px;
  }
}
/* Eyebrow pill: left-aligned orange wash. !important beats the light hero-forcing
   rule `.section-hero:not(.v1):not(.v2) .sub{color:#18181B!important}`. */
body:not(.iv-dark) .section-hero:not(.v1):not(.v2) .content-wrap.hero-copy .sub {
  margin: 0 0 20px; width: max-content;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: none;
  color: #fff !important;
  border-radius: 999px;
  padding: 7px 14px; font-size: 13px; letter-spacing: .02em;
}
body:not(.iv-dark) .section-hero .content-wrap.hero-copy .sub svg { color: var(--brand); }
/* Headline: LIGHT over the full photo (big-photo-full look), with a soft shadow. */
body:not(.iv-dark) .section-hero .content-wrap.hero-copy .hero-headline {
  font-size: clamp(38px,1.2rem + 4.2vw,76px); line-height: 1.05;
  letter-spacing: -0.03em; font-weight: 600;
  color: #F7F8FA; -webkit-text-fill-color: #F7F8FA;
  text-shadow: 0 1px 20px rgba(0,0,0,.45);
  max-width: 12ch; text-wrap: balance; margin: 0 0 20px;
}
/* Accent word ("you.") orange in DAY too. Beats the light rule
   `.section-hero:not(.v1):not(.v2) .title span{color:#111!important}`. */
body:not(.iv-dark) .section-hero .content-wrap.hero-copy .hero-headline .iv-accent-word {
  color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important;
  font-weight: inherit; letter-spacing: inherit;
}
body:not(.iv-dark) .section-hero .content-wrap.hero-copy .text {
  font-size: clamp(17px,1.0625rem + 0.4vw,21px); line-height: 1.6;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(0,0,0,.4);
  max-width: 46ch; margin: 0 0 32px;
}
body:not(.iv-dark) .section-hero .content-wrap.hero-copy .bot-btns {
  justify-content: flex-start; gap: 12px; margin: 0;
}
/* Trust line: light over the full photo. */
body:not(.iv-dark) .section-hero .hero-trust {
  display: flex; align-items: center; gap: 8px; margin: 20px 0 0;
  font-size: 14px; color: rgba(255,255,255,.82); text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
body:not(.iv-dark) .section-hero .hero-trust svg { color: rgba(255,255,255,.82); flex: 0 0 auto; }

/* ============================================================================
   THEME TOGGLE (sun/moon) — header control, works in both modes. Quiet, not
   brand-filled (so the native-button brand-swallow quirk does not apply).
   ============================================================================ */
.iv-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  margin-left: 10px; padding: 0;
  border-radius: 12px;
  background: #F5F5F5;
  border: 1px solid #E4E4E7;
  color: #1F2327; -webkit-text-fill-color: #1F2327;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.iv-theme-toggle:hover { border-color: var(--brand); color: var(--brand); -webkit-text-fill-color: var(--brand); }
.iv-theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.iv-theme-toggle svg { width: 20px; height: 20px; display: block; }
/* Moon shows in DAY (click to go night), sun shows in NIGHT (click to go day). */
.iv-theme-toggle .iv-ico-sun { display: none; }
.iv-theme-toggle .iv-ico-moon { display: block; }
body.iv-dark .iv-theme-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--iv-line-2);
  color: var(--iv-text); -webkit-text-fill-color: var(--iv-text);
}
body.iv-dark .iv-theme-toggle:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--iv-accent-line);
  color: var(--iv-accent); -webkit-text-fill-color: var(--iv-accent);
}
body.iv-dark .iv-theme-toggle .iv-ico-sun { display: block; }
body.iv-dark .iv-theme-toggle .iv-ico-moon { display: none; }

/* ============================================================================
   SMOOTH THEME SWITCH — enable the cross-fade only AFTER first paint (the
   .theme-ready class is added by theme-toggle.js post-load) so the initial
   theme never animates in. Honoured only when motion is welcome.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.theme-ready { transition: background-color .3s ease, color .3s ease; }
}

/* ---- Partner / trust strip ------------------------------------------------- */
/* Trust pills carry inline light-theme colours; override with !important. */
body.iv-dark .hero-trust-pills span {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--iv-line) !important;
  color: var(--iv-text-2) !important;
}
/* Partner logos are dark SVGs -> render light, dim until hover. */
/* Partner logos ship as a muted grey (#7C7C85) SVG fill that reads washed-out on
   the light page. Darken them into a legible "trusted by" wall. Dark mode keeps
   the invert-to-white treatment but at higher opacity for the same clarity. */
.infiniteSlide_partner img {
  filter: brightness(0.45);
  /* Own GPU layer so the filter rasterizes once and stays stable while the strip
     translates — stops the re-filter-each-frame flicker/stutter in the loop. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body.iv-dark .infiniteSlide_partner img { filter: brightness(0) invert(1); opacity: .85; }
body.iv-dark .infiniteSlide_partner img:hover { opacity: 1; }
/* Force the logo strip to a horizontal row in CSS. The jQuery marquee plugin sets
   `display:flex` inline only AFTER it runs on DOM-ready; before that the imgs are
   display:block and STACK VERTICALLY, so every reload flashed a vertical column
   before snapping to a row — that flash is the "blinking". Declaring flex here
   keeps it a horizontal row from first paint (clipped by the track's overflow),
   so the plugin only adds the scroll. will-change + backface keep the animated
   loop on a stable GPU layer so the translate + logo filter don't stutter. */
.infiniteSlide_partner {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ---- Services accordion (the prior critical contrast area) ------------------ */
body.iv-dark .section-services .accordion-faq_item { border-bottom: 1px solid var(--iv-line); }
body.iv-dark .section-services .accordion-title a { color: var(--iv-text); }
body.iv-dark .section-services .accordion-action.active-img .accordion-title a,
body.iv-dark .section-services .accordion-action:hover .accordion-title a { color: var(--iv-accent); }
body.iv-dark .section-services .num { color: var(--iv-text-mut); }
body.iv-dark .section-services .accordion-content .text,
body.iv-dark .section-services .accordion-content .text-neutral-300 { color: var(--iv-text-2) !important; }
body.iv-dark .section-services .tags-item {
  background: rgba(255,255,255,.05); border: 1px solid var(--iv-line); color: var(--iv-text-2);
}
body.iv-dark .section-services .tags-item:hover { color: var(--iv-accent); border-color: var(--iv-accent-line); }

/* ---- Featured works -------------------------------------------------------- */
body.iv-dark .section-featured-works .grid-text .title { color: var(--iv-text-2); }
body.iv-dark .section-featured-works .featured-works-item .heading { color: var(--iv-text); }
body.iv-dark .view-project {
  background: rgba(255,255,255,.08); border: 1px solid var(--iv-line-2); color: var(--iv-text);
}
body.iv-dark .view-project:hover { border-color: var(--iv-accent-line); color: var(--iv-accent); }
body.iv-dark .featured-works-item .pagi-dot span { background: var(--iv-line-2); }
body.iv-dark .featured-works-item .pagi-dot span.active { background: var(--iv-accent); }

/* ---- Tools ----------------------------------------------------------------- */
body.iv-dark .section-tools .tool-node {
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.04);
}

/* ---- Team / statistic / awards (deep night band) --------------------------- */
body.iv-dark .box-black .team-item { background: var(--iv-surface); border: 1px solid var(--iv-line-2); }
body.iv-dark .team-item .name { color: var(--iv-text); }
body.iv-dark .team-item .sub { color: var(--iv-text-2); }
body.iv-dark .section-statistic .progress-bar { background: var(--iv-line); }
body.iv-dark .section-statistic .progress-fill { background: var(--iv-accent); }
body.iv-dark .section-statistic .btn-slider {
  background: rgba(255,255,255,.06); border: 1px solid var(--iv-line-2); color: var(--iv-text);
}
body.iv-dark .box-black .awards-item { background: var(--iv-surface); border: 1px solid var(--iv-line-2); }
body.iv-dark .awards-item .image img { filter: brightness(0) invert(1); opacity: .72; }

/* ---- Testimonials: HIDDEN until real, permissioned quotes exist ------------- */
body.iv-dark .section-testimonials { display: none !important; }

/* ---- Closing CTA band + contact submit: the two legitimate loud CTAs -------- */
body.iv-dark .iv-cta { border-radius: var(--iv-r-xl); }
body.iv-dark .iv-cta .heading-title { color: var(--iv-text); }
body.iv-dark .iv-cta p { color: var(--iv-text-2); }
body.iv-dark .iv-cta .tf-btn,
body.iv-dark .section-contact .form-contact button[type="submit"] {
  -webkit-appearance: none; appearance: none;
  background: var(--iv-accent); border: 1px solid transparent;
  color: var(--iv-accent-ink); -webkit-text-fill-color: var(--iv-accent-ink);
  box-shadow: none;
}
body.iv-dark .iv-cta .tf-btn:hover,
body.iv-dark .section-contact .form-contact button[type="submit"]:hover {
  background: var(--iv-accent-ink); border-color: var(--iv-accent-ink);
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: var(--iv-glow-brand);
}

/* ---- FAQs ------------------------------------------------------------------ */
body.iv-dark .section-faqs .accordion-asked-item {
  background: var(--iv-surface); border: 1px solid var(--iv-line-2);
  border-radius: var(--iv-r-card); box-shadow: var(--iv-shadow-card);
}
body.iv-dark .section-faqs .asked-q { color: var(--iv-text); }
body.iv-dark .section-faqs .accordion-body { color: var(--iv-text-2); }
body.iv-dark .section-faqs .right-icon { color: var(--iv-text-mut); }
body.iv-dark .section-faqs .accordion-button:not(.collapsed) .right-icon { color: var(--iv-accent); }

/* ---- Contact (form on dark) ------------------------------------------------ */
body.iv-dark .section-contact .contact-image {
  background: radial-gradient(120% 100% at 15% 0%, rgba(242,107,33,.10), transparent 46%), var(--iv-bg-deep);
}
body.iv-dark .section-contact .contact-image img { display: none; }
body.iv-dark .section-contact .contact-image::after { display: none; }
body.iv-dark .section-contact .contact-item .icon {
  background: var(--iv-surface); border: 1px solid var(--iv-line-2); box-shadow: none; color: var(--iv-accent);
}
body.iv-dark .section-contact .form-contact .heading { color: var(--iv-text); }
body.iv-dark .section-contact .form-contact label { color: var(--iv-text-2); }
body.iv-dark .section-contact form input[type="text"],
body.iv-dark .section-contact form input[type="email"],
body.iv-dark .section-contact form input[type="tel"],
body.iv-dark .section-contact form select,
body.iv-dark .section-contact form textarea {
  background: var(--iv-bg-sunken);
  border: 1px solid var(--iv-line-ui);
  border-radius: var(--iv-r-input);
  color: var(--iv-text);
  padding: 12px 14px;
  font-size: 16px;
}
body.iv-dark .section-contact form textarea { height: 114px; }
body.iv-dark .section-contact form ::placeholder { color: var(--iv-text-mut); }
body.iv-dark .section-contact form :is(input,select,textarea):focus {
  border-color: var(--iv-accent);
  box-shadow: 0 0 0 3px rgba(242,107,33,.18);
}
body.iv-dark .form-contact .form-consent { color: var(--iv-text-2); }
body.iv-dark .section-contact form input[type="checkbox"] { accent-color: var(--iv-accent); }
body.iv-dark .form-contact .form-status.is-error { color: var(--iv-crit); }
body.iv-dark .form-contact .form-status.is-success { color: var(--iv-green); }

/* ---- Footer (night band) --------------------------------------------------- */
body.iv-dark footer { background: var(--iv-bg-sunken); border-top: 1px solid var(--iv-line); }
body.iv-dark .footer-content .footer-bigtext { opacity: .08; }
body.iv-dark .footer-content .title { color: var(--iv-text); }
body.iv-dark .footer-content .footer-meta,
body.iv-dark footer .footer-disclaimer p { color: var(--iv-text-mut); }
body.iv-dark .footer-links a,
body.iv-dark footer .action-go-top { color: var(--iv-text-2); }
body.iv-dark .footer-links a:hover,
body.iv-dark footer .action-go-top:hover { color: var(--iv-text); }
body.iv-dark .footer-content .footer-meta a,
body.iv-dark footer .link1 { color: var(--iv-accent); }
body.iv-dark footer .tf-social-1 a { color: var(--iv-text-2); }
body.iv-dark footer .tf-social-1 a:hover { color: var(--iv-accent); }
body.iv-dark footer .tf-social-1 .social-item {
  background: rgba(255,255,255,.06); border: 1px solid var(--iv-line);
}
/* ===================== end InVision dark homepage layer ==================== */

/* ============================================================================
   INVISION DARK — SITE-WIDE EXTENSION (all remaining public content pages).
   Additive layer ON TOP of the homepage dark layer above. Every rule is scoped
   body.iv-dark so the light site + tweak.html stay untouched. Rollback = remove
   the class from the <body>.

   Two extra guards keep the approved HOMEPAGE bespoke design untouched:
     - Rules that must not touch the homepage hero target the .v1 / .v2 hero
       variants (the homepage hero is .section-hero:not(.v1):not(.v2)).
     - Rules that must not touch the homepage's deliberately-hidden eyebrows use
       body.iv-dark:not(.counter-scroll)  (only index.html carries counter-scroll;
       every content page has a bare <body class="iv-dark">).
   Contrast per the ledger: card body copy uses --iv-text-2 (7.67:1 on #252C35),
   never --iv-text-mut for normal text on cards.
   ============================================================================ */

/* ---- Generic hero (non-home): KEEP the page PHOTO (hero-1.jpg, base rule) in
   BOTH day and night, with a dark overlay for legibility + LIGHT centered copy.
   The homepage hero is scoped to :has(.hero-single) in the layer above and is
   NOT matched here (every content page hero is .v1/.v2 = :not(:has(.hero-single))).
   The old night rule swapped the photo for a flat orange glow field; that swap is
   removed so the photo shows in dark too, and the base white readability scrim is
   replaced by the dark overlays below. Copy is forced light in BOTH modes by the
   mode-agnostic !important block (beats the day dark text-gradient AND the night
   light-gradient remap); .effectFade opacity/transform is never touched. ------- */

/* Copy container sits ABOVE the overlay (overlay is z-index:1 on the ::after). */
.section-hero:not(:has(.hero-single)) .container {
  position: relative;
  z-index: 2;
}
/* Photo stays in dark (base rule provides it); just clip the rounded corners. */
body.iv-dark .section-hero:not(:has(.hero-single)) .hero-image {
  overflow: hidden;
}
/* DAY overlay: dark veil (bumped to .50->.66 because hero-1.jpg is a bright photo:
   brightest sampled px L=0.80, so .42->.60 dropped a bright spot to ~3.8:1;
   .50->.66 lifts #F7F8FA title to >=4.59:1 over that spot). */
body:not(.iv-dark) .section-hero:not(:has(.hero-single)) .hero-image::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  display: block; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(9,9,11,.50) 0%, rgba(9,9,11,.66) 100%);
}
/* NIGHT overlay: stronger, theme-integrated charcoal foot (title >=6.5:1). */
body.iv-dark .section-hero:not(:has(.hero-single)) .hero-image::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  display: block; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(9,9,11,.60) 0%, rgba(18,22,27,.82) 100%);
}
/* Title -> solid light in BOTH modes; soft shadow for bright photo areas. */
.section-hero:not(:has(.hero-single)) .content-wrap .title,
.section-hero:not(:has(.hero-single)) .content-wrap .title span,
.section-hero:not(:has(.hero-single)) .content-wrap .title .text-gradient-1,
.section-hero:not(:has(.hero-single)) .content-wrap .title .text-gradient-2,
.section-hero:not(:has(.hero-single)) .content-wrap .title .text-gradient-3,
.section-hero:not(:has(.hero-single)) .content-wrap .heading-title {
  color: #F7F8FA !important;
  -webkit-text-fill-color: #F7F8FA !important;
  background: none !important;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
/* Subcopy -> near-white in both modes. */
.section-hero:not(:has(.hero-single)) .content-wrap .text,
.section-hero:not(:has(.hero-single)) .content-wrap p {
  color: rgba(255,255,255,.90) !important;
  -webkit-text-fill-color: rgba(255,255,255,.90) !important;
  text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
/* Eyebrow pill (.sub) if a page adds one -> light-on-dark glass pill. */
.section-hero:not(:has(.hero-single)) .content-wrap .sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: none !important;
}
.section-hero:not(:has(.hero-single)) .content-wrap .sub svg { color: #fff !important; }
/* Secondary CTA (.tf-btn-2) is a SOLID light pill (day) / translucent light-text
   pill (night), already legible on the dark overlay, so it is left unchanged.
   Forcing white text would make it invisible on its own light fill. */

/* ---- Eyebrows: the homepage hides them all for a clean look. Content pages
   NEED them (section labels + benefits-box plan/feature names like the pricing
   plan titles), so re-show them ONLY off the homepage. ------------------------ */
body.iv-dark:not(.counter-scroll) .heading-sub { display: block; }
/* Section eyebrow -> accent-wash pill (matches the homepage's kept eyebrows). */
body.iv-dark:not(.counter-scroll) .heading-section .heading-sub {
  display: flex;
  background: var(--iv-accent-wash);
  border: 1px solid var(--iv-accent-line);
  box-shadow: none;
  color: var(--iv-accent);
  border-radius: var(--iv-r-pill);
}
body.iv-dark:not(.counter-scroll) .heading-section .heading-sub.style-1 {
  background: var(--iv-accent-wash);
  box-shadow: none;
}
/* Card-level label (plan/feature name inside a card) -> plain accent text. */
body.iv-dark:not(.counter-scroll) .benefits-box .heading-sub,
body.iv-dark:not(.counter-scroll) .process-card .heading-sub {
  display: block;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: var(--iv-accent);
}

/* ---- Prose / legal / guide article bodies ---------------------------------- */
/* Body copy inherits --iv-text; .text-secondary already uses --secondary (light).
   Give in-prose links the accent so they are distinguishable (bare <a> otherwise
   inherits --primary = light and is invisible as a link). tf-btn/link1 excluded. */
body.iv-dark .text a:not(.tf-btn):not(.tf-btn-2):not(.link1) {
  color: var(--iv-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.iv-dark .text a:not(.tf-btn):not(.tf-btn-2):not(.link1):hover { color: var(--iv-accent-strong); }
/* Prose bullet lists on legal/guide pages inherit light; keep any check icons. */
body.iv-dark .list-text.type-check li .icon {
  background-color: var(--iv-accent-wash);
  color: var(--iv-accent);
}

/* ---- section-services-single (ads/branding/seo) + section-work-single (project)
   are prose + images. Headings/text already covered; style the tag pills. ------ */
body.iv-dark .list-tags .tags-item,
body.iv-dark .section-services-single .tags-item {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--iv-line);
  color: var(--iv-text-2);
}
body.iv-dark .list-tags .tags-item:hover,
body.iv-dark .section-services-single .tags-item:hover {
  color: var(--iv-accent);
  border-color: var(--iv-accent-line);
}

/* ---- section-process cards (ads/branding/seo) ------------------------------ */
body.iv-dark .process-card {
  background: var(--iv-surface);
  border: 1px solid var(--iv-line-2);
  box-shadow: var(--iv-shadow-card);
}
body.iv-dark .process-card .content .title { color: var(--iv-text); }
body.iv-dark .process-card .content .title::after {
  background: linear-gradient(90deg, transparent 0%, var(--iv-line-2) 50%, transparent 100%);
}
body.iv-dark .process-card .text { color: var(--iv-text-2); }
body.iv-dark .process-card .bot .time { border-color: var(--iv-line-2); color: var(--iv-text-2); }
/* .process-card .icon stays the brand gradient tile (reads well on dark). */

/* ---- Forms outside section-contact (lead forms on resources/booking, etc.) --
   The homepage styles inputs only inside .section-contact; generalise to every
   .form-contact so lead/booking forms get the same dark field treatment. ------- */
body.iv-dark .form-contact input[type="text"],
body.iv-dark .form-contact input[type="email"],
body.iv-dark .form-contact input[type="tel"],
body.iv-dark .form-contact input[type="date"],
body.iv-dark .form-contact input[type="number"],
body.iv-dark .form-contact input[type="url"],
body.iv-dark .form-contact input:not([type]),
body.iv-dark .form-contact select,
body.iv-dark .form-contact textarea {
  background: var(--iv-bg-sunken);
  border: 1px solid var(--iv-line-ui);
  border-radius: var(--iv-r-input);
  color: var(--iv-text);
  padding: 12px 14px;
  font-size: 16px;
}
body.iv-dark .form-contact ::placeholder { color: var(--iv-text-mut); }
body.iv-dark .form-contact :is(input,select,textarea):focus {
  border-color: var(--iv-accent);
  box-shadow: 0 0 0 3px rgba(242,107,33,.18);
  outline: none;
}
body.iv-dark .form-contact select option { background: var(--iv-surface); color: var(--iv-text); }
body.iv-dark .form-contact label { color: var(--iv-text-2); }
body.iv-dark .form-contact input[type="checkbox"] { accent-color: var(--iv-accent); }
/* A form SUBMIT is the primary action of its card -> brand fill (like the
   homepage contact submit). Native <button> keeps its brand text via text-fill. */
body.iv-dark .form-contact button[type="submit"] {
  -webkit-appearance: none; appearance: none;
  background: var(--iv-accent);
  border: 1px solid transparent;
  color: var(--iv-accent-ink); -webkit-text-fill-color: var(--iv-accent-ink);
  box-shadow: none;
}
body.iv-dark .form-contact button[type="submit"]:hover {
  background: var(--iv-accent-ink); border-color: var(--iv-accent-ink);
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: var(--iv-glow-brand);
}

/* ---- Brand-filled CTA links site-wide (pricing "Book a consultation" etc.) --
   The homepage refines these only inside the hero/CTA; give every other
   .tf-btn-brand the same charcoal-ink fill + hover-invert for consistency.
   (The more-specific hero rule above still wins on the homepage hero.) --------- */
body.iv-dark .tf-btn.tf-btn-brand {
  background: var(--iv-accent);
  color: var(--iv-accent-ink); -webkit-text-fill-color: var(--iv-accent-ink);
  border: 1px solid transparent;
  box-shadow: none;
}
body.iv-dark .tf-btn.tf-btn-brand:hover {
  background: var(--iv-accent-ink); border-color: var(--iv-accent-ink);
  color: #fff; -webkit-text-fill-color: #fff;
  box-shadow: var(--iv-glow-brand);
}

/* ---- resources.html: guide search glass + chips + rows --------------------- */
body.iv-dark .guide-search {
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.45),
              0 0 0 4px rgba(34,197,94,.08),
              inset 0 1px 0 rgba(255,255,255,.06);
}
body.iv-dark .guide-search:focus-within {
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 34px rgba(0,0,0,.55),
              0 0 0 4px rgba(34,197,94,.22),
              inset 0 1px 0 rgba(255,255,255,.08);
}
body.iv-dark .guide-search input[type="search"] { color: var(--iv-text); }
body.iv-dark .guide-search input[type="search"]::placeholder { color: var(--iv-text-mut); }
body.iv-dark .guide-search-count { color: var(--iv-text-2); }
/* Guide rows carry an inline light hairline divider (rgba(0,0,0,.08)) -> lighten. */
body.iv-dark .guide-row { border-bottom-color: var(--iv-line) !important; }
body.iv-dark .guide-row .title,
body.iv-dark .guide-row h3,
body.iv-dark .guide-row h4 { color: var(--iv-text); }
/* .guide-chip already uses brand-on-transparent (reads on dark); left as-is. */
body.iv-dark .guide-noresults { color: var(--iv-text-2); }

/* ============================================================================
   NIGHT-MODE CORRECTIONS  (verified audit, 34 findings)
   Additive, scoped body.iv-dark, reusing --iv-* tokens. The light/day theme
   (class absent) is untouched. Items map to the audit plan; #9 (inline #09090B
   labels) and #13 (hero/closing CTA hierarchy) are handled in the HTML instead,
   and #12 is an edit to the Featured Works meta rule above.
   ============================================================================ */

/* --- CRITICAL: invisible / white-on-white text ----------------------------- */
/* 1. Featured Works cards (index, project) */
body.iv-dark .featured-works-item { background: var(--iv-surface); border: 1px solid var(--iv-line-2); box-shadow: var(--iv-shadow-card); }
body.iv-dark .featured-works-item .content .pagi-dot { border-bottom-color: var(--iv-line); }
/* 2. Contact/Booking left column (pierces the !important light gradient rule) */
body.iv-dark .section-contact:not(:has(.contact-image)) .col-left .heading-title,
body.iv-dark .section-contact:not(:has(.contact-image)) .col-left .heading-title.text-gradient-3 { background: none !important; -webkit-text-fill-color: var(--iv-text) !important; color: var(--iv-text) !important; }
body.iv-dark .section-contact:not(:has(.contact-image)) .col-left p,
body.iv-dark .section-contact:not(:has(.contact-image)) .col-left .text { color: var(--iv-text-2) !important; }
body.iv-dark .section-contact:not(:has(.contact-image)) .col-left .text a.link1 { color: var(--iv-accent) !important; }
/* 3. about.html Our Story mission-box */
body.iv-dark .section-about-us .mission-box { background: var(--iv-surface); border: 1px solid var(--iv-line-2); box-shadow: var(--iv-shadow-card); }
body.iv-dark .section-about-us .mission-box .line { background: linear-gradient(90deg, transparent, var(--iv-line-2), transparent); }

/* --- HIGH ------------------------------------------------------------------- */
/* 4. light-bot.png white strip on .box-black pages (CSS-hide only; asset stays for light theme) */
body.iv-dark .box-black .light-bot { display: none !important; }
/* 5. box-black edge scrims nulled + REQUIRED risk mitigation: give the deep band
   an intentional inset-panel border so it does not read as a flat void. */
body.iv-dark .box-black::before, body.iv-dark .box-black::after { background: none; }
body.iv-dark .box-black { border: 1px solid var(--iv-line); border-radius: var(--iv-r-xl); }
/* 6. services-single white matte frame (branding, seo, ads) */
body.iv-dark .section-services-single .top-image { background-color: var(--iv-surface); border: 1px solid var(--iv-line-2); }
/* 7. process slider white discs (branding, seo, ads) */
body.iv-dark .group-btn-slider .nav-prev-swiper, body.iv-dark .group-btn-slider .nav-next-swiper { background: rgba(255,255,255,.06); border: 1px solid var(--iv-line-2); box-shadow: none; color: var(--iv-text); }
/* 8. logo-trim.svg vanishing in tools hub (stopgap filter; owner should supply light wordmark) */
body.iv-dark .section-tools .tools-center img { filter: brightness(0) invert(1); }
/* 10. index Benefits pills (Clear/Fast/Reliable/On budget) */
body.iv-dark .benefits-progress-item .progress-text { background: rgba(255,255,255,.06); border: 1px solid var(--iv-line-2); box-shadow: none; }
/* 11. contact.html 3 info cards */
body.iv-dark .box-contact-item { background-color: var(--iv-surface); border: 1px solid var(--iv-line-2); box-shadow: var(--iv-shadow-card); }
body.iv-dark .box-contact-item a.text { color: var(--iv-accent); }

/* --- MEDIUM ----------------------------------------------------------------- */
/* 14. FAQ +/- puck & feature icon tile camouflage */
body.iv-dark .section-faqs .accordion-button span, body.iv-dark .features-item .icon { background: var(--iv-surface-2); box-shadow: inset 0 0 0 1px var(--iv-line-2); }
body.iv-dark .section-faqs .accordion-button:not(.collapsed) span::before { background-color: var(--iv-accent); }
/* 15. index Features side-line rects (#FAFAFA) */
body.iv-dark .side-line-main .link-break-line { border-color: var(--iv-line-2); }
body.iv-dark .side-line-main .link-break-line::after { background: var(--iv-bg); }
body.iv-dark .side-line-main .link-break-center::before, body.iv-dark .side-line-main .link-break-center::after { background: var(--iv-line-ui); }
/* 16. contact.html Google Map consent gate */
body.iv-dark .wg-map .consent-gate { background: var(--iv-surface); }
body.iv-dark .wg-map .consent-gate p { color: var(--iv-text-2); }
/* 17. for-families in-card CTA link */
body.iv-dark .benefits-box .content a.link1 { color: var(--iv-accent); }
body.iv-dark .benefits-box .content a.link1:hover { color: var(--iv-accent-strong); }

/* --- LOW (cosmetic hierarchy / elevation) ---------------------------------- */
/* 18. FAQ open-answer divider (web-design/branding/seo/ads) */
body.iv-dark .section-faqs .accordion-body::before { background: linear-gradient(90deg, transparent, var(--iv-line-2) 50%, transparent); }
/* 19. process step-number order (branding/seo/ads) */
body.iv-dark .process-card .number .text-neutral-400 { color: var(--iv-text); }
body.iv-dark .process-card .number .text-neutral-200 { color: var(--iv-text-mut); }
/* 20. inline prose .link1 links (privacy/terms/guarantee/ai-safety-promise) */
body.iv-dark .text a.link1 { color: var(--iv-accent); text-decoration: underline; text-underline-offset: 2px; }
/* 21. web-design samples-card resting shadow */
body.iv-dark .samples-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -24px rgba(0,0,0,.7); }
/* 22. index About Us eyebrow pill border */
body.iv-dark .section-about-us .col-left .sub { border-color: var(--iv-line-2); }

/* ---- LIVE-VERIFICATION MISSES (found by rendering the pages, not in the code audit) ---- */
/* LV1. Homepage FAQ uses .faqs-2col / .accordion-faq_item (a DIFFERENT structure than the
   service pages' .section-faqs): the item bg override was omitted while the answer text is
   already forced light -> light-on-white = invisible. Darken the item; keep question light. */
body.iv-dark .accordion-faq_item { background: var(--iv-surface); border: 1px solid var(--iv-line-2); }
body.iv-dark .accordion-faq_item .accordion-title,
body.iv-dark .accordion-faq_item .num { color: var(--iv-text); }
/* LV2. Homepage features hub centre badge was white holding a light-filtered logo = invisible. */
body.iv-dark .features-center { background: var(--iv-surface); border: 1px solid var(--iv-line-2); }
/* LV3. project.html work images sat inside white matte frames. */
body.iv-dark .wrap-image { background: var(--iv-surface); }
/* LV4. Footer social pill (.tf-social-1 .text-body-1, e.g. "Instagram") was white with light
   text = invisible; it is in the shared footer, so it breaks on every page. */
body.iv-dark .tf-social-1 .text-body-1 { background: rgba(255,255,255,0.06); border: 1px solid var(--iv-line); color: var(--iv-text-2); }
/* ===================== end NIGHT-MODE CORRECTIONS =========================== */

/* ===================== end InVision dark site-wide extension ================= */

/* ============================================================================
   NIGHT-MODE FIX — JS-injected gallery showcase (gallery-showcase.js).
   That script injects its own <style> AFTER styles.css and hardcodes a WHITE
   radial section background (theme-unaware). In night the section rendered as a
   white island and its (already-light) title sat light-on-white = invisible.
   Higher specificity (body.iv-dark .ivg-sec) beats the injected rule regardless
   of source order, so no !important is needed. Day mode keeps the injected look
   (light bg + dark #17181b title), which is correct.
   ============================================================================ */
body.iv-dark .ivg-sec { background: var(--iv-bg); }
body.iv-dark .ivg-title { color: var(--iv-text); }
body.iv-dark .ivg-lead { color: var(--iv-text-2); }

/* ============================================================================
   PREMIUM CRAFT LAYER (owner 2026-07-16) — appended last so it wins by source
   order. Goal: read as expensively crafted, ~20% tighter vertical rhythm,
   consistent side margins (content aligned left/right), and elegant, harder-to-
   replicate cards. Density changes are desktop/tablet-scoped so the mobile
   responsive system (<=991) keeps its own tuned rhythm. The container is
   tightened via WIDTH only (never padding) so Bootstrap's negative row margins
   stay valid and nothing overflows.
   ============================================================================ */

/* 1 — Consistent side margins + aligned content. A steady gutter on every screen
   below the cap; even margins above it. Width-only keeps the grid math intact. */
@media (min-width: 992px) {
  .container { width: min(1300px, 100% - 6rem); }
}
@media (min-width: 768px) and (max-width: 991px) {
  .container { width: min(1300px, 100% - 4rem); }
}

/* 2 — ~20% tighter vertical rhythm on large screens; removes the "swimming"
   emptiness while keeping the margins. .pt-0/.pb-0 utility overrides preserved. */
@media (min-width: 1440px) {
  .flat-spacing { padding-top: 96px; padding-bottom: 96px; }
}
@media (min-width: 992px) and (max-width: 1439px) {
  .flat-spacing { padding-top: 66px; padding-bottom: 66px; }
}
@media (min-width: 992px) {
  .flat-spacing.pt-0 { padding-top: 0; }
  .flat-spacing.pb-0 { padding-bottom: 0; }
}

/* 3 — Elevated card craft. Hairline border + layered soft shadow + a refined
   hover that deepens the shadow and warms the border toward brand. NO transform:
   GSAP wraps these cards in overflow:hidden, so a lift would be clipped
   (see equal-cards). Applies to the site's real card surfaces. */
.benefits-box,
.itb-card {
  border: 1px solid rgba(24, 24, 27, 0.07);
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.04), 0 12px 30px -14px rgba(16, 18, 22, 0.12);
  transition: box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.benefits-box:hover,
.itb-card:hover {
  box-shadow: 0 2px 4px rgba(16, 18, 22, 0.05), 0 26px 56px -22px rgba(16, 18, 22, 0.20);
  border-color: rgba(242, 107, 33, 0.26);
}
body.iv-dark .benefits-box,
body.iv-dark .itb-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 16px 36px -16px rgba(0, 0, 0, 0.55);
}
body.iv-dark .benefits-box:hover,
body.iv-dark .itb-card:hover {
  border-color: rgba(242, 107, 33, 0.42);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 62px -24px rgba(0, 0, 0, 0.66);
}
/* 4 — Day home hero uses the big-photo-full dark overlay + LIGHT copy, so the
   CTAs must read light too. The base rule forces `.tf-btn-2` dark (#18181B),
   which was right for the old bright-left hero but washes out on the overlay.
   Scoped to the DAY home hero only; night + inner-page heroes untouched. The
   primary keeps charcoal-on-brand (AA ~5.2:1) so it stays vivid, not muddy. */
body:not(.iv-dark) .section-hero:has(.hero-single) .content-wrap.hero-copy .tf-btn-brand {
  background: var(--brand) !important;
  color: #171a1c !important;
  border-color: transparent !important;
  box-shadow: 0 10px 30px -10px rgba(242, 107, 33, 0.5);
}
body:not(.iv-dark) .section-hero:has(.hero-single) .content-wrap.hero-copy .tf-btn-2 {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(2px);
}
body:not(.iv-dark) .section-hero:has(.hero-single) .content-wrap.hero-copy .tf-btn-2:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
}
/* 5 — Inner-page heroes (.v1/.v2) sit on the shared hero-1.jpg photo under a dark
   overlay in BOTH themes, so the headline must be a crisp SOLID light colour.
   Some pages (e.g. ai-automation) used a gradient (text-gradient-3, a dark
   grey->charcoal fill, or white->orange) that faded toward dark and washed out on
   the lighter DAY overlay = the "pale/white, hard to read" hero the owner flagged.
   Normalize every inner-hero headline + subcopy to legible light, in both modes,
   with a soft shadow so it always clears the photo. Home hero is excluded
   (it is :not(.v1):not(.v2) and keeps its own treatment). */
.section-hero.v1 .heading-title, .section-hero.v2 .heading-title,
.section-hero.v1 .content-wrap .title, .section-hero.v2 .content-wrap .title {
  background: none !important;
  -webkit-text-fill-color: #f8f9fb !important;
  color: #f8f9fb !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}
.section-hero.v1 .content-wrap .text, .section-hero.v2 .content-wrap .text {
  color: rgba(255, 255, 255, 0.94) !important;
}
/* end PREMIUM CRAFT LAYER */

/* ============================================================================
   NIGHT-MODE FIX — review.js / iv-enhance.js inject an `.iv-review-band` section
   (the "Happy with our work? — leave a Google review" prompt) above the footer,
   with a hardcoded WHITE radial-gradient background and dark heading/text. It's
   theme-unaware, so in night mode it rendered as a white island with near-
   invisible dark text at the bottom of every page — a "page won't go dark"
   report. Higher specificity (body.iv-dark ...) beats the injected <style>
   regardless of source order, so no !important is needed. Day mode keeps the
   injected white look, which is correct.
   ============================================================================ */
body.iv-dark .iv-review-band { background: var(--iv-bg); border-top-color: var(--iv-line); }
body.iv-dark .iv-review-band h3 { color: var(--iv-text); }
body.iv-dark .iv-review-band p { color: var(--iv-text-2); }
body.iv-dark .iv-review-btn {
  background: var(--iv-surface);
  border-color: var(--iv-line-2);
  color: var(--iv-text);
  box-shadow: none;
}
body.iv-dark .iv-review-btn:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }

/* NIGHT-MODE FIX — the AI "Assistant demo" card (.assistant-box) hardcodes a white
   background + light border, with no dark override, so it read as a white card in
   night mode. Remap to the dark surface tokens (the textarea too). */
body.iv-dark .assistant-box {
  background: var(--iv-surface);
  border-color: var(--iv-line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
body.iv-dark .assistant-box textarea {
  background: var(--iv-bg);
  border-color: var(--iv-line-2);
  color: var(--iv-text);
}

/* NIGHT-MODE FIX — the .wg-map card hardcodes a light-grey (#F4F4F5) surface with
   light inset "raised" shadows; remap to a dark surface in night mode. */
body.iv-dark .wg-map {
  background: var(--iv-surface);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.25) inset, 0 10px 26px rgba(0, 0, 0, 0.42);
}

/* NIGHT-MODE FIX — the "Everything in One Site" .features-center card stayed white
   in night mode (white island). Worse, the theme already inverts its logo to
   white (features-center img -> brightness(0) invert(1)), so a WHITE logo sat on
   a WHITE box = invisible ("the logo is wrong"). Darkening the box background
   fixes both: the box goes dark and the inverted white logo now reads on it. */
body.iv-dark .features-center {
  background: var(--iv-surface);
  border-color: var(--iv-line-2);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   APP-ROUTE TOOL HEROES — /book, /book-a-call, /booking (+confirmation),
   /assistant, /autopsy, /configure, /report, /start, /exposure, /privacy-center
   render `.section-hero` with NO hero photo (no `.hero-image`, no `.hero-single`,
   not `.v1/.v2`). Two site-wide rules assumed every non-home hero sits on the
   shared DARK hero-1.jpg photo, and broke these photo-less heroes:
     (1) the inner-hero rule forced the headline to near-white
         (#F7F8FA !important) — invisible on the light page in DAY mode
         (the "What can we help you with?" ghost headline on /book); and
     (2) `body.iv-dark .section-hero { background: var(--iv-bg) }` painted a dark
         BAND behind the hero in night while the app-route body itself stays
         light — a floating dark stripe on which the dark eyebrow/subtext vanished.
   These pages have no photo, so they must read as clean LIGHT heroes (dark text
   on the light page) in BOTH day and night. This override has higher specificity
   AND later source order than both rules above, so it wins without fighting them.
   Scoped by :not(:has(.hero-image)) / :not(:has(.hero-single)) / :not(.v1):not(.v2)
   so the photo inner-page heroes and the homepage hero are never touched. It
   mirrors the bug rule's `.content-wrap` scope exactly, so it only counters where
   the bug actually fires. */
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .heading-title,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .title,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .title span,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .text-gradient-1,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .text-gradient-2,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .text-gradient-3 {
  /* LIGHT-mode colour. Literal dark (NOT var(--primary), which body.iv-dark
     flips). The body.iv-dark override below flips this to light for dark mode —
     the app-route body DOES go dark (bg -> #171B21), so the headline has to
     follow the theme, not stay fixed. */
  color: #101114 !important;
  -webkit-text-fill-color: #101114 !important;
  background: none !important;
  text-shadow: none !important;
}
/* Lead paragraph + subtext: the SAME photo-assuming rule paints the hero .text /
   <p> with a WHITE `-webkit-text-fill-color: rgba(255,255,255,.9)`. Text-fill
   wins over `color` for what's actually painted, so even though `color` resolves
   dark, the paragraph rendered near-white and washed out on the light page.
   Restore a readable lead-grey and reset the fill (both modes, light body). */
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .text,
.section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap p {
  color: #44474f !important;
  -webkit-text-fill-color: #44474f !important;
}
/* DARK MODE — the app-route body goes dark (#171B21), so the headline + lead
   paragraph must flip to LIGHT text. Higher specificity than the light rules
   above (extra `body.iv-dark`), so dark wins; light mode is untouched. This is
   the proper day<->night transition: dark bg -> light text, light bg -> dark. */
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .heading-title,
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .title,
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .title span {
  color: #F7F8FA !important;
  -webkit-text-fill-color: #F7F8FA !important;
}
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap .text,
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) .content-wrap p {
  color: #c3cbd6 !important;
  -webkit-text-fill-color: #c3cbd6 !important;
}
/* Hero stays transparent so it shows the themed body (light day / dark night). */
body.iv-dark .section-hero:not(:has(.hero-image)):not(:has(.hero-single)):not(.v1):not(.v2) {
  background: transparent;
}
/* end APP-ROUTE TOOL HEROES fix */

/* ============================================================================
   AUTO DAY/NIGHT toast — the theme follows sunrise/sunset unless the visitor
   locks it with the header button. This small, auto-dismissing notice is the
   "quick heads-up so people aren't confused it's a different site" when the
   theme flips (an auto sunrise/sunset boundary, or a manual press).
   ============================================================================ */
.iv-theme-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 14px);
  z-index: 2147483000; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--body-font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  background: rgba(24, 24, 27, .92); color: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s ease;
}
.iv-theme-toast.show { opacity: 1; transform: translate(-50%, 0); }
.iv-theme-toast .ico { font-size: 15px; line-height: 1; }
body.iv-dark .iv-theme-toast {
  background: rgba(247, 248, 250, .96); color: #16181d; border-color: rgba(0, 0, 0, .12);
}
@media (prefers-reduced-motion: reduce) { .iv-theme-toast { transition: opacity .01s linear; } }

/* ============================================================================
   BELOW-FOLD COMPACT PREMIUM LAYER (owner 2026-07-18) — appended last, wins by
   source order. Scope: the below-fold .section-* blocks only. The hero band
   (.section-hero + .section-partner--hero) and the footer are DELIBERATELY not
   in scope and must never be added here. Section rhythm (.flat-spacing) and
   the container gutters belong to the PREMIUM CRAFT layer and are NOT touched:
   the margins stay, only the contents shrink. Everything is >=992px so the
   mobile responsive system (<=991) keeps its own tuned scale.

   The move: content drops ~20% while the whitespace around it holds, which is
   what reads as expensive — smaller, calmer type inside the same generous
   frame, a clear step DOWN from the 76px hero so the page has one voice at the
   top and a measured tone after it. Card radii tighten 40 -> 28 (tailored, not
   bubbly), numerals go tabular, tracking tightens with the smaller sizes.

   Known cascade traps handled here (see recon 2026-07-18):
   - .mb-48/64/70/80 heading margins collide with !important utilities -> the
     scoped overrides below carry !important on purpose.
   - index.html's inline <style> blocks (.itb-* process band, .faqs-2col) load
     AFTER this sheet and are already compact — intentionally left alone.
   - logo-cube.css also loads after this sheet (services image offsets) — left
     alone.
   - .tf-btn keeps a computed height >= 48px so the 44px coarse-pointer floor
     (line ~11248) never re-inflates reduced buttons.
   ============================================================================ */
@media (min-width: 992px) {
  /* ---- Shared heading system: one clear step below the hero's 76px. ---- */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section .heading-title {
    font-size: clamp(44px, 3.9vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section p {
    font-size: 16px;
    line-height: 1.62;
  }
  /* Eyebrow pill: slimmer, quieter, tighter to its title. */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section .heading-sub {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
    padding: 5px 14px 5px 26px;
    margin-bottom: 22px;
  }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section .heading-sub::before {
    width: 5px;
    height: 5px;
    left: 13px;
  }
  /* Dark service/CTA "split" bands (.box-black) carry a .heading-section headline
     pair but NO .section-* class, so they miss the compact scale above and would
     render at the base 72px. .box-black is used ONLY for these mid-body dark bands
     (never the hero or footer), so scale its headline + eyebrow to match. */
  .box-black .heading-section .heading-title {
    font-size: clamp(44px, 3.9vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  .box-black .heading-section .heading-sub {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
    padding: 5px 14px 5px 26px;
    margin-bottom: 22px;
  }
  .box-black .heading-section .heading-sub::before {
    width: 5px;
    height: 5px;
    left: 13px;
  }
  /* At 13px the brand orange on the light chip fell to ~2.8:1 — deepen the ink
     (≈5.9:1 on #F5F5F5) in DAY mode only. The dark .style-1 chip and night mode
     keep their lighter orange, which is correct on dark surfaces. */
  body:not(.iv-dark) :is(.section-about-us, .section-benefits, .section-services,
      .section-featured-works, .section-process, .section-features, .section-tools,
      .section-team, .section-statistic, .section-awards, .section-testimonials,
      .section-faqs, .section-contact, .section-trust, .section-services-single,
      .section-work-single, .iv-cta) .heading-sub:not(.style-1) {
    color: #A6430F;
    color: color-mix(in srgb, var(--brand-strong, #BF551A) 86%, #000);
  }
  /* The index process band's two pills sit in .itb-head (not .heading-section)
     and would otherwise stay full-size next to the slimmed ones. */
  .section-process .itb-head .heading-sub {
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.02em;
  }
  /* Keep the band's own heading a clear step BELOW the reduced section heads
     (the inline <style> caps it at 40px, which now crowds the 44-56px scale).
     Higher specificity than the inline block's 0,3,0 — intentional re-rank. */
  .section-process.idea-trust-band .itb-head .heading-title {
    font-size: clamp(24px, 2.7vw, 36px);
  }
  /* Heading-to-content gaps scale with the smaller titles. !important beats the
     bare .mb-* utilities (80px !important at line ~1080). */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section.mb-32 { margin-bottom: 26px !important; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section.mb-48 { margin-bottom: 36px !important; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section.mb-64 { margin-bottom: 44px !important; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section.mb-70 { margin-bottom: 48px !important; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .heading-section.mb-80 { margin-bottom: 52px !important; }

  /* ---- Shared type + component primitives inside the scope. Order matters:
          .text first so the .text-body-* refinements below can win ties. ---- */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .text {
    font-size: 15px;
    line-height: 1.62;
  }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .text-body-1 { font-size: 16px; line-height: 26px; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .text-sub-heading { font-size: 18px; line-height: 26px; }
  /* The smaller text-body utilities must be re-declared AFTER the .text rule:
     elements carry both classes (e.g. "text-body-3 text"), and without these
     the scoped .text (0,2,0) would beat the bare utility (0,1,0) and INFLATE
     14px captions to 15px — the one direction this layer must never move. */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .text-body-2 { font-size: 15px; line-height: 22px; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .text-body-3 { font-size: 13.5px; line-height: 19px; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) h2,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .h2 { font-size: 38px; line-height: 1.25; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) h3,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .h3 { font-size: 32px; line-height: 1.3; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) h4,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .h4 { font-size: 28px; line-height: 1.32; letter-spacing: -0.015em; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) h5,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .h5 { font-size: 25px; line-height: 1.32; }
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) h6,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .h6 { font-size: 20px; line-height: 1.4; }

  /* CTAs inside the scope: trimmer, still comfortably above the 44px touch
     floor (24px line + 2x12px pad = 48px). Hero + footer buttons untouched. */
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .tf-btn,
  :is(.section-about-us, .section-benefits, .section-services, .section-featured-works,
      .section-process, .section-features, .section-tools, .section-team,
      .section-statistic, .section-awards, .section-testimonials, .section-faqs,
      .section-contact, .section-trust, .section-services-single, .section-work-single,
      .iv-cta) .tf-btn-2 {
    padding: 12px 22px;
    font-size: 15px;
  }

  /* Tabular numerals wherever digits carry the message — the quiet expensive
     detail on counters and stats. */
  .section-statistic .statistic-number,
  .section-about-us .review-box .counter {
    font-variant-numeric: tabular-nums;
  }

  /* ---- Cards: same frame, tailored radius, ~20% less bulk inside. ---- */
  :is(.section-benefits, .section-features, .section-team, .section-trust) .benefits-box {
    padding: 38px;
    border-radius: 28px;
  }
  .featured-works-item { border-radius: 28px; }
  .featured-works-item .image { border-radius: 22px; }
  .featured-works-list { gap: 24px; }
  .featured-works-item .content .pagi-dot { padding-bottom: 16px; margin-bottom: 16px; }
  .featured-works-item .content .pagi-dot span { width: 9px; height: 9px; }
  .featured-works-item .image .view-project { padding: 12px 18px; }
  .featured-works-item .image .view-project .icon { font-size: 20px; }

  .features-item { padding: 26px; border-radius: 24px; }
  .features-item .icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
    margin-bottom: 20px;
    border-radius: 14px;
  }
  /* The .style-2 variant (about.html) out-specifies the rules above and was
     ending up half-compacted (old 40px pad + 80px icon under the new radius).
     Give it the same ~20% treatment at its own, deliberately larger, scale. */
  .features-item.style-2 { padding: 32px; }
  .features-item.style-2 .icon {
    width: 64px;
    height: 64px;
    font-size: 30px;
    margin-bottom: 28px;
  }
  .features-center { padding: 20px 26px; }
  .features-center img { height: 38px; }

  /* Benefits widgets (progress bars + the step strip). */
  .benefits-progress-inner { margin-bottom: 30px; }
  .benefits-progress-inner .benefits-progress-item .progress-text { padding: 6px 13px; }
  .benefits-progress-inner .benefits-progress-item .progress-text .icon { font-size: 20px; }
  .benefits-step .benefits-step-inner { height: 84px; margin-top: 32px; margin-bottom: 64px; }
  .benefits-step-inner .step-item { width: 84px; height: 84px; }
  .benefits-step-inner .step-item .icon { font-size: 38px; }

  /* About: drop the 100vh floor (992-1439 band) — content now sets the height. */
  .section-about-us { min-height: 0; }
  .section-about-us .col-left { padding: 38px 0 0; border-radius: 28px; }
  .section-about-us .review-box { padding: 26px 30px 22px; border-radius: 28px; }
  .section-about-us .review-box .text { font-size: 14.5px; line-height: 1.62; }
  .section-about-us .review-box .desc { margin-bottom: 20px; }
  /* 60px keeps the number under the hero headline at EVERY viewport (the hero
     clamps 61-76px from 992px up), so the page truly has one loudest voice. */
  .section-about-us .review-box .counter {
    font-size: 60px;
    line-height: 1.05;
    margin-bottom: -6px;
  }
  /* Article sub-headings on the service/project detail pages sat at a fixed
     48px — ABOVE the reduced 44-56px section heads on laptops. As in-article
     level-2 heads they now sit clearly below the section scale. */
  .section-services-single .heading,
  .section-work-single .heading {
    font-size: 34px;
    line-height: 1.28;
  }
  .section-about-us .box-quotes { padding: 20px 14px 18px 26px; border-radius: 28px; }
  .section-about-us .box-quotes .image { width: 126px; height: 168px; }

  /* Statistic band: the 240px numerals were the loudest thing on the page. */
  .section-statistic { padding: 48px 0; }
  .section-statistic .statistic-slider .text { min-height: 160px; }
  .section-statistic .swiper .group-slider { margin-bottom: 18px; }
  .section-statistic .swiper .title { margin-bottom: 14px; }
  .section-statistic .swiper .statistic-number {
    font-size: clamp(112px, 11.5vw, 156px);
    line-height: 1.02;
  }
  .section-statistic .swiper .statistic-number .prefix { font-size: 0.94em; }

  /* Tools orbit: reductions live in the >=1200 block below — the 992-1199 band
     already runs its own tuned 100px nodes / 540px stage and keeps them. */

  /* Team + awards rows. */
  .team-item { border-radius: 28px; }
  .team-item .image { margin-bottom: 20px; }
  .team-item .sub { margin-bottom: 24px; }
  .awards-item { padding: 0 30px; }
  .awards-item > div { min-height: 80px; }

  /* Testimonials (day mode; the section is hidden at night by design). */
  .swiper-testimonial_wrap .desc { margin-bottom: 18px; }
  .swiper-testimonial_wrap .top-icon { font-size: 17px; margin-bottom: 12px; }
  .swiper-testimonial_wrap .cite { margin-bottom: 20px; }
  .swiper-testimonial_wrap .group-slider .testimonials-pagination { font-size: 28px; line-height: 1.3; }
  .section-testimonials .group-btn-slider .nav-prev-swiper,
  .section-testimonials .group-btn-slider .nav-next-swiper { width: 46px; height: 46px; }
  .section-testimonials .group-btn-slider .nav-prev-swiper .icon,
  .section-testimonials .group-btn-slider .nav-next-swiper .icon { font-size: 20px; }
  .testimonial-image { padding: 24px; }

  /* FAQ list on non-index pages (index's own inline 2-col styles already sit
     tighter than this and keep winning by cascade order — by design). The
     ::before hairline was centered for the old 32px gap; re-center for 20px. */
  .accordion-asked .accordion-asked-item { padding: 20px 30px; border-radius: 20px; }
  .accordion-asked .accordion-button span { width: 28px; height: 28px; }
  .accordion-asked .accordion-body { padding-top: 20px; }
  .accordion-asked .accordion-body::before { top: 9px; }

  /* Contact: same warm block, less mass. Form rules are scoped to the contact
     section so booking/lead forms that reuse .form-contact stay untouched; the
     dark-mode twin matches the height so both themes agree. */
  .section-contact { padding: 40px; }
  .section-contact .contact-image { border-radius: 28px; }
  .section-contact .col-left { padding: 56px 0; }
  .section-contact .contact-item .icon { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
  .section-contact .form-contact { border-radius: 28px; }
  .section-contact .form-contact .heading { margin-bottom: 24px; }
  .section-contact .form-contact textarea { height: 96px; }
  body.iv-dark .section-contact .form-contact textarea { height: 96px; }
  .section-contact .form-contact select { font-size: 16px; }
}

/* Reductions only where the current value is the LARGE >=1200/>=1440 one; the
   992-1199 band already runs tighter values that these would wrongly inflate. */
@media (min-width: 1200px) {
  .team-item { padding: 30px; }
  .section-contact .form-contact { padding: 40px; }
  .featured-works-item .content { padding: 24px 28px 12px; }
  .section-tools .tools-orbit-wrap { min-height: 520px; }
  .section-tools .tool-node { width: 100px; height: 100px; padding: 18px; border-radius: 22px; }
}
@media (min-width: 1440px) {
  .accordion-faq_item { padding: 30px 32px; border-radius: 28px; }
  .accordion-faq_item .accordion-content .text { padding-top: 18px; padding-bottom: 48px; }
}
@media (min-width: 992px) {
  /* Services accordion titles (both states) — measured, not shouty. Matches the
     base selectors' specificity and wins by order. */
  .accordion-faq_item .accordion-title { font-size: 26px; line-height: 1.35; }
  .accordion-faq_item .accordion-action:not(.collapsed) .accordion-title { font-size: 32px; line-height: 1.25; }
  .list-tags a { padding: 5px 12px; }
}
/* end BELOW-FOLD COMPACT PREMIUM LAYER */

/* =========================================================================
   TYPOGRAPHY REFINEMENT — all devices (appended 2026-07-23)
   Book-grade typesetting on top of the existing enhancement layer (which
   already antialiases text ~line 10001 and balances headings / makes body
   "pretty" ~line 10884). This adds the remaining levers — kerning, ligatures,
   a reading MEASURE, long-word/URL safety and wider widow/orphan coverage —
   WITHOUT touching the tuned type SCALE (the compact layer owns >=992 sizes,
   the mobile layer owns <=991). Every rule here is colour-free, so light/dark
   mode are both unaffected. Works at every breakpoint = "all devices".
   ========================================================================= */

/* 1. Kerning + ligatures + optical sizing — crisper letterfit everywhere.
      The template antialiases already; this tightens pair-spacing and enables
      the standard ligatures / contextual alternates the Urbanist face ships. */
body {
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* 2. Wider widow/orphan coverage. The base layer balances headings and makes
      p/.text/.desc/.text-body-1 "pretty"; extend the same to the remaining
      text roles so list items, captions, small body and table cells stop
      stranding a lone word on the last line (the essay's widows & orphans). */
li, dd, td, th,
.text-body-2, .text-body-3, .text-caption,
figcaption, blockquote {
  text-wrap: pretty;
}

/* 3. Long words and raw URLs must never punch out of their box — worst on
      narrow phones and in the legal / guide prose. Break only when a word
      genuinely cannot fit; never auto-hyphenate ordinary words. */
p, li, dd, blockquote,
.text, .text-body-1, .text-body-2, .text-body-3 {
  overflow-wrap: break-word;
}
/* Display type must never hyphenate or mid-word break — keep headings intact. */
h1, h2, h3, h4, h5, h6,
.heading-title, .title, .text-display-1, .text-display-2, .text-sub-heading {
  overflow-wrap: normal;
  hyphens: none;
}

/* 4. Reading MEASURE. Long-form copy lives in wide single columns (guides,
      privacy, terms render `col-lg-8 > p.text`). Uncapped, a line can run
      ~120 characters on a large monitor — well past the comfortable 60-75.
      Cap the line length and give sustained reading a touch more leading;
      leave ALIGNMENT alone (left prose stays left, aligned with its heading)
      and skip centered columns so short leads are untouched. Descendant (not
      child) combinator because the reveal-animation lib wraps prose in an
      `.overflow-hidden` div. Self-gating: a ch cap only changes a paragraph
      whose container is wider than 72ch, so card text and narrow/nested
      columns (all < 72ch) are visually untouched — only genuinely long lines
      in a wide reading column get reined in. */
:is(.col-lg-8, .col-xl-8, .col-lg-9, .col-xl-9, .col-lg-10, .col-xl-10):not(.text-center) p.text,
:is(.col-lg-8, .col-xl-8, .col-lg-9, .col-xl-9, .col-lg-10, .col-xl-10):not(.text-center) .text-body-1 {
  max-width: 72ch;
  line-height: 1.6;
}

/* 5. Micro-labels: small all-caps captions read better with a hair of
      tracking (the essay's "increase tracking on headers", applied to labels). */
.text-caption {
  letter-spacing: 0.03em;
}

/* 6. Left-aligned paragraphs — clean, professional, no justified-text gaps.
      Justify was switched off after it opened word-gap "rivers" in narrow
      columns. Scoped to <p> so it never touches buttons/labels/nav/inputs/
      badges; any deliberately centered or right-aligned context keeps its own
      alignment so nothing centered breaks. */
p {
  text-align: left;
}
:is([class*="text-center"], [class*="text-end"], [class*="text-right"]) p {
  text-align: inherit;
}
/* end TYPOGRAPHY REFINEMENT */

/* ============================================================================
   WEBP HERO LAYER (2026-07-24)
   The three hero photographs are the LCP element on every page, and they were
   shipping as JPEG:
     hero-1.jpg   253 KB -> hero-1.webp   143 KB   (26 inner pages)
     hero-day.jpg 220 KB -> hero-day.webp 106 KB   (homepage, light)
     hero-night   185 KB -> hero-night     90 KB   (homepage, dark)

   Each rule declares the JPEG FIRST and the image-set() SECOND. A browser that
   does not understand image-set() discards the second declaration and keeps the
   JPEG, so this cannot break anything; every browser that does understand it
   also supports WebP, and picks the smaller file. The originals stay on disk.

   Selectors are copied byte-for-byte from the rules being overridden (lines
   ~4683, ~6161, ~11550, ~11665) so specificity matches and source order wins.
   The ?v query on the day/night files is preserved - those assets are served
   immutable for a year and the query is part of their identity.
   ========================================================================== */
.section-hero .hero-image {
  background-image: url(./../images/section/hero-1.jpg);
  background-image: image-set(
    url(./../images/section/hero-1.webp) type("image/webp"),
    url(./../images/section/hero-1.jpg) type("image/jpeg")
  );
}
.section-page-title {
  background-image: url(./../images/section/hero-1.jpg);
  background-image: image-set(
    url(./../images/section/hero-1.webp) type("image/webp"),
    url(./../images/section/hero-1.jpg) type("image/jpeg")
  );
}
body.iv-dark .section-hero:has(.hero-single) .hero-image {
  background-image: url(../images/section/hero-night.jpg?v=3);
  background-image: image-set(
    url(../images/section/hero-night.webp?v=3) type("image/webp"),
    url(../images/section/hero-night.jpg?v=3) type("image/jpeg")
  );
}
body:not(.iv-dark) .section-hero:has(.hero-single) .hero-image {
  background-image: url(../images/section/hero-day.jpg?v=4);
  background-image: image-set(
    url(../images/section/hero-day.webp?v=4) type("image/webp"),
    url(../images/section/hero-day.jpg?v=4) type("image/jpeg")
  );
}
/* end WEBP HERO LAYER */

/* ============================================================================
   MOBILE BOTTOM-BAR HARDENING (2026-07-24)

   FINDING FIRST: this site ALREADY ships a permanent sticky bottom action bar on
   phones. It is in no .html file and it is not called "sticky", which is why a
   grep for one comes up empty - `assets/js/iv-mobile-nav.js?v=7` (loaded on all
   28 pages) appends `<nav class="mobile-action-bar">` to <body>, and its styling
   lives at lines 10642 / 10652-10744 of this file. Five targets: Pricing ·
   Projects · Home (raised centre) · Book · Contact. A SECOND fixed bar is
   therefore not the fix - it would land on top of the one already there. This
   layer repairs the bar we have.

   Measured geometry of every fixed element near the bottom edge:
     .mobile-action-bar  z-index 1000   bottom calc(12px + safe-area)  height 66px
                         => occupies 12..78px + inset; centred, max-width 460px
     #goTop              z-index 1000   bottom 40px  right 20px   38x38px
                         => occupies 40..78px - i.e. INSIDE the bar's box
     .ivbw-btn (chat)    z-index 99990  left 18px  bottom 92px (<=767) / 16px (>=768)
     .ivbw-tease         z-index 99990  left 20px  bottom 186px (<=767)
     .ivbw-panel         z-index 99991  left 16px  bottom 184px (<=767)
   The chat widget lives in the LEFT column and, at <=767px, was measured against
   a bar sitting at a flat 12..78px - a clean 14px gap that the safe-area inset
   silently eats (see defect 4).

   Four defects fixed, worst first:

   1. BACK-TO-TOP SITS ON THE BAR. #goTop's 40..78px band is entirely inside the
      bar's 12..78px band, at the SAME z-index, over the right-hand "Contact"
      target. This is not an edge case: main.js only hides #goTop while
      `$(".tf-footer")` is on screen, and no page has a .tf-footer element, so
      footerOffset is Infinity and #goTop stays visible from 100px of scroll to
      the end of every page. Lift it clear and put it one layer behind the bar.

   2. FOOTER CLEARANCE IGNORES THE NOTCH. Line 10744 reserves a flat
      `footer { padding-bottom: 104px }`, but the bar offsets itself by
      `12px + env(safe-area-inset-bottom)`. On a 34px-inset device the bar tops
      out at 112px and covers the last 8px of footer content. Add the same inset.

   3. NO DARK VARIANT. body.iv-dark is the DEFAULT theme (the inline script in
      every <body> adds it), yet the bar is a hard rgba(255,255,255,.92) white
      pill - a lit slab at the bottom of a dark page - and its idle #9ca3af
      labels measure 2.52:1 on that white pill, below the 4.5:1 floor for 11px
      semi-bold text. Give it a dark surface and split the idle colour per theme
      so both directions pass.

   4. CHAT LAUNCHER OVERLAPS THE BAR ON NOTCHED PHONES. Its 92px offset was
      measured against an inset-free bar; at a 34px inset the bar reaches 112px
      and the launcher (z-index 99990 vs 1000) covers the bottom-left "Pricing"
      target. Detail and fix in section 5, which is the only part of this layer
      outside the 991px block.

   Scope: sections 1-4 are inside `@media (max-width: 991px)`, which is exactly
   where .mobile-action-bar is `display: flex`; at >=992px it is `display: none`
   (line 10642), so desktop is provably untouched. Section 5 is inside
   `@media (max-width: 767px)`, matching the widget's own breakpoint. No
   !important is used or needed - each rule either repeats the selector it
   supersedes and wins on source order (this is the last layer in the file), or
   adds `body.iv-dark` / a `body ` prefix for strictly higher specificity. None
   of the !important .mb-40/60/80 utilities apply to any selector used here.

   NOT CHANGED, reported instead:
   (a) The bar still has NO one-tap CALL target. A `tel:` link cannot be created
       in CSS, and the only `tel:+19377497579` anchor present on all 28 pages
       sits inside `.footer-meta`; fixing that anchor to the viewport bottom
       would strip the phone number out of the footer. Adding "Call" is one entry
       in the ITEMS array of iv-mobile-nav.js - not this agent's file.
   (b) The bar auto-hides while scrolling DOWN (.mab-hidden, toggled by that same
       script), so it is not literally permanent. That is a deliberate, commented
       design decision and is left alone.
   ========================================================================== */
@media (max-width: 991px) {

  /* 1. Back-to-top out of the bar's box. 90px + inset puts its lower edge 12px
        above the bar's top edge (12 + inset + 66 = 78 + inset), and z-index 999
        drops it one layer below the bar (1000) so any residual overlap resolves
        in the bar's favour rather than stealing the Contact tap. Same `#goTop`
        selector as line 8336, later in the file, so it wins on source order.
        The chat launcher is on the left (left: 18px); this is on the right
        (right: 20px) - they cannot meet. */
  #goTop {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
  }

  /* 2. Footer clearance that tracks the home-indicator inset. Same `footer`
        element selector as line 10744, later = wins; keeps the existing 26px of
        visible breathing room on a device that reports no inset. */
  footer {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  /* 3. THEME, expressed as INHERITED CUSTOM PROPERTIES on the bar rather than a
        parallel set of `body.iv-dark <descendant>` colour rules. Two reasons:

        - theme-toggle.js flips `body.iv-dark` at RUNTIME (classList.toggle, no
          reload), so every value here has to survive a live flip. One token
          block per theme means the light and dark bars can never drift apart or
          half-flip: there is exactly one place each colour is decided.
        - it avoids `body:not(.iv-dark) …`, which would otherwise be needed to
          keep the light idle colour off the ACTIVE item, and which raises
          specificity in a way that quietly beats the base `.mab-item.active`
          rule. Tokens keep every consumer at the same specificity as the rule
          it supersedes, so the cascade stays a plain source-order decision.

        Values: light idle #6b7280 = 4.80:1 on the white pill (the shipped
        #9ca3af was 2.52:1, a WCAG fail on 11px semi-bold text); dark idle
        #9ca3af = 6.23:1 on the dark pill; both actives are >=14.8:1. The frosted
        blur and the notch mask that scoops out the centre circle are NOT
        repeated - they are inherited from lines 10678-10696, so the silhouette
        is untouched and only colour moves. Measured on a fresh load of both
        themes at 390px: see the verification note in the task result. */
  .mobile-action-bar {
    --mab-idle: #6b7280;
    --mab-active: #18181b;
    --mab-surface: rgba(255, 255, 255, 0.92);
    --mab-surface-solid: #ffffff;
    --mab-hairline: rgba(0, 0, 0, 0.06);
    --mab-shadow: 0 14px 40px rgba(15, 15, 18, 0.16), 0 2px 6px rgba(15, 15, 18, 0.08);
    --mab-grabber: rgba(24, 24, 27, 0.14);
    --mab-home-bg: #18181b;
    --mab-home-ring: transparent;
    --mab-home-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
  }
  body.iv-dark .mobile-action-bar {
    --mab-idle: #9ca3af;
    --mab-active: var(--iv-text, #F7F8FA);
    --mab-surface: rgba(30, 36, 44, 0.88);
    --mab-surface-solid: #1E242C;
    --mab-hairline: var(--iv-line-2, rgba(255, 255, 255, 0.14));
    --mab-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --mab-grabber: rgba(255, 255, 255, 0.18);
    /* the shipped #18181b centre circle is almost the same value as the dark
       pill, so it stops reading as a raised object - deepen it and ring it.
       The RING is what delineates the control, so it has to carry the contrast:
       measured, #0E1116 on the #1E242C pill is only 1.21:1, and a 0.22 white
       ring composites to #434549 = 1.63:1, still under the 3:1 WCAG 1.4.11
       floor for a UI component boundary. 0.45 composites to #7A7C7F = 3.73:1
       against the pill and 4.52:1 against the circle, so the boundary is real
       in both directions. */
    --mab-home-bg: #0E1116;
    --mab-home-ring: rgba(255, 255, 255, 0.45);
    --mab-home-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  }

  /* Consumers. Every selector below is a byte-for-byte copy of the rule it
     supersedes (lines 10678, 10690, 10693, 10697, 10722, 10724, 10731), so each
     is an exact specificity tie decided by source order - and this is the last
     layer in the file. */
  .mobile-action-bar::before {
    background: var(--mab-surface);
    border: 1px solid var(--mab-hairline);
    box-shadow: var(--mab-shadow);
  }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .mobile-action-bar::before {
      background: var(--mab-surface-solid);
    }
  }
  .mobile-action-bar::after {
    background: var(--mab-grabber);
  }
  .mobile-action-bar .mab-item {
    color: var(--mab-idle);
  }
  .mobile-action-bar .mab-item.active {
    color: var(--mab-active);
  }
  .mobile-action-bar .mab-item.active .mab-label {
    color: var(--mab-active);
  }
  /* The `.mab-item.mab-home` compound is kept so the size/transform on line
     10731 is not disturbed. `--mab-home-ring` is transparent in light mode, and
     the template is border-box, so the light circle is pixel-identical. */
  .mobile-action-bar .mab-item.mab-home .mab-ico {
    background: var(--mab-home-bg);
    border: 1px solid var(--mab-home-ring);
    box-shadow: var(--mab-home-shadow);
  }
  /* Untouched on purpose: `.mab-item.active .mab-ico` (brand orange) and
     `.mab-book:not(.active) .mab-ico` (brand orange) both out-specify the
     inherited item colour, so the accent icons keep working in both themes. */

  /* 4. Tap-target floor. The bar's content box is 66px - 8px bottom padding =
        58px and .mab-item is height:100%, so targets are already 58px tall and
        >=47px wide at a 280px viewport. This states the 44px floor explicitly so
        a future height change cannot silently drop under it. Height only - the
        base rule's `min-width: 0` is load-bearing for the label's ellipsis. */
  .mobile-action-bar .mab-item {
    min-height: 44px;
  }
}

/* 5. CHAT LAUNCHER vs THE BAR, on notched devices only.
      book-widget.js injects `@media (max-width:767px){.ivbw-btn{bottom:92px}}`,
      which was measured against a bar sitting at a flat 12..78px - a clean 14px
      gap. But the bar's real offset is `12px + env(safe-area-inset-bottom)`, so
      on a 34px-inset iPhone the bar tops out at 112px while the launcher still
      starts at 92px: a 20px vertical overlap in the bottom-LEFT corner, over the
      "Pricing" tab, and the launcher wins because its z-index is 99990 against
      the bar's 1000. Give the launcher the same inset so the 14px gap is
      constant on every device.

      That stylesheet is created at runtime with `document.head.appendChild`, so
      it lands AFTER this file's <link> and beats an equal-specificity selector
      on source order. `body .ivbw-btn` (0,1,1) out-specifies its `.ivbw-btn`
      (0,1,0), which is why the `body ` prefix is load-bearing and not noise.

      The teaser and the panel are shifted by the SAME amount, not because they
      touch the bar (they do not - 186px and 184px versus a 128px bar top even at
      a 50px inset) but because the widget's own internal spacing is measured off
      the launcher: 34px from launcher top to teaser, 32px to the panel. Moving
      only the launcher would eat that gap and, past a 34px inset, push the
      launcher up through its own teaser. The panel's height loses the inset too,
      so a taller launcher stack cannot push the panel off the top of a short
      phone (360x640: 638px -> 610px of used height, headroom 2px -> 30px). */
@media (max-width: 767px) {
  body .ivbw-btn {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  body .ivbw-tease {
    bottom: calc(186px + env(safe-area-inset-bottom, 0px));
  }
  body .ivbw-panel {
    bottom: calc(184px + env(safe-area-inset-bottom, 0px));
    height: min(420px, calc(100vh - 214px - env(safe-area-inset-bottom, 0px)));
  }
}
/* end MOBILE BOTTOM-BAR HARDENING */

/* ============================================================================
   PHONE HERO CLEARANCE (append-only, 2026-07-25) — from real device
   screenshots: at first paint the fixed bottom action bar (always visible near
   the top of the page, see the TOP_GUARD in iv-mobile-nav.js) sat directly on
   the home hero's "Book a call" CTA, and the chat launcher covered the primary
   CTA's left edge (launcher fix lives in book-widget.js — hidden while the
   hero owns the screen). Here: give the phone hero enough bottom padding that
   its last elements (secondary CTA + trust line) end ABOVE the bar's band
   (66px bar + 12px offset + safe-area inset). The hero is min-height:100svh,
   so extra padding lifts the content — nothing is cropped or scaled.
   Phones only; the bar is display:none at >=992px and tablets (768–991) place
   the CTAs higher already.
   ========================================================================== */
@media (max-width: 767px) {
  .section-hero .content-wrap.hero-copy {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}
/* ===================== end phone hero clearance =========================== */

/* ============================================================================
   HERO PHOTO OVERHANG (append-only, 2026-07-25)

   The trust pills (Trusted since 2017 / Kettering, Ohio / Secure & encrypted /
   AI-safety first) were sliding UNDER the hero photograph on phones. Not a
   z-index fight and not a margin problem — the photo was genuinely taller than
   its own section:

     base rule   .section-hero:not(.v1):not(.v2) .hero-image { inset: 16px 16px 0 }
     phone layer .section-hero .hero-image { height: 100%; min-height: 100% }

   With `top: 16px` AND `height: 100%` both set, CSS resolves top+height and
   IGNORES bottom, so the photo renders its full section height starting 16px
   down — overhanging the section bottom by exactly 16px and landing on the
   first row of pills below. Measured on a 375x812 viewport: section bottom
   881px, photo bottom 897px.

   Fix: let the inset box drive the height on phones (top: 16px + bottom: 0),
   so the photo ends exactly where its section ends. min-height must be reset
   too or it re-imposes the same overhang. The photo still covers the whole
   hero — nothing is cropped, the URL-bar stability the phone layer was added
   for is untouched (the SECTION keeps min-height: 100svh).
   ========================================================================== */
@media (max-width: 991px) {
  .section-hero .hero-image,
  .section-hero .hero-image .hero-slide {
    height: auto;
    min-height: 0;
    bottom: 0;
  }
}
/* ====================== end hero photo overhang =========================== */