/*! Generated by purge-css.mjs from style.css -- do not edit.
    Inner-page subset: rules not reachable from any live page other than the homepage are dropped.
    Re-run `node purge-css.mjs` from aiero-template/aiero/ after changing page
    markup or style.css, and bump the ?v= cache keys on the pages that link it. */
@charset "UTF-8";
/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

/*=====================
    All Extend Here
=======================*/
/*----------------------
    Bg Image  
------------------------*/
/**
 * Reset Styels
 */
* {
  box-sizing: border-box;
}

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

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  outline: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
}

address {
  margin: 0 0 24px;
}

b,
strong {
  font-weight: bold;
}

mark {
  background: var(--color-primary);
  color: #ffffff;
}

code,
pre {
  font-size: var(--font-size-b3);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  color: var(--color-primary);
}

pre {
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: var(--font-size-b3);
  margin: 10px 0;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--color-body);
  background: var(--color-lighter);
}

small {
  font-size: smaller;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

dl {
  margin-top: 0;
  margin-bottom: 10px;
}

dd {
  margin: 0 15px 15px;
}

dt {
  font-weight: bold;
  color: var(--color-heading);
}

menu,
ol,
ul {
  margin: 16px 0;
  padding: 0 0 0 40px;
}

nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

li > ul,
li > ol {
  margin: 0;
}

ol ul {
  margin-bottom: 0;
}

img {
  -ms-interpolation-mode: bicubic;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  max-width: 100%;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  padding-right: 2px;
  width: 270px;
}

input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}


th,
td {
  font-weight: normal;
}

th {
  font-weight: 500;
}

td {
  border: 1px solid var(--color-border);
  padding: 7px 10px;
}

hr {
  background-size: 4px 4px;
  border: 0;
  height: 1px;
  margin: 0 0 24px;
}

table a,
table a:link,
table a:visited {
  text-decoration: underline;
}

dt {
  font-weight: bold;
  margin-bottom: 10px;
}

dd {
  margin: 0 15px 15px;
}


cite,
em {
  font-style: italic;
}

/* BlockQuote  */
blockquote,
q {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

blockquote {
  font-size: var(--font-size-b1);
  font-style: italic;
  font-weight: var(--f-light);
  margin: 24px 40px;
}

blockquote cite,
blockquote small {
  font-size: var(--font-size-b3);
  font-weight: normal;
}

blockquote strong,
blockquote b {
  font-weight: 700;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--color-heading);
  -webkit-transition: var(--transition-1);
  transition: var(--transition-1);
}

.container {
  max-width: 1340px;
  margin: 0 auto;
}

.container2 {
  max-width: 1895px;
  padding: 0 15px;
  margin: 0 auto;
}

.container3 {
  max-width: 1545px;
  padding: 0 15px;
  margin: 0 auto;
}

.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-animation: slideDown 0.4s ease;
          animation: slideDown 0.4s ease;
}

@-webkit-keyframes slideDown {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}
.lg-next::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105" !important;
}

.lg-prev:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f104" !important;
}

.lg-toolbar .lg-download:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f019" !important;
  font-size: 18px;
}

.lg-toolbar .lg-close:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00d" !important;
  font-size: 18px;
}

.lg-icon.lg-zoom-in:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00e" !important;
  font-size: 18px;
}

/* Zoom out button */
.lg-icon.lg-zoom-out:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f010" !important;
  font-size: 18px;
}

/*-- Variables --*/
:root {
  --color-primary: #45d0bd;
  --color-secondary: #ef6464;
  --color-secondary-alt: #f57e7e;
  --color-content-white: #ffffff;
  --color-content-black: #000000;
  --color-content-black2: #333333;
  --color-heading: #111111;
  --color-surface-white: #ffffff;
  --color-surface-black: #000000;
  --color-surface-dark: #111111;
  --color-surface-dark-2: #1f1f1f;
  --color-surface-light: #f0f2f4;
  --color-surface-light-1: #ecf0f4;
  --color-surface-light-3: #f5f5f5;
  --color-body: #333333;
  --gradient-1: linear-gradient(159deg, #a2f5ff 2.13%, #ea84c2 95.42%);
  --gradient-3: linear-gradient(113deg, #45d0bd 2.7%, #44b6e9 98.55%);
  --gradient-btn-1: linear-gradient(102deg, #8258c8 0.77%, #6766c8 32.11%, #2c84c8 100.27%);
  --border-width: 2px;
  --border-width-1: 1px;
  --color-border: #d9d9d9;
  --radius-full: 100%;
  --radius-5xl: 50px;
  --radius-4xl: 40px;
  --radius-3xl: 30px;
  --radius-xxl: 25px;
  --radius-xl: 20px;
  --radius-lg: 15px;
  --radius-md: 10px;
  --radius-sm: 5px;
  --f-light: 300;
  --f-regular: 400;
  --f-medium: 500;
  --f-semibold: 600;
  --f-bold: 700;
  --f-extrabold: 800;
  --f-black: 900;
  --transition: 0.2s;
  --transition-1: all 0.3s;
  --transition-2: 256ms ease-in-out;
  --transition-3:
    transform 0.85s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  --transition-4: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-5: all 0.5s ease-in-out;
  --transition-6: all 0.3s linear;
  --font-primary: "Sora", Arial, Helvetica, sans-serif;
  --font-secondary: "Manrope", Arial, Helvetica, sans-serif;
  --font-tertiary: "Manrope Alt", Sans-serif;
  --font-size-b1: 20px;
  --font-size-b2: 16px;
  --font-size-b3: 14px;
  --letter-spacing-b1: normal;
  --letter-spacing-b2: normal;
  --letter-spacing-b3: normal;
  --h1: 80px;
  --h2: 60px;
  --h3: 40px;
  --h4: 25px;
  --h5: 20px;
  --h6: 18px;
  --line-height-b1: 1.75;
  --line-height-b2: 1.875;
  --line-height-b3: 1.714;
  --line-height-h1: 1.175;
  --line-height-h2: 1.17;
  --line-height-h3: 1.175;
  --line-height-h4: 1.16;
  --line-height-h5: 1.15;
  --line-height-h6: 1.17;
  --letter-spacing-h1: -4px;
  --letter-spacing-h2: -3px;
  --letter-spacing-h3: -2px;
  --letter-spacing-h4: -1.25px;
  --letter-spacing-h5: normal;
  --letter-spacing-h6: normal;
  --letter-spacing-normal: normal;
  --text-shadow-1: 1px 2px 1px rgba(12, 4, 66, 0.3);
  --text-shadow-2: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/*---------------------------------------------
                  Utilities
----------------------------------------------*/
@media only screen and (max-width: 767px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}
/*-------------------------------------------------------
                    Height and width 
--------------------------------------------------------*/

/*---------------------------------------------------------
                        Custom Row
----------------------------------------------------------*/

/*--------------------------------------------
        Input Placeholder
--------------------------------------------*/
input:-moz-placeholder,
textarea:-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/*----------------------------------------------
        text & bg-color class generate
------------------------------------------------*/

/*----------------------------------------------
        border color class generate
------------------------------------------------*/

/*----------------------------------------------
        gradient-colors
------------------------------------------------*/

/*---------------------------------------------
        font weight class generate
----------------------------------------------*/

/*---------------------------------------
        gap class generate
-----------------------------------------*/

/*-----------------------------------------
        margin decrease class generate
------------------------------------------*/

/*-----------------------------
    ibt Border Radius  
-------------------------------*/

.row.end {
  -webkit-box-align: end;
  -webkit-align-items: end;
      -ms-flex-align: end;
          align-items: end;
}

#scrollBtn {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 70px;
  font-size: 13px;
  text-align: center;
  line-height: 70px;
  z-index: 100;
  border: none;
  outline: none;
  background-color: var(--color-primary);
  color: var(--color-heading);
  cursor: pointer;
  border-radius: 15px;
  z-index: 9999999;
}
#scrollBtn i {
  -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
          transform: translateY(-8px);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

#scrollBtn:hover i {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/* Preloader overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-content-white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 99999999;
}
#preloader img {
  width: 70px;
  height: auto;
  -webkit-animation: scalePulse 1.5s infinite ease-in-out;
          animation: scalePulse 1.5s infinite ease-in-out;
  -webkit-filter: brightness(0);
          filter: brightness(0);
}

@-webkit-keyframes scalePulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes scalePulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
.video-popup {
  position: absolute;
  bottom: 22px;
  right: 73px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-content-black2);
  font-weight: 600;
  cursor: pointer;
}
.video-popup:hover {
  color: var(--color-content-black2);
}
.video-popup:hover i {
  background-color: #adadad;
}
.video-popup:hover i::after {
  border-color: transparent;
}
.video-popup i {
  position: relative;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.video-popup i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 54%, calc(100% - 1px) 54%, 25% 100%, calc(25% - 0.5px) 100%, 0 100%, 0 0);
          clip-path: polygon(0 0, 100% 0, 100% 54%, calc(100% - 1px) 54%, 25% 100%, calc(25% - 0.5px) 100%, 0 100%, 0 0);
  border-radius: inherit;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
  border-color: #adadad;
}

.video-modal {
  display: none;
  opacity: 0;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  z-index: 9999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.video-modal.show {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}
.video-modal .video-modal-content {
  position: relative;
  width: 1675px;
  height: 800px;
}
@media (max-width: 1440px) {
  .video-modal .video-modal-content {
    width: 100%;
    height: 100%;
    padding: 100px;
  }
}
@media (max-width: 577px) {
  .video-modal .video-modal-content {
    padding: 50px;
    height: 600px;
  }
}
@media (max-width: 390px) {
  .video-modal .video-modal-content {
    height: 500px;
  }
}
.video-modal .video-modal-content iframe,
.video-modal .video-modal-content video {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Letterbox rather than crop: the modal panel is a fixed 1675x800, and the
   file is 16:9, so object-fit: cover would slice the top and bottom off. */
.video-modal .video-modal-content video {
  background-color: #000;
  object-fit: contain;
}
.video-modal .video-modal-content .close-btn {
  position: absolute;
  top: -70px;
  right: -98px;
  font-size: 35px;
  color: white;
  cursor: pointer;
  z-index: 99999999;
}
@media (max-width: 1440px) {
  .video-modal .video-modal-content .close-btn {
    top: 8px;
    right: 20px;
  }
}

.pagination {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 70px;
}
@media (max-width: 577px) {
  .pagination {
    margin-top: 56px;
  }
}

.wrapper {
  overflow: hidden;
}

.lg-outer {
  z-index: 9999999999 !important;
}

.lg-backdrop {
  z-index: 99999999999 !important;
  background: rgba(0, 0, 0, 0.7) !important;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/*=========================
    Section Separation 
==========================*/
.ibt-section-gap {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ibt-section-gap {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ibt-section-gap {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .ibt-section-gap {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.ibt-section-gapTop {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ibt-section-gapTop {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ibt-section-gapTop {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .ibt-section-gapTop {
    padding-top: 80px;
  }
}
/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/**
 * Typography
 */
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-secondary);
  color: var(--color-body);
  font-weight: 400;
  scroll-behavior: smooth;
  position: relative;
  overflow-y: scroll;
  scrollbar-width: thin;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
address,
p,
pre,
blockquote,
menu,
ol,
ul,
table,
hr {
  margin: 0;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  address,
  p,
  pre,
  blockquote,
  menu,
  ol,
  ul,
  table,
  hr {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  address,
  p,
  pre,
  blockquote,
  menu,
  ol,
  ul,
  table,
  hr {
    margin-bottom: 12px;
  }
}

body ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
body a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  word-break: break-word;
  font-family: var(--font-primary);
  line-height: 1.4;
  color: var(--color-heading);
}

h1,
.h1 {
  font-size: var(--h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2,
.h2 {
  font-size: var(--h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-normal);
}

h3,
.h3 {
  font-size: var(--h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

h4,
.h4 {
  font-size: var(--h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

h5,
.h5 {
  font-size: var(--h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
}

h6,
.h6 {
  font-size: var(--h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a {
  color: inherit;
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  h1,
  .h1 {
    font-size: var(--h2);
  }
  h2,
  .h2 {
    font-size: var(--h3);
  }
  h3,
  .h3 {
    font-size: var(--h4);
  }
  h4,
  .h4 {
    font-size: var(--h5);
  }
  h5,
  .h5 {
    font-size: var(--h6);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  h1,
  .h1 {
    font-size: var(--h3);
  }
  h2,
  .h2 {
    font-size: var(--h4);
  }
  h3,
  .h3 {
    font-size: var(--h5);
  }
  h4,
  .h4 {
    font-size: var(--h6);
  }
  h5,
  .h5,
  h6,
  .h6 {
    font-size: var(--font-size-b1);
  }
}
@media only screen and (max-width: 767px) {
  h1,
  .h1 {
    font-size: var(--h3);
  }
  h2,
  .h2 {
    font-size: var(--h4);
  }
  h3,
  .h3 {
    font-size: var(--h5);
  }
  h4,
  .h4 {
    font-size: var(--h6);
  }
  h5,
  .h5 {
    font-size: var(--font-size-b1);
  }
  h6,
  .h6 {
    font-size: var(--font-size-b2);
  }
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-weight: var(--f-semibold);
}

h4,
.h4,
h5,
.h5 {
  font-weight: var(--f-semibold);
}

h6,
.h6 {
  font-weight: var(--f-semibold);
}

p {
  font-size: var(--font-size-b2);
  font-family: var(--font-secondary);
  line-height: 1.7;
  margin-bottom: 30px;
  font-weight: var(--f-regular);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  p {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  p {
    font-size: 16px;
  }
}
p:last-child {
  margin-bottom: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 20px;
  width: 100%;
}

table a,
table a:link,
table a:visited {
  text-decoration: none;
}

cite {
  color: var(--heading-color);
}

/*---------------------------
      List Style 
---------------------------*/
ul,
ol {
  padding-left: 18px;
}

li {
  position: relative;
}

li::marker {
  color: var(--color-body);
}

ul {
  list-style: disc;
  margin-bottom: 30px;
  padding-left: 20px;
}
ul li {
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--color-body);
}
ul li a {
  text-decoration: none;
}
ul li a:hover {
  color: var(--color-primary);
}
ul ul {
  margin-bottom: 0;
}

ol {
  margin-bottom: 30px;
}
ol li {
  color: var(--color-body);
  margin-top: 10px;
  margin-bottom: 10px;
}
ol li a {
  color: var(--heading-color);
  text-decoration: none;
}
ol li a:hover {
  color: var(--color-primary);
}
ol ul {
  padding-left: 30px;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/* ========= Forms Styles ========= */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

input,
select,
textarea {
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

input {
  height: 40px;
  padding: 0 15px;
}

select {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  height: 50px;
  display: inline-block;
  width: 100%;
  line-height: 135%;
  padding: 10px 20px;
  outline: none;
  color: var(--color-gray-6);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--f-regular);
  padding-right: 30px;
}
select:focus {
  border-color: var(--color-primary) !important;
}
select {
  /* -- Remove Autofill Background -- */
}
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active {
  box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: var(--color-body) !important;
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=date],
textarea {
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: var(--f-regular);
  height: 50px;
  line-height: 1.75;
  background: transparent;
  box-shadow: none;
  padding: 0 15px;
  outline: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-body);
  /* -- Placeholder -- */
}
input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=date]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=date]::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=date]:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=date]::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
textarea::placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder,
input[type=number]::-ms-input-placeholder,
input[type=tel]::-ms-input-placeholder,
input[type=date]::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: var(--color-body);
  opacity: 1;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
}
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=tel],
input[type=date],
textarea {
  /* -- Remove Autofill Background -- */
}
input[type=text]:-webkit-autofill, input[type=text]:-webkit-autofill:hover, input[type=text]:-webkit-autofill:focus, input[type=text]:-webkit-autofill:active,
input[type=password]:-webkit-autofill,
input[type=password]:-webkit-autofill:hover,
input[type=password]:-webkit-autofill:focus,
input[type=password]:-webkit-autofill:active,
input[type=email]:-webkit-autofill,
input[type=email]:-webkit-autofill:hover,
input[type=email]:-webkit-autofill:focus,
input[type=email]:-webkit-autofill:active,
input[type=number]:-webkit-autofill,
input[type=number]:-webkit-autofill:hover,
input[type=number]:-webkit-autofill:focus,
input[type=number]:-webkit-autofill:active,
input[type=tel]:-webkit-autofill,
input[type=tel]:-webkit-autofill:hover,
input[type=tel]:-webkit-autofill:focus,
input[type=tel]:-webkit-autofill:active,
input[type=date]:-webkit-autofill,
input[type=date]:-webkit-autofill:hover,
input[type=date]:-webkit-autofill:focus,
input[type=date]:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: var(--color-body) !important;
}

input[type=submit] {
  width: auto;
  letter-spacing: 2px;
  padding: 15px 20px;
  border-radius: 6px;
  display: block;
  font-weight: 500;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: var(--border-width) solid var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  height: 60px;
  margin-top: 30px;
}
input[type=submit]:hover {
  color: #ffffff;
  box-shadow: 0 10px 15px 0 rgba(249, 0, 77, 0.1);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.sec-title {
  position: relative;
  margin-bottom: 45px;
  overflow: hidden;
}
.sec-title .sub-title {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-content-black2);
  margin-bottom: 5px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 8px;
}
.sec-title .sub-title::before {
  content: "[";
  position: absolute;
  top: 0;
  left: 0;
}
.sec-title .sub-title::after {
  content: "]";
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 1440px) {
  .sec-title .sub-title {
    margin-bottom: 15px;
  }
}
.sec-title .title {
  font-size: 55px;
  line-height: 60px;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: -0.05em;
  display: block;
}
@media (max-width: 1201px) {
  .sec-title .title {
    font-size: 45px;
    line-height: 50px;
  }
}
@media (max-width: 1025px) {
  .sec-title .title {
    font-size: 50px;
    line-height: 55px;
  }
}
@media (max-width: 769px) {
  .sec-title .title {
    font-size: 35px;
    line-height: 40px;
  }
}
@media (max-width: 577px) {
  .sec-title .title {
    font-size: 32px;
    line-height: 1.1em;
  }
}
.sec-title p {
  font-weight: 700;
  line-height: 30px;
  font-size: 16px;
  color: var(--color-content-black2);
  margin: 30px 0 0;
  letter-spacing: 0;
}

.sec-title.white .sub-title,
.sec-title.white .title,
.sec-title.white p,
.sec-title.white a {
  color: var(--color-content-white);
}

.title.animated-heading .word {
  display: inline-block;
  white-space: nowrap;
}

.title.animated-heading .letter {
  display: inline-block;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
#themeBtn {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 20px;
  font-size: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: #1a1a1a;
  color: var(--color-content-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border: 0;
  outline: none;
  display: inline-block;
  z-index: 99999;
  padding: 0;
}

.active-btn {
  background-color: var(--color-content-white) !important;
}
.active-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/icon/sun.svg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.active-btn i {
  opacity: 0;
  visibility: hidden;
}

.active-body .style-guide .ibt-btn.ibt-btn-outline-2,
.active-body .style-guide .ibt-btn.ibt-btn-outline-3 {
  color: #fff;
}
.active-body .style-guide blockquote {
  background-color: #333;
  color: #fff;
}
.active-body {
  background-color: var(--color-surface-dark-2);
}
.active-body p,
.active-body h1,
.active-body h2,
.active-body h3,
.active-body h4,
.active-body h5,
.active-body h6,
.active-body li {
  color: var(--color-content-white) !important;
}
.active-body #preloader {
  background-color: var(--color-surface-dark-2);
}
.active-body #preloader img {
  -webkit-filter: brightness(9) !important;
          filter: brightness(9) !important;
}
.active-body .sec-title span {
  color: var(--color-content-white);
}
.active-body .sec-title span::before, .active-body .sec-title span::after {
  color: var(--color-content-white);
}
.active-body ul li::before {
  background-color: var(--color-content-white);
}
.active-body .about-widget .title {
  color: transparent !important;
}
.active-body .sticky-active.is-sticky {
  background-color: #1a1a1a;
}
.active-body .sticky-active.is-sticky .header-menu-area,
.active-body .sticky-active.is-sticky .header-menu-area3 {
  background-color: unset;
}
.active-body .sticky-active.is-sticky a {
  color: var(--color-content-white);
}
.active-body .sticky-active.is-sticky .menu-style1 > ul > li > a {
  color: var(--color-content-white);
}
.active-body .sticky-active.is-sticky .menu-style1 > ul > li > a:hover {
  background-color: var(--color-surface-dark-2);
}
.active-body .sticky-active.is-sticky .menu-style1 > ul > li > a::before {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .sticky-active.is-sticky .menu-style1 > ul > li > .active {
  background-color: var(--color-surface-dark-2);
}
.active-body .sticky-active.is-sticky .menu-style1.v4 > ul > li > a:hover {
  background-color: var(--color-heading);
}
.active-body .sticky-active.is-sticky .header-logo a img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .sticky-active {
  background-color: #1a1a1a;
}
.active-body .sticky-active .header-menu-area {
  background-color: unset;
}
@media (max-width: 1201px) {
  .active-body .vs-header,
  .active-body .vs-header3,
  .active-body .vs-header4,
  .active-body .vs-header5,
  .active-body .vs-header6,
  .active-body .vs-header7,
  .active-body .vs-header12,
  .active-body .vs-header14,
  .active-body .vs-header15 {
    background-color: var(--color-surface-dark-2);
  }
}
.active-body .vs-header .header-menu-area,
.active-body .vs-header .header-menu-area3,
.active-body .vs-header3 .header-menu-area,
.active-body .vs-header3 .header-menu-area3,
.active-body .vs-header4 .header-menu-area,
.active-body .vs-header4 .header-menu-area3,
.active-body .vs-header5 .header-menu-area,
.active-body .vs-header5 .header-menu-area3,
.active-body .vs-header6 .header-menu-area,
.active-body .vs-header6 .header-menu-area3,
.active-body .vs-header7 .header-menu-area,
.active-body .vs-header7 .header-menu-area3,
.active-body .vs-header12 .header-menu-area,
.active-body .vs-header12 .header-menu-area3,
.active-body .vs-header14 .header-menu-area,
.active-body .vs-header14 .header-menu-area3,
.active-body .vs-header15 .header-menu-area,
.active-body .vs-header15 .header-menu-area3 {
  background-color: unset;
  border-color: #454545;
}
@media (max-width: 1201px) {
  .active-body .vs-header .header-menu-area,
  .active-body .vs-header .header-menu-area3,
  .active-body .vs-header3 .header-menu-area,
  .active-body .vs-header3 .header-menu-area3,
  .active-body .vs-header4 .header-menu-area,
  .active-body .vs-header4 .header-menu-area3,
  .active-body .vs-header5 .header-menu-area,
  .active-body .vs-header5 .header-menu-area3,
  .active-body .vs-header6 .header-menu-area,
  .active-body .vs-header6 .header-menu-area3,
  .active-body .vs-header7 .header-menu-area,
  .active-body .vs-header7 .header-menu-area3,
  .active-body .vs-header12 .header-menu-area,
  .active-body .vs-header12 .header-menu-area3,
  .active-body .vs-header14 .header-menu-area,
  .active-body .vs-header14 .header-menu-area3,
  .active-body .vs-header15 .header-menu-area,
  .active-body .vs-header15 .header-menu-area3 {
    background-color: unset;
  }
}
.active-body .vs-header .header-top-content4,
.active-body .vs-header3 .header-top-content4,
.active-body .vs-header4 .header-top-content4,
.active-body .vs-header5 .header-top-content4,
.active-body .vs-header6 .header-top-content4,
.active-body .vs-header7 .header-top-content4,
.active-body .vs-header12 .header-top-content4,
.active-body .vs-header14 .header-top-content4,
.active-body .vs-header15 .header-top-content4 {
  border-color: #454545;
}
.active-body .vs-header .header-logo img,
.active-body .vs-header3 .header-logo img,
.active-body .vs-header4 .header-logo img,
.active-body .vs-header5 .header-logo img,
.active-body .vs-header6 .header-logo img,
.active-body .vs-header7 .header-logo img,
.active-body .vs-header12 .header-logo img,
.active-body .vs-header14 .header-logo img,
.active-body .vs-header15 .header-logo img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .vs-header a,
.active-body .vs-header3 a,
.active-body .vs-header4 a,
.active-body .vs-header5 a,
.active-body .vs-header6 a,
.active-body .vs-header7 a,
.active-body .vs-header12 a,
.active-body .vs-header14 a,
.active-body .vs-header15 a {
  color: var(--color-content-white);
}
.active-body .vs-header .menu-style1 > ul > li > a,
.active-body .vs-header3 .menu-style1 > ul > li > a,
.active-body .vs-header4 .menu-style1 > ul > li > a,
.active-body .vs-header5 .menu-style1 > ul > li > a,
.active-body .vs-header6 .menu-style1 > ul > li > a,
.active-body .vs-header7 .menu-style1 > ul > li > a,
.active-body .vs-header12 .menu-style1 > ul > li > a,
.active-body .vs-header14 .menu-style1 > ul > li > a,
.active-body .vs-header15 .menu-style1 > ul > li > a {
  color: var(--color-content-white);
}
.active-body .vs-header .menu-style1 > ul > li > a:hover,
.active-body .vs-header3 .menu-style1 > ul > li > a:hover,
.active-body .vs-header4 .menu-style1 > ul > li > a:hover,
.active-body .vs-header5 .menu-style1 > ul > li > a:hover,
.active-body .vs-header6 .menu-style1 > ul > li > a:hover,
.active-body .vs-header7 .menu-style1 > ul > li > a:hover,
.active-body .vs-header12 .menu-style1 > ul > li > a:hover,
.active-body .vs-header14 .menu-style1 > ul > li > a:hover,
.active-body .vs-header15 .menu-style1 > ul > li > a:hover {
  background-color: var(--color-surface-dark-2);
}
.active-body .vs-header .menu-style1 > ul > li > a::before,
.active-body .vs-header3 .menu-style1 > ul > li > a::before,
.active-body .vs-header4 .menu-style1 > ul > li > a::before,
.active-body .vs-header5 .menu-style1 > ul > li > a::before,
.active-body .vs-header6 .menu-style1 > ul > li > a::before,
.active-body .vs-header7 .menu-style1 > ul > li > a::before,
.active-body .vs-header12 .menu-style1 > ul > li > a::before,
.active-body .vs-header14 .menu-style1 > ul > li > a::before,
.active-body .vs-header15 .menu-style1 > ul > li > a::before {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .vs-header .menu-style1 > ul > li > .active,
.active-body .vs-header3 .menu-style1 > ul > li > .active,
.active-body .vs-header4 .menu-style1 > ul > li > .active,
.active-body .vs-header5 .menu-style1 > ul > li > .active,
.active-body .vs-header6 .menu-style1 > ul > li > .active,
.active-body .vs-header7 .menu-style1 > ul > li > .active,
.active-body .vs-header12 .menu-style1 > ul > li > .active,
.active-body .vs-header14 .menu-style1 > ul > li > .active,
.active-body .vs-header15 .menu-style1 > ul > li > .active {
  background-color: var(--color-surface-dark-2);
}
.active-body .vs-header7 .header-menu-area,
.active-body .vs-header7 .header-menu-area3,
.active-body .vs-header14 .header-menu-area,
.active-body .vs-header14 .header-menu-area3 {
  border: 0;
}
.active-body .vs-header3 .menu-style1 > ul > li > a:hover,
.active-body .vs-header5 .menu-style1 > ul > li > a:hover {
  background-color: var(--color-content-black2);
}
.active-body .vs-header3 .menu-style1 > ul > li > .active,
.active-body .vs-header5 .menu-style1 > ul > li > .active {
  background-color: var(--color-content-black2);
}
.active-body .vs-header6 {
  background-color: #1a1a1a;
  border-radius: 14px;
}
@media (max-width: 1201px) {
  .active-body .vs-header6 {
    background-color: var(--color-surface-dark-2);
    border-radius: 0;
  }
}
@media (max-width: 1201px) {
  .active-body .vs-header9 {
    background-color: var(--color-surface-dark-2);
  }
}
.active-body .vs-header12 .menu-style1 > ul > li > a:hover {
  background-color: var(--color-content-black2);
}
.active-body .vs-header12 .menu-style1 > ul > li > .active {
  background-color: var(--color-content-black2);
}
.active-body .menu-style1.v4 > ul > li > a {
  border: 0;
}
.active-body .hero-style1,
.active-body .faq-sec,
.active-body .testi-slider,
.active-body .fun-fact-content.black,
.active-body .about-us-sec3,
.active-body .project-sec2,
.active-body .hero-sec-info3,
.active-body .hero-style6,
.active-body .main-sec4,
.active-body .main-sec3,
.active-body .ser-block16,
.active-body .blog-sec3,
.active-body .hero-style11,
.active-body .about-content7,
.active-body .project-sec5,
.active-body .service-sec15.v2,
.active-body .service-content4,
.active-body .project-sec,
.active-body .testimonial-sec2,
.active-body .service-sec7,
.active-body .Feature-sec6,
.active-body .faq-sec3,
.active-body .project-sec6,
.active-body .ser-content22,
.active-body .project-sec4,
.active-body .hero-video11 {
  background-color: #1a1a1a;
}
.active-body .main-sec.v6 {
  background-color: #1a1a1a;
}
.active-body .hero-section10 {
  background-color: #121212;
}
.active-body .exp-box p {
  color: var(--color-surface-dark-2) !important;
}
.active-body .aiero-button {
  background-color: var(--color-surface-dark-2);
  color: var(--color-content-white);
}
.active-body .aiero-button::before {
  background-image: url(../images/layers/corner3-dark.png);
}
.active-body .aiero-button::after {
  background-image: url(../images/layers/corner3-dark3.png);
  -webkit-transform: rotate(95deg);
      -ms-transform: rotate(95deg);
          transform: rotate(95deg);
}
.active-body .video-banner::before,
.active-body .ser-card5.v2::before {
  background-image: url(../images/layers/banner-l-dark.png);
}
.active-body .swiper.brand img,
.active-body .swiper.brand2 img {
  -webkit-filter: brightness(4);
          filter: brightness(4);
}
.active-body .ser-card.v3 .title a {
  color: var(--color-heading) !important;
}
.active-body .ser-card::before,
.active-body .ser-card3::before,
.active-body .ser-card12::before,
.active-body .project-img5::before,
.active-body .project-img5::before,
.active-body .ser-banner-card::before {
  background-image: url(../images/service/ser-layer-dark.png);
}
.active-body .ser-card15 {
  background-color: var(--color-surface-dark-2);
}
.active-body .ser-card15::before {
  -webkit-filter: brightness(0.1);
          filter: brightness(0.1);
}
.active-body .ser-card15 .title a {
  color: var(--color-content-white);
}
.active-body .ser-btn {
  background-color: var(--color-heading);
}
.active-body .marquee span,
.active-body .marquee .title,
.active-body .fun-fact-content span,
.active-body .fun-fact-content .title {
  color: var(--color-content-white);
}
.active-body .fun-fact-content .counter-box span {
  color: #1a1a1a;
}
.active-body .fun-fact-content .counter-box {
  -webkit-text-fill-color: var(--color-surface-dark-2);
}
.active-body .about-us-sec:after {
  -webkit-filter: brightness(0);
          filter: brightness(0);
}
.active-body .testimonial-sec2::before {
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, rgba(23, 23, 23, 0) 0%, #1a1a1a 84%);
  background-image: linear-gradient(180deg, rgba(23, 23, 23, 0) 0%, #1a1a1a 84%);
  border-radius: 0 0 25px 25px;
}
.active-body .slider-btn {
  background-color: var(--color-surface-dark-2);
}
.active-body .slider-btn::before {
  background-image: url(../images/layers/corner3-dark.png) !important;
}
.active-body .slider-btn::after {
  background-image: url(../images/layers/corner3-dark3.png) !important;
  -webkit-transform: unset !important;
      -ms-transform: unset !important;
          transform: unset !important;
}
.active-body .slider-btn .swiper-button-next::before,
.active-body .slider-btn .swiper-button-prev::before {
  color: var(--color-content-white);
}
.active-body .slider-btn5 .swiper-button-next::before,
.active-body .slider-btn5 .swiper-button-prev::before {
  color: var(--color-content-white);
}
.active-body .blog-card,
.active-body .blog-card2,
.active-body .blog-card4 {
  border-color: var(--color-content-black2);
}
.active-body .blog-card .sub-title,
.active-body .blog-card a,
.active-body .blog-card2 .sub-title,
.active-body .blog-card2 a,
.active-body .blog-card4 .sub-title,
.active-body .blog-card4 a {
  color: var(--color-content-white) !important;
}
.active-body .custom-form h2 {
  color: var(--color-heading) !important;
}
.active-body .shop-img2::before,
.active-body .shop-img::before {
  -webkit-filter: brightness(0);
          filter: brightness(0);
}
.active-body .blog-img::before,
.active-body .blog-img4::before {
  background-image: url(../images/layers/layer7-dark2.png);
}
.active-body .accordion-button,
.active-body .accordion-body {
  color: var(--color-content-white) !important;
}
.active-body .accordion-button:after,
.active-body .accordion-body:after {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .fun-fact-content.black .counter-box {
  -webkit-text-fill-color: var(--color-surface-dark-2);
}
.active-body .ser-list li::before {
  background-color: var(--color-content-white);
}
.active-body .ibt-btn.ibt-btn-outline,
.active-body .video-popup {
  color: var(--color-content-white) !important;
}
.active-body .blog-content .title a {
  color: var(--color-content-white);
}
.active-body .custom-form .ibt-btn.ibt-btn-outline {
  color: var(--color-body) !important;
}
.active-body .custom-form .ibt-btn.ibt-btn-outline:hover {
  color: var(--color-content-white) !important;
}
.active-body .counter-box4 .counter-number,
.active-body .counter-box4 .counter-text,
.active-body .counter-box8 .counter-number,
.active-body .counter-box8 .counter-text {
  color: var(--color-surface-dark-2) !important;
}
.active-body .title-content .title {
  -webkit-text-fill-color: var(--color-surface-dark-2);
}
.active-body .nav-tabs .nav-link {
  border-color: var(--color-content-black2);
}
.active-body .nav-tabs .nav-link:hover {
  background-color: var(--color-surface-dark-2);
  border-color: transparent;
}
.active-body .nav-tabs .nav-link.active {
  background-color: #1a1a1a;
}
.active-body .slider-btn2 .swiper-button-next::before,
.active-body .slider-btn2 .swiper-button-prev::before {
  color: var(--color-content-white);
}
.active-body .choose-block .sub-title {
  -webkit-text-fill-color: #1a1a1a;
}
.active-body .test-block2 {
  background-color: var(--color-surface-dark-2);
}
.active-body .rating li {
  color: #fac12e !important;
}
.active-body .btn-box3 .contact-btn {
  color: var(--color-content-white);
}
.active-body .style-text3 {
  -webkit-text-fill-color: #1a1a1a !important;
}
.active-body .style-text4 {
  color: var(--color-surface-dark-2) !important;
}
.active-body .inner-img11::before {
  -webkit-filter: brightness(0.1);
          filter: brightness(0.1);
}
.active-body .team-content,
.active-body .price-card,
.active-body .team-card2 {
  border-color: var(--color-content-black2);
}
.active-body .team-content .name a:hover,
.active-body .price-card .name a:hover,
.active-body .team-card2 .name a:hover {
  color: var(--color-content-white) !important;
}
.active-body .price-card {
  border-color: #434343;
}
.active-body .footer-content h2 {
  color: transparent !important;
}
.active-body .price-heade span {
  color: var(--color-content-white);
}
.active-body .price-card.v2 {
  background-color: #1a1a1a;
}
.active-body .price-card.v2 .ibt-btn.ibt-btn-dark {
  background-color: var(--color-content-black2);
}
.active-body .hero-form .input-box input {
  border-color: var(--color-content-black2);
}
.active-body .hero-form .input-box label {
  background-color: unset !important;
}
.active-body .hero-form .input-box input:focus + label {
  background-color: var(--color-content-black2) !important;
}
.active-body .hero-form .input-box input:not(:-moz-placeholder) + label {
  color: var(--color-surface-light);
}
.active-body .hero-form .input-box input:not(:-ms-input-placeholder) + label {
  color: var(--color-surface-light);
}
.active-body .hero-form .input-box input:not(:placeholder-shown) + label {
  color: var(--color-surface-light);
}
.active-body .choose-us-sec3 {
  background-image: url(../images/bg/bg.png);
}
.active-body .choose-block4 {
  border-color: var(--color-content-black2);
}
.active-body .choose-block4 .sub-title {
  -webkit-text-fill-color: var(--color-surface-dark-2);
}
.active-body .choose-block4 .step {
  color: var(--color-content-white);
}
.active-body .price-card2.v2 {
  background-color: #1a1a1a;
}
.active-body .Popular {
  background-color: var(--color-surface-dark-2);
}
.active-body .Popular::before {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.active-body .Popular:after {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(-181deg);
      -ms-transform: rotate(-181deg);
          transform: rotate(-181deg);
}
.active-body .price-card2 span,
.active-body .about-title5 span {
  color: var(--color-content-white) !important;
}
.active-body .ser-content14 .title,
.active-body .ser-content14 .title2,
.active-body .ser-content14 p,
.active-body .ser-content14 .languages.m-0 {
  color: var(--color-heading) !important;
}
.active-body .languages {
  color: var(--color-content-white);
}
.active-body .ser-card14-card2 .counter-box14 .counter-number,
.active-body .ser-card14-card2 .counter-box14 .counter-text {
  color: var(--color-surface-dark-2);
}
.active-body .lanuguage-sec::before {
  -webkit-filter: brightness(0.2);
          filter: brightness(0.2);
}
.active-body .world-languages a,
.active-body .world-languages2 a {
  color: var(--color-content-white);
  border-color: var(--color-content-black2);
}
.active-body .main-sec3 {
  margin-top: 20px;
}
.active-body .main-sec3 .about-counter-content6 .title {
  color: var(--color-content-white);
}
.active-body .main-sec3 .counter-box15 .counter-number,
.active-body .main-sec3 .counter-box15 .counter-text {
  color: var(--color-surface-dark-2);
}
.active-body .blog-card3 {
  background-color: #171717;
}
.active-body .ser-btn17 {
  color: var(--color-content-white);
  border-color: var(--color-content-white);
}
.active-body .about-info7 .sec-title {
  background-color: #1a1a1a;
}
.active-body .footer-style4 {
  background-color: var(--color-surface-dark-2);
}
.active-body .user-count5 .user {
  color: var(--color-content-white);
}
.active-body .user-count5 .counter-box16 .counter-number,
.active-body .user-count5 .counter-box16 .counter-text {
  color: #1a1a1a;
}
.active-body .ser-content14.v2 .title {
  color: var(--color-content-white) !important;
}
.active-body .ser-card14-card2 {
  border-color: var(--color-content-black2);
}
.active-body .nav-tabs8 .nav-link:hover {
  background-color: var(--color-content-black2);
}
.active-body .nav-tabs8 .nav-link img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .nav-tabs8 .nav-link.active {
  background-color: var(--color-content-black2);
}
.active-body .feature-img8 .title,
.active-body .feature-img8 .title2,
.active-body .ser-card20_card5 .title,
.active-body .ser-card20_card5 .title2,
.active-body .feature-img9 .title,
.active-body .feature-img9 .title2,
.active-body .service-block19.v1 .title,
.active-body .service-block19.v1 .title2 {
  color: transparent !important;
}
.active-body .feature-block9 .sub-title {
  -webkit-text-fill-color: #1a1a1a;
}
.active-body .video-banner3::before, .active-body .video-banner3::after,
.active-body .feature-img9::before,
.active-body .feature-img9::after {
  -webkit-filter: brightness(0);
          filter: brightness(0);
}
.active-body .shape::before {
  background-image: url(../images/layers/shape1-4-dark.png);
}
.active-body .shape3::before {
  background-image: url(../images/layers/shape1-4-dark2.png);
}
.active-body .breadcrumbs {
  background-color: var(--color-surface-dark-2);
}
.active-body .breadcrumbs::before, .active-body .breadcrumbs:after {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.active-body .breadcrumbs li {
  color: var(--color-content-white);
}
.active-body .breadcrumbs li a {
  color: var(--color-content-white);
}
.active-body .about-content9 .title {
  color: var(--color-surface-dark-2) !important;
}
.active-body .custom-form4 .form-group button {
  color: var(--color-content-white);
}
.active-body .neural-playground::before {
  background-image: url(../images/layers/eclips3-dark.png);
  background-repeat: no-repeat;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  width: 710px;
}
.active-body .radio-box label {
  color: var(--color-content-white);
}
.active-body .blog-single-content blockquote {
  background-color: #1a1a1a;
}
.active-body .archive-widget a {
  color: var(--color-content-white);
}
.active-body .ser-widget {
  background-color: #1a1a1a;
}
.active-body .ser-widget a:hover {
  color: var(--color-content-white);
}
.active-body .ser-widget a:hover::before {
  color: var(--color-content-white);
}
.active-body .form-widget form input {
  border-color: var(--color-content-black2);
}
.active-body .contact-form3 {
  background-color: var(--color-content-black2);
}
.active-body .contact-form2,
.active-body .contact-form3 {
  background-color: #1a1a1a;
}
.active-body .contact-form2 .custom-form2 input,
.active-body .contact-form2 .custom-form2 textarea,
.active-body .contact-form3 .custom-form2 input,
.active-body .contact-form3 .custom-form2 textarea {
  border-color: #434343;
}
.active-body .pagination .page-item .page-link {
  color: var(--color-content-white);
}
.active-body .blog-info4 blockquote .title {
  color: var(--color-heading) !important;
}
.active-body .product-block .title a {
  color: var(--color-content-white);
}
.active-body .price2 {
  color: #9b9b9b !important;
}
.active-body .quantity-filter .qty-box {
  border-color: #434343;
}
.active-body .quantity-filter .qty-box button {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input::-webkit-input-placeholder {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input::-moz-placeholder {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input:-ms-input-placeholder {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input::-ms-input-placeholder {
  color: var(--color-content-white);
}
.active-body .quantity-filter .qty-box input::placeholder {
  color: var(--color-content-white);
}
.active-body .cart-table th {
  color: var(--color-content-white) !important;
}
.active-body .cart-table2,
.active-body .cart-widget3 {
  background-color: #1a1a1a;
}
.active-body .cart-table2 th,
.active-body .cart-table2 td,
.active-body .cart-widget3 th,
.active-body .cart-widget3 td {
  color: var(--color-content-white) !important;
}
.active-body .cart-table2 tr:first-child,
.active-body .cart-widget3 tr:first-child {
  border-color: var(--color-content-black2);
}
.active-body .payment-methods .method label span {
  color: var(--color-content-white);
}
.active-body .payment-methods .method .content {
  background-color: #1a1a1a;
}
.active-body .payment-methods .method .content::before {
  -webkit-filter: brightness(0.1);
          filter: brightness(0.1);
}
.active-body .payment-widget form label {
  color: var(--color-content-white);
}
.active-body .payment-widget form label::before {
  background-color: unset !important;
}
.active-body .call-center2 .nmbr,
.active-body .call-center2 .gmail {
  color: var(--color-content-white);
}
.active-body .contact-sec2::after {
  -webkit-filter: brightness(0.2);
          filter: brightness(0.2);
}
.active-body .social-icon li a {
  color: var(--color-content-white) !important;
}
.active-body .accordion-number {
  color: var(--color-content-white) !important;
}
.active-body .architecture2,
.active-body .architecture {
  background-color: var(--color-surface-dark-2);
}
.active-body .architecture2::before, .active-body .architecture2:after,
.active-body .architecture::before,
.active-body .architecture:after {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.active-body .architecture2 a,
.active-body .architecture a {
  color: var(--color-content-white);
}
.active-body .menu_iso li::before {
  background-color: unset;
}
.active-body .menu_iso li a {
  color: var(--color-content-white);
}
.active-body .project-img7 img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .video-box6 {
  background-color: var(--color-surface-dark-2);
}
.active-body .video-box6::before, .active-body .video-box6::after {
  -webkit-filter: brightness(0.1);
          filter: brightness(0.1);
}
.active-body blockquote {
  background-color: #1a1a1a;
}
.active-body .fun-fact-counter3 .counter-box15 .counter-number,
.active-body .fun-fact-counter3 .counter-box15 .counter-text {
  color: var(--color-surface-dark-2);
}
.active-body .fun-fact-counter3 .title {
  color: var(--color-content-white);
}
.active-body .post-btn2,
.active-body .post-btn {
  color: var(--color-content-white);
  border-color: var(--color-content-white);
}
.active-body .post-nav-content .designation,
.active-body .post-nav-content2 .designation {
  color: var(--color-content-white);
}
.active-body .toggel2 img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.active-body .ser-card21.v1 .ibt-btn {
  color: var(--color-content-white);
}
.active-body .ser-btn3 {
  color: var(--color-content-white) !important;
  border-color: var(--color-content-white) !important;
}
.active-body .price-heade3 span {
  color: var(--color-content-white);
}
.active-body .price-card3.v2::before {
  -webkit-filter: brightness(0);
          filter: brightness(0);
}
.active-body .Popular {
  color: var(--color-content-white);
}
.active-body .shop-content {
  border-color: var(--color-content-black2);
}
.active-body .shop-content .title a:hover {
  color: var(--color-content-white);
}
.active-body .ser-detail-list li i {
  color: var(--color-content-white);
}
.active-body .review-tabs .nav-tabs2 {
  background-color: #1a1a1a;
}
.active-body .review-tabs .nav-tabs2 .nav-link {
  color: var(--color-content-white);
}
.active-body .review-tabs .nav-tabs2 .nav-link.active {
  background-color: #171717 !important;
}
.active-body .price-values #min-value,
.active-body .price-values #max-value {
  color: var(--color-content-white);
}
.active-body .filter-box button {
  background-color: var(--color-content-black2) !important;
}
.active-body .recent-post2 .title a {
  color: var(--color-content-white) !important;
}
.active-body .show-now {
  background-color: var(--color-content-black2);
}
.active-body .social-links2 {
  background-color: var(--color-content-black2);
}
.active-body .team-content2 .nmbr,
.active-body .team-content2 .gmail {
  color: var(--color-content-white);
}
.active-body .team-title {
  color: var(--color-content-white);
}
.active-body .tean-ser-list li::before {
  background-color: unset;
  color: var(--color-content-white);
}
.active-body .banner-content .sub-title {
  margin-bottom: 141px;
}
@media (max-width: 1440px) {
  .active-body .banner-content .sub-title {
    margin-bottom: 55px;
  }
}
@media (max-width: 1201px) {
  .active-body .banner-content .sub-title {
    margin-bottom: 15px;
  }
}
@media (max-width: 1025px) {
  .active-body .banner-content .sub-title {
    margin-bottom: 0;
  }
}
.active-body .banner-content .title2 {
  background-color: transparent;
  background-image: -webkit-linear-gradient(348deg, #8258c8 0%, #2c84c8 100%);
  background-image: linear-gradient(102deg, #8258c8 0%, #2c84c8 100%);
  -webkit-background-clip: text;
  text-decoration: none;
  color: transparent !important;
  width: 100%;
  line-height: 295px;
  bottom: -52px;
}
@media (max-width: 1440px) {
  .active-body .banner-content .title2 {
    line-height: 240px;
  }
}
@media (max-width: 1201px) {
  .active-body .banner-content .title2 {
    line-height: 212px;
  }
}
@media (max-width: 769px) {
  .active-body .banner-content .title2 {
    line-height: 173px;
  }
}
@media (max-width: 577px) {
  .active-body .banner-content .title2 {
    line-height: 90px;
  }
}
.active-body .about-us-sec,
.active-body .choose-us-sec,
.active-body .choose-us-sec3 {
  background-image: url(../images/bg/bg-dark.png);
}
.active-body .style-text {
  -webkit-text-fill-color: #1a1a1a;
}
.active-body .choose-us-sec5 .style-text {
  -webkit-text-fill-color: var(--color-surface-dark-2);
}
.active-body .solutions {
  color: var(--color-content-white);
}
.active-body .choose-us-sec {
  padding: 63px 11px 15px;
}
.active-body .video-box3 {
  background-color: #1a1a1a;
}
.active-body .video-box3::before {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.active-body .video-box3::after {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(92deg);
      -ms-transform: rotate(92deg);
          transform: rotate(92deg);
  height: 20px;
  bottom: -1px;
  width: 20px;
}
.active-body .empty3 {
  background-color: #1a1a1a;
}
.active-body .empty3::before {
  background-image: url(../images/layers/empty-dark.png);
  -webkit-transform: rotate(-89deg);
      -ms-transform: rotate(-89deg);
          transform: rotate(-89deg);
}
.active-body .counter-box5 .counter-number,
.active-body .counter-box5 .counter-text {
  color: #1a1a1a;
}
.active-body .border-outer {
  border-color: var(--color-content-white) !important;
}
.active-body .ser-video-box {
  background-color: var(--color-surface-dark-2);
}
.active-body .ser-video-box::before, .active-body .ser-video-box:after {
  background-image: url(../images/layers/corner3-dark.png);
}
.active-body .service-sec6 .ser-card.v4 {
  background-color: #1a1a1a;
}
.active-body .team-shap,
.active-body .shop-shap {
  background-color: var(--color-surface-dark-2);
}
.active-body .team-shap::before,
.active-body .shop-shap::before {
  background-image: url(../images/layers/corner3-dark.png);
}
.active-body .team-shap::after,
.active-body .shop-shap::after {
  background-image: url(../images/layers/corner3-dark3.png);
}
.active-body .share-icon,
.active-body .social-links {
  background-color: var(--color-content-black2);
}
.active-body .main-sec {
  background-color: var(--color-surface-dark-2);
}
.active-body .faq-sec2::before {
  left: -15%;
}
.active-body .user-count .counter-box5 .counter-number,
.active-body .user-count .counter-box5 .counter-text {
  color: #1a1a1a;
}
.active-body .style-text7 {
  -webkit-text-fill-color: unset !important;
  color: #1a1a1a !important;
}
.active-body .style-text7 span {
  color: var(--color-content-white) !important;
}
.active-body .empty4 {
  background-color: var(--color-surface-dark-2);
}
.active-body .empty4::before {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.active-body .empty4::after {
  background-image: url(../images/layers/corner3-dark.png);
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.active-body .team-section.v2 .team-content {
  background-color: var(--color-surface-dark-2);
}
.active-body .custom-form4 input,
.active-body .custom-form4 select,
.active-body .custom-form4 textarea,
.active-body .custom-form5 input,
.active-body .custom-form5 select,
.active-body .custom-form5 textarea {
  background-color: var(--color-surface-dark-2);
  border-color: #434343;
}
.active-body .tag-list li a {
  background-color: #1a1a1a;
  color: var(--color-content-white);
}
.active-body .contact-form4 p a {
  color: var(--color-content-white);
}
.active-body .price-card2,
.active-body .price-card3 {
  border-color: #434343;
}
.active-body .main-sec.dark::before {
  display: none;
}
.active-body .shop-sec::before {
  display: none;
}
.active-body .team-counter .title {
  color: var(--color-content-white);
}
.active-body .blockquote p {
  color: var(--color-heading);
}
.active-body .shape4 {
  background-color: var(--color-surface-dark-2);
}
.active-body .shape4::before {
  background-image: url(../images/layers/corner3-dark3.png);
}
.active-body .shape4::after {
  background-image: url(../images/layers/corner3-dark3.png);
}
.active-body .shape2 {
  background-color: var(--color-surface-dark-2);
}
.active-body .shape2::before {
  background-image: url(../images/layers/corner3-dark3.png);
}
.active-body .shape2::after {
  background-image: url(../images/layers/corner3-dark3.png);
}
@media (max-width: 1201px) {
  .active-body .vs-header {
    background-color: unset;
  }
}
.active-body .hamburger span {
  background-color: var(--color-content-white);
}
.active-body .side-menu2 {
  background-color: #1a1a1a;
  border-color: #454545;
}
.active-body .side-menu2 ul {
  border-color: #454545;
}
.active-body .side-menu2 ul li a {
  color: var(--color-content-white);
}
.active-body .side-menu2 .close-btn::before {
  color: var(--color-content-white) !important;
}
.active-body .side-menu2 .popup-search {
  color: var(--color-content-white);
}
.active-body .side-menu2 .menu-contact span,
.active-body .side-menu2 .menu-contact a,
.active-body .side-menu2 .menu-links span,
.active-body .side-menu2 .menu-links a {
  color: var(--color-content-white);
}
.active-body .counter-box7 .counter-number,
.active-body .counter-box7 .counter-text {
  color: rgba(240, 242, 244, 0);
}
.active-body .hero-style6 .slider-btn {
  background-color: #1a1a1a;
}
.active-body .hero-video11::before, .active-body .hero-video11::after {
  -webkit-filter: brightness(0.1);
          filter: brightness(0.1);
}
.active-body .search-popup-content {
  background-color: #1a1a1a;
}
.active-body .search-popup-content .close-popup::before {
  color: var(--color-content-white);
}
.active-body .search-popup input {
  color: var(--color-content-white);
}
.active-body .search-popup input::-webkit-input-placeholder {
  color: var(--color-content-white);
}
.active-body .search-popup input::-moz-placeholder {
  color: var(--color-content-white);
}
.active-body .search-popup input:-ms-input-placeholder {
  color: var(--color-content-white);
}
.active-body .search-popup input::-ms-input-placeholder {
  color: var(--color-content-white);
}
.active-body .search-popup input::placeholder {
  color: var(--color-content-white);
}
.active-body .search-popup button {
  color: var(--color-content-white) !important;
}
.active-body .video-popup i::after {
  border-color: #434343;
}
.active-body .video-popup:hover i {
  background-color: #434343;
}
.active-body .video-btn6 .video-popup i::after {
  border-color: var(--color-content-white);
}
.active-body .quantity-filter .cart-btn {
  background-color: #171717;
}
.active-body .darkModeTriggerImg2 {
  display: inline-block;
}
.active-body .darkModeTriggerImg {
  display: none;
}
.active-body .recent-post .title a:hover {
  color: var(--color-content-white);
}
.active-body .menu-toggle::before, .active-body .menu-toggle:after {
  color: var(--color-content-white) !important;
}
.active-body .custom-form4 .password {
  color: var(--color-content-white);
}
.active-body .side-bar2.active {
  background: #1f1f1f;
}
.active-body .form-widget form button {
  color: var(--color-content-white);
}
.active-body .form-widget form input {
  color: var(--color-content-white);
  border-color: #636363;
}
.active-body input[type=text],
.active-body input[type=password],
.active-body input[type=email],
.active-body input[type=number],
.active-body input[type=tel],
.active-body input[type=date],
.active-body textarea {
  color: var(--color-content-white);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/*------------------------------
    Popup Menu Styles  
--------------------------------*/
.side-menu {
  position: fixed;
  left: -474px;
  top: 0;
  margin: 15px;
  width: 385px;
  height: 97%;
  background: #111;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  border-radius: 20px;
  z-index: 9999999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 80px 68px 39px 68px;
}
.side-menu::before {
  content: "";
  position: absolute;
  top: 0;
  right: -73px;
  width: 70px;
  border-radius: 25px;
  height: 100%;
  background-image: url(../images/bg/sidepanel-close-bg-min.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.side-menu::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 182px;
  background-image: url(../images/bg/offcanvas.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.side-menu .logo {
  display: inline-block;
}
.side-menu .title {
  color: var(--color-content-white);
  font-size: 12px;
  font-family: var(--font-secondary);
  margin-bottom: 27px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.side-menu p {
  color: var(--color-content-white);
  font-size: 18px;
  line-height: 28px;
}
.side-menu .email {
  color: var(--color-content-white);
  text-decoration: underline;
  display: block;
  margin: 40px 0 80px;
}
.side-menu .sidebar-menu {
  padding: 50px 0;
  margin: 109px 0;
}
.side-menu .ibt-btn-rounded {
  color: var(--color-content-white);
}
.side-menu .menu-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}
.side-menu .menu-content::-webkit-scrollbar {
  width: 6px;
  position: relative;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  z-index: 0;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
  z-index: -1;
}

.side-menu.active {
  left: 0;
}

.close-btn {
  position: absolute;
  top: 48px;
  right: -69px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: right;
  margin-bottom: 0;
  text-transform: capitalize;
  -webkit-transform: rotate(88deg);
      -ms-transform: rotate(88deg);
          transform: rotate(88deg);
}
.close-btn i {
  font-size: 14px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.close-btn:hover {
  color: var(--color-content-white);
}
.close-btn:hover i {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.side-menu2 {
  position: fixed;
  top: 0;
  right: -323px;
  width: 312px;
  height: 100%;
  padding: 20px 40px;
  background: var(--color-content-white);
  color: #333;
  border: 1px solid #cacaca;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 111111111;
  -webkit-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
}
.side-menu2 > ul {
  padding: 76px 0 35px;
  border-bottom: 1px solid #cacaca;
}
.side-menu2 > ul > li {
  margin: 0;
}
.side-menu2 > ul > li:last-child a::before {
  display: none;
}
.side-menu2 > ul > li > a {
  position: relative;
  display: block;
  height: 29px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-secondary);
  line-height: 29px;
  text-transform: uppercase;
  text-decoration: none;
  color: #333;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.side-menu2 > ul > li > a::before {
  content: "\e82b" !important;
  position: absolute;
  right: 0;
  font: 400 normal 5px/20px "fontello";
  line-height: inherit;
  display: inline-block;
  margin: 0;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  color: inherit;
  background: transparent;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.side-menu2 > ul > li > a:hover {
  color: var(--color-primary);
}
.side-menu2 > ul > li.active > a {
  color: var(--color-primary);
}
.side-menu2 > ul > li.active > a::before {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
.side-menu2 > ul > li.active > ul {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.side-menu2 > ul ul {
  padding: 11px 0 0 20px;
  opacity: 0;
  visibility: hidden;
  height: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.side-menu2 > ul ul li {
  margin: 0;
}
.side-menu2 > ul ul li a {
  position: relative;
  display: block;
  height: 34px;
  margin-bottom: 5px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-secondary);
  line-height: 19px;
  text-transform: capitalize;
  text-decoration: none;
  color: #333;
  -webkit-transition: color 0.2s, background 0.2s;
  transition: color 0.2s, background 0.2s;
}
.side-menu2 > ul ul li a:hover {
  color: var(--color-primary);
}
.side-menu2 > ul ul .active .active {
  color: var(--color-primary);
}
.side-menu2 .sub-menu {
  position: relative;
}
.side-menu2 .sub-menu::before {
  content: "\e82b" !important;
  position: absolute;
  right: 0;
  top: 14px;
  font: 400 normal 5px/20px "fontello";
  line-height: inherit;
  display: inline-block;
  margin: 0;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  color: inherit;
  background: transparent;
}
.side-menu2 .sub-menu ul {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 7px 0 0 42px;
}
.side-menu2 .sub-menu.active > a {
  color: var(--color-primary);
}
.side-menu2 .sub-menu.active::before {
  color: var(--color-primary);
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}
.side-menu2 .sub-menu.active ul {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

.side-menu2.active {
  right: 0;
}

.menu-btns {
  position: absolute;
  top: 27px;
  right: 39px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}
.menu-btns .popup-search {
  margin-right: 17px;
  display: inline-block !important;
}
.menu-btns .search-popup {
  background: unset !important;
}

#mobileCloseBtn2 {
  position: relative;
  top: 0;
  right: 0;
  background-color: unset;
  border: 0;
  outline: none;
  padding: 0;
}
#mobileCloseBtn2::before {
  content: "\e803";
  font: 400 normal 18px/20px "fontello";
  color: var(--color-content-black2);
}

.menu-contact {
  padding-top: 40px;
}
.menu-contact span {
  color: #958c8c;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-secondary);
  display: block;
}
.menu-contact .gmail {
  font-size: 15px;
  line-height: 1.875em;
  font-weight: 600;
  text-decoration: underline;
  color: var(--color-content-black2);
  display: inline-block;
}

.menu-links {
  padding-top: 36px;
}
.menu-links > span {
  color: #958c8c;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-secondary);
  display: block;
}
.menu-links .social-icon {
  margin-bottom: 44px;
}
.menu-links .social-icon li {
  margin: 0 23px 0 0;
}
.menu-links .social-icon li a {
  color: var(--color-content-black2);
}
.menu-links .social-icon li a:hover {
  color: var(--color-primary);
}

.side-menu2::-webkit-scrollbar {
  width: 5px;
}

.side-menu2::-webkit-scrollbar-thumb {
  background: #c0c0c0;
}

.side-menu2::-webkit-scrollbar-track {
  background: transparent;
}

.hamburger {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 5px;
  border: 0;
  outline: none !important;
  padding: 0;
  background-color: unset;
  display: none;
}
@media (max-width: 1201px) {
  .hamburger {
    display: inline-block;
  }
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  cursor: pointer;
  text-align: center;
  background: var(--color-content-black2);
  margin-bottom: 4px;
}
.hamburger span:last-child {
  margin-bottom: 0;
  width: 10px;
  margin-left: auto;
}

.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1111;
  display: none;
}

.overlay2.active {
  display: block;
}

.hamburger3 {
  position: relative;
  border: 0;
  outline: none !important;
  padding: 0;
  background-color: unset;
  cursor: pointer;
  padding: 3px;
}
.hamburger3:hover span:last-child {
  width: 10px;
}
.hamburger3 span {
  display: block;
  width: 26px;
  height: 2px;
  cursor: pointer;
  text-align: center;
  background: var(--color-content-white);
  margin-bottom: 4px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.hamburger3 span:last-child {
  margin-bottom: 0;
  margin-left: auto;
}

.overlay3 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 15px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  padding: 0 71px 0 0;
  -webkit-transition: opacity linear 0.3s, visibility linear 0.3s;
  transition: opacity linear 0.3s, visibility linear 0.3s;
  z-index: 998;
}
.overlay3.active {
  opacity: 1;
  visibility: visible;
}

.side-menu3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 1812px;
  height: 100%;
  background: var(--color-surface-dark-2);
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  z-index: 999999999;
  border-radius: 25px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity linear 0.3s, visibility linear 0.3s;
  transition: opacity linear 0.3s, visibility linear 0.3s;
}
.side-menu3.active {
  opacity: 1;
  visibility: visible;
}
.side-menu3::before {
  content: "";
  position: absolute;
  top: 0;
  right: -70px;
  width: 70px;
  border-radius: 25px;
  height: 100%;
  background-image: url(../images/bg/sidepanel-close-bg-min.webp);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity linear 0.3s, visibility linear 0.3s;
  transition: opacity linear 0.3s, visibility linear 0.3s;
  z-index: 10000000000000000;
}
.side-menu3.active::before {
  opacity: 1;
  visibility: visible;
}
.side-menu3 .close-btn {
  position: absolute;
  top: 48px;
  right: -69px;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: right;
  margin-bottom: 0;
  text-transform: capitalize;
  -webkit-transform: rotate(88deg);
      -ms-transform: rotate(88deg);
          transform: rotate(88deg);
  z-index: 10000000000000000;
}
.side-menu3 .close-btn i {
  font-size: 14px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.side-menu3 .close-btn:hover {
  color: var(--color-content-white);
}
.side-menu3 .close-btn:hover i {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
 .side-menu3 .menu-inner .menu-left > ul > li > a.active {
  color: var(--color-primary);
}
 .side-menu3 .menu-inner .menu-left > ul > li > a.active::after {
  opacity: 1;
  visibility: visible;
}
.side-menu3 .menu-inner .menu-left > ul .active > a {
  color: var(--color-primary);
}
.side-menu3 .menu-inner .menu-left > ul .active > a::after {
  opacity: 1;
  visibility: visible;
}
.side-menu3 .menu-inner .menu-left > ul .active {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
 .side-menu3 .menu-inner .menu-left > ul ul li a.active {
  color: var(--color-primary);
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active {
  padding: 15px 0 0;
  max-height: 250px;
  overflow-y: auto;
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active::-webkit-scrollbar {
  width: 8px; /* Set the width (or height for horizontal) */
  background: transparent; /* Optional: ensures no default background peeks through */
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active {
  /* 2. Style the Track (the background area) */
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active::-webkit-scrollbar-track {
  background-color: #1a1a1a; /* Dark background color, close to the menu background */
  border-radius: 10px;
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active {
  /* 3. Style the Thumb (the draggable handle) */
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active::-webkit-scrollbar-thumb {
  background-color: #555555; /* A dark gray for contrast */
  border-radius: 10px;
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active {
  /* 4. Style the Thumb on Hover */
}
.side-menu3 .menu-inner .menu-left > ul .inner-menu.active::-webkit-scrollbar-thumb:hover {
  background-color: #777777; /* Slightly lighter on hover for UX */
}
.side-menu3 .shape {
  position: absolute;
  bottom: 0;
  right: 0;
}
.side-menu3.active .menu-left > ul > li {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.side-menu3.active .menu-left > ul > li:nth-child(1) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.side-menu3.active .menu-left > ul > li:nth-child(2) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.side-menu3.active .menu-left > ul > li:nth-child(3) {
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.side-menu3.active .menu-left > ul > li:nth-child(4) {
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}
.side-menu3.active .menu-left > ul > li:nth-child(5) {
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
}
.side-menu3.active .menu-left > ul > li:nth-child(6) {
  -webkit-transition-delay: 0.75s;
          transition-delay: 0.75s;
}
.side-menu3.active .menu-left > ul > li:nth-child(7) {
  -webkit-transition-delay: 0.85s;
          transition-delay: 0.85s;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.header-menu-area {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 25px;
  padding: 19px 28px 21px 37px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-top: 18px;
}
@media (max-width: 1201px) {
  .header-menu-area {
    padding: 12px 4px 15px;
    margin-top: 0;
    border: 0;
    background-color: unset;
  }
}

.header-logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-logo .menu-toggle {
  position: relative;
  margin-right: 64px;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.header-logo .menu-toggle::before {
  content: "\e82a";
  position: absolute;
  left: 50%;
  right: initial;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-size: 20px;
  line-height: 1em;
  text-align: center;
  font-family: "fontello";
  font-weight: 400;
  cursor: pointer;
  color: #333333;
}
.header-logo .menu-toggle::after {
  content: "\e82e";
  opacity: 0;
  position: absolute;
  left: 50%;
  right: initial;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-size: 20px;
  line-height: 1em;
  text-align: center;
  font-family: "fontello";
  font-weight: 400;
  cursor: pointer;
  color: #333333;
}
.header-logo .menu-toggle:hover::before {
  opacity: 0;
}
.header-logo .menu-toggle:hover::after {
  opacity: 1;
}
@media (max-width: 1366px) {
  .header-logo .menu-toggle {
    margin-right: 33px;
  }
}
@media (max-width: 1201px) {
  .header-logo .menu-toggle {
    display: none;
  }
}
.header-logo .logo {
  display: none;
}
@media (max-width: 1201px) {
  .header-logo .logo {
    display: inline-block;
  }
}

.menu-toggle.v2::before, .menu-toggle.v2::after {
  color: var(--color-content-white);
}

.menu-style1 {
  margin-left: 24px;
}
@media (max-width: 1201px) {
  .menu-style1 {
    display: none;
  }
}
.menu-style1 > ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.menu-style1 > ul > li {
  padding: 12px 0;
  margin: 0 2px 0 0;
}
.menu-style1 > ul > li:last-child a {
  padding: 0 24px;
}
.menu-style1 > ul > li:last-child a::before {
  display: none;
}
.menu-style1 > ul > li > a {
  position: relative;
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--color-content-black2);
  padding: 0 42px 0 22px;
  height: 40px;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.menu-style1 > ul > li > a::before {
  content: "";
  position: absolute;
  bottom: 15px;
  right: 21px;
  width: 6.63px;
  height: 6.97px;
  background-image: url(../images/icon/arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  background-color: unset !important;
}
.menu-style1 > ul > li > a span {
  display: block;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.menu-style1 > ul > li > a:hover {
  background: #f0f2f4;
}
.menu-style1 > ul > li > a:hover .menu-item {
  -webkit-transform: translateY(-38px);
      -ms-transform: translateY(-38px);
          transform: translateY(-38px);
}
.menu-style1 > ul > li > a:hover .menu-item2 {
  -webkit-transform: translateY(-40px);
      -ms-transform: translateY(-40px);
          transform: translateY(-40px);
}
.menu-style1 > ul > li > .active,
.menu-style1 > ul > li .active2 {
  background-color: var(--color-heading);
  color: var(--color-content-white);
}
.menu-style1 > ul > li > .active::before,
.menu-style1 > ul > li .active2::before {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.menu-style1 > ul > li > .active:hover,
.menu-style1 > ul > li .active2:hover {
  background-color: var(--color-heading);
}

.main-menu {
  position: relative;
}

.main-menu > ul li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.main-menu > ul li .sub-menu {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
          transform: translate(0, 10px);
  -webkit-transition: opacity 200ms ease-in, visibility 200ms ease-in, -webkit-transform 200ms ease-in;
  transition: opacity 200ms ease-in, visibility 200ms ease-in, -webkit-transform 200ms ease-in;
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in, -webkit-transform 200ms ease-in;
  z-index: 999;
  border-radius: 20px;
  background: var(--color-heading);
  border: 0;
  padding: 40px 45px 40px 50px;
  position: absolute;
  top: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.main-menu > ul li .mega-sub-menu .mega-menu-column ul li .active,
.main-menu > ul li .sub-menu .mega-menu-column ul li .active {
  padding-left: 20px;
  color: var(--color-primary);
  background-color: unset !important;
}
.main-menu > ul li .mega-sub-menu .mega-menu-column ul li .active::before,
.main-menu > ul li .sub-menu .mega-menu-column ul li .active::before {
  opacity: 1;
  visibility: visible;
  color: var(--color-primary);
}
.main-menu > ul li .sub-menu {
  display: block;
  width: 286px;
  margin-top: 5px;
}
/* The theme styles sub-menu links but never positions the panel -- no demo
   page shipped with a dropdown, so left alone it renders inline and pushes the
   rest of the header sideways. This supplies the positioning and the panel the
   existing rules already assume is there. */
.main-menu > ul > li {
  position: relative;
}
.main-menu > ul > li > .sub-menu {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 999;
  padding: 10px 24px 14px;
  border-radius: 16px;
  background-color: var(--color-heading);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
/* Bridges the 5px gap the theme leaves below the parent link, so the dropdown
   does not close while the pointer travels into it. */
.main-menu > ul > li > .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}
/* Mobile drawer: .side-menu2 keeps the nested list hidden until its toggle
   fires, but that toggle never fires -- the parent anchor navigates first. An
   always-open list costs one tap less anyway. */
.side-menu2 .sub-menu ul {
  opacity: 1;
  visibility: visible;
  height: auto;
}
/* The theme fixes each nested drawer link at 34px, so a label that wraps
   ("Keyword & Content Strategy") runs into the item below it. Let it grow. */
.side-menu2 > ul ul li a {
  height: auto;
  min-height: 34px;
}
.main-menu > ul li .sub-menu li {
  margin: 0;
}
.main-menu > ul li .sub-menu li.menu-has-items.active > a {
  padding-left: 20px;
  color: #45d0bd !important;
  background-color: unset;
}
.main-menu > ul li .sub-menu li.menu-has-items.active > a::before {
  opacity: 1;
  color: #45d0bd !important;
}
.main-menu > ul li .sub-menu li.menu-has-items.active > a::after {
  color: var(--color-primary);
}
.main-menu > ul li .sub-menu li a {
  position: relative;
  color: var(--color-content-white) !important;
  font-size: 17px;
  text-transform: none;
  text-decoration: none;
  font-weight: 400;
  text-align: left;
  margin: 0 0 0 0;
  padding: 10px 20px 10px 0;
  vertical-align: top;
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0;
}
.main-menu > ul li .sub-menu li a:hover {
  padding-left: 20px;
  color: #45d0bd !important;
}
.main-menu > ul li .sub-menu li a:hover::before {
  opacity: 1;
  color: var(--color-primary);
}
.main-menu > ul li .sub-menu li a::before {
  content: "\e841";
  font: 400 normal 10px/10px "fontello";
  line-height: 25.5px;
  bottom: 8px;
  position: absolute;
  display: block;
  left: 0;
  right: initial;
  width: 16px;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
  color: var(--color-content-white);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: unset !important;
}
.main-menu > ul li .sub-menu li a::after {
  content: "\f107";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: var(--color-content-white);
  opacity: 0;
  visibility: hidden;
}
.main-menu > ul li .sub-menu li .active {
  padding-left: 20px;
  color: #45d0bd !important;
  background-color: unset !important;
}
.main-menu > ul li .sub-menu li .active::before {
  opacity: 1;
  visibility: visible;
  color: var(--color-primary);
}
.main-menu > ul li .sub-menu li.menu-has-items > a:after {
  opacity: 1;
  visibility: visible;
}
.main-menu > ul li .sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}
.main-menu > ul li .sub-menu li:hover > a::after {
  content: "\f105";
  color: var(--color-primary);
}
.main-menu > ul li .sub-menu li > .sub-menu {
  opacity: 0;
  visibility: hidden;
  left: 100%;
  margin-left: 47px;
}
.main-menu > ul li .sub-menu li > .sub-menu.v1 .active {
  padding-left: 0;
}
.main-menu > ul li .sub-menu li > .sub-menu.v1 .active a {
  padding-left: 20px;
}
.main-menu > ul li .sub-menu li > .sub-menu.v2 {
  top: -90%;
}
.main-menu > ul li .sub-menu li > .sub-menu.v2 .active {
  padding-left: 0;
}
.main-menu > ul li .sub-menu li > .sub-menu.v2 .active a {
  padding-left: 20px;
}
.main-menu .inner-menu {
  position: relative;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.main-menu .inner-menu:hover::before {
  content: "\f105";
  color: var(--color-primary);
  background-color: unset;
}

.popup-search {
  position: relative;
  color: var(--color-content-black2);
  font-size: 17px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-right: 30px;
}
@media (max-width: 1201px) {
  .popup-search {
    display: none;
  }
}
.popup-search:hover {
  background: -webkit-linear-gradient(top, #45D0BD, #44B6E9);
  background: linear-gradient(to bottom, #45D0BD, #44B6E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 1201px) {
  .btn-box .ibt-btn {
    display: none;
  }
}

.sticky-active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  background-color: var(--color-content-white);
  border-radius: 0 0 20px 20px;
  -webkit-transition: box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  will-change: transform;
  z-index: 99999;
  margin: 0 20px;
}
@media (max-width: 1201px) {
  .sticky-active {
    margin: 0;
    padding: 0 16px 0 20px;
    border-radius: 0;
  }
}
.sticky-active .header-menu-area,
.sticky-active .header-menu-area3,
.sticky-active .header-menu-area5 {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 1;
  -webkit-transition: -webkit-transform 0.45s ease-in-out;
  transition: -webkit-transform 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, -webkit-transform 0.45s ease-in-out;
  margin-top: 0;
  border: 0;
}

.sticky-active.is-sticky {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
}
.sticky-active.is-sticky .header-menu-area,
.sticky-active.is-sticky .header-menu-area3,
.sticky-active.is-sticky .header-menu-area5 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.sticky-active:not(.is-sticky) .header-menu-area,
.sticky-active:not(.is-sticky) .header-menu-area3,
.sticky-active:not(.is-sticky) .header-menu-area5 {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
.sticky-active:not(.is-sticky) {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.search-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 111111;
}
.search-popup button[type=submit] {
  background-color: unset;
  color: var(--color-content-black2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  outline: none;
  padding: 0;
  font-size: 22px;
}
.search-popup button[type=submit]:hover {
  background: -webkit-linear-gradient(top, #45D0BD, #44B6E9);
  background: linear-gradient(to bottom, #45D0BD, #44B6E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.search-popup input {
  width: 100%;
  padding: 0;
  padding: 0 0 0 60px;
  height: 25px;
  line-height: 25px;
  border: 0;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 16px;
  font-family: var(--font-secondary);
  text-transform: capitalize;
  color: #919191;
}
.search-popup input::-webkit-input-placeholder {
  color: #919191;
}
.search-popup input::-moz-placeholder {
  color: #919191;
}
.search-popup input:-ms-input-placeholder {
  color: #919191;
}
.search-popup input::-ms-input-placeholder {
  color: #919191;
}
.search-popup input::placeholder {
  color: #919191;
}
@media (max-width: 390px) {
  .search-popup input {
    padding: 0 0 0 30px;
  }
}

.search-popup.active {
  opacity: 1;
  visibility: visible;
  z-index: 9999999999;
}

.search-popup-content {
  padding: 35px 100px 34px 48px;
  width: 100%;
  z-index: 9999;
  background-color: var(--color-content-white);
  opacity: 0;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.search-popup-content form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.search-popup.active .search-popup-content {
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  opacity: 1;
}

.close-popup {
  position: absolute;
  top: 38px;
  right: 35px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  outline: none !important;
}
.close-popup::before {
  content: "\e803";
  font: 400 normal 16px/16px "fontello";
  color: var(--color-content-black2);
  font-size: 20px;
}

.close-popup:hover {
  background: -webkit-linear-gradient(top, #45D0BD, #44B6E9);
  background: linear-gradient(to bottom, #45D0BD, #44B6E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.darkModeTriggerImg2 {
  display: none;
}

.vs-header2 {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  margin-top: 20px;
}
@media (max-width: 1440px) {
  .vs-header2 {
    padding: 10px 20px;
  }
}
.vs-header2 .header-logo img {
  -webkit-filter: brightness(10);
          filter: brightness(10);
}
.vs-header2 .header-menu-area {
  background-color: unset;
  padding-top: 20px;
  margin-top: 0;
}
@media (max-width: 1201px) {
  .vs-header2 .header-menu-area {
    padding-top: 12px;
  }
}
@media (max-width: 1366px) {
  .vs-header2 .header-menu-area {
    padding: 19px 23px 21px 23px;
  }
}
.vs-header2 .header-menu-area .popup-search {
  margin-right: 16px;
}
.vs-header2 .ibt-btn-outline-3 {
  color: var(--color-content-white);
}
.vs-header2 .popup-search {
  color: var(--color-content-white);
}
.vs-header2 .menu-style1 > ul > li > a {
  color: var(--color-content-white);
}
.vs-header2 .menu-style1 > ul > li > a::before {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.vs-header2 .menu-style1 > ul > li > a:hover {
  background-color: var(--color-heading);
}
.vs-header2 .menu-style1 > ul > li.menu-has-items.active > a {
  background: var(--color-heading);
}
.vs-header2 .sticky-active.is-sticky .header-menu-area {
  background-color: var(--color-content-white);
}
.vs-header2 .sticky-active.is-sticky .active {
  color: var(--color-content-white);
}
.vs-header2 .sticky-active.is-sticky .active::before {
  background-color: var(--color-content-white);
}
.vs-header2 .sticky-active.is-sticky a {
  color: var(--color-content-black2);
}
.vs-header2 .sticky-active.is-sticky a::before {
  background-color: var(--color-content-black2);
}
.vs-header2 .sticky-active.is-sticky a:hover {
  color: var(--color-content-white);
}
.vs-header2 .sticky-active.is-sticky a:hover::before {
  background-color: var(--color-content-white);
}
.vs-header2 .hamburger span {
  background-color: var(--color-content-white);
}

.sticky-active.is-sticky.v3,
.sticky-active.is-sticky.v9 {
  background-color: #1a1a1a;
}
.sticky-active.is-sticky.v3 .header-menu-area,
.sticky-active.is-sticky.v3 .header-menu-area3,
.sticky-active.is-sticky.v9 .header-menu-area,
.sticky-active.is-sticky.v9 .header-menu-area3 {
  background-color: #1a1a1a !important;
}
.sticky-active.is-sticky.v3 a,
.sticky-active.is-sticky.v9 a {
  color: var(--color-content-white);
}
.sticky-active.is-sticky.v3 .menu-style1 > ul > li > a,
.sticky-active.is-sticky.v9 .menu-style1 > ul > li > a {
  color: var(--color-content-white);
}
.sticky-active.is-sticky.v3 .menu-style1 > ul > li > a:hover,
.sticky-active.is-sticky.v9 .menu-style1 > ul > li > a:hover {
  background-color: var(--color-surface-dark-2);
}
.sticky-active.is-sticky.v3 .menu-style1 > ul > li > a::before,
.sticky-active.is-sticky.v9 .menu-style1 > ul > li > a::before {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.sticky-active.is-sticky.v3 .menu-style1 > ul > li > .active,
.sticky-active.is-sticky.v9 .menu-style1 > ul > li > .active {
  background-color: var(--color-surface-dark-2);
}
.sticky-active.is-sticky.v3 .header-logo a img,
.sticky-active.is-sticky.v9 .header-logo a img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.sticky-active.is-sticky.v3 .logo3 img,
.sticky-active.is-sticky.v9 .logo3 img {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}

.sticky-active.v3,
.sticky-active.v9 {
  background-color: #1a1a1a;
}
.sticky-active.v3 .header-menu-area,
.sticky-active.v3 .header-menu-area3,
.sticky-active.v9 .header-menu-area,
.sticky-active.v9 .header-menu-area3 {
  background-color: unset;
  padding: 10px 23px 15px 23px;
}
@media (max-width: 1201px) {
  .sticky-active.v3 .header-menu-area,
  .sticky-active.v3 .header-menu-area3,
  .sticky-active.v9 .header-menu-area,
  .sticky-active.v9 .header-menu-area3 {
    padding-left: 0;
  }
}
.sticky-active.v3 .hamburger span,
.sticky-active.v9 .hamburger span {
  background-color: var(--color-content-white) !important;
}
.menu-style1.v4 > ul > li.menu-has-items.active > a {
  background: unset;
}
.menu-style1.v4 > ul > li > .active {
  border: 1px solid #595858;
  line-height: 38px;
}

@media (max-width: 1440px) {
  .sticky-active.v4 .menu-style1 {
    display: none;
  }
}
.vs-header9 .menu-style1 > ul > li > .active {
  background-color: var(--color-surface-dark-2);
}
.vs-header9 .menu-style1 > ul > li.menu-has-items.active > a {
  background-color: var(--color-surface-dark-2);
}
.vs-header9 .sticky-active.is-sticky .header-menu-area {
  background-color: var(--color-content-white);
}
.vs-header9 .sticky-active.is-sticky .active {
  color: var(--color-content-white);
}
.vs-header9 .sticky-active.is-sticky .active::before {
  background-color: var(--color-content-white);
}
.vs-header9 .sticky-active.is-sticky a {
  color: var(--color-content-black2);
}
.vs-header9 .sticky-active.is-sticky a::before {
  background-color: var(--color-content-black2);
}
.vs-header9 .sticky-active.is-sticky a:hover {
  color: var(--color-content-white);
}
.vs-header9 .sticky-active.is-sticky a:hover::before {
  background-color: var(--color-content-white);
}

.sticky-active.v9 .hamburger span {
  background-color: var(--color-content-white);
}

.sticky-active.v2 {
  background-color: var(--color-heading);
}
@media (max-width: 1201px) {
  .sticky-active.v2 .header-menu-area11 {
    padding: 12px 0px 15px;
  }
}
@media (max-width: 1201px) {
  .sticky-active.v2 .btn-box {
    display: none;
  }
}
.sticky-active.v2 .popup-search {
  margin: 0 80px 0 82px;
  color: var(--color-content-white);
}
.sticky-active.v2 .hamburger span {
  background-color: var(--color-content-white);
}
.vs-header13 .menu-style1 > ul > li > .active {
  background-color: var(--color-content-black2);
}
.vs-header13 .menu-style1 > ul > li.menu-has-items.active > a {
  background-color: var(--color-content-black2);
}
.vs-header13 .sticky-active.is-sticky .header-menu-area {
  background-color: var(--color-content-white);
}
.vs-header13 .sticky-active.is-sticky .active {
  color: var(--color-content-white);
}
.vs-header13 .sticky-active.is-sticky .active::before {
  background-color: var(--color-content-white);
}
.vs-header13 .sticky-active.is-sticky a {
  color: var(--color-content-black2);
}
.vs-header13 .sticky-active.is-sticky a::before {
  background-color: var(--color-content-black2);
}
.vs-header13 .sticky-active.is-sticky a:hover {
  color: var(--color-content-white);
}
.vs-header13 .sticky-active.is-sticky a:hover::before {
  background-color: var(--color-content-white);
}

.sticky-active.v13 .popup-search {
  margin-right: 46px;
}
.sticky-active.v13 .hamburger span {
  background-color: var(--color-content-white);
}

.sticky-active.v14 .header-contact11 {
  margin-right: 39px;
}
@media (max-width: 1440px) {
  .sticky-active.v14 {
    margin: 0;
    border-radius: 0;
    padding: 12px 18px 15px;
  }
  .sticky-active.v14 .header-menu-area {
    padding: 0;
  }
  .sticky-active.v14 .menu-style1,
  .sticky-active.v14 .menu-toggle,
  .sticky-active.v14 .btn-box {
    display: none;
  }
  .sticky-active.v14 .hamburger {
    display: inline-block;
  }
}
@media (max-width: 1201px) {
  .sticky-active.v14 .hamburger {
    right: 0;
  }
}

.sticky-active.v16 {
  background-color: var(--color-heading);
}
.sticky-active.v16 .header-menu-area {
  background-color: var(--color-heading);
  padding: 17px 28px 17px 37px;
}
.sticky-active.v16 .header-menu-area .hamburger span {
  background-color: var(--color-content-white);
}
.sticky-active.v16 .header-menu-area .header-logo a {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}
.sticky-active.v16 .header-menu-area .ibt-btn.ibt-btn-outline-3 {
  color: var(--color-content-white);
}
.sticky-active.v16 .menu-style1.v4 {
  background-color: var(--color-surface-dark-2);
}
.sticky-active.v16 .menu-style1.v4 > ul > li > a {
  padding: 0 26px;
}
.sticky-active.v16 .menu-style1.v4 > ul > li > a::before {
  display: none;
}

.side-menu2.v2 {
  background-color: var(--color-heading);
  border: 0;
}
.side-menu2.v2 ul {
  border: 0;
  padding: 76px 0 40px;
}
.side-menu2.v2 ul li {
  margin-bottom: 10px;
}
.side-menu2.v2 ul li a {
  color: var(--color-content-white);
}
.side-menu2.v2 ul li a::before {
  display: none;
}
.side-menu2.v2 .ibt-btn {
  color: var(--color-content-white);
}
.side-menu2.v2 .close-btn::before {
  color: var(--color-content-white) !important;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.footer-style1 {
  position: relative;
  z-index: 999;
}
@media (max-width: 1440px) {
  .footer-style1 {
    margin: 0 20px;
  }
}
@media (max-width: 390px) {
  .footer-style1 {
    margin: 0 10px;
  }
}

.footer-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #CBCBCB;
  padding-bottom: 80px;
}
@media (max-width: 820px) {
  .footer-content {
    display: block;
  }
}
.footer-content .title {
  font-size: 80px;
  line-height: 90px;
  font-weight: 400;
  margin-bottom: 0;
  background: -webkit-linear-gradient(left, #45d0bd, #2c84c8);
  background: linear-gradient(to right, #45d0bd, #2c84c8);
  background-color: transparent;
  color: transparent;
  -webkit-background-clip: text;
  letter-spacing: -0.03em;
  max-width: 912px;
}
@media (max-width: 1201px) {
  .footer-content .title {
    font-size: 61px;
    line-height: 71px;
  }
}
@media (max-width: 1025px) {
  .footer-content .title {
    font-size: 49px;
    line-height: 59px;
  }
}
@media (max-width: 820px) {
  .footer-content .title {
    margin-bottom: 40px;
  }
}
@media (max-width: 577px) {
  .footer-content .title {
    font-size: 38px;
    line-height: 48px;
  }
}
@media (max-width: 480px) {
  .footer-content .title {
    font-size: 28px;
    line-height: 38px;
  }
}
.footer-content .ibt-btn {
  position: relative;
  top: -10px;
  color: var(--color-content-white);
}

.widget-area {
  position: relative;
  z-index: 99;
}

.about-widget {
  position: relative;
}
@media (max-width: 769px) {
  .about-widget {
    margin-bottom: 40px;
  }
}
.about-widget .footer-logo {
  margin-bottom: 18px;
}
@media (max-width: 1440px) {
  .about-widget .footer-logo {
    margin-bottom: 30px;
  }
}
.about-widget .social-icon {
  margin-bottom: 30px;
}
.about-widget .title {
  font-size: 150px;
  line-height: 121px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px #6766C8;
  font-family: var(--font-tertiary);
  margin-bottom: 0;
  letter-spacing: -0.05em;
}
@media (max-width: 1201px) {
  .about-widget .title {
    font-size: 122px;
  }
}
@media (max-width: 1025px) {
  .about-widget .title {
    font-size: 73px;
  }
}
@media (max-width: 769px) {
  .about-widget .title {
    font-size: 122px;
  }
}
@media (max-width: 577px) {
  .about-widget .title {
    font-size: 82px;
  }
}
@media (max-width: 480px) {
  .about-widget .title {
    font-size: 62px;
    line-height: 90px;
  }
}
@media (max-width: 390px) {
  .about-widget .title {
    font-size: 53px;
    line-height: 62px;
  }
}

.widget-title {
  position: relative;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--color-content-white);
  margin-bottom: 12px;
  font-family: var(--font-secondary);
}

.footer-links {
  position: relative;
  width: 221px;
}
@media (max-width: 1201px) {
  .footer-links {
    width: 168px;
  }
}
@media (max-width: 1025px) {
  .footer-links {
    width: 226px;
  }
}
@media (max-width: 480px) {
  .footer-links {
    width: 188px;
  }
}
.footer-links:last-child {
  width: unset;
}
@media (max-width: 390px) {
  .footer-links:last-child {
    margin-top: 50px;
  }
}
.footer-links ul li {
  margin-bottom: 4px;
}
.footer-links ul li:last-child {
  margin-bottom: 0;
}
.footer-links ul li a {
  position: relative;
  font-weight: 500;
  line-height: 16px;
  font-size: 16px;
  display: inline-block;
  margin-bottom: 0;
  color: var(--color-content-white);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.footer-links ul li a::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-content-white);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  opacity: 0;
  visibility: hidden;
}
.footer-links ul li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 12px;
  background-color: var(--color-content-white);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
}
.footer-links ul li a:hover {
  padding-left: 10px;
}
.footer-links ul li a:hover::before, .footer-links ul li a:hover::after {
  opacity: 1;
  visibility: visible;
}

.footer-menu {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 390px) {
  .footer-menu {
    display: block;
  }
}

.footer-botom {
  position: relative;
  padding: 63px 0 60px;
}

.footer-box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 480px) {
  .footer-box {
    display: block;
  }
}
@media (max-width: 480px) {
  .footer-box p {
    margin-bottom: 10px !important;
  }
}
.footer-box p,
.footer-box span {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: inline-block;
  margin-bottom: 0;
  color: #BEBEBE;
}
.footer-box p a,
.footer-box span a {
  color: #BEBEBE;
  text-decoration: underline;
}

.footer-style2 {
  position: relative;
  background-color: var(--color-heading);
  margin: 0 20px 20px;
  border-radius: 0 0 25px 25px;
}
@media (max-width: 1366px) {
  .footer-style2 {
    padding: 0 27px 0;
  }
}
@media (max-width: 1201px) {
  .footer-style2 {
    padding: 0 27px 0;
  }
}
@media (max-width: 1025px) {
  .footer-style2 {
    padding: 0 27px 0;
  }
}
@media (max-width: 577px) {
  .footer-style2 {
    padding: 0 27px 0;
  }
}
.footer-style2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 466px;
  background-image: url(../images/layers/eclips8.webp);
  background-repeat: no-repeat;
  background-size: cover;
}
.footer-style2 .footer-box {
  position: relative;
  border-top: 1px solid #CBCBCB;
  padding: 46px 0 37px;
}
.footer-style2 .footer-botom {
  padding-bottom: 0;
}

.widget-area2 {
  position: relative;
  padding: 145px 0 0;
}
@media (max-width: 1366px) {
  .widget-area2 {
    padding: 80px 0 0;
  }
}
@media (max-width: 1440px) {
  .widget-area2 {
    padding: 72px 0 0;
  }
}

.about-widget.v2 .title {
  font-size: 80px;
  line-height: 80px;
}
@media (max-width: 1366px) {
  .about-widget.v2 .title {
    font-size: 77px;
  }
}
@media (max-width: 1201px) {
  .about-widget.v2 .title {
    font-size: 65px;
  }
}
@media (max-width: 1025px) {
  .about-widget.v2 .title {
    font-size: 56px;
  }
}
@media (max-width: 390px) {
  .about-widget.v2 .title {
    font-size: 49px;
    line-height: 44px;
  }
}

.contact-widget {
  position: relative;
  margin-right: 127px;
}
@media (max-width: 1201px) {
  .contact-widget {
    margin-right: 48px;
  }
}
@media (max-width: 1025px) {
  .contact-widget {
    margin-right: 28px;
  }
}
@media (max-width: 577px) {
  .contact-widget {
    margin-bottom: 40px;
  }
}
.contact-widget .widget-title {
  margin-bottom: 7px;
}
.contact-widget p {
  font-weight: 500;
  line-height: 30px;
  color: var(--color-content-white);
  margin-bottom: 17px;
  max-width: 229px;
}
@media (max-width: 1025px) {
  .contact-widget p {
    max-width: 210px;
  }
}
.contact-widget .gmail {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-content-white);
  color: var(--color-content-white);
  display: inline-block;
  margin-top: 19px;
}
.contact-widget .gmail:hover {
  color: var(--color-primary);
}

.footer-menu.v2 {
  -webkit-box-pack: unset;
  -webkit-justify-content: unset;
      -ms-flex-pack: unset;
          justify-content: unset;
  margin-left: 55px;
}
@media (max-width: 1025px) {
  .footer-menu.v2 {
    margin-left: 9px;
  }
}
@media (max-width: 769px) {
  .footer-menu.v2 {
    margin-left: 0;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
@media (max-width: 1025px) {
  .footer-menu.v2 .footer-links:nth-child(2) {
    width: 157px;
  }
}
@media (max-width: 390px) {
  .footer-menu.v2 .footer-links:nth-child(2) {
    margin-bottom: 50px;
  }
}

.main-sec.v2::before {
  display: none;
}

.main-sec.v3::before {
  display: none;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

ul {
  position: relative;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.ibt-btn {
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--font-size-b2);
  line-height: var(--line-height-b2);
  letter-spacing: var(--letter-spacing-b2);
  font-weight: var(--f-medium);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 15px;
  height: 65px;
  padding: 13px 26px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--color-surface-light-3);
  color: var(--color-body);
  border-radius: var(--radius-lg);
  border: none;
  position: relative;
  white-space: nowrap;
  -webkit-transition: var(--transition-1);
  transition: var(--transition-1);
}
.ibt-btn i[class=icon-arrow-top],
.ibt-btn span[class=icon-arrow-top] {
  text-indent: 0.8em;
  font-size: 10px;
  line-height: 1.1;
  position: relative;
  padding-right: 1px;
  overflow: hidden;
}
.ibt-btn i[class=icon-arrow-top]::before, .ibt-btn i[class=icon-arrow-top]::after,
.ibt-btn span[class=icon-arrow-top]::before,
.ibt-btn span[class=icon-arrow-top]::after {
  -webkit-transition: var(--transition-1);
  transition: var(--transition-1);
}
.ibt-btn i[class=icon-arrow-top]::after,
.ibt-btn span[class=icon-arrow-top]::after {
  content: "\e830";
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  right: 0;
  transform: translateX(-110%) translateY(200%);
  -webkit-transform: translateX(-110%) translateY(200%);
  -ms-transform: translateX(-110%) translateY(200%);
}
.ibt-btn:hover {
  background: var(--color-surface-dark-2);
  color: var(--color-content-white);
}
.ibt-btn:hover i[class=icon-arrow-top]::before,
.ibt-btn:hover span[class=icon-arrow-top]::before {
  transform: translateX(100%) translateY(-170%);
  -webkit-transform: translateX(100%) translateY(-170%);
  -ms-transform: translateX(100%) translateY(-170%);
}
.ibt-btn:hover i[class=icon-arrow-top]::after,
.ibt-btn:hover span[class=icon-arrow-top]::after {
  transform: translateX(-1px) translateY(1px);
  -webkit-transform: translateX(-1px) translateY(1px);
  -ms-transform: translateX(-1px) translateY(1px);
}
.ibt-btn.ibt-btn-outline {
  background: transparent;
  border: 2px solid transparent;
}
.ibt-btn.ibt-btn-outline::before, .ibt-btn.ibt-btn-outline::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  -webkit-transition: var(--transition-1);
  transition: var(--transition-1);
}
.ibt-btn.ibt-btn-outline::before {
  content: "";
  position: absolute;
  padding: 1px; /* border ki width */
  border-radius: 12px;
  background: -webkit-linear-gradient(left, #4875c8, #7061c8);
  background: linear-gradient(90deg, #4875c8, #7061c8);
  -webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ibt-btn.ibt-btn-outline::after {
  background: var(--gradient-btn-1);
  opacity: 0;
}
.ibt-btn.ibt-btn-outline > * {
  position: relative;
  z-index: 1;
}
.ibt-btn.ibt-btn-outline:hover::after {
  opacity: 1;
}
.ibt-btn.ibt-btn-outline-3 {
  background: transparent;
  border: 2px solid transparent;
}
.ibt-btn.ibt-btn-outline-3::before, .ibt-btn.ibt-btn-outline-3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  -webkit-transition: var(--transition-1);
  transition: var(--transition-1);
}
.ibt-btn.ibt-btn-outline-3::before {
  content: "";
  position: absolute;
  padding: 2px; /* border ki width */
  border-radius: 12px;
  background: -webkit-linear-gradient(left, #45d0bd, #44b6e9);
  background: linear-gradient(90deg, #45d0bd, #44b6e9);
  -webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.ibt-btn.ibt-btn-outline-3::after {
  background: var(--gradient-3);
  opacity: 0;
}
.ibt-btn.ibt-btn-outline-3 > * {
  position: relative;
  z-index: 1;
}
.ibt-btn.ibt-btn-outline-3:hover {
  color: var(--color-body);
}
.ibt-btn.ibt-btn-outline-3:hover::after {
  opacity: 1;
}
.ibt-btn.ibt-btn-rounded {
  border-radius: var(--radius-4xl);
  padding: 13px 45px;
}
.ibt-btn.ibt-btn-rounded.ibt-btn-outline::before, .ibt-btn.ibt-btn-rounded.ibt-btn-outline::after, .ibt-btn.ibt-btn-rounded.ibt-btn-outline-3::before, .ibt-btn.ibt-btn-rounded.ibt-btn-outline-3::after {
  border-radius: var(--radius-4xl);
}

.lg-toolbar .lg-icon,
.lg-counter {
  color: #fff !important;
}

.lg-counter {
  font-weight: 600;
  font-size: 18px !important;
}

.lg-toolbar .lg-download:after,
.lg-toolbar .lg-close:after,
.lg-icon.lg-zoom-in:after {
  font-size: 20px !important;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.hero-style2 .slider-btn .swiper-button-next {
  margin: 0 13px 0px 0px;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.hero-style2 .slider-btn .swiper-button-next::before {
  content: "\e845";
  font: 400 normal 11px/1em "fontello";
  font-size: 14px;
}
.hero-style2 .slider-btn .swiper-button-prev {
  margin: 0 0 0 13px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.hero-style2 .slider-btn .swiper-button-prev::before {
  content: "\e845";
  font: 400 normal 11px/1em "fontello";
  font-size: 14px;
}
.hero-style2 .slider-btn .swiper-button-prev,
.hero-style2 .slider-btn .swiper-button-next {
  background-color: unset;
  padding: 0;
  border: 0;
  outline: none;
  width: 13px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
}
.hero-style2 .slider-btn .swiper-button-prev:hover,
.hero-style2 .slider-btn .swiper-button-next:hover {
  color: var(--color-primary);
}
.hero-style2 .slider-btn .swiper-button-next.active,
.hero-style2 .slider-btn .swiper-button-prev.active {
  outline: none;
}

.exp-box {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background-color: var(--color-content-white);
  width: 500px;
  border-radius: 25px;
  padding: 33px 9px;
  padding-left: 252px;
}
@media (max-width: 820px) {
  .exp-box {
    width: 451px;
    padding-left: 224px;
  }
}
@media (max-width: 769px) {
  .exp-box {
    width: 457px;
    padding-left: 230px;
    right: auto;
    left: 20px;
    bottom: 20px;
  }
}
@media (max-width: 480px) {
  .exp-box {
    padding-bottom: 39px;
    width: 400px;
    padding-left: 220px;
  }
}
@media (max-width: 390px) {
  .exp-box {
    width: 314px;
    padding: 12px 9px 17px 146px;
    left: 11px;
  }
}
.exp-box p {
  display: inline-block;
  font-size: 20px;
  line-height: 25px;
  font-weight: 400;
  margin-bottom: 0;
  font-family: var(--font-primary);
  color: var(--color-content-black2);
  max-width: 203px;
}
@media (max-width: 1366px) {
  .exp-box p {
    font-size: 19px;
  }
}
@media (max-width: 480px) {
  .exp-box p {
    font-size: 16px;
    line-height: 21px;
    margin-right: 20px;
  }
}
@media (max-width: 390px) {
  .exp-box p {
    font-size: 14px;
  }
}
.hero-style6 .slider-btn .swiper-button-next {
  margin: 0 13px 0px 0px;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.hero-style6 .slider-btn .swiper-button-next::before {
  content: "\e845";
  font: 400 normal 11px/1em "fontello";
  font-size: 14px;
}
.hero-style6 .slider-btn .swiper-button-prev {
  margin: 0 0 0 13px;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.hero-style6 .slider-btn .swiper-button-prev::before {
  content: "\e845";
  font: 400 normal 11px/1em "fontello";
  font-size: 14px;
}
.hero-style6 .slider-btn .swiper-button-prev,
.hero-style6 .slider-btn .swiper-button-next {
  background-color: unset;
  padding: 0;
  border: 0;
  outline: none;
  width: 13px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
}
.hero-style6 .slider-btn .swiper-button-prev:hover,
.hero-style6 .slider-btn .swiper-button-next:hover {
  color: var(--color-primary);
}
.hero-style6 .slider-btn .swiper-button-next.active,
.hero-style6 .slider-btn .swiper-button-prev.active {
  outline: none;
}

.hero-style8 {
  position: relative;
  overflow: hidden;
  padding: 252px 0 155px;
  border-radius: 25px;
  margin: 20px;
}
@media (max-width: 1440px) {
  .hero-style8 {
    padding: 181px 0 111px;
  }
}
@media (max-width: 1201px) {
  .hero-style8 {
    padding: 149px 0 111px;
  }
}
@media (max-width: 577px) {
  .hero-style8 {
    padding: 119px 0 89px;
  }
}

.main-sec6 {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

#fluid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.newsletter-banner {
  position: relative;
  margin: 0 20px;
  z-index: 1;
  overflow: hidden;
  border-radius: 25px;
}
.review-tabs .nav-tabs2 .nav-item .nav-link.active {
  background-color: var(--color-surface-dark-2);
  color: var(--color-content-white);
}

.custom-form4 {
  position: relative;
  text-align: left;
}
.custom-form4 .title,
.custom-form4 .title2 {
  position: relative;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  margin-bottom: 46px;
  padding-bottom: 11px;
}
.custom-form4 .title::before,
.custom-form4 .title2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: -webkit-linear-gradient(left, #8258c8, #2c84c8);
  background: linear-gradient(to right, #8258c8, #2c84c8);
}
.custom-form4 .title2 {
  display: none;
}
.custom-form4 input,
.custom-form4 select,
.custom-form4 textarea {
  border: 1px solid #adadad;
  border-radius: 20px;
  height: 50px;
  font-size: 14px;
  color: #898989;
  padding: 0 19px;
}
.custom-form4 input::-webkit-input-placeholder, .custom-form4 select::-webkit-input-placeholder, .custom-form4 textarea::-webkit-input-placeholder {
  color: #898989;
}
.custom-form4 input::-moz-placeholder, .custom-form4 select::-moz-placeholder, .custom-form4 textarea::-moz-placeholder {
  color: #898989;
}
.custom-form4 input:-ms-input-placeholder, .custom-form4 select:-ms-input-placeholder, .custom-form4 textarea:-ms-input-placeholder {
  color: #898989;
}
.custom-form4 input::-ms-input-placeholder, .custom-form4 select::-ms-input-placeholder, .custom-form4 textarea::-ms-input-placeholder {
  color: #898989;
}
.custom-form4 input::placeholder,
.custom-form4 select::placeholder,
.custom-form4 textarea::placeholder {
  color: #898989;
}
.custom-form4 textarea {
  height: 112px;
  margin-bottom: 30px;
}
.custom-form4 .password {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  display: inline-block;
  text-decoration: underline;
  color: var(--color-content-black2);
  background-color: unset;
  border: 0;
  outline: none;
}
.custom-form4 .ibt-btn .extra {
  display: none;
}

.custom-form4.active .sign-up-content {
  display: inline-block;
}
.custom-form4.active .title-box .title2 {
  display: block;
}
.custom-form4.active .title-box .title {
  display: none !important;
}
.custom-form4.active .form-group.name,
.custom-form4.active .password-section,
.custom-form4.active .extra-section {
  display: none;
}
.custom-form4.active .ibt-btn span:first-child {
  display: none;
}
.custom-form4.active .ibt-btn .extra {
  display: inline-block;
}

.googel-map {
  position: relative;
  margin-bottom: 31px;
}
.googel-map::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 600px;
  background-image: url(../images/layers/map-layer.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media (max-width: 1440px) {
  .googel-map::before {
    top: -79%;
  }
}
@media (max-width: 1201px) {
  .googel-map::before {
    top: -66%;
  }
}
@media (max-width: 1025px) {
  .googel-map::before {
    top: -53%;
  }
}
@media (max-width: 820px) {
  .googel-map::before {
    top: -41%;
  }
}

.intro {
  background-color: var(--color-surface-dark-2);
}

.demo-img {
  position: relative;
  margin: 0 50px 124px;
  z-index: 0;
}
@media (max-width: 1440px) {
  .demo-img {
    margin: 0 14px 55px;
  }
}
.demo-img img {
  width: 100%;
  border-radius: 25px;
  object-fit: cover;
}
.demo-img a:hover {
  cursor: none;
}

.demo-hover.show {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  pointer-events: auto;
  z-index: 99;
}

.demo-hover {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease, -webkit-clip-path 0.4s ease-out;
  transition: opacity 0.2s ease, -webkit-clip-path 0.4s ease-out;
  transition: opacity 0.2s ease, clip-path 0.4s ease-out;
  transition: opacity 0.2s ease, clip-path 0.4s ease-out, -webkit-clip-path 0.4s ease-out;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  z-index: 9999;
}

.demo-hover.show {
  opacity: 1;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

.googel-map {
  position: relative;
}
.googel-map iframe {
  width: 100%;
}
.googel-map h2 {
  display: none;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
/* The demo shows this pair as circles; the theme never rounded them. The ring
   matters as much as the radius -- the two overlap by 39px, and without a band
   of the card colour between them they read as one shape rather than two. The
   explicit size stops the global `img { height: auto }` from ovalling them if a
   non-square headshot is ever dropped in. */

.rating {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.rating li {
  color: #e7b025;
  font-size: 12px;
  margin-right: 2px;
}
.rating li:last-child {
  margin-right: 0;
}
.rating span {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-white);
  display: inline-block;
  margin-left: 11px;
}

.user {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-content-white);
  display: inline-block;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.ser-card14-card1 {
  position: relative;
  background-color: var(--color-heading);
  border-radius: 25px;
  padding: 39px 48px 43px;
  margin-bottom: 19px;
}
@media (max-width: 1201px) {
  .ser-card14-card1 {
    padding: 39px 33px 36px;
  }
}
.ser-card14-card1 .title {
  font-size: 25px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-white);
  margin-bottom: 9px;
  font-family: var(--font-secondary);
  max-width: 410px;
}
@media (max-width: 1201px) {
  .ser-card14-card1 .title {
    font-size: 22px;
  }
}
.ser-card14-card1 img {
  margin-top: 16px;
}

.ser-card14-card2 {
  position: relative;
  border: 1px solid #e2e2e2;
  border-radius: 25px;
  padding: 40px 40px 40px 42px;
  max-height: 400px;
}
@media (max-width: 1440px) {
  .ser-card14-card2 {
    height: 485px;
    max-height: unset;
  }
}
@media (max-width: 1201px) {
  .ser-card14-card2 {
    padding: 40px 30px 40px 27px;
  }
}
@media (max-width: 1025px) {
  .ser-card14-card2 {
    height: 470px;
  }
}
@media (max-width: 769px) {
  .ser-card14-card2 {
    height: 439px;
  }
}
@media (max-width: 577px) {
  .ser-card14-card2 {
    height: auto;
  }
}
.ser-card14-card2 .title {
  font-size: 25px;
  line-height: 30px;
  font-weight: 500;
  font-family: var(--font-secondary);
  margin-bottom: 98px;
  color: var(--color-surface-black);
}
@media (max-width: 1440px) {
  .ser-card14-card2 .title {
    margin-bottom: 34px;
  }
}
@media (max-width: 1201px) {
  .ser-card14-card2 .title {
    font-size: 22px;
  }
}

.ser-card14-card3 {
  position: relative;
  margin-right: 19px;
}
@media (max-width: 820px) {
  .ser-card14-card3 {
    width: 48%;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 577px) {
  .ser-card14-card3 {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .ser-card14-card3 {
    height: 450px;
  }
}
.ser-card14-card3 img {
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.ser-card14-card4 {
  position: relative;
  background-color: var(--color-content-white);
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 19px;
}

.ser-card14-card5 {
  position: relative;
  height: 235px;
}
@media (max-width: 1440px) {
  .ser-card14-card5 {
    height: 306px;
  }
}
@media (max-width: 1201px) {
  .ser-card14-card5 {
    height: 294px;
  }
}
@media (max-width: 577px) {
  .ser-card14-card5 {
    height: auto;
  }
}
@media (max-width: 390px) {
  .ser-card14-card5 {
    height: 262px;
  }
}
.ser-card14-card5 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.ser-card14-card1,
.ser-card14-card2,
.ser-card14-card3,
.ser-card14-card4,
.ser-card14-card5 {
  opacity: 0;
  -webkit-transform: translateY(40px);
      -ms-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}

.slider-btn5 {
  position: relative;
  background-color: unset;
  border-radius: 25px 25px 0 0;
  width: 95px;
  height: 50px;
  line-height: 46px;
  z-index: 9;
  text-align: center;
}
@media (max-width: 1440px) {
  .slider-btn5 {
    right: -4%;
  }
}
@media (max-width: 1366px) {
  .slider-btn5 {
    right: 0;
  }
}
@media (max-width: 1025px) {
  .slider-btn5 {
    right: -74%;
  }
}
@media (max-width: 820px) {
  .slider-btn5 {
    right: auto;
    left: 0;
    top: 45%;
  }
}
@media (max-width: 577px) {
  .slider-btn5 {
    top: 50%;
  }
}
.slider-btn5::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border ki width */
  border-radius: 15px;
  background: -webkit-linear-gradient(left, #7b5cc8, #5e6bc9, #3480c8);
  background: linear-gradient(90deg, #7b5cc8, #5e6bc9, #3480c8); /* 👈 gradient colors */
  -webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: -1;
}
.slider-btn5 .swiper-button-prev,
.slider-btn5 .swiper-button-next {
  background-color: unset;
  border: 0;
  outline: none;
  padding: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: unset;
}
.slider-btn5 .swiper-button-prev:hover,
.slider-btn5 .swiper-button-next:hover {
  color: var(--color-primary);
}
.slider-btn5 .swiper-button-prev::after,
.slider-btn5 .swiper-button-next::after {
  display: none;
}
.slider-btn5 .swiper-button-prev {
  margin-right: 30px;
}
.slider-btn5 .swiper-button-prev::before {
  content: "\e833";
  font: 400 normal 11px/1em "fontello";
}
.slider-btn5 .swiper-button-next::before {
  content: "\e844";
  font: 400 normal 11px/1em "fontello";
}

.service-banner {
  position: relative;
}

.service-single-sec {
  position: relative;
}
@media (max-width: 1201px) {
  .service-single-sec {
    margin: 0 20px;
  }
}
@media (max-width: 577px) {
  .service-single-sec {
    margin: 0 5px;
  }
}
.service-single-sec::before {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 0;
  width: 578px;
  height: 1629px;
  background-image: url(../images/layers/ser-layer.png);
  z-index: -1;
}
@media (max-width: 1440px) {
  .service-single-sec::before {
    display: none;
  }
}
.service-single-sec::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  width: 578px;
  height: 956px;
  background-image: url(../images/layers/ser-layer2.png);
  z-index: -1;
}
@media (max-width: 1440px) {
  .service-single-sec::after {
    display: none;
  }
}

.ser-detail {
  position: relative;
  margin-left: 15px;
}
@media (max-width: 769px) {
  .ser-detail {
    margin-left: 0;
  }
}
.ser-detail .title {
  font-size: 55px;
  line-height: 60px;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: -0.05em;
  display: block;
}
@media (max-width: 1201px) {
  .ser-detail .title {
    font-size: 45px;
    line-height: 50px;
  }
}
@media (max-width: 1025px) {
  .ser-detail .title {
    font-size: 37px;
    line-height: 49px;
  }
}
@media (max-width: 769px) {
  .ser-detail .title {
    font-size: 35px;
    line-height: 40px;
  }
}
@media (max-width: 577px) {
  .ser-detail .title {
    font-size: 32px;
    line-height: 1.1em;
  }
}
.ser-detail p {
  font-weight: 700;
  line-height: 30px;
  font-size: 16px;
  color: var(--color-content-black2);
  margin: 30px 0 0;
  letter-spacing: 0;
}
.ser-detail .paragraph {
  font-weight: 500;
}
.ser-detail img {
  margin: 77px 0 9px;
}
.ser-detail .sec-title {
  text-align: left;
  margin: 0 0 45px;
}

.ser-detail-list {
  position: relative;
  margin-top: 35px;
}
.ser-detail-list li {
  position: relative;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: var(--color-content-black2);
  margin: 0;
  padding-left: 30px;
}
.ser-detail-list li i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  color: #44b6e9;
  padding-right: 22px;
}

.ser-anim {
  opacity: 0;
  -webkit-transform: translateY(80px);
      -ms-transform: translateY(80px);
          transform: translateY(80px);
  will-change: transform, opacity;
}

.ser-content24 {
  position: relative;
  background-color: rgba(31, 31, 31, 0.5019607843);
  padding: 40px 45px 30px 60px;
  border-radius: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}
@media (max-width: 1440px) {
  .ser-content24 {
    display: block;
    padding: 40px 45px 40px 60px;
  }
}
@media (max-width: 1025px) {
  .ser-content24 {
    padding: 55px 24px 38px 38px;
  }
}
@media (max-width: 769px) {
  .ser-content24 {
    padding: 55px 27px 38px 36px;
  }
}
@media (max-width: 480px) {
  .ser-content24 {
    padding: 55px 3px 38px 25px;
  }
}
.ser-content24 .title {
  font-size: 25px;
  font-weight: 400;
  line-height: 30px;
  margin: 0 75px 0 0;
  letter-spacing: -0.03em;
  color: var(--color-content-white);
}
@media (max-width: 1440px) {
  .ser-content24 .title {
    margin-bottom: 30px;
  }
}

.funfact-content24 {
  background-color: rgba(31, 31, 31, 0.5019607843);
  border-radius: 25px;
  padding: 60px 10px 50px 10px;
  text-align: center;
  height: 100%;
  z-index: 9999;
}
@media (max-width: 1440px) {
  .funfact-content24 {
    padding: 103px 10px 50px 10px;
  }
}
@media (max-width: 769px) {
  .funfact-content24 {
    padding: 37px 10px 18px 10px;
  }
}
@media (max-width: 577px) {
  .funfact-content24 {
    padding: 0px 10px 18px 10px;
  }
}
.funfact-content24 .title {
  font-size: 14px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-white);
  text-align: center;
  margin: -33px 0 0 76px;
  z-index: 999;
  position: relative;
  font-family: var(--font-tertiary);
  letter-spacing: normal;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.nav-tabs {
  border: 0;
  display: block;
}
.nav-tabs .nav-item {
  margin: 0 0 10px;
}
.nav-tabs .nav-link:hover {
  background-color: #ecf0f4;
}
.nav-tabs .nav-link {
  background-color: unset;
  padding: 0;
  border: 1px solid #d4d6d8;
  box-shadow: unset;
  outline: none;
  width: 100%;
  border-radius: 20px;
}
.nav-tabs .nav-link.active {
  background-color: #ecf0f4;
  border-color: transparent;
  box-shadow: unset;
}
.feature-tabs6 .nav-tabs .nav-link.active .title {
  color: var(--color-content-white);
}
.feature-tabs6 .nav-tabs .nav-link.active::before {
  opacity: 1;
}

.nav-tabs8 {
  border: 0;
  display: block;
}
.nav-tabs8 .nav-item {
  margin: 0 0 10px;
}
.nav-tabs8 .nav-link:hover {
  background-color: #ecf0f4;
}
.nav-tabs8 .nav-link {
  background-color: unset;
  padding: 0;
  border: 0;
  box-shadow: unset;
  outline: none;
  width: 100%;
  border-radius: 20px;
}
.nav-tabs8 .nav-link.active {
  background-color: #ecf0f4;
  border-color: transparent;
  box-shadow: unset;
}
.feature-content12 .nav-tabs .nav-item .active {
  background-color: unset;
  color: var(--color-content-white);
}
.feature-content12 .nav-tabs .nav-item .active::before {
  width: 100%;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.solutions {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: var(--color-heading);
  display: inline-block;
  max-width: 180px;
  margin-left: 42px;
}
@media (max-width: 1025px) {
  .solutions {
    margin-left: 26px;
  }
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.testi-slider {
  position: relative;
  background-color: var(--color-surface-dark-2);
  padding: 258px 136px 242px;
  border-radius: 25px;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .testi-slider {
    padding: 134px 87px 184px;
  }
}
@media (max-width: 1201px) {
  .testi-slider {
    padding: 119px 72px 144px;
  }
}
@media (max-width: 1025px) {
  .testi-slider {
    padding: 82px 47px 130px;
  }
}
@media (max-width: 390px) {
  .testi-slider {
    padding: 53px 29px 110px;
  }
}
.testi-slider img {
  margin-bottom: 24px;
}
.testi-slider p {
  font-weight: 400;
  line-height: 35px;
  font-size: 25px;
  color: var(--color-content-white);
  margin-bottom: 51px;
  font-family: var(--font-primary);
}
@media (max-width: 1025px) {
  .testi-slider p {
    line-height: 30px;
    font-size: 18px;
  }
}
.testi-slider span {
  font-size: 16px;
  line-height: 35px;
  color: var(--color-content-white);
  display: inline-block;
}
.slider-btn .swiper-button-prev,
.slider-btn .swiper-button-next {
  position: static;
  background-color: unset;
  border: 0;
  outline: none;
  padding: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: unset;
  display: block;
}
.slider-btn .swiper-button-prev:hover,
.slider-btn .swiper-button-next:hover {
  color: var(--color-primary);
}
.slider-btn .swiper-button-prev::after,
.slider-btn .swiper-button-next::after {
  display: none;
}
.slider-btn .swiper-button-prev {
  margin-right: 21px;
}
.slider-btn .swiper-button-prev::before {
  content: "\e833";
  font: 400 normal 11px/1em "fontello";
}
.slider-btn .swiper-button-next::before {
  content: "\e844";
  font: 400 normal 11px/1em "fontello";
}

.testimonial-sec2 {
  position: relative;
  background-color: #ECF0F4;
  border-radius: 25px;
  margin: 20px 20px 0;
  padding: 120px 0 43px;
  z-index: 0;
}
@media (max-width: 1440px) {
  .testimonial-sec2 {
    padding: 120px 27px 43px;
  }
}
@media (max-width: 1025px) {
  .testimonial-sec2 {
    padding: 80px 19px 43px;
  }
}
@media (max-width: 577px) {
  .testimonial-sec2 {
    padding: 80px 7px 43px;
  }
}
.testimonial-sec2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 751px;
  background-image: url(../images/layers/shadow.png);
  z-index: 999;
}
@media (max-width: 820px) {
  .testimonial-sec2 .row .col-lg-3:nth-child(3), .testimonial-sec2 .row .col-lg-3:last-child {
    display: none;
  }
}

.test-block2 {
  position: relative;
  background-color: var(--color-content-white);
  border-radius: 25px;
  padding: 40px 42px 42px;
  margin-bottom: 20px;
}
@media (max-width: 1201px) {
  .test-block2 {
    padding: 35px 19px 32px;
  }
}
@media (max-width: 769px) {
  .test-block2 {
    padding: 35px 30px 32px;
    margin-bottom: 20px !important;
  }
}
.test-block2 .name {
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 0;
  color: var(--color-heading);
}
.test-block2 .name .loc {
  display: block;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.6;
}
.test-block2 p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 0;
}

.testi-title {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 53px;
  text-align: center;
}
@media (max-width: 1440px) {
  .testi-title {
    max-width: 1000px;
  }
}
@media (max-width: 1366px) {
  .testi-title {
    max-width: 856px;
  }
}
.testi-title .rating {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.testi-title .rating li {
  font-size: 17px;
}
.testi-title .title {
  font-size: 60px;
  line-height: 70px;
  margin-bottom: 0;
  color: var(--color-heading);
  font-weight: 400;
}
@media (max-width: 1025px) {
  .testi-title .title {
    font-size: 50px;
    line-height: 55px;
  }
}
@media (max-width: 769px) {
  .testi-title .title {
    font-size: 35px;
    line-height: 40px;
  }
}
@media (max-width: 577px) {
  .testi-title .title {
    font-size: 32px;
    line-height: 1.25em;
  }
}
.testi-title .title span {
  background-image: -webkit-linear-gradient(342deg, #45D0BD 0%, #44B6E9 100%);
  background-image: linear-gradient(108deg, #45D0BD 0%, #44B6E9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.testi-title .highest-reviewed {
  max-width: 760px;
  margin: 20px auto 0;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-heading);
}
@media (max-width: 577px) {
  .testi-title .highest-reviewed {
    font-size: 16px;
  }
}

.testimonial-sec2.v3 .testi-title .title span {
  background-image: -webkit-linear-gradient(170deg, #E24C4A 0%, #386BB7 100%);
  background-image: linear-gradient(-80deg, #E24C4A 0%, #386BB7 100%);
}

.testi-slider4 p {
  font-size: 20px;
  line-height: 40px;
  font-weight: 400;
  color: var(--color-content-white);
  margin-bottom: 57px;
}
@media (max-width: 480px) {
  .testi-slider4 p {
    font-size: 16px;
    line-height: 36px;
  }
}

.test-block5 {
  position: relative;
  border: 1px solid #313131;
  border-radius: 25px;
  padding: 62px 38px 60px;
}
.test-block5:hover {
  cursor: none;
}
.test-block5 .name {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--color-content-white);
  margin-bottom: -3px;
}
.test-block5 p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--color-content-white);
  margin-top: 6px;
}

.swiper-wrapper-parent {
  position: relative;
  overflow: hidden;
}
.swiper-wrapper-parent::before, .swiper-wrapper-parent::after {
  content: "";
  position: absolute;
  top: 0;
  width: 344px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
@media (max-width: 1025px) {
  .swiper-wrapper-parent::before, .swiper-wrapper-parent::after {
    display: none;
  }
}
.swiper-wrapper-parent::before {
  left: 0;
  background: -webkit-linear-gradient(left, #1f1f1f, transparent);
  background: linear-gradient(to right, #1f1f1f, transparent);
}
.swiper-wrapper-parent::after {
  right: 0;
  background: -webkit-linear-gradient(right, #1f1f1f, transparent);
  background: linear-gradient(to left, #1f1f1f, transparent);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.pagination.v2 {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.swiper.brand .swiper-wrapper,
.swiper.brand .swiper-wrapper,
.swiper.brand2 .swiper-wrapper,
.swiper.brand2 .swiper-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.swiper.brand .swiper-slide,
.swiper.brand .swiper-slide,
.swiper.brand2 .swiper-slide,
.swiper.brand2 .swiper-slide {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.swiper.brand .swiper-slide img,
.swiper.brand .swiper-slide img,
.swiper.brand2 .swiper-slide img,
.swiper.brand2 .swiper-slide img {
  opacity: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  max-height: 100px;
  object-fit: contain;
}
.swiper.brand .swiper-slide:hover img,
.swiper.brand .swiper-slide:hover img,
.swiper.brand2 .swiper-slide:hover img,
.swiper.brand2 .swiper-slide:hover img {
  opacity: 100%;
}

.swiper.brand2 .swiper-slide {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.brand-sec3 .swiper-slide a img {
  opacity: 100% !important;
}
.brand-sec3 .swiper-slide a img:hover {
  -webkit-filter: brightness(9);
          filter: brightness(9);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.neural-playground5 .swiper.brand {
  max-width: 977px;
  margin-left: unset;
}
.neural-playground6 .swiper.brand {
  max-width: 977px;
  margin-left: unset;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.page-content {
  position: relative;
  text-align: center;
  max-width: 877px;
  margin: 0 auto;
}
@media (max-width: 390px) {
  .page-content {
    padding: 0 20px;
  }
}
.page-content .title {
  font-size: 80px;
  line-height: 90px;
  font-weight: 400;
  color: var(--color-content-white);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
@media (max-width: 1366px) {
  .page-content .title {
    font-size: 62px;
    line-height: 64px;
  }
}
@media (max-width: 820px) {
  .page-content .title {
    font-size: 49px;
    line-height: 50px;
  }
}
@media (max-width: 577px) {
  .page-content .title {
    font-size: 39px;
    line-height: 45px;
  }
}
@media (max-width: 480px) {
  .page-content .title {
    font-size: 34px;
    line-height: 44px;
  }
}
@media (max-width: 390px) {
  .page-content .title {
    font-size: 31px;
    line-height: 41px;
  }
}

.shape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 117px;
  height: 85px;
  background-image: url(../images/layers/shape1-4.png);
  z-index: 99;
  border-radius: 20px 0 0 0;
}
@media (max-width: 769px) {
  .shape {
    display: none;
  }
}

.shape3::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 292px;
  background-image: url(../images/layers/shape1-6.png);
  z-index: 99;
}
@media (max-width: 769px) {
  .shape3 {
    display: none;
  }
}

.staff-text {
  position: absolute;
  right: 142px;
  bottom: 29px;
  font-family: "Manrope Alt", Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: -0.03em;
  word-spacing: 0px;
  font-style: normal;
  font-weight: 700;
  font-size: 100px;
  line-height: 0.75em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--color-content-white);
  white-space: nowrap;
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
  -webkit-transform: rotate(-90deg) translateX(100%);
      -ms-transform: rotate(-90deg) translateX(100%);
          transform: rotate(-90deg) translateX(100%);
}
@media (max-width: 1201px) {
  .staff-text {
    font-size: 65px;
  }
}
@media (max-width: 769px) {
  .staff-text {
    display: none;
  }
}

.breadcrumbs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-content-white);
  padding: 35px 82px 26px;
  border-radius: 0 25px 0 25px;
}
@media (max-width: 769px) {
  .breadcrumbs {
    padding: 27px 55px 21px;
  }
}
@media (max-width: 480px) {
  .breadcrumbs {
    padding: 20px 53px 12px;
  }
}
.breadcrumbs::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-3.png);
  z-index: 99;
}
.breadcrumbs::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-2.png);
  z-index: 99;
}
.breadcrumbs li {
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  margin: 0;
  color: var(--color-content-black2);
}
.breadcrumbs li:nth-child(4) {
  color: #c5c5c5;
  margin: 0 3px;
}
.breadcrumbs li:nth-child(2) {
  margin: 0 3px;
}
@media (max-width: 390px) {
  .breadcrumbs li:last-child {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
  }
}
.breadcrumbs li a {
  color: var(--color-content-black2);
  border-bottom: 1px solid var(--color-content-black2);
}
.breadcrumbs li a:hover {
  color: var(--color-primary);
}
.breadcrumbs .items {
  color: #c5c5c5;
  margin: 0 3px;
}

.page-banner4 {
  position: relative;
  background-image: url(../images/bg/page1-4.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 217px 0 235px;
  margin: 21px 20px 0;
  border-radius: 28px;
}
@media (max-width: 769px) {
  .page-banner4 {
    padding: 125px 0 178px;
  }
}
@media (max-width: 577px) {
  .page-banner4 {
    padding: 123px 0 196px;
  }
}
@media (max-width: 480px) {
  .page-banner4 {
    padding: 114px 0 160px;
  }
}
@media (max-width: 480px) {
  .page-banner4 {
    padding: 81px 0 132px;
  }
}
.page-banner4::before {
  content: "";
  position: absolute;
  top: -29%;
  left: 0;
  width: 100%;
  height: 1023px;
  background-image: url(../images/layers/bg-layer2.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media (max-width: 1201px) {
  .page-banner4::before {
    height: 400px;
  }
}
@media (max-width: 480px) {
  .page-banner4::before {
    background-size: contain;
    top: -28%;
  }
}
.page-banner4 .breadcrumbs li:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .page-banner4 .breadcrumbs li:last-child {
    max-width: 90px;
  }
}

.page-banner10 {
  position: relative;
  background-image: url(../images/bg/page1-10.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 146px 0 125px;
  margin: 15px;
  border-radius: 28px;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 769px) {
  .page-banner10 {
    padding: 122px 0 141px;
  }
}
@media (max-width: 577px) {
  .page-banner10 {
    padding: 86px 0 127px;
  }
}
@media (max-width: 480px) {
  .page-banner10 {
    padding: 114px 0 160px;
  }
}
@media (max-width: 480px) {
  .page-banner10 {
    padding: 81px 0 132px;
  }
}
@media (max-width: 390px) {
  .page-banner10 {
    padding: 81px 0 95px;
  }
}
@media (max-width: 769px) {
  .page-banner10 .shape {
    display: inline-block;
  }
}

.page-content10 {
  text-align: center;
}
.page-content10 img {
  margin-bottom: 73px;
}
@media (max-width: 577px) {
  .page-content10 img {
    margin-bottom: 30px;
  }
}
@media (max-width: 390px) {
  .page-content10 img {
    width: 120px;
  }
}
.page-content10 .title {
  font-size: 200px;
  line-height: 200px;
  font-weight: 700;
  margin-bottom: 9px;
  color: transparent;
  font-family: var(--font-secondary);
  letter-spacing: -0.03em;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
}
@media (max-width: 577px) {
  .page-content10 .title {
    font-size: 137px;
    line-height: 126px;
    margin-bottom: 23px;
  }
}
@media (max-width: 480px) {
  .page-content10 .title {
    font-size: 110px;
    line-height: 106px;
  }
}
@media (max-width: 390px) {
  .page-content10 .title {
    font-size: 88px;
    line-height: 78px;
  }
}
.page-content10 .title2 {
  font-size: 80px;
  line-height: 90px;
  margin-bottom: 20px;
  color: var(--color-content-white);
  font-weight: 400;
}
@media (max-width: 1025px) {
  .page-content10 .title2 {
    font-size: 65px;
    line-height: 68px;
  }
}
@media (max-width: 820px) {
  .page-content10 .title2 {
    font-size: 50px;
    line-height: 55px;
  }
}
@media (max-width: 577px) {
  .page-content10 .title2 {
    font-size: 40px;
    line-height: 44px;
  }
}
@media (max-width: 480px) {
  .page-content10 .title2 {
    font-size: 33px;
    line-height: 32px;
  }
}
@media (max-width: 390px) {
  .page-content10 .title2 {
    font-size: 29px;
    line-height: 39px;
  }
}
.page-content10 p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-content-white);
  max-width: 585px;
  margin: 0 auto 33px;
}
.page-content10 .ibt-btn {
  color: var(--color-content-white);
  border: 1px solid var(--color-content-white);
  margin-bottom: 104px;
}
.page-content10 .ibt-btn::before {
  display: none;
}
.page-content10 .ibt-btn:hover {
  border-color: transparent;
}
@media (max-width: 820px) {
  .page-content10 .ibt-btn {
    margin-bottom: 50px;
  }
}
@media (max-width: 480px) {
  .page-content10 .ibt-btn {
    margin-bottom: 25px;
  }
}
.page-content10 .social-icon {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.shape2 {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-content-white);
  border-radius: 0 25px 0 25px;
  width: 295px;
  height: 88px;
}
@media (max-width: 577px) {
  .shape2 {
    width: 197px;
    height: 59px;
  }
}
@media (max-width: 390px) {
  .shape2 {
    width: 133px;
    height: 53px;
  }
}
.shape2::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-3.png);
  z-index: 99;
}
.shape2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-2.png);
  z-index: 99;
}

.shape4 {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--color-content-white);
  border-radius: 25px 0 25px 0;
  width: 90px;
  height: 14.21vw;
}
@media (max-width: 480px) {
  .shape4 {
    width: 74px;
  }
}
.shape4::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-3.png);
  z-index: 99;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.shape4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 20px;
  height: 20px;
  background-image: url(../images/layers/shape2-2.png);
  z-index: 99;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.ser-widget {
  position: relative;
  background-color: #f0f2f4;
  border-radius: 25px;
  padding: 47px 22px 44px 46px;
}
@media (max-width: 1201px) {
  .ser-widget {
    padding: 47px 13px 44px 29px;
  }
}
@media (max-width: 1025px) {
  .ser-widget {
    padding: 47px 23px 44px 39px;
  }
}
.ser-widget a {
  position: relative;
  font-size: 20px;
  line-height: 50px;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #8a9199;
  display: block;
  overflow: hidden;
}
@media (max-width: 1201px) {
  .ser-widget a {
    font-size: 18px;
    line-height: 40px;
  }
}
.ser-widget a:hover {
  color: var(--color-heading);
  padding-left: 24px;
}
.ser-widget a:hover::before {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.ser-widget a::before {
  content: "\e82d";
  font: 400 normal 0.5625em/1em "fontello";
  display: block;
  position: absolute;
  left: 0;
  top: 18px;
  font-size: 14px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--color-heading);
  -webkit-transform: translateX(-24px);
      -ms-transform: translateX(-24px);
          transform: translateX(-24px);
}

.side-widget {
  margin-bottom: 28px;
}

.side-bar2 {
  position: relative;
}
@media (max-width: 820px) {
  .side-bar2 {
    position: fixed;
    top: 0;
    right: -100%;
    padding: 86px 20px 32px;
    width: 349px;
    height: 100vh;
    background: var(--color-content-white);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-transition: right 0.3s ease-in-out;
    transition: right 0.3s ease-in-out;
    z-index: 99999999;
  }
}

.sidebar-close {
  background: none;
  display: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 27px;
  right: 15px;
  outline: none !important;
}
@media (max-width: 820px) {
  .sidebar-close {
    display: inline-block;
  }
}
.sidebar-close::before {
  content: "\e803";
  font: 400 normal 16px/16px "fontello";
}

.side-bar2.active {
  right: 0;
}

.sidebar-toggle {
  position: fixed;
  right: 0;
  left: auto;
  top: 50%;
  width: 40px;
  height: 60px;
  margin: -30px 0 0;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font: 400 normal 18px/1 "fontello";
  z-index: 9;
  opacity: 1;
  border: solid 1px;
  border-right: none;
  background-color: var(--color-content-white);
  display: none;
  z-index: 999;
}
@media (max-width: 820px) {
  .sidebar-toggle {
    display: inline-block;
  }
}
.sidebar-toggle::before {
  content: "\e825";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  right: auto;
  margin: -9px 0 0 -9px;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999999;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.side-bar3 {
  position: relative;
}
@media (max-width: 820px) {
  .side-bar3 {
    position: fixed;
    top: 0;
    right: -100%;
    padding: 86px 20px 32px;
    width: 369px;
    height: 100vh;
    background: var(--color-content-white);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    -webkit-transition: right 0.3s ease-in-out;
    transition: right 0.3s ease-in-out;
    z-index: 99999999;
  }
}

.sidebar-close3 {
  background: none;
  display: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 27px;
  right: 15px;
}
@media (max-width: 769px) {
  .sidebar-close3 {
    display: inline-block;
  }
}
.sidebar-close3::before {
  content: "\e803";
  font: 400 normal 16px/16px "fontello";
}

.side-bar3.active {
  right: 0;
}

.sidebar-toggle3 {
  position: fixed;
  right: 0;
  left: auto;
  top: 50%;
  width: 40px;
  height: 60px;
  margin: -30px 0 0;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font: 400 normal 18px/1 "fontello";
  z-index: 9;
  opacity: 1;
  border: solid 1px;
  border-right: none;
  background-color: var(--color-content-white);
  display: none;
}
@media (max-width: 820px) {
  .sidebar-toggle3 {
    display: inline-block;
  }
}
.sidebar-toggle3::before {
  content: "\e825";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  right: auto;
  margin: -9px 0 0 -9px;
}

.sidebar-overlay3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999999;
}

.sidebar-overlay3.active {
  opacity: 1;
  visibility: visible;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.project-slider {
  padding: 50px 0;
}

.empty {
  position: relative;
  height: 524px;
  overflow: hidden;
}
@media (max-width: 769px) {
  .empty {
    height: 453px;
  }
}
.project-btn .custom-pagination span.active {
  background: var(--color-content-white);
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  height: 6px;
  border-radius: 6px;
}

.project-sec3 {
  position: relative;
  overflow: hidden;
}

.project-track {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
}

.project-track.v2 {
  -webkit-box-align: end;
  -webkit-align-items: end;
      -ms-flex-align: end;
          align-items: end;
}

.slider-btn4 {
  position: relative;
  border-radius: 25px 25px 0 0;
  width: 120px;
  height: 57px;
  line-height: 46px;
  z-index: 9;
  text-align: center;
  margin-right: 8px;
}
@media (max-width: 1440px) {
  .slider-btn4 {
    right: 0%;
  }
}
@media (max-width: 769px) {
  .slider-btn4 {
    right: auto;
    left: 0px;
    top: 45%;
  }
}
@media (max-width: 577px) {
  .slider-btn4 {
    top: 50%;
  }
}
.slider-btn4::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* border ki width */
  border-radius: 15px;
  background: -webkit-linear-gradient(left, #7b5cc8, #5e6bc9, #3480c8);
  background: linear-gradient(90deg, #7b5cc8, #5e6bc9, #3480c8); /* 👈 gradient colors */
  -webkit-mask: -webkit-linear-gradient(#fff 0 0) content-box, -webkit-linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: -1;
}
.slider-btn4 .swiper-button-prev,
.slider-btn4 .swiper-button-next {
  background-color: unset;
  border: 0;
  outline: none;
  padding: 0 22px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--color-content-white);
}
.slider-btn4 .swiper-button-prev:hover,
.slider-btn4 .swiper-button-next:hover {
  color: var(--color-primary);
}
.slider-btn4 .swiper-button-prev::after,
.slider-btn4 .swiper-button-next::after {
  display: none;
}
.slider-btn4 .swiper-button-prev {
  margin-right: 30px;
}
.slider-btn4 .swiper-button-prev::before {
  content: "\e833";
  font: 400 normal 11px/1em "fontello";
}
.slider-btn4 .swiper-button-next::before {
  content: "\e844";
  font: 400 normal 11px/1em "fontello";
}

.project-block7 {
  position: relative;
  margin-bottom: 32px;
  border-radius: 25px;
  overflow: hidden;
  cursor: none;
}
.project-block7:hover img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(4px);
          filter: blur(4px);
}
.project-block7 img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.project-block7.v2 {
  position: relative;
  height: 854px;
}
@media (max-width: 1440px) {
  .project-block7.v2 {
    height: 100%;
  }
}

.project-block7.v3 {
  margin-bottom: 0;
}
@media (max-width: 769px) {
  .project-block7.v3 {
    margin-bottom: 30px;
  }
}

.video-banner4 {
  position: relative;
  height: 793px;
  overflow: hidden;
  border-radius: 25px;
  margin: 0 20px;
}
@media (max-width: 769px) {
  .video-banner4 {
    height: 583px;
  }
}

blockquote {
  background-color: #f0f2f4;
  border-radius: 25px;
  padding: 66px 46px 54px;
  margin-top: 62px;
}
@media (max-width: 480px) {
  blockquote {
    padding: 47px 32px 44px;
  }
}
.menu_iso li a.active {
  color: #45d0bd !important;
}
.menu_iso li a.active::before {
  width: 100%;
}
.menu_iso li.active {
  color: #45d0bd !important;
}
.menu_iso li.active::before {
  width: 100%;
}

.project-block8 {
  position: relative;
  margin-bottom: 32px;
  border-radius: 25px;
  overflow: hidden;
  cursor: none;
}
.project-block8:hover img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(4px);
          filter: blur(4px);
}
.project-block8 img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 117px;
  height: 117px;
  border-radius: 50%;
  background-color: black;
  color: white;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%) scale(1.1);
      -ms-transform: translate(-50%, -50%) scale(1.1);
          transform: translate(-50%, -50%) scale(1.1);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.25s ease;
  transition: transform 0.25s ease, opacity 0.3s ease;
  transition: transform 0.25s ease, opacity 0.3s ease, -webkit-transform 0.25s ease;
  opacity: 0;
  z-index: 9999;
}

.project-img10 {
  position: relative;
  cursor: none;
}
.project-img10 img {
  max-width: unset;
  width: 100%;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

.faq-sec4 {
  position: relative;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.slider-btn2 .swiper-button-prev,
.slider-btn2 .swiper-button-next {
  background-color: unset;
  border: 0;
  outline: none;
  padding: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: unset;
}
.slider-btn2 .swiper-button-prev:hover,
.slider-btn2 .swiper-button-next:hover {
  color: var(--color-primary);
}
.slider-btn2 .swiper-button-prev::after,
.slider-btn2 .swiper-button-next::after {
  display: none;
}
.slider-btn2 .swiper-button-prev {
  margin-right: 30px;
}
.slider-btn2 .swiper-button-prev::before {
  content: "\e833";
  font: 400 normal 11px/1em "fontello";
}
.slider-btn2 .swiper-button-next::before {
  content: "\e844";
  font: 400 normal 11px/1em "fontello";
}

.choose-slider2 {
  position: relative;
}
.choose-slider2 .swiper-wrapper {
  overflow: visible;
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */
.main-sec {
  position: relative;
  background-color: #0F1010;
  border-radius: 25px;
  margin: 0 20px 20px;
}
.main-sec::before {
  content: "";
  position: absolute;
  top: -44%;
  left: 0;
  width: 100%;
  height: 809px;
  background-image: url(../images/layers/layer11.webp);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media (max-width: 1440px) {
  .main-sec::before {
    top: -33%;
  }
}
@media (max-width: 1201px) {
  .main-sec::before {
    top: -28%;
  }
}
@media (max-width: 1025px) {
  .main-sec::before {
    top: -25%;
  }
}
@media (max-width: 820px) {
  .main-sec::before {
    background-size: contain;
    height: 678px;
    top: -12%;
  }
}
@media (max-width: 577px) {
  .main-sec::before {
    top: -10%;
  }
}
@media (max-width: 480px) {
  .main-sec::before {
    top: -7%;
  }
}
@media (max-width: 390px) {
  .main-sec::before {
    top: -5%;
  }
}
.main-sec::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-image: url(../images/layers/layer1-3.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-sec {
  position: relative;
}
@media (max-width: 1440px) {
  .contact-sec {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 390px) {
  .contact-sec {
    padding-left: 11px;
    padding-right: 11px;
  }
}

.contact-content {
  position: relative;
  margin-right: 20px;
}
@media (max-width: 820px) {
  .contact-content {
    margin-bottom: 50px;
  }
}
.contact-content .sec-title {
  margin-bottom: 73px;
  max-width: 558px;
}
@media (max-width: 769px) {
  .contact-content .sec-title {
    margin-bottom: 47px;
  }
}

.call-center {
  position: relative;
  margin-bottom: 53px;
}
.call-center .title {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-content-white);
  margin-bottom: 0;
  font-family: var(--font-secondary);
  margin-bottom: 21px;
}

.call-center .gmail,
.call-center p {
  display: block;
  color: var(--color-content-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
}
.call-center .gmail {
  text-decoration: underline;
}

.social-icon {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}
.social-icon li {
  margin: 0 35px 0 0;
}
.social-icon li:last-child {
  margin-right: 0;
}
.social-icon li a {
  color: var(--color-content-white);
}

.contact-form {
  background-color: var(--color-content-white);
  border-radius: 25px;
  padding: 87px 95px 105px;
}
@media (max-width: 1201px) {
  .contact-form {
    padding: 43px 42px 53px;
  }
}
@media (max-width: 390px) {
  .contact-form {
    padding: 43px 27px 53px;
  }
}
.contact-form .ibt-btn-outline {
  outline: none;
}
.contact-form .ibt-btn-outline i {
  text-indent: 0em;
}

.custom-form {
  position: relative;
}
.custom-form h2 {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: 43px;
  display: inline-block;
  color: var(--color-content-black2);
}
.custom-form input,
.custom-form select,
.custom-form textarea {
  border: 1px solid #ADADAD;
  border-radius: 20px;
  height: 50px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #898989;
  padding: 18px;
}
.custom-form input::-webkit-input-placeholder, .custom-form select::-webkit-input-placeholder, .custom-form textarea::-webkit-input-placeholder {
  color: #898989;
}
.custom-form input::-moz-placeholder, .custom-form select::-moz-placeholder, .custom-form textarea::-moz-placeholder {
  color: #898989;
}
.custom-form input:-ms-input-placeholder, .custom-form select:-ms-input-placeholder, .custom-form textarea:-ms-input-placeholder {
  color: #898989;
}
.custom-form input::-ms-input-placeholder, .custom-form select::-ms-input-placeholder, .custom-form textarea::-ms-input-placeholder {
  color: #898989;
}
.custom-form input::placeholder,
.custom-form select::placeholder,
.custom-form textarea::placeholder {
  color: #898989;
}
.custom-form textarea {
  height: 175px;
  margin-bottom: 30px;
}
/* The banner sits on the dark navy panel, so body copy here has to be light --
   without this it inherits the global #333 and all but disappears. */

/* The inner pages put .contact-form on a light background, where the white
   card reads as a panel. On this navy banner the same card is a bright slab
   that outweighs the headline, and its 95px padding was sized for a full-width
   column, not a 7-column slot. Drop the card, outline the fields against the
   panel instead -- the treatment .svc-audit-widget already uses for a form on
   dark. Two classes beats the template's one, so these win over the responsive
   .contact-form padding without needing !important. */
/* A dark fill rather than a white one: the banner artwork runs from navy to
   pale blue across the row, so a translucent white field leaves the
   placeholder unreadable by the time it reaches the light end. */
/* The light-mode status colours assume a white card behind them. */

.contact-sec2 {
  position: relative;
}
@media (max-width: 1440px) {
  .contact-sec2 {
    margin: 0 15px;
  }
}
@media (max-width: 390px) {
  .contact-sec2 {
    margin: 0 7px;
  }
}
.contact-sec2:before {
  content: "";
  position: absolute;
  top: 6%;
  right: 0;
  width: 578px;
  height: 956px;
  background-image: url(../images/layers/ser-layer2.png);
  z-index: -1;
}
@media (max-width: 1440px) {
  .contact-sec2:before {
    display: none;
  }
}
.contact-sec2:after {
  content: "";
  position: absolute;
  bottom: 14%;
  left: 21%;
  width: 964px;
  height: 474px;
  background-image: url(../images/layers/map2.png);
  z-index: -1;
}
@media (max-width: 1025px) {
  .contact-sec2:after {
    width: 100%;
    left: 0;
  }
}

.contact-content2 {
  position: relative;
  margin-right: 20px;
}
@media (max-width: 820px) {
  .contact-content2 {
    margin: 0 0 50px;
  }
}
.contact-content2 .sec-title {
  margin-bottom: 73px;
  max-width: 558px;
}
@media (max-width: 769px) {
  .contact-content2 .sec-title {
    margin-bottom: 47px;
  }
}
.contact-content2 .social-icon {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}
.contact-content2 .social-icon li {
  margin: 0 35px 0 0;
}
.contact-content2 .social-icon li:last-child {
  margin-right: 0;
}
.contact-content2 .social-icon li a {
  color: var(--color-content-black2);
}
.contact-content2 .social-icon li a:hover {
  color: #999999;
}

.call-center2 {
  position: relative;
  margin-bottom: 53px;
}
.call-center2 .title {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-heading);
  margin-bottom: 0;
  font-family: var(--font-secondary);
  margin-bottom: 21px;
}

.call-center2 .gmail,
.call-center2 p {
  display: block;
  color: var(--color-content-black2);
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
}
.call-center2 .gmail {
  text-decoration: underline;
}

.contact-form.v2 {
  background-color: #F0F2F4;
}

.contact-banner3 {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  margin: 0 20px;
  padding: 152px 0 146px;
  z-index: 1;
}
@media (max-width: 1366px) {
  .contact-banner3 {
    padding: 152px 27px 146px;
  }
}
@media (max-width: 1201px) {
  .contact-banner3 {
    padding: 102px 44px 101px;
  }
}
@media (max-width: 1025px) {
  .contact-banner3 {
    padding: 113px 27px 111px;
  }
}
@media (max-width: 577px) {
  .contact-banner3 {
    padding: 80px 27px 92px;
  }
}
.contact-banner3::before {
  content: "";
  position: absolute;
  bottom: -159%;
  left: 0;
  width: 100%;
  height: 1500px;
  background-image: url(../images/layers/banner-layer3.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -11;
}
@media (max-width: 1201px) {
  .contact-banner3::before {
    width: 869px;
    background-size: contain;
    height: 765px;
    bottom: -75%;
    left: 12%;
  }
}
@media (max-width: 1201px) {
  .contact-banner3 .row {
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
}

.contact-banner3.v2::before {
  display: none;
}
.contact-banner3.v2::after {
  content: "";
  position: absolute;
  top: -37%;
  left: -1%;
  width: 1109px;
  height: 1138px;
  background-image: url(../images/layers/shade1-2.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
@media (max-width: 1201px) {
  .contact-banner3.v2::after {
    top: -6%;
    left: -2%;
    width: 927px;
    height: 600px;
  }
}
@media (max-width: 577px) {
  .contact-banner3.v2::after {
    top: 24%;
  }
}

/**
 * Template Name: Aiero | AI Agency & Technology HTML Template
 * Description: AI Agency, tech startup, chat bot, data science, digital agency, consulting, IT solutions, voiceover, video voiceover, robotics, science, industry, machine learning, neural network or other modern technology business template.
 * Version: 1.1.0
 * Author: ib-thems
 * Author https://themeforest.net/user/ib-themes
 */

/* ---- WebStuffGuy overrides ---- */
/* Flat nav: no menu item has a sub-menu any more, so drop the template's
   dropdown caret. It was applied to every item except :last-child, which also
   got symmetric padding -- so give every item that same treatment. */
.menu-style1 > ul > li > a {
  padding: 0 24px;
}
.menu-style1 > ul > li > a::before {
  display: none !important;
}
.side-menu2 > ul > li > a::before {
  display: none !important;
}

/* Tools strip: each label ("Screaming Frog") is wider than its 59px mark, so
   with space-between and no gap the labels collide. The row has 506px to play
   with; at the template's 18px the five labels alone come to 485px, which is
   why they ran together. 15px leaves room for a real gap. */

/* AI-search panel: above 1440px the template pulls .feature-img2 275px off the
   left so its decorative device mockup can bleed off-screen. .wrapper clips
   overflow, so with real screenshots in there the left edge simply vanishes.
   Keep the panel inside its column. */

/* AI-search panel: the template pins the image box to 615px and uses
   object-fit: contain, so a screenshot letterboxes inside it -- which is also
   why the 25px radius never showed, the corners were landing in the empty
   bars. Let the box follow the image, widen the column, and frame it. */
.active-body .feature-sec3 .feature-img2 img {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* partners-sec was given ibt-section-gapBottom only, so it had 120px beneath it
   and nothing above -- "Built and measured..." sat right under the testimonials.
   The section above already contributes 43px of its own bottom padding, so 80px
   here brings the total to ~123px and balances the 120px below. */

/* The template ships grey "1879X637" / "389X188" dimension placeholders in
   place of its demo's licensed stock textures, and two of them were rendering
   on this page. Replace the contact banner's with a brand gradient and drop the
   side-menu one entirely rather than ship a sized-placeholder image. */
.side-menu::after {
  background-image: none;
}

/* Six tools fit on one row on a wide screen and wrap 4+2 on a phone, but at
   laptop widths the row is just too narrow for six and drops a single orphaned
   tile onto a second line. Force an even 3+3 through that range. */

/* ---- Legal pages (privacy.html, terms.html) ---- */
.legal-page {
  padding: 190px 0 120px;
}
@media only screen and (max-width: 991px) {
  .legal-page {
    padding: 150px 0 80px;
  }
}
.legal-page .sec-title {
  margin-bottom: 18px;
}
.legal-page .title {
  font-size: 46px;
  line-height: 56px;
}
@media only screen and (max-width: 767px) {
  .legal-page .title {
    font-size: 32px;
    line-height: 42px;
  }
}
.legal-page .legal-updated {
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 44px;
}
.legal-page h2 {
  font-size: 24px;
  line-height: 34px;
  margin: 44px 0 14px;
}
.legal-page h3 {
  font-size: 18px;
  line-height: 28px;
  margin: 26px 0 10px;
}
.legal-page p,
.legal-page li {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-body);
}
.legal-page p {
  margin-bottom: 16px;
}
.legal-page ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 20px;
}
.legal-page li {
  margin-bottom: 9px;
}
.legal-page a {
  color: var(--color-primary);
  text-decoration: underline;
}
.legal-page a:hover {
  text-decoration: none;
}
.active-body .legal-page p,
.active-body .legal-page li {
  color: rgba(255, 255, 255, 0.76);
}
.active-body .legal-page h2,
.active-body .legal-page h3 {
  color: var(--color-content-white);
}
.active-body .legal-page .legal-updated {
  color: #9a9a9a;
}

/* ---- Service pages (seo-services.html, and siblings to come) ---- */
/* The template's page-banner4 background is a grey "1893X541" placeholder;
   everything else about the banner -- the height, the rounded corners, the
   outlined vertical word, the white breadcrumb tab nested into the bottom-left
   corner -- is the template's own and worth keeping. */
.page-banner4 {
  /* Scrim over the artwork: the heading is white and the brightest folds in the
     banner only reach 2.5:1 against it. Darkest behind the centred heading,
     fading out at the edges so the image keeps its colour. */
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(8, 10, 26, 0.55) 0%, rgba(8, 10, 26, 0.3) 55%, rgba(8, 10, 26, 0.12) 100%),
    url(../images/bg/service-banner.webp);
  background-color: #10163a;
}
.page-banner4 .page-content .title {
  font-size: 58px;
  line-height: 68px;
  color: var(--color-content-white);
}
@media only screen and (max-width: 1201px) {
  .page-banner4 .page-content .title {
    font-size: 44px;
    line-height: 54px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner4 .page-content .title {
    font-size: 30px;
    line-height: 40px;
  }
}
/* The H1 carries the service and the cities for search, but reads as two lines:
   the service name at full banner size, the location underneath in small type.
   The "/ ... /" framing is drawn here so the slashes stay out of the H1 text. */
/* Non-breaking spaces, so a closing slash never wraps onto a line of its own. */
.page-banner4 .page-content .title .h1-main::before {
  content: "/\00a0";
}
.page-banner4 .page-content .title .h1-main::after {
  content: "\00a0/";
}
.page-banner4 .page-content .title .h1-sub {
  display: block;
  margin-top: 12px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.86);
}
@media only screen and (max-width: 767px) {
  .page-banner4 .page-content .title .h1-sub {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
  }
}

.service-single-sec {
  padding: 96px 0;
}
@media only screen and (max-width: 767px) {
  .service-single-sec {
    padding: 60px 0;
  }
}
/* Not sticky: .wrapper carries overflow:hidden, which makes it a scroll
   container and kills position:sticky outright. The template's own sidebar
   scrolls with the page too. */
@media only screen and (max-width: 991px) {
  .svc-sidebar {
    margin-bottom: 44px;
  }
}
.side-widget + .side-widget {
  margin-top: 22px;
}
.svc-audit-widget,
.svc-trust-widget {
  padding: 30px 28px;
  border-radius: 18px;
}
.svc-audit-widget {
  background-color: var(--color-heading);
}
.svc-audit-widget .sub-title,
.svc-audit-widget .title,
.svc-audit-widget p {
  color: var(--color-content-white);
}
.svc-audit-widget .title {
  font-size: 24px;
  margin: 6px 0 10px;
}
.svc-audit-widget p {
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 22px;
  opacity: 0.8;
}
.svc-trust-widget {
  border: 1px solid var(--color-border);
}
.svc-trust-num {
  display: block;
  font-family: var(--font-secondary);
  font-size: 40px;
  line-height: 48px;
  color: var(--color-primary);
}
.svc-trust-widget .title {
  font-size: 20px;
  margin: 8px 0 10px;
}
.svc-trust-widget p {
  font-size: 15px;
  line-height: 26px;
  color: var(--color-body);
}

.svc-block {
  margin-top: 70px;
}
.svc-main p,
.svc-card p,
.svc-step p,
.svc-list li {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-body);
}
.ser-detail .title {
  font-size: 34px;
  line-height: 44px;
  margin-bottom: 18px;
}
.ser-detail p {
  margin-bottom: 16px;
}
.svc-block .sec-title .title {
  font-size: 30px;
  line-height: 40px;
}

.svc-grid {
  row-gap: 24px;
}
.svc-card {
  height: 100%;
  padding: 26px 24px;
  border-radius: 16px;
  background-color: var(--color-surface-light-3);
}
.svc-card h3,
.svc-step h3,
.svc-fit-box h3 {
  font-size: 19px;
  line-height: 28px;
  margin-bottom: 8px;
}
.svc-step-num {
  display: block;
  font-family: var(--font-secondary);
  font-size: 36px;
  line-height: 46px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.svc-shot {
  margin: 0 0 30px;
}
.svc-shot img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(16, 18, 32, 0.14);
}
.svc-shot figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 23px;
  color: #6f6f6f;
}

.svc-fit-box {
  height: 100%;
  padding: 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
}
.svc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 11px;
  height: 7px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}
.svc-list-no li::before {
  top: 14px;
  width: 11px;
  height: 0;
  border-left: 0;
  border-bottom: 2px solid #c9c9c9;
  transform: none;
}

.active-body .svc-card,
.active-body .svc-fit-box {
  background-color: var(--color-surface-dark-2);
  border-color: rgba(255, 255, 255, 0.12);
}
.active-body .svc-main p,
.active-body .svc-card p,
.active-body .svc-step p,
.active-body .svc-list li,
.active-body .svc-qa p {
  color: rgba(255, 255, 255, 0.76);
}
.active-body .svc-card h3,
.active-body .svc-step h3,
.active-body .svc-fit-box h3,
.active-body .svc-trust-widget .title,
.active-body .svc-qa h3 {
  color: var(--color-content-white);
}
.active-body .svc-qa {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.active-body .svc-shot figcaption {
  color: #9a9a9a;
}

.active-body .svc-trust-widget {
  border-color: rgba(255, 255, 255, 0.12);
}
.active-body .svc-trust-widget p {
  color: rgba(255, 255, 255, 0.76);
}
.active-body .svc-audit-widget {
  background-color: var(--color-surface-dark-2);
}

/* Bootstrap gives an expanded .accordion-button a pale blue background. In dark
   mode the text is white, so the open question became unreadable. */
.active-body .accordion4 .accordion-button:not(.collapsed) {
  background-color: var(--color-surface-dark-2);
}

/* In-copy links between pages. Underlined so they read as links inside a
   paragraph; the card headings stay plain until hovered. */
.svc-main p a,
.svc-main li a,
.svc-main .accordion-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-main p a:hover,
.svc-main li a:hover,
.svc-main .accordion-body a:hover {
  text-decoration: none;
}
.svc-card h3 a {
  color: inherit;
}
.svc-card h3 a:hover {
  color: var(--color-primary);
}

/* Phone number under the social icons in footer-style1 (the dark footer on
   inner pages). The inherited link colour is near-black on black there. */
.footer-style1 .footer-phone {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 28px;
}
.footer-style1 .footer-phone a {
  color: rgba(255, 255, 255, 0.86);
}
.footer-style1 .footer-phone a:hover {
  color: var(--color-primary);
}

/* ---- 404 ---- */
/* The template's page-banner10 background is a grey "1893X978" placeholder.
   Same artwork and scrim as the service-page banners. */
.page-banner10 {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(8, 10, 26, 0.6) 0%, rgba(8, 10, 26, 0.35) 55%, rgba(8, 10, 26, 0.15) 100%),
    url(../images/bg/service-banner.webp);
  background-color: #10163a;
  background-position: center;
}
.page-content10 .title2 {
  color: var(--color-content-white);
}
.page-content10 p a {
  color: var(--color-content-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- City landing pages (atlanta-web-design-seo, greenville-sc-web-design-seo) ---- */
.city-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.city-areas li {
  margin: 0;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-body);
  background-color: var(--color-surface-light-3);
}
.city-quote {
  height: 100%;
  margin: 0;
  padding: 26px 24px;
  border-radius: 16px;
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-surface-light-3);
}
.city-quote p {
  font-style: italic;
  margin-bottom: 14px;
}
.city-quote footer {
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-body);
}
.city-more {
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .city-quote {
    height: auto;
    margin-bottom: 20px;
  }
}
.active-body .city-areas li,
.active-body .city-quote {
  background-color: var(--color-surface-dark-2);
}
.active-body .city-areas li,
.active-body .city-quote footer {
  color: rgba(255, 255, 255, 0.76);
}
.active-body .city-quote footer strong {
  color: var(--color-content-white);
}

/* The audit widget sits on a near-black card, but .ibt-btn-outline only gets
   light text inside .active-body -- in light mode the button was black on
   black. Give it its own treatment and drop the template's gradient rings. */
.svc-audit-widget .ibt-btn {
  color: var(--color-content-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: 12px 22px;
}
.svc-audit-widget .ibt-btn::before,
.svc-audit-widget .ibt-btn::after {
  display: none;
}
.svc-audit-widget .ibt-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-heading);
}

/* Trustindex review widget: the loader injects its own markup.
   display:flow-root contains whatever it injects -- including floats, which is
   why the wrapper was measuring 0 tall -- WITHOUT clipping it. The earlier
   overflow:hidden did contain it, but also cut off the badge at the foot of the
   review list, and a 0-height wrapper let the next card sit on top of it. */
.svc-reviews-widget {
  display: flow-root;
  max-width: 100%;
}
.svc-reviews-widget iframe,
.svc-reviews-widget img {
  max-width: 100%;
}
/* a little more breathing room than the usual 22px, so the badge at the foot of
   the widget is never crowded by the card below it */
.svc-reviews-widget + .side-widget {
  margin-top: 36px;
}

/* ---- Services index (service.html) ---- */
.svc-service-card {
  height: 100%;
  padding: 36px 34px;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 767px) {
  .svc-service-card {
    padding: 28px 24px;
  }
}
.svc-service-num {
  display: block;
  font-family: var(--font-secondary);
  font-size: 34px;
  line-height: 42px;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.svc-service-card h2 {
  font-size: 26px;
  line-height: 34px;
  margin-bottom: 12px;
}
.svc-service-card p {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-body);
  margin-bottom: 18px;
}
.svc-service-card .svc-list {
  margin-bottom: 26px;
}
.svc-service-card .ibt-btn {
  margin-top: auto;
  align-self: flex-start;
}
.active-body .svc-service-card {
  border-color: rgba(255, 255, 255, 0.12);
}
.active-body .svc-service-card h2 {
  color: var(--color-content-white);
}
.active-body .svc-service-card p {
  color: rgba(255, 255, 255, 0.76);
}

/* ---- Contact page ---- */
.googel-map {
  padding-bottom: 96px;
}
.googel-map iframe {
  width: 100%;
  display: block;
}
@media only screen and (max-width: 767px) {
  .googel-map {
    padding-bottom: 60px;
  }
  .googel-map iframe {
    height: 340px;
  }
}

/* The global h3 rule applies --letter-spacing-h3 (-2px), which is right for a
   display-sized h3 but at 18-19px it swallows most of the space character --
   "Where we work" rendered as "Wherewework". These headings are small, so give
   them normal tracking. */
.call-center .title,
.call-center2 .title,
.svc-card h3,
.svc-step h3,
.svc-fit-box h3,
.footer-links .widget-title,
.contact-widget .widget-title {
  letter-spacing: normal;
}

/* Contact page: the map carried 96px of padding plus its own 31px margin, which
   left a ~127px hole before the dark panel. */
.googel-map {
  padding-bottom: 0;
}
/* and where main-sec holds only the footer, footer-top has nothing above it, so
   "Ready to rank higher..." sat flush against the panel's top edge */
.main-sec-footer-only {
  padding-top: 96px;
}
@media only screen and (max-width: 767px) {
  .main-sec-footer-only {
    padding-top: 60px;
  }
}

/* About page: the founder block. Styled as a personal note rather than another
   card, so the one first-person passage on the page reads as a change of voice.
   Space is left at the top for a portrait if one ever gets added. */
.about-founder {
  position: relative;
  padding: 34px 40px;
  border-radius: 18px;
  background-color: var(--color-surface-light-3);
  border-left: 3px solid var(--color-primary);
}
/* the heading runs the full width of the panel, and the photo floats so the last
   paragraph wraps under it -- as two flex columns the 262px photo left a large
   hole beside 446px of text. flow-root contains the float without clipping. */
.about-founder-row {
  display: flow-root;
}
.about-founder-photo {
  float: left;
  width: 360px;
  margin: 6px 34px 16px 0;
}
.about-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(16, 18, 32, 0.18);
}
.about-founder-body {
  flex: 1 1 auto;
  min-width: 0;
}
/* the bracket decoration and 14px size live on .sec-title .sub-title, and this
   eyebrow is not inside a .sec-title -- match it by hand so the two agree */
.about-founder .sub-title {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.about-founder .sub-title::before {
  content: "[";
  margin-right: 4px;
}
.about-founder .sub-title::after {
  content: "]";
  margin-left: 4px;
}
.about-founder h2 {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: normal;
  margin-bottom: 16px;
}
.about-founder p {
  font-size: 17px;
  line-height: 31px;
  color: var(--color-body);
  margin-bottom: 14px;
}
.about-founder p:last-of-type {
  margin-bottom: 20px;
}
.about-founder-sign {
  display: block;
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-primary);
}
/* below lg the text column gets too narrow beside a 320px photo, so stack */
@media only screen and (max-width: 991px) {
  .about-founder-photo {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 0 24px;
  }
}
@media only screen and (max-width: 767px) {
  .about-founder {
    padding: 26px 22px;
  }
  .about-founder h2 {
    font-size: 25px;
    line-height: 34px;
  }
  .about-founder p {
    font-size: 16px;
    line-height: 29px;
  }
}
.active-body .about-founder {
  background-color: var(--color-surface-dark-2);
}
/* the dark-mode eyebrow colour is also scoped to .sec-title, so without this the
   label sits at #333 on a #1f1f1f panel */
.active-body .about-founder .sub-title {
  color: var(--color-content-white);
}

/* Sidebar price widget. Mirrors .svc-trust-widget, but outlined in the primary
   colour so the number is the first thing scanned in the column. */
.svc-price-widget {
  padding: 30px 28px;
  border-radius: 18px;
  border: 1px solid var(--color-primary);
}
.svc-price-widget .sub-title {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.svc-price-num {
  display: block;
  font-family: var(--font-secondary);
  font-size: 40px;
  line-height: 48px;
  letter-spacing: normal;
  color: var(--color-primary);
}
.svc-price-widget p {
  font-size: 15px;
  line-height: 26px;
  color: var(--color-body);
  margin: 10px 0 0;
}
.active-body .svc-price-widget .sub-title {
  color: var(--color-content-white);
}

/* "From $2,995" on the services index cards */
.svc-service-price {
  display: block;
  font-family: var(--font-secondary);
  font-size: 17px;
  line-height: 26px;
  color: var(--color-primary);
  margin: -6px 0 14px;
}

/* Contact form: honeypot and status line.
   The honeypot is positioned off-screen rather than display:none -- plenty of
   bots skip hidden fields but fill ones that are technically in the layout. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status:empty {
  display: none;
}
.form-status {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 24px;
}
.form-status.is-ok {
  color: #0f5c50;
  background-color: rgba(69, 208, 189, 0.16);
}
.form-status.is-error {
  color: #8a2020;
  background-color: rgba(200, 60, 60, 0.12);
}
.active-body .form-status.is-ok {
  color: #7ee8d6;
}
.active-body .form-status.is-error {
  color: #ffa9a9;
}
.custom-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Video modal sizing.

   These sit at the end of the file on purpose. The template's own rules for
   .video-modal-content live inside @media blocks earlier on, at the same
   specificity, so anything written next to them loses the cascade.

   What was wrong: the panel is a fixed 1675x800 with the close button hung
   OUTSIDE it at top:-70px/right:-98px, which puts the control off-screen on
   anything but a very wide display. Below 1440px the panel becomes 100% x 100%,
   so the video fills the viewport edge to edge -- no backdrop left to click,
   and a bare white glyph as the only way out.

   Now: the panel is sized to the video's own 16:9 and capped, so there is
   always visible backdrop to dismiss it, and the close control is pinned to the
   window where it cannot be pushed off.
   --------------------------------------------------------------------------- */
.video-modal {
  padding: 5vmin;
}
.video-modal .video-modal-content {
  width: min(1120px, 100%);
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
}
.video-modal .video-modal-content video {
  height: 100%;
  border-radius: 14px;
}
.video-modal .video-modal-content .close-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background-color 0.2s ease;
}
.video-modal .video-modal-content .close-btn:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

/* ---- Blog (blog.html and the posts) ---- */
/* Posts sit in the service-page layout (sidebar + main column), so only the
   article typography is new. Sizes follow .legal-page, a step larger for reading. */
/* Post titles are a sentence, not "/ Local SEO /" -- step the size down and cap
   the measure so a 12-word headline sits in two or three lines. */
.page-banner-post .page-content .title {
  max-width: 980px;
  margin: 0 auto;
  font-size: 44px;
  line-height: 54px;
}
@media only screen and (max-width: 1201px) {
  .page-banner-post .page-content .title {
    font-size: 36px;
    line-height: 46px;
  }
}
@media only screen and (max-width: 767px) {
  .page-banner-post .page-content .title {
    font-size: 26px;
    line-height: 36px;
  }
}
.post-meta-line {
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 26px;
}
.post-body h2 {
  font-size: 28px;
  line-height: 38px;
  margin: 46px 0 14px;
}
.post-body h3 {
  font-size: 20px;
  line-height: 30px;
  margin: 30px 0 10px;
  letter-spacing: normal;
}
.post-body p,
.post-body li,
.post-body dd {
  font-size: 17px;
  line-height: 31px;
  color: var(--color-body);
}
.post-body p {
  margin-bottom: 18px;
}
.post-body ul,
.post-body ol {
  padding-left: 22px;
  margin-bottom: 22px;
}
.post-body ul {
  list-style: disc;
}
.post-body ol {
  list-style: decimal;
}
.post-body li {
  margin-bottom: 10px;
}
.post-body a {
  color: var(--color-primary);
  text-decoration: underline;
}
.post-body a:hover {
  text-decoration: none;
}
.post-body a.ibt-btn {
  text-decoration: none;
}
.post-figure {
  margin: 30px 0 34px;
}
.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(16, 18, 32, 0.14);
}
.post-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 23px;
  color: #6f6f6f;
}
.post-callout {
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 14px;
  background-color: var(--color-surface-light-3);
  border-left: 3px solid var(--color-primary);
}
.post-callout p:last-child {
  margin-bottom: 0;
}
/* "What the email says / what it means": the scam wording in a quote style,
   the translation underneath. */
.post-said {
  margin: 0 0 22px;
}
.post-said dt {
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 28px;
  padding: 14px 18px;
  border-radius: 10px;
  background-color: var(--color-surface-light-3);
  color: #555;
}
.post-said dd {
  margin: 10px 0 0 18px;
}
.post-card-img {
  display: block;
  margin: -36px -34px 26px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.post-card-img img {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .post-card-img {
    margin: -28px -24px 22px;
  }
}
.svc-service-card .post-meta-line {
  margin-bottom: 10px;
}
.active-body .post-body p,
.active-body .post-body li,
.active-body .post-body dd {
  color: rgba(255, 255, 255, 0.76);
}
.active-body .post-body h2,
.active-body .post-body h3 {
  color: var(--color-content-white);
}
.active-body .post-callout,
.active-body .post-said dt {
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.76);
}
.active-body .post-figure figcaption {
  color: #9a9a9a;
}

/* ---- SERP volatility sensor ---- */
/* Semrush's widget is a fixed 540x320 image inside an iframe; scale the frame
   down on narrow screens instead of letting it overflow. */
.sensor-widget {
  max-width: 540px;
  margin: 10px 0 30px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16, 18, 32, 0.14);
}
.sensor-widget iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 320;
  border: 0;
}

/* ---- Reviews page ---- */
/* The homepage fades the bottom of the review grid into the next section and
   drops two columns on phones. Here the reviews ARE the page, so show them all. */
.testimonial-sec2.reviews-page {
  padding-bottom: 100px;
}
.testimonial-sec2.reviews-page::before {
  display: none;
}
@media (max-width: 820px) {
  .testimonial-sec2.reviews-page .row .col-lg-3:nth-child(3),
  .testimonial-sec2.reviews-page .row .col-lg-3:last-child {
    display: block;
  }
}
/* intro centred above a full-width live widget (swap in any Trustindex layout) */
.reviews-google {
  padding: 110px 0 120px;
}
.reviews-google-intro {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}
.reviews-google-intro .ibt-btn {
  margin-top: 6px;
}
@media only screen and (max-width: 991px) {
  .reviews-google {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .reviews-google {
    padding-bottom: 80px;
  }
}
.reviews-google p {
  font-size: 16px;
  line-height: 30px;
  color: var(--color-body);
  margin-bottom: 18px;
}
.active-body .reviews-google p {
  color: rgba(255, 255, 255, 0.76);
}

/* ---- Nav: "About" is a label that opens its dropdown, not a link ---- */
.menu-parent {
  cursor: default;
}
/* keyboard users open it by tabbing onto the label */
.main-menu > ul li:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* ---- Awards drawer (#sideMenu, opened by the grid icon beside the logo) ---- */
/* White, not the theme's #111, so the badges -- most of them artwork on a white
   ground -- sit on the page instead of reading as white blocks on black. A
   little wider than the theme's 385px so they fit two to a row; the hidden
   offset grows with it so the panel and its close tab stay fully off-screen.
   The markup carries data-lenis-prevent: without it the smooth-scroll library
   swallows the wheel and the panel never scrolls. */
.side-menu {
  width: 440px;
  left: -560px;
  padding: 64px 40px 36px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.side-menu.active {
  left: 0;
}
@media only screen and (max-width: 575px) {
  /* leave room for the 70px close tab that hangs off the right edge */
  .side-menu {
    width: calc(100vw - 110px);
    left: -120vw;
    padding: 56px 24px 30px;
  }
}
/* The page-dimming .overlay is a child of the drawer at z-index -1, so it
   paints over the drawer's own background -- invisible on #111, a grey wash on
   white. The theme's ::after (unused here) comes later in paint order at the
   same z-index, so it carries the white instead, above the overlay and below
   the content. */
.side-menu::after {
  top: 0;
  height: 100%;
  border-radius: 20px;
  background: #fff;
}
.side-menu .menu-content {
  overscroll-behavior: contain;
}
.side-menu .menu-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
/* the wordmark is a white PNG; invert it to black on the white drawer */
.side-menu .logo img {
  filter: invert(1);
}
/* the theme's drawer text is all white */
.side-menu .title,
.side-menu p,
.side-menu .ibt-btn-rounded,
.side-menu .social-icon a {
  color: var(--color-heading);
}
.awards-panel {
  margin: 34px 0 10px;
}
/* darker than --color-primary: the brand teal is too pale for small text on white */
.awards-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-family: var(--font-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1f8a7c;
}
.awards-title {
  margin-bottom: 20px;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: normal;
  color: var(--color-heading);
}
.awards-feature {
  margin: 0;
}
.awards-feature img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 14px;
}
.awards-feature figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 20px;
  color: #6f6f6f;
}
.awards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.awards-grid li > a,
.awards-grid li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  padding: 8px;
  transition: transform 0.2s ease;
}
.awards-grid li > a:hover {
  transform: translateY(-2px);
}
.awards-grid img {
  max-width: 100%;
  max-height: 102px;
  width: auto;
  height: auto;
}
/* the last tile is the one award nobody hands out: still being here */
.awards-since > span {
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: #6f6f6f;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.awards-since strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  color: #1f8a7c;
}
.awards-press {
  margin-top: 30px;
}
.awards-press a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 20px;
  color: #6f6f6f;
  text-decoration: none;
}
.awards-press a strong {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-heading);
}
.awards-press a:hover strong {
  color: #1f8a7c;
}
.side-menu .sidebar-menu.awards-contact {
  margin: 0;
  padding: 28px 0 22px;
}

/* The grid-icon awards drawer was desktop-only: the theme hides the toggle
   below 1201px. Keep it beside the logo at every width -- the drawer already
   sizes itself to a phone. */
@media (max-width: 1201px) {
  .header-logo .menu-toggle {
    display: inline-block;
    margin-right: 20px;
  }
}
@media (max-width: 575px) {
  .header-logo .menu-toggle {
    margin-right: 14px;
  }
  /* with the toggle in front, a full-width wordmark runs into the hamburger */
  .header-logo a img {
    width: min(190px, calc(100vw - 180px));
    height: auto;
  }
}

/* ---- Trustindex review certificate ---- */
/* The loader sits in the footer but renders a fixed "Trusted Site" tab, 28px
   tall, pinned to the bottom-right corner -- exactly where the scroll-to-top
   button lives. The wrapper takes no space; the button moves up to clear it. */
.footer-cert {
  padding: 0;
}
#scrollBtn {
  bottom: 43px;
}

/* ---- Homepage hero: Trustindex rating widget beside the audit button ---- */
/* Button and widget share a row; when the row is too narrow for both, the
   widget wraps underneath. Trustindex centres its widget (text-align on
   .ti-widget itself), so pull it left; purge-css.mjs safelists ^ti- so these
   rules survive the homepage purge. */
/* On a tablet the row still fits both, but the widget then runs into the
   "18 yrs" card in the bottom-right corner -- stack them below 1200px. */
/* The hero is a fixed height per breakpoint: the copy is pinned to the top and
   the 216px "18 yrs" card to the foot. On phones the pill pushes the copy down
   into that card (the button already grazed it before), so the slide grows
   until they clear. */
/* Tablets (770-1025px): on the theme's 690px slide the stacked button +
   widget run into the card (the button alone already clipped it around
   821-885px). The copy is vertically centred here, so extra height only buys
   half as much clearance -- 930px leaves ~20px. */