@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: #71717A;
  --brand: #FD3A25;
  --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: #EDECEC;
}

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

[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 ---------- */
/* Scoped 09-Sep-2026, for the same reason as the `*` reset above.

   This 81-selector reset is unlayered, and unlayered CSS beats layered CSS of
   the same origin regardless of specificity. Tailwind v4 emits every utility
   into a `utilities` layer, so inside a forked live page this rule was winning
   against `pt-32`, `mt-6` and `p-8` -- all of which computed to 0px -- and
   against the font utilities too, since it also sets `font: inherit` and
   `font-size: 100%`.

   Excluding .v2-live-content leaves the template's own markup reset exactly as
   before and lets a forked page render with the spacing and type it has on
   cartgaze.com. */
html:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
body:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
div:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
span:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
applet:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
object:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
iframe:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
p:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
blockquote:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
pre:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
a:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
abbr:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
acronym:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
address:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
big:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
cite:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
code:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
del:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
dfn:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
em:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
img:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
ins:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
kbd:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
q:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
s:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
samp:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
small:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
strike:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
strong:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
sub:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
sup:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
tt:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
var:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
b:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
u:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
i:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
center:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
dl:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
dt:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
dd:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
ol:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
ul:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
li:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
fieldset:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
label:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
legend:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
table:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
caption:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
tbody:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
tfoot:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
thead:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
tr:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
th:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
td:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
article:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
aside:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
canvas:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
details:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
embed:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
figure:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
figcaption:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
footer:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
header:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
hgroup:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
menu:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
nav:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
output:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
ruby:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
section:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
summary:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
time:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
mark:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
audio:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
video:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *)
{
  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;
}/* `display` scoped away from forked live content: these bare-element rules are
   unlayered and were beating Tailwind's own `flex`/`inline-flex` utilities, which
   stacked the breadcrumb on /industries/* and butted the DRAFT badge against the
   category label on /blog. Split so only `display` is scoped. */
article:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
aside:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
details:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
figcaption:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
figure:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
footer:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
header:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
hgroup:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
menu:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
nav:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
section:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  display: block;
}

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

/* Scoped on 09-Sep-2026, and the scoping is the point.

   This reset is unlayered. Tailwind v4 puts every utility in a `utilities`
   cascade layer, and unlayered CSS beats layered CSS of the same origin whatever
   the specificity -- so on any page in the port that renders a forked live
   component, `pt-32` computed to 0px, `mt-6` to 0px and `p-8` to 0px. Measured:
   336 of 367 matched elements rendered with different spacing than the same
   markup on cartgaze.com, and the h1 on /services sat 44px underneath the header.

   :where() is what keeps this safe: it contributes zero specificity, so the
   rule stays exactly as strong as the bare `*` it replaces. A plain :not() chain
   would have lifted it to (0,2,0) and started beating the template's own header
   and card rules -- which it did, visibly, on the first attempt.

   Excluding .v2-live-content lets those subtrees fall back to Tailwind's own
   preflight, which zeroes the same margins in its base layer, so the live pages
   render as they do live. Template markup keeps the reset unchanged. */
*:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
  list-style: none;
}

/* spacing half scoped away from forked live content -- see the reset note above */
ul:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
li:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  margin-bottom: 0;
  padding-left: 0;
}

table {
  width: 100%;
  overflow-x: auto;
  table-layout: auto;
  border-collapse: collapse;
}/* spacing half scoped away from forked live content -- see the reset note above */
td:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
th:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  padding: 12px 16px;
}
@media (min-width: 1200px) {/* spacing half scoped away from forked live content -- see the reset note above */
td:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
th:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
  -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;
}

/* `display` scoped away from forked live content: these bare-element rules are
   unlayered and were beating Tailwind's own `flex`/`inline-flex` utilities, which
   stacked the breadcrumb on /industries/* and butted the DRAFT badge against the
   category label on /blog. Split so only `display` is scoped. */
button:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  display: inline-flex;
}select,
option {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* spacing half scoped away from forked live content -- see the reset note above */
select:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
option:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  padding: 0;
  margin: 0;
}

/* 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;
  font-family: "Urbanist", sans-serif;
  color: var(--primary);
}

/* `display` scoped away from forked live content: these bare-element rules are
   unlayered and were beating Tailwind's own `flex`/`inline-flex` utilities, which
   stacked the breadcrumb on /industries/* and butted the DRAFT badge against the
   category label on /blog. Split so only `display` is scoped. */
a:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  display: inline-block;
}
a:focus, a:hover {
  outline: 0;
}/* `display` scoped away from forked live content: these bare-element rules are
   unlayered and were beating Tailwind's own `flex`/`inline-flex` utilities, which
   stacked the breadcrumb on /industries/* and butted the DRAFT badge against the
   category label on /blog. Split so only `display` is scoped. */
p:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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) {/* `display` scoped away from forked live content: these bare-element rules are
   unlayered and were beating Tailwind's own `flex`/`inline-flex` utilities, which
   stacked the breadcrumb on /industries/* and butted the DRAFT badge against the
   category label on /blog. Split so only `display` is scoped. */
br:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.h-8:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
  margin-bottom: 0;
  color: var(--black);
}

/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-weight: 400;
  letter-spacing: 0;
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h1:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 36px;
  line-height: 44px;
}
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.02em;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 32px;
  line-height: 40px;
}
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h3:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 28px;
  line-height: 36px;
}
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 26px;
  line-height: 34px;
}
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h5:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 22px;
  line-height: 28px;
}
}/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  font-size: 24px;
  line-height: 32px;
}
@media (max-width: 767px) {/* Type scale scoped 09-Sep-2026, and only the scale.
   The template's headings are 64/48/40px. Applied to a forked live page they
   were set on components sized for the live scale, and a 48px h2 does not fit a
   219px card: measured at 768px, /compare overflowed the viewport by 43px and
   11 elements overflowed their own box, against 0 on cartgaze.com. Same on
   /pricing, /ai-receptionist and the specialty pages.
   font-family and colour stay unscoped, so a forked page still reads in the
   template's typeface -- it just keeps the sizes its own layout was built for. */
h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
.h6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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 */
/* Scoped 09-Sep-2026: template utility name collides with a Tailwind one. */
.mb-2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  margin-bottom: 2px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.mb-4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.py-20:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  padding-top: 20px;
  padding-bottom: 20px;
}/* Gap */
/* Scoped 09-Sep-2026: template utility name collides with a Tailwind one. */
.gap-2:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 2px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-4:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 4px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-6:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 6px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-8:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 8px;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-10:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 10px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-12:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  gap: 12px !important;
}

.gap-13 {
  gap: 13px !important;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-14:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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 */
/* Scoped 09-Sep-2026: template utility name collides with a Tailwind one. */
.text-white:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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%;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.gap-x-10:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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);
  }
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.row:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  margin-right: -12px;
  margin-left: -12px;
}
.row > * {
  padding-left: 12px;
  padding-right: 12px;
}/* Scoped 09-Sep-2026. The template and Bootstrap define their own utilities under
   names Tailwind also generates, in px rather than rem and with !important, so
   inside a forked live page `gap-2` meant 2px instead of 8px and `py-20` meant
   20px instead of 112px. Only the live subtree is excluded; template markup
   keeps every one of these. */
.container:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
  background: rgba(255, 255, 255, 0.5019607843);
  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 {
  pointer-events: all;
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}
.menu-item:hover.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;
  }
}
.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;
}/* Scoped 09-Sep-2026: this styles the template's own contact form, and unlayered
   it was also reaching the live forms inside a forked page, flattening their
   px-4 py-3 padding to `0 0 11px` and stripping the border. */
form textarea:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=text]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=password]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=datetime]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=datetime-local]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=date]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=month]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=time]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=week]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=number]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=email]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=url]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=search]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=tel]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=color]:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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;
}/* Scoped 09-Sep-2026: this styles the template's own contact form, and unlayered
   it was also reaching the live forms inside a forked page, flattening their
   px-4 py-3 padding to `0 0 11px` and stripping the border. */
form textarea::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=text]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=password]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=datetime]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=datetime-local]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=date]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=month]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=time]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=week]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=number]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=email]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=url]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=search]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=tel]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *),
form input[type=color]::placeholder:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  color: var(--secondary);
}
form button,
form input[type=button],
form input[type=reset],
form input[type=submit] {
  background-color: transparent;
  overflow: hidden;
  padding: 0;
}/* Scoped 09-Sep-2026: this styles the template's own contact form, and unlayered
   it was also reaching the live forms inside a forked page, flattening their
   px-4 py-3 padding to `0 0 11px` and stripping the border. */
form textarea:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  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%;
  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;
}

/* spacing half scoped away from forked live content -- see the reset note above */
select:where(:not(.v2-live-content, .v2-live-content *), .v2-template-island, .v2-template-island *) {
  padding: 0;
  padding-bottom: 16px;
  padding-left: 16px;
}
select option {
  background-color: var(--black);
  padding-left: 10px;
}

.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;
  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 path {
  fill: 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, #EA2B16 0%, #FF3B26 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 .scroll-more {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  width: 320px;
  height: 56px;
  background-color: #EDECEC;
  border-radius: 40px 40px 0 0;
}
.section-hero .scroll-more .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 32px;
  border-radius: 99px;
  border: 1px solid var(--neutral-300);
  color: var(--brand);
  font-size: 16px;
}
.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: 80px 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: 28px;
  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: 48px 40px 34px;
  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: 52px;
}
.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: 144px;
  line-height: 144px;
  letter-spacing: -0.03em;
  margin-bottom: -16px;
  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: 40px 16px 28px 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;
}
.section-about-us .box-quotes .image {
  display: flex;
  width: 160px;
  height: 250px;
  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: 29px;
}
.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, #EA2B16 0%, #FF3B26 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 #FD3A25;
  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: #FD3A25;
}
.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;
}
.benefits-box.benefits-secure img {
  transform: rotateY(0deg);
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.benefits-box.benefits-secure:hover img {
  transform: rotateY(180deg);
}
@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);
  }
}

.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;
  width: 208px;
  height: 160px;
  border-radius: 32px;
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%), 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 rgba(0, 0, 0, 0.0588235294) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.6) inset, 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);
}

.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: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.team-item.style-1 .top .image {
  width: 126px;
  height: 126px;
  margin-bottom: 0;
}
.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, #EA2B16 0%, #FF3B26 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;
  }
}

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