/*-----------------------------------------------------------------------------------

    Theme Name: Codox - Technology & AI Startup HTML Template 
    Author: Ordianit
    Support:ordianit@gmail.com
    Description: Codox - Technology & AI Startup HTML Template 
    Version: 1.0.0

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

/************ ================= ***************

	-----------------
    INDEXING START HERE
	-----------------
	1.1 Theme Css
	1.2 Common Classes
	1.3 ARTIFICIAL INTELLIGENCE CSS START HERE
	1.4 AI SOLUTION CSS START HERE
	1.5 CHATBOT CSS START HERE
	1.6 AI AGENCY CSS START HERE 
	1.7 IT SOLUTION CSS START HERE



**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Css
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Funnel+Display:wght@300..800&display=swap");
:root {
  /**=========== color ===========*/
  --oit-clr-white: #fff;
  --oit-clr-black: #101216;
  --oit-clr-black-2: #0D0D0D;
  --oit-grey-1: #F0F2F4;
  --oit-grey-2: #E9E9E9;
  --oit-text-body: #494949;
  --oit-theme-1: #4975CB;
  --oit-gradient-1: #6c63ff;
  --oit-gradient-2: #4e54c8;
}

:root {
  /**========== font family ==============*/
  --oit-ff-body: "Plus Jakarta Sans", sans-serif;
  --oit-ff-heading: "Funnel Display", sans-serif;
  --oit-ff-funnel: "Funnel Display", sans-serif;
  --oit-ff-p: "Plus Jakarta Sans", sans-serif;
  --oit-ff-fontawesome: "Font Awesome 6 Pro";
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 1750px;
}
.container.container-1460, .container-lg.container-1460, .container-md.container-1460, .container-sm.container-1460, .container-xl.container-1460, .container-xxl.container-1460 {
  max-width: 1460px;
}
.container.container-1870, .container-lg.container-1870, .container-md.container-1870, .container-sm.container-1870, .container-xl.container-1870, .container-xxl.container-1870 {
  max-width: 1870px;
}
.container.container-1890, .container-lg.container-1890, .container-md.container-1890, .container-sm.container-1890, .container-xl.container-1890, .container-xxl.container-1890 {
  max-width: 1890px;
}

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

html {
  scroll-behavior: smooth;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
  color: var(--oit-text-body);
  font-family: var(--oit-ff-body);
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  font-weight: 600;
  line-height: 1.2;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 1.6;
  font-family: var(--oit-ff-p);
  color: var(--oit-text-body);
}

a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
  transition: 0.3s;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
  outline: none;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 14px;
  padding-left: 26px;
  padding-right: 26px;
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--oit-clr-white);
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
  color: var(--oit-clr-white);
}
input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder { /* Firefox 4-18 */
  color: var(--oit-clr-white);
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+  Edge*/
  color: var(--oit-clr-white);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder { /* MODERN BROWSER */
  color: var(--oit-clr-white);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
  border-color: var(--oit-clr-white);
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0;
}

textarea {
  line-height: 1.4;
  padding-top: 17px;
  padding-bottom: 17px;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

::selection {
  background: var(--oit-clr-black);
  color: var(--oit-clr-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--oit-clr-black);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--oit-clr-black);
  font-size: 14px;
  opacity: 1;
}

/*---------------------------------
    1.2 Common Classes
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

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

.z-index-2 {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

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

.z-index-6 {
  position: relative;
  z-index: 6;
}

.z-index-7 {
  position: relative;
  z-index: 7;
}

.z-index-8 {
  position: relative;
  z-index: 8;
}

.z-index-9 {
  position: relative;
  z-index: 9;
}

.z-index-10 {
  position: relative;
  z-index: 10;
}

.gx-2 {
  --bs-gutter-x: 2px;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-40 {
  --bs-gutter-x: 40px;
}

.gx-45 {
  --bs-gutter-x: 45px;
}

.gx-50 {
  --bs-gutter-x: 50px;
}

.gx-60 {
  --bs-gutter-x: 60px;
}

.gx-70 {
  --bs-gutter-x: 70px;
}

.gx-80 {
  --bs-gutter-x: 80px;
}

.gx-90 {
  --bs-gutter-x: 90px;
}

.gx-100 {
  --bs-gutter-x: 100px;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.oit-text-white {
  color: var(--oit-clr-white);
}

.oit-text-black {
  color: var(--oit-clr-black);
}

/* dropcap */
.oit-dropcap::first-letter {
  margin-left: 280px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-dropcap::first-letter {
    margin-left: 0;
  }
}

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

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

.oit-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-img-wrap {
    width: 200px;
    height: 250px;
  }
}
.oit-img-wrap .oit-img-inner-wrap {
  display: flex;
  flex-direction: column;
}
.oit-img-wrap img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-img-wrap img {
    width: 200px;
    height: 250px;
  }
}

.image-gsl {
  position: relative;
  display: inline-block;
}
.image-gsl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: inline-block;
}
.image-gsl-canvas {
  position: absolute;
  inset: 0;
  display: inline-block;
  pointer-events: none;
  object-fit: cover;
}

.border-line {
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  transition: background-size 0.3s linear;
  background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor);
}
.border-line:hover {
  background-size: 0% 2px, 100% 2px;
}

.grey-bg {
  background-color: var(--oit-grey-1);
}

.grey-bg-2 {
  background-color: var(--oit-grey-2);
}

.white-bg {
  background-color: var(--oit-clr-white);
}

.black-bg {
  background-color: var(--oit-clr-black);
}

.gradient-bg {
  background: linear-gradient(205deg, #a09aff 0%, #4e54c8 100%);
}

.section-mlr {
  margin: 0 30px;
  border-radius: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .section-mlr {
    margin: 0;
    border-radius: 0;
  }
}

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.oit-btn-gradient {
  font-size: 16px;
  font-weight: 600;
  border-radius: 15px;
  padding: 16px 30px;
  display: inline-block;
  text-transform: capitalize;
  color: var(--oit-clr-white);
  gap: 10px;
  text-align: center;
  background-image: none;
  background-size: 300% 100%;
  background-position: 0% 100%;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  background-image: linear-gradient(to right, var(--oit-gradient-1), var(--oit-gradient-2), var(--oit-gradient-2), var(--oit-gradient-1));
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-btn-gradient {
    padding: 12px 25px;
  }
}
@media (max-width: 767px) {
  .oit-btn-gradient {
    font-size: 14px;
    padding: 12px 20px;
  }
}
.oit-btn-gradient span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.oit-btn-gradient span span.text-1 {
  position: relative;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-gradient span span.text-2 {
  position: absolute;
  top: 100%;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-gradient i {
  height: 14px;
  width: 14px;
  line-height: 14px;
  text-align: center;
  display: inline-block;
}
.oit-btn-gradient i span {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.oit-btn-gradient i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.oit-btn-gradient i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.oit-btn-gradient.white-bg {
  transition: 0.3s;
  color: var(--oit-clr-black);
  background: var(--oit-clr-white);
}
.oit-btn-gradient.white-bg:hover {
  color: var(--oit-clr-black);
}
.oit-btn-gradient.black-bg {
  transition: 0.3s;
  background: var(--oit-clr-black);
}
.oit-btn-gradient.gradient-2 {
  border: 1px solid var(--oit-clr-black);
  background-image: linear-gradient(to right, #9333ed, #5090e1, #0eedd4, #0eedd4);
  background-size: 120% 100%;
  background-position: 0% 0%;
}
.oit-btn-gradient.gradient-2:hover {
  background-position: 100% 100%;
}
.oit-btn-gradient.gradient-3 {
  color: var(--oit-clr-black);
  background-image: linear-gradient(to right, #66e0ff, #65b757, #66e0ff, #65b757);
}
.oit-btn-gradient.gradient-3:hover {
  color: var(--oit-clr-black);
  background-position: 100% 100%;
}
.oit-btn-gradient:hover {
  color: var(--oit-clr-white);
  background-position: 100% 100%;
}
.oit-btn-gradient:hover span span.text-1 {
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
}
.oit-btn-gradient:hover span span.text-2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.oit-btn-gradient:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.oit-btn-gradient:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}
.oit-btn-border {
  font-size: 16px;
  font-weight: 600;
  border-radius: 15px;
  padding: 16px 30px;
  display: inline-block;
  text-transform: capitalize;
  color: var(--oit-clr-black);
  gap: 10px;
  justify-content: center;
  border: 1px solid var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-btn-border {
    font-size: 14px;
    padding: 5px 22px;
    padding-right: 8px;
  }
}
.oit-btn-border span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
.oit-btn-border span span.text-1 {
  position: relative;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-border span span.text-2 {
  position: absolute;
  top: 100%;
  display: block;
  transition: 0.3s;
  transform: translateY(-1px);
}
.oit-btn-border i {
  height: 14px;
  width: 14px;
  line-height: 14px;
  text-align: center;
  display: inline-block;
}
.oit-btn-border i span {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.oit-btn-border i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.oit-btn-border i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.oit-btn-border:hover span span.text-1 {
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
}
.oit-btn-border:hover span span.text-2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.oit-btn-border:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.oit-btn-border:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}

/*----------------------------------------*/
/*  2.4 Animations
/*----------------------------------------*/
@keyframes animate-pulse-white {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  40% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  80% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}
.pulse-white {
  animation: animate-pulse-white 3s linear infinite;
}

@keyframes scroll-down {
  from {
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  to {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes scroll-up {
  from {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
    transform: translateX(7px);
  }
}
@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

.img-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

.img-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

/*----------------------------------------*/
/*  2.5 Preloader
/*----------------------------------------*/
/* ===== Preloader Wrapper ===== */
#preloader {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(40px);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.is-loading {
  opacity: 1;
  visibility: visible;
}

#preloader.is-loaded {
  pointer-events: none;
}

/* ===== Loader Animation ===== */
.preloader {
  width: 100px;
  height: 100px;
  position: relative;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #fff;
  animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.9s;
}

/* ===== Keyframes ===== */
@keyframes preloader {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/*--- end of preloader ---*/
.scroll-top {
  width: 40px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: -10%;
  right: 50px;
  font-size: 16px;
  z-index: 9;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-common-white);
  cursor: pointer;
  background: var(--oit-theme-1);
  transition: 1s ease;
  border: none;
}

.scroll-top.open {
  bottom: 80px;
}

/*----------------------------------------*/
/*  2.15 Section Title
/*----------------------------------------*/
.oit-section-subtitle {
  font-weight: 500;
  font-size: 14px;
  border-radius: 5px;
  padding: 4px 21px;
  padding-bottom: 8px;
  margin-bottom: 15px;
  display: inline-block;
  color: var(--oit-clr-black);
  background: linear-gradient(90deg, rgba(108, 99, 255, 0.3) 0%, #fff 50%, rgba(78, 84, 200, 0.3) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: moveGradient 4s ease-in-out infinite;
}
@media (max-width: 767px) {
  .oit-section-subtitle {
    font-size: 12px;
    padding: 4px 15px;
  }
}
.oit-section-subtitle::before {
  display: inline-block;
  content: "";
  height: 6px;
  width: 6px;
  margin-bottom: 2px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background-color: var(--oit-clr-black);
}
.oit-section-subtitle.style-2 {
  background: linear-gradient(90deg, rgba(102, 224, 255, 0.3) 0%, #fff 50%, rgba(102, 224, 255, 0.3) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: moveGradient 4s ease-in-out infinite;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-section-subtitle-box {
    margin-bottom: 20px;
  }
}
.oit-section-title {
  font-weight: 600;
  font-size: 70px;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.oit-section-title span {
  color: rgba(73, 73, 73, 0.7);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-section-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-section-title {
    font-size: 50px;
  }
  .oit-section-title br {
    display: none;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-section-title {
    font-size: 45px;
  }
  .oit-section-title br {
    display: none;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .oit-section-title {
    font-size: 32px;
  }
  .oit-section-title br {
    display: none;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-section-title {
    font-size: 40px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}

.ai-top-text {
  margin-inline-start: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-top-text {
    margin-inline-start: 0;
  }
}
.ai-top-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-top-text p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .ai-top-text p {
    font-size: 14px;
  }
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*----------------------------------------*/
/*  2.10 Offcanvas
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
}
.body-overlay.apply {
  opacity: 1;
  visibility: visible;
}
.body-overlay:hover {
  cursor: url(../img/cross-out.html), pointer;
}

.oit-instagram img {
  width: 100%;
}

.oitoffcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 450px;
  z-index: 9999;
  padding: 50px;
  opacity: 0;
  z-index: 1000;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  transition: 0.3s linear;
  overscroll-behavior-y: contain;
  background: var(--oit-clr-white) none repeat scroll 0 0;
}
.oitoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .oitoffcanvas {
    width: 90%;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oitoffcanvas {
    width: 75%;
    padding: 40px;
  }
}
.oitoffcanvas.opened {
  right: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.6s;
}
.oitoffcanvas__logo {
  margin-bottom: 60px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oitoffcanvas__logo {
    padding-top: 0;
  }
}
.oitoffcanvas__logo img {
  width: 100px;
  height: 100%;
}
.oitoffcanvas__close-btn button {
  font-size: 35px;
  position: absolute;
  right: 50px;
  top: 42px;
  transition: 1s;
  font-weight: 300;
  opacity: 0.6;
  color: var(--oit-clr-black);
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-duration: 0.3s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oitoffcanvas__close-btn button {
    font-size: 28px;
    right: 48px;
    top: 52px;
  }
}
@media (max-width: 767px) {
  .oitoffcanvas__close-btn button {
    font-size: 28px;
    right: 39px;
    top: 38px;
  }
}
.oitoffcanvas__close-btn button:hover {
  opacity: 1;
  color: var(--oit-clr-black);
}
.oitoffcanvas__content {
  margin-bottom: 30px;
}
.oitoffcanvas__content p {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 25px;
}
.oitoffcanvas__content span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
}
.oitoffcanvas__content a {
  font-size: 30px;
  line-height: 51px;
  font-weight: 700;
  color: var(--oit-clr-white);
  display: inline-block;
}
@media (max-width: 767px) {
  .oitoffcanvas__content a {
    font-size: 27px;
  }
}
.oitoffcanvas__social {
  margin-top: 50px;
}
.oitoffcanvas__social .social-icon a {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
  margin-right: 15px;
  transition: 0.3s;
  display: inline-block;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .oitoffcanvas__social .social-icon a {
    margin-right: 3px;
  }
}
.oitoffcanvas__social .social-icon a:hover {
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oitoffcanvas__text {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oitoffcanvas__text {
    display: none;
  }
}
.oitoffcanvas__text p {
  font-size: 16px;
  color: #414144;
}
.oitoffcanvas__info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 30px;
  margin-bottom: 20px;
}
.oitoffcanvas__info .offcanva-title {
  color: var(--oit-clr-black);
  margin: 30px 0 40px 0;
  font-size: 20px;
  font-weight: 600;
}
.oitoffcanvas__info-icon a {
  height: 50px;
  width: 50px;
  background-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  font-weight: 400;
  font-size: 21px;
  margin-right: 20px;
}
.oitoffcanvas__info-address span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.oitoffcanvas__info-address a {
  display: block;
  color: var(--oit-clr-black);
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .oitoffcanvas__info-address a {
    font-size: 16px;
  }
}
.oitoffcanvas__info-address a:hover {
  color: var(--oit-theme-1);
}
.oitoffcanvas .oit-homemenu-wrapper {
  padding: 0;
}
.oitoffcanvas .home-img-thumb {
  padding: 0px;
  height: 135px;
}
.oitoffcanvas .oit-menu-mobile .home-img-title, .oitoffcanvas .oit-category-mobile-menu .home-img-title {
  font-weight: 400;
}
.oitoffcanvas .oit-megamenu-thumb {
  display: none;
}
.oitoffcanvas .oit-megamenu-text {
  display: none;
}
.oitoffcanvas .oit-megamenu-list li a::before {
  display: none;
}
.oitoffcanvas .oit-megamenu-list li:hover > a {
  padding-left: 0px;
  font-weight: 400;
}
.oitoffcanvas .oit-megamenu-list li:not(:last-child) {
  margin-bottom: 0;
}
.oitoffcanvas .oit-menu-mobile ul li > a, .oitoffcanvas .oit-category-mobile-menu ul li > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.oitoffcanvas .oit-megamenu-title {
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 14px;
  margin-right: 65px;
  margin-top: 30px;
  font-weight: 500;
  color: var(--oit-clr-black);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oitoffcanvas .home-img:hover .home-img-title a {
  color: var(--oit-clr-white);
}
.oitoffcanvas .home-img:hover .home-img-title {
  background-size: 0% 1px, 100% 1px;
}

/*----------------------------------------*/
/*  2.4 breadcrumb
/*----------------------------------------*/
.breadcrumb-area {
  margin: 0 40px;
  padding: 30px 20px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-area {
    margin: 0 15px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-area {
    margin: 0 15px;
    border-radius: 10px;
  }
}
.breadcrumb-area::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: rgba(16, 18, 22, 0.6);
}
.breadcrumb-area .big-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 4%;
  z-index: -1;
}
.breadcrumb-badges {
  border-radius: 15px;
  padding: 14px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(-209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-badges {
    padding: 10px 20px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-badges {
    padding: 6px 8px;
  }
}
.breadcrumb-badges span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-badges span {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-badges span {
    font-size: 15px;
  }
}
.breadcrumb-badges svg {
  display: inline-block;
  transform: translateY(-2px);
}
.breadcrumb-title {
  font-size: 70px;
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--oit-clr-white);
  padding-top: 125px;
  padding-bottom: 185px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-title {
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-title {
    font-size: 60px;
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-title {
    font-size: 55px;
    padding-top: 80px;
    padding-bottom: 120px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-title {
    font-size: 35px;
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .breadcrumb-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .breadcrumb-title {
    font-size: 58px;
  }
}
.breadcrumb-meta {
  margin: 0 25px;
}
.breadcrumb-meta span {
  font-size: 20px;
  line-height: 1.6;
  display: block;
  color: rgba(240, 242, 244, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-meta span {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .breadcrumb-meta span {
    font-size: 16px;
  }
}
.breadcrumb-meta p {
  font-weight: 500;
  font-size: 30px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-meta p {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .breadcrumb-meta p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-wrap {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-wrap {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-wrap {
    padding-top: 160px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrap {
    padding-top: 150px;
  }
}
.breadcrumb-wrap.blog-style .breadcrumb-title {
  text-transform: capitalize;
  padding: 0;
  margin-bottom: 22px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb-wrap.blog-style .breadcrumb-title {
    font-size: 65px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb-wrap.blog-style .breadcrumb-title {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrap.blog-style .breadcrumb-title {
    font-size: 42px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .breadcrumb-wrap.blog-style .breadcrumb-title {
    font-size: 55px;
  }
}
.breadcrumb-wrap.blog-style .breadcrumb-badges {
  display: inline-block;
  padding: 7px 20px;
  margin-bottom: 32px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-wrap.blog-style .breadcrumb-badges {
    padding: 4px 20px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrap.blog-style .breadcrumb-badges {
    padding: 4px 5px;
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .breadcrumb-wrap.blog-style .breadcrumb-badges span {
    font-size: 14px;
  }
}
.breadcrumb-wrap.blog-style .breadcrumb-area {
  padding-top: 85px;
  padding-bottom: 305px;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-wrap.blog-style .breadcrumb-area {
    padding-bottom: 200px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrap.blog-style .breadcrumb-area {
    padding: 50px 0px;
    padding-bottom: 80px;
  }
}

/* HEADER CSS */
/*----------------------------------------*/
/*  3.1 Header Style 1
/*----------------------------------------*/
.oit-header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-ptb {
    padding: 10px 0;
  }
}
.oit-header-bar {
  height: 56px;
  width: 56px;
  line-height: 56px;
  border-radius: 10px;
  background-image: linear-gradient(to right, var(--oit-gradient-1), var(--oit-gradient-2), var(--oit-gradient-2), var(--oit-gradient-1));
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-bar {
    height: 50px;
    width: 50px;
  }
}
.oit-header-bar span {
  height: 2px;
  width: 28px;
  display: block;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: var(--oit-clr-white);
}
.oit-header-bar span:first-child {
  transform-origin: right center;
  transform: scaleX(0.5);
}
.oit-header-bar span:last-child {
  transform-origin: left center;
  transform: scaleX(0.5);
}
.oit-header-bar:hover span:first-child {
  transform: scaleX(1);
}
.oit-header-bar:hover span:last-child {
  transform: scaleX(1);
}
.oit-header-menu nav > ul > li {
  display: inline-block;
  margin: 0 20px;
}
.oit-header-menu nav > ul > li > a {
  padding: 35px 0;
  font-weight: 500;
  font-size: 17px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-menu nav > ul > li > a {
    font-size: 18px;
  }
}
.oit-header-menu-2 > nav > ul {
  display: flex;
  gap: 0;
}
.oit-header-menu-2 > nav > ul > li {
  margin: 0;
}
.oit-header-menu-2 > nav > ul > li > a {
  padding: 37px 35px;
  text-transform: capitalize;
  color: var(--oit-clr-white);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-header-menu-2 > nav > ul > li > a {
    font-size: 18px;
    padding: 28px 25px;
  }
}
.oit-header-menu-2 > nav > ul > li:last-child a {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.oit-header-menu-2 > nav > ul > li:hover a {
  background: rgba(255, 255, 255, 0.15);
}
.oit-header-bdr {
  border-bottom: 1px dashed var(--oit-clr-black);
}
.oit-header-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.oit-header-border .oit-header-logo {
  height: 100%;
  display: flex;
  align-items: center;
  margin-inline-end: 115px;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-header-border .oit-header-logo {
    margin-inline-end: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-header-border .oit-header-logo {
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-border .oit-header-logo {
    margin-inline-end: 0;
    border-left: none;
    border-right: none;
    justify-content: start;
  }
}
.oit-header-login a {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
  margin-inline-end: 30px;
}
.oit-header-area.cb-header-style .oit-header-menu nav > ul > li > a {
  text-transform: capitalize;
}
.oit-header-area.it-header-style {
  padding: 0 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-header-area.it-header-style {
    padding: 15px 0;
  }
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul {
  display: flex;
  gap: 0;
  justify-content: end;
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul > li {
  margin: 0;
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul > li:last-child > a {
  padding-inline-start: 36px;
  padding-inline-end: 34px;
  border-right: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-header-area.it-header-style .oit-header-menu > nav > ul > li:last-child > a {
    padding-inline-start: 25px;
    padding-inline-end: 30px;
  }
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul > li > a {
  padding: 37px 48px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-header-area.it-header-style .oit-header-menu > nav > ul > li > a {
    font-size: 16px;
    padding: 30px 26px;
  }
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul > li:hover a {
  background: rgba(255, 255, 255, 0.15);
}
.oit-header-area.it-header-style .oit-header-menu > nav > ul > li .submenu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.oit-header-area.it-header-style .oit-header-logo {
  padding-left: 20px;
}
.oit-header-area.it-header-style .oit-header-bar {
  background-image: linear-gradient(to right, #66e0ff, #65b757, #66e0ff, #65b757);
  background-size: 120% 100%;
  background-position: 0% 0%;
}
.oit-header-area.it-header-style .oit-header-bar span {
  background-color: var(--oit-clr-black);
}
.oit-header-area.it-header-style .oit-header-bar:hover {
  background-position: 100% 100%;
}

.ag-header-top-wrap {
  margin-top: 20px;
  border-radius: 10px;
  padding: 7px 32px;
}
.ag-header-top-wrap span {
  font-weight: 500;
  color: rgba(240, 242, 244, 0.7);
}
.ag-header-top-info span {
  display: inline-block;
}
.ag-header-top-info span:not(:last-child) {
  margin-inline-end: 30px;
}
.ag-header-top-info span:not(:last-child)::after {
  display: inline-block;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-inline-start: 30px;
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
.ag-header-top-info span a {
  color: var(--oit-clr-white);
}
.ag-header-top-social a {
  margin-inline-start: 32px;
  color: rgba(240, 242, 244, 0.7);
}
.ag-header-top-social a:hover {
  color: var(--oit-clr-white);
}
.ag-header-style {
  padding: 6px 20px;
  padding-inline-end: 6px;
  border-radius: 20px;
  border: 1px solid var(--oit-grey-2);
  background-color: var(--oit-clr-white);
}
.ag-header-style .oit-header-menu > nav > ul {
  padding: 10px;
  border-radius: 15px;
  display: inline-block;
  border: 1px solid var(--oit-grey-2);
}
.ag-header-style .oit-header-menu > nav > ul > li {
  margin-inline-end: 7px;
  margin-inline-start: 0;
}
.ag-header-style .oit-header-menu > nav > ul > li > a {
  border-radius: 8px;
  padding: 3px 9px;
  padding-bottom: 7px;
  text-transform: capitalize;
  line-height: 1;
  position: relative;
}
.ag-header-style .oit-header-menu > nav > ul > li:hover > a {
  color: var(--oit-clr-white);
  background: var(--oit-gradient-1);
}
.ag-header-style .oit-header-bar {
  background-image: linear-gradient(to right, #9333ed, #5090e1, #0eedd4, #0eedd4);
  background-size: 120% 100%;
  background-position: 0% 0%;
}
.ag-header-style .oit-header-bar:hover {
  background-position: 100% 100%;
}

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/
.oit-header-menu nav ul li {
  position: relative;
}
.oit-header-menu nav ul li .submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 270px;
  text-align: left;
  padding: 30px 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  border-radius: 5px;
  transition-duration: 0.1s;
  transform-origin: top;
  -webkit-transform: perspective(300px) rotateX(-18deg);
  -moz-transform: perspective(300px) rotateX(-18deg);
  -ms-transform: perspective(300px) rotateX(-18deg);
  -o-transform: perspective(300px) rotateX(-18deg);
  transform: perspective(300px) rotateX(-18deg);
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(48, 48, 47, 0.1);
  box-shadow: 0px 1px 2px 1px rgba(3, 11, 30, 0.06), 0px 1px 1px 0px rgba(3, 11, 30, 0.1);
  z-index: 9999;
}
.oit-header-menu nav ul li .submenu li {
  list-style: none;
  display: block;
  padding: 0 25px;
}
.oit-header-menu nav ul li .submenu li:not(:last-child) {
  margin-bottom: 5px;
}
.oit-header-menu nav ul li .submenu li a {
  font-weight: 600;
  font-size: 17px;
  position: relative;
  display: inline-block;
  text-transform: capitalize;
  color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li a::before {
  position: absolute;
  top: 13px;
  left: 0;
  content: "";
  height: 2px;
  width: 0px;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  transition: all 0.3s ease-out 0s;
  background-color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li:hover > a {
  padding-left: 20px;
  color: var(--oit-clr-black);
}
.oit-header-menu nav ul li .submenu li:hover > a::before {
  width: 15px;
  visibility: visible;
  opacity: 1;
}
.oit-header-menu nav ul li .submenu .submenu {
  left: 100%;
  top: 0;
}
.oit-header-menu nav ul li:hover.has-dropdown a::after {
  color: var(--oit-clr-black);
  transform: rotate(-180deg);
}
.oit-header-menu nav ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transition-duration: 0.2s;
  transform: perspective(300px) rotateX(0deg);
}

.oit-menu-mobile .oit-menu-content,
.oit-category-mobile-menu .oit-menu-content {
  margin-bottom: 70px;
}
.oit-menu-mobile ul,
.oit-category-mobile-menu ul {
  position: static;
  display: block;
  box-shadow: none;
}
.oit-menu-mobile ul li,
.oit-category-mobile-menu ul li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
}
.oit-menu-mobile ul li:not(:last-child) > a,
.oit-category-mobile-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn {
  position: absolute;
  right: 0;
  top: 25%;
  transform: translateY(-2px);
  font-size: 18px;
  color: var(--oit-clr-black);
  font-family: "Font Awesome 5 Pro";
  transition: all 0.3s ease-in-out;
  z-index: 1;
  width: 25px;
  height: 25px;
  line-height: 21px;
  text-align: center;
  border: 1px solid rgba(176, 162, 162, 0.35);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn i {
  transition: all 0.3s ease-in-out;
  margin-left: 2px;
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i {
  transform: rotate(90deg);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--oit-theme-1);
  border-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i,
.oit-category-mobile-menu ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
  background-color: var(--oit-theme-1);
  border-color: var(--oit-theme-1);
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i,
.oit-category-mobile-menu ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i {
  color: var(--oit-clr-white);
}
.oit-menu-mobile ul li.has-dropdown:hover > a::after,
.oit-category-mobile-menu ul li.has-dropdown:hover > a::after {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:last-child a span,
.oit-category-mobile-menu ul li:last-child a span {
  border-bottom: 0;
}
.oit-menu-mobile ul li > a,
.oit-category-mobile-menu ul li > a {
  display: block;
  font-size: 16px;
  position: relative;
  padding: 10px 0;
  font-weight: 500;
  padding-right: 20px;
  text-transform: capitalize;
  color: var(--oit-clr-black);
}
.oit-menu-mobile ul li > a:hover,
.oit-category-mobile-menu ul li > a:hover {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li > a svg,
.oit-category-mobile-menu ul li > a svg {
  transform: translateY(-2px);
}
.oit-menu-mobile ul li > a > i,
.oit-category-mobile-menu ul li > a > i {
  display: inline-block;
  width: 11%;
  margin-right: 13px;
  transform: translateY(4px);
  font-size: 21px;
  line-height: 1;
}
.oit-menu-mobile ul li > a .menu-text,
.oit-category-mobile-menu ul li > a .menu-text {
  font-size: 16px;
  line-height: 11px;
  border-bottom: 1px solid #EAEBED;
  width: 82%;
  display: inline-block;
  padding: 19px 0 17px;
}
.oit-menu-mobile ul li img,
.oit-category-mobile-menu ul li img {
  width: 100%;
  height: 100%;
}
.oit-menu-mobile ul li ul,
.oit-category-mobile-menu ul li ul {
  padding: 0;
}
.oit-menu-mobile ul li ul li,
.oit-category-mobile-menu ul li ul li {
  padding: 0;
}
.oit-menu-mobile ul li ul li a,
.oit-category-mobile-menu ul li ul li a {
  margin-left: auto;
  width: 93%;
  padding: 10px 5%;
  text-shadow: none !important;
  visibility: visible;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li a,
.oit-category-mobile-menu ul li ul li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li li a,
.oit-category-mobile-menu ul li ul li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li ul li li li li a,
.oit-category-mobile-menu ul li ul li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}
.oit-menu-mobile ul li:hover > a::after,
.oit-category-mobile-menu ul li:hover > a::after {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:hover > a .dropdown-toggle-btn i,
.oit-category-mobile-menu ul li:hover > a .dropdown-toggle-btn i {
  color: var(--oit-theme-1);
}
.oit-menu-mobile ul li:hover .mega-menu,
.oit-category-mobile-menu ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.oit-menu-mobile ul li .mega-menu, .oit-menu-mobile ul li .submenu,
.oit-category-mobile-menu ul li .mega-menu,
.oit-category-mobile-menu ul li .submenu {
  position: static;
  min-width: 100%;
  padding: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}
.oit-menu-mobile ul li .mega-menu li, .oit-menu-mobile ul li .submenu li,
.oit-category-mobile-menu ul li .mega-menu li,
.oit-category-mobile-menu ul li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
}
.oit-menu-mobile ul li .mega-menu li:hover a .dropdown-toggle-btn, .oit-menu-mobile ul li .submenu li:hover a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li .mega-menu li:hover a .dropdown-toggle-btn,
.oit-category-mobile-menu ul li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--oit-theme-1);
}
.oit-menu-mobile .oit-menu-content ul li:not(:last-child) .home-img-title a,
.oit-category-mobile-menu .oit-menu-content ul li:not(:last-child) .home-img-title a {
  border-bottom: none;
}
.oit-menu-mobile * ul, .oit-menu-mobile * li,
.oit-category-mobile-menu * ul,
.oit-category-mobile-menu * li {
  transition: none !important;
}

/*----------------------------------------*/
/*  5.1 Postbox css
/*----------------------------------------*/
.postbox-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.22;
  margin-bottom: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .postbox-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-title {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .postbox-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-title {
    font-size: 28px;
  }
}
.postbox-left {
  margin-inline-end: 80px;
  padding: 40px 50px;
  border-radius: 30px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .postbox-left {
    margin-inline-end: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-left {
    margin-inline-end: 0;
    padding: 30px 40px;
  }
}
@media (max-width: 767px) {
  .postbox-left {
    margin-inline-end: 0;
    padding: 30px 20px;
  }
}
.postbox-left.details-style {
  margin-inline-end: 0;
  background-color: transparent;
  padding: 0;
}
.postbox-left.details-style .postbox-dsc {
  padding-inline-start: 0;
}
.postbox-content .postbox-form-input-box input {
  background-color: var(--oit-clr-white);
}
.postbox-content .postbox-form-textarea-box textarea {
  background-color: var(--oit-clr-white);
}
.postbox-content .postbox-banner-wrap .postbox-dsc {
  padding-left: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox-content .postbox-banner-wrap .postbox-dsc {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-content .postbox-banner-wrap .postbox-dsc {
    padding-left: 0;
  }
}
.postbox-content .postbox-dsc p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-content .postbox-dsc p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .postbox-content .postbox-dsc p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-content .postbox-dsc p {
    font-size: 16px;
  }
}
.postbox-dsc p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-dsc p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .postbox-dsc p {
    font-size: 16px;
  }
}
.postbox-banner img {
  max-width: inherit;
  border-radius: 30px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.postbox-banner-wrap .postbox-banner {
  height: 100%;
}
@media (max-width: 767px) {
  .postbox-banner-wrap .postbox-banner {
    height: auto;
    margin-bottom: 30px;
  }
}
.postbox-banner-wrap .postbox-dsc {
  padding-inline-start: 80px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .postbox-banner-wrap .postbox-dsc {
    padding-left: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-banner-wrap .postbox-dsc {
    padding-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-banner-wrap .postbox-tag {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-tag {
    margin-bottom: 20px;
  }
}
.postbox-tag-title {
  margin: 0;
  margin-right: 18px;
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .postbox-tag-title {
    font-size: 16px;
  }
}
.postbox-tag-content a {
  padding: 0 22px;
  height: 32px;
  line-height: 29px;
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  transition: 0.3s;
  font-weight: 500;
  font-size: 16px;
  border-radius: 1000px;
  letter-spacing: -0.02em;
  border: 1px solid rgba(93, 93, 93, 0.3);
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .postbox-tag-content a {
    padding: 0 15px;
    height: 25px;
    line-height: 22px;
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.postbox-tag-content a:not(:last-child) {
  margin-right: 7px;
}
.postbox-tag-content a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}
.postbox-share-content a {
  font-size: 16px;
  display: inline-block;
  transition: 0.3s;
  height: 50px;
  width: 50px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-clr-black);
  border: 1px solid rgba(13, 13, 13, 0.2);
  background-color: rgba(13, 13, 13, 0.08);
}
@media (max-width: 767px) {
  .postbox-share-content a {
    height: 35px;
    width: 35px;
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  .postbox-share-content a svg {
    width: 12px;
  }
}
.postbox-share-content a:not(:last-child) {
  margin-right: 8px;
}
.postbox-share-content a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}
.postbox-user-thumb {
  flex: 0 0 auto;
}
.postbox-user-thumb img {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin-right: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-thumb img {
    height: 110px;
    width: 110px;
  }
}
@media (max-width: 767px) {
  .postbox-user-thumb img {
    margin-bottom: 30px;
  }
}
.postbox-user-info p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-info p {
    font-size: 16px;
  }
}
.postbox-user-info .user-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  margin-bottom: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-user-info .user-title {
    font-size: 20px;
  }
}
.postbox-comment ul li {
  border-radius: 20px;
  padding: 50px;
  list-style-type: none;
  background: var(--oit-grey-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-comment ul li {
    padding: 40px;
  }
}
.postbox-form-input-box input {
  height: 70px;
  font-size: 16px;
  font-weight: 500;
  line-height: 70px;
  border-radius: 10px;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
  background-color: transparent;
  border: 1px solid rgba(73, 73, 73, 0.2);
}
@media (max-width: 767px) {
  .postbox-form-input-box input {
    height: 50px;
    line-height: 50px;
  }
}
.postbox-form-input-box input::placeholder {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--oit-text-body);
}
@media (max-width: 767px) {
  .postbox-form-input-box input::placeholder {
    font-size: 14px;
  }
}
.postbox-form-input-box input:focus {
  border: 1px solid rgb(73, 73, 73);
}
.postbox-form-textarea-box textarea {
  height: 260px;
  resize: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 50px;
  border-radius: 10px;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
  background-color: transparent;
  border: 1px solid rgba(73, 73, 73, 0.2);
}
@media (max-width: 767px) {
  .postbox-form-textarea-box textarea {
    height: 150px;
    line-height: 35px;
    font-size: 14px;
  }
}
.postbox-form-textarea-box textarea::placeholder {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--oit-text-body);
}
@media (max-width: 767px) {
  .postbox-form-textarea-box textarea::placeholder {
    font-size: 14px;
  }
}
.postbox-form-textarea-box textarea:focus {
  border: 1px solid rgb(73, 73, 73);
}
.postbox-sidebar.right-sidebar {
  margin-left: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-sidebar.right-sidebar {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-sidebar.right-sidebar {
    margin-left: 0;
    margin-top: 70px;
  }
}
.postbox-sidebar.left-style {
  margin-left: 0;
  margin-right: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-sidebar.left-style {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-sidebar.left-style {
    margin-right: 0;
    margin-bottom: 50px;
  }
}
.postbox-area.blog-standard-style .postbox-left {
  padding: 40px;
}
.postbox-area.blog-standard-style .postbox-content {
  padding: 0 40px 30px 40px;
}
.postbox-area.blog-standard-style .postbox-title {
  margin-bottom: 0;
}
.postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge {
  background-color: var(--oit-clr-white);
}
.postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge:first-child {
  margin-left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-area.postbox-style-2 {
    padding: 90px 0;
  }
}
.postbox-area.postbox-style-2 .postbox-left {
  padding: 0;
  background-color: transparent;
}
.postbox-area.postbox-style-2 .postbox-content-wrap {
  border-radius: 20px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox-area.postbox-style-2 .postbox-content-wrap {
    margin-bottom: 70px;
  }
}
.postbox-area.postbox-style-2 .postbox-content {
  padding: 15px 40px;
  padding-top: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .postbox-area.postbox-style-2 .postbox-content {
    padding: 15px 20px;
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  .postbox-area.postbox-style-2 .blog-details-breadcrumb-badges {
    margin-bottom: 15px;
  }
}
.postbox-area.postbox-style-2 .blog-details-breadcrumb-badges .badge {
  color: var(--oit-text-body);
  background-color: var(--oit-clr-white);
}
.postbox-area.postbox-style-2 .blog-details-breadcrumb-badges .badge:first-child {
  margin-inline-start: 0;
}
.postbox-video-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  display: inline-block;
  height: 120px;
  width: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
  font-size: 26px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-video-btn {
    height: 80px;
    width: 80px;
    line-height: 76px;
  }
}
@media (max-width: 767px) {
  .postbox-video-btn {
    height: 45px;
    width: 45px;
    line-height: 37px;
  }
}
.postbox-video-btn svg {
  padding-left: 3px;
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .postbox-video-btn svg {
    height: 12px;
  }
}
.postbox-slider-arrow-wrap .postbox-arrow-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  z-index: 9;
}
.postbox-slider-arrow-wrap .postbox-arrow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  z-index: 9;
}
.postbox-slider-arrow-wrap button {
  padding: 0;
  height: 60px;
  width: 60px;
  line-height: 63px;
  text-align: center;
  font-size: 18px;
  border-radius: 50%;
  transition: 0.3s;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .postbox-slider-arrow-wrap button {
    font-size: 14px;
    height: 40px;
    width: 40px;
    line-height: 40px;
  }
}
.postbox-slider-arrow-wrap button:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-theme-1);
}
.postbox-thumb img {
  border-radius: 30px;
}
@media (max-width: 767px) {
  .postbox-thumb img {
    border-radius: 10px;
  }
}
@media (max-width: 767px) {
  .postbox-thumb-box.mb-40 {
    margin-bottom: 30px;
  }
}
.postbox-big-thumb {
  margin-top: -230px;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .postbox-big-thumb {
    margin: 0 45px;
    margin-top: -230px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .postbox-big-thumb {
    margin: 0 55px;
    margin-top: -230px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox-big-thumb {
    margin: 0 25px;
    margin-top: -230px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox-big-thumb {
    margin: 0 35px;
    margin-top: -230px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox-big-thumb {
    margin: 0 35px;
    margin-top: -120px;
  }
}
@media (max-width: 767px) {
  .postbox-big-thumb {
    margin: 0;
    margin-top: 0;
    margin-top: 70px;
  }
}
.postbox-big-thumb img {
  border-radius: 30px;
}
@media (max-width: 767px) {
  .postbox-big-thumb img {
    border-radius: 10px;
  }
}

.oit-pagination ul li {
  display: inline-block;
  list-style-type: none;
  margin: 0 4px;
}
.oit-pagination ul li a {
  width: 60px;
  height: 60px;
  line-height: 61px;
  font-weight: 400;
  font-size: 18px;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(121, 121, 121, 0.2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-pagination ul li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  .oit-pagination ul li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}
.oit-pagination ul li a i {
  font-size: 20px;
}
.oit-pagination ul li.current a {
  color: var(--oit-clr-white);
  border: 1px solid #5090e1;
  background-color: var(--oit-gradient-1);
}
.oit-pagination ul li:hover a {
  color: var(--oit-clr-white);
  border: 1px solid #5090e1;
  background-color: var(--oit-gradient-1);
}

/*----------------------------------------*/
/*  5.3 Sidebar css
/*----------------------------------------*/
.sidebar-search-box input {
  width: 100%;
  height: 45px;
  line-height: 45px;
  padding-left: 25px;
  padding-right: 60px;
  text-transform: capitalize;
  color: var(--oit-clr-black);
  border: 1px solid transparent;
  border-radius: 10px 0 0 10px;
  background: rgba(73, 73, 73, 0.15);
}
.sidebar-search-box input::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: var(--oit-text-body);
}
.sidebar-search-box input:focus {
  border: 1px solid var(--oit-clr-black);
}
.sidebar-search-button button {
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  padding: 0 20px;
  border-radius: 0 10px 10px 0;
  transform: translateY(-52%);
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.sidebar-widget {
  padding: 20px 30px 30px 30px;
  border-radius: 20px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .sidebar-widget {
    padding: 45px 25px;
  }
}
.sidebar-widget-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(73, 73, 73, 0.3);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-title {
    font-size: 24px;
  }
}
.sidebar-widget-list-wrap a {
  display: block;
}
.sidebar-widget-list-wrap a:not(:last-child) {
  margin-bottom: 15px;
}
.sidebar-widget-list {
  width: 100%;
  display: flex;
  font-weight: 500;
  font-size: 18px;
  transition: 0.3s;
  text-transform: capitalize;
  justify-content: space-between;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-list {
    font-size: 16px;
  }
}
.sidebar-widget-list span {
  transition: 0.3s;
}
.sidebar-widget-list.active {
  color: var(--oit-gradient-1);
}
.sidebar-widget-list.active span {
  color: var(--oit-gradient-1);
}
.sidebar-widget-list:hover {
  color: var(--oit-gradient-1);
}
.sidebar-widget-list:hover span {
  color: var(--oit-gradient-1);
}
.sidebar-widget-post ul li {
  list-style-type: none;
}
.sidebar-widget-post ul li:not(:last-child) {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(121, 121, 121, 0.2);
}
.sidebar-widget-post .rc-post-thumb {
  margin-bottom: 15px;
}
.sidebar-widget-post .rc-post-thumb img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.sidebar-widget-post .rc-post-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sidebar-widget-post .rc-post-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-post .rc-post-title {
    font-size: 16px;
  }
}
.sidebar-widget-post .rc-post-title a {
  transition: 0.3s;
}
.sidebar-widget-post .rc-post-title a:hover {
  color: var(--it-theme-1);
}
.sidebar-widget-post .rc-meta span {
  display: flex;
  align-items: center;
}
.sidebar-widget-post .rc-meta span i, .sidebar-widget-post .rc-meta span svg {
  margin-right: 7px;
}
.sidebar-widget-tag span {
  display: inline-block;
  font-weight: 500;
  border-radius: 100px;
  padding: 5px 20px;
  margin-bottom: 10px;
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(93, 93, 93, 0.3);
  margin-right: 9px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-widget-tag span {
    font-size: 14px;
    padding: 2px 14px;
    margin-right: 5px;
  }
}
.sidebar-author-info img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}
.sidebar-author-info .author-title {
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-author-info .author-title {
    font-size: 19px;
  }
}
.sidebar-author-info > span {
  font-size: 14px;
  display: block;
  margin-bottom: 15px;
}
.sidebar-author-info p {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar-author-info p {
    font-size: 19px;
  }
}
.sidebar-author-info .social-box a {
  display: inline-block;
  margin: 0 5px;
}

/*----------------------------------------*/
/*  5.4 Blog css
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-blog-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-blog-area .ai-blog-secttion-box.mb-80 {
    margin-bottom: 30px;
  }
}
.ai-blog-meta span {
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  display: inline-block;
}
.ai-blog-meta span:not(:last-child)::after {
  content: "";
  height: 8px;
  width: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 15px;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.ai-blog-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ai-blog-title {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-blog-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .ai-blog-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-blog-title {
    font-size: 28px;
  }
}
.ai-blog-thumb {
  overflow: hidden;
  border-radius: 30px;
  margin-bottom: 20px;
}
.ai-blog-thumb img {
  width: 100%;
  transition: 0.9s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-blog-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.ag-blog-area .row [class*=col-xl-6]:nth-child(1) .ag-blog-item {
  border-bottom: 1px solid var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-area .row [class*=col-xl-6]:nth-child(1) .ag-blog-item {
    border-bottom: none;
  }
}
.ag-blog-area .row [class*=col-xl-6]:nth-child(1) .ag-blog-item::after {
  position: absolute;
  content: "";
  bottom: -4px;
  inset-inline-start: -4px;
  height: 7px;
  width: 7px;
  background-color: var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-area .row [class*=col-xl-6]:nth-child(1) .ag-blog-item::after {
    display: none;
  }
}
.ag-blog-area .row [class*=col-xl-6]:nth-child(2) .ag-blog-item {
  border-bottom: 1px solid var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-area .row [class*=col-xl-6]:nth-child(2) .ag-blog-item {
    border-bottom: none;
  }
}
.ag-blog-area .row [class*=col-xl-6]:nth-child(2) .ag-blog-item::after {
  position: absolute;
  content: "";
  bottom: -4px;
  inset-inline-start: -4px;
  height: 7px;
  width: 7px;
  background-color: var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-area .row [class*=col-xl-6]:nth-child(2) .ag-blog-item::after {
    display: none;
  }
}
.ag-blog-border {
  padding-inline-start: 90px;
  border-top: 1px solid var(--oit-text-body);
  border-bottom: 1px solid var(--oit-text-body);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-blog-border {
    padding-inline-start: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-border {
    border-top: none;
    border-bottom: none;
    padding-inline-start: 0;
  }
}
.ag-blog-section-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ag-blog-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-inline-end: 110px;
  letter-spacing: -0.03em;
  margin-bottom: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-blog-text p {
    font-size: 16px;
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-blog-text p {
    font-size: 16px;
    margin-inline-end: 80px;
  }
}
@media (max-width: 767px) {
  .ag-blog-text p {
    font-size: 16px;
    margin-inline-end: 0;
  }
}
.ag-blog-item-wrap {
  margin-inline-start: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-item-wrap {
    margin-inline-start: 0;
  }
}
.ag-blog-thumb {
  margin-bottom: 30px;
  border-radius: 30px;
  overflow: hidden;
}
.ag-blog-thumb img {
  transition: 0.6s;
}
.ag-blog-item {
  padding: 30px;
  position: relative;
  border-inline-start: 1px solid var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-item {
    padding: 30px 10px;
    border-inline-start: none;
  }
}
.ag-blog-item .ai-blog-meta {
  position: absolute;
  bottom: 0;
  inset-inline-end: 40px;
  padding: 7px 20px;
  border-radius: 20px 20px 0 0;
  background-color: var(--oit-grey-1);
}
@media (max-width: 767px) {
  .ag-blog-item .ai-blog-meta {
    padding: 7px 12px;
  }
}
.ag-blog-item .ai-blog-meta span {
  margin-bottom: 0;
  font-size: 14px;
}
@media (max-width: 767px) {
  .ag-blog-item .ai-blog-meta span {
    font-size: 12px;
  }
}
.ag-blog-item .ai-blog-meta::before {
  content: "";
  position: absolute;
  bottom: -3px;
  inset-inline-end: -26px;
  width: 26px;
  height: 31px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F2F4' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.ag-blog-item .ai-blog-meta::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: -28px;
  width: 30px;
  height: 30px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F2F4' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-blog-item .ai-blog-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-blog-item .ai-blog-title {
    font-size: 26px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-style.blog-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.blog-style .ag-blog-item {
  padding: 0;
  border-inline-start: none;
}
.blog-style .ai-blog-meta {
  background-color: var(--oit-clr-white);
}
.blog-style .ai-blog-meta::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
}
.blog-style .ai-blog-meta::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
}

/*----------------------------------------*/
/*  5.4 Blog details css
/*----------------------------------------*/
.blog-details-breadcrumb-area {
  padding-top: 245px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-area {
    padding-top: 200px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-area {
    padding-top: 150px;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 {
  padding-top: 195px;
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 {
    padding-top: 150px;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
  position: absolute;
  top: 15%;
  right: 8%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape {
    display: none;
  }
}
.blog-details-breadcrumb-area.breadcrumb-style-2 .shape-2 {
  position: absolute;
  right: 8%;
  top: 40%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-area.breadcrumb-style-2 .shape-2 {
    display: none;
  }
}
.blog-details-breadcrumb-area.career-style .shape {
  top: 40%;
}
.blog-details-breadcrumb-badges .badge {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 100px;
  margin: 0 10px;
  color: var(--oit-grey-2);
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(13, 13, 13, 0.05);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-badges .badge {
    margin-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-badges .badge {
    font-size: 12px;
    padding: 6px 9px;
    margin: 0 3px;
    margin-bottom: 10px;
  }
}
.blog-details-breadcrumb-badges .badge svg {
  display: inline-block;
  margin-right: 6px;
}
.blog-details-breadcrumb-badges.badges-style-2 {
  padding-bottom: 100px;
  margin-bottom: 55px;
  border-bottom: 1px solid #d9d9d9;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-badges.badges-style-2 {
    padding-bottom: 30px;
    margin-bottom: 40px;
  }
}
.blog-details-breadcrumb-badges.badges-style-2 > div {
  padding: 6px 20px;
  border-radius: 100px;
  display: inline-block;
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(13, 13, 13, 0.05);
}
.blog-details-breadcrumb-badges.badges-style-2 > div > .badge {
  border: none;
  padding: 0;
  background-color: transparent;
}
.blog-details-breadcrumb-title {
  font-weight: 500;
  font-size: 80px;
  line-height: 1.13;
  margin-bottom: 35px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .blog-details-breadcrumb-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-breadcrumb-title {
    font-size: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-title {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-title {
    font-size: 35px;
  }
  .blog-details-breadcrumb-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-breadcrumb-title {
    font-size: 58px;
  }
}
.blog-details-breadcrumb-author-wrap {
  margin-bottom: 140px;
  border-radius: 1000px;
  padding: 20px 30px 20px 20px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-breadcrumb-author-wrap {
    margin-bottom: 100px;
  }
}
.blog-details-breadcrumb-author-wrap img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  border-radius: 1000px;
}
.blog-details-breadcrumb-author-wrap.author-style-2 {
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent;
}
.blog-details-breadcrumb-author-wrap.author-style-2 img {
  border-radius: 10px;
}
.blog-details-breadcrumb-author-info .title-sm {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 0;
}
.blog-details-breadcrumb-author-info span {
  font-size: 14px;
}
.blog-details-breadcrumb-big-title {
  font-weight: 600;
  font-size: 144px;
  line-height: 1.07;
  margin-bottom: 80px;
}
.blog-details-breadcrumb-big-title.title-mb {
  margin-bottom: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details-breadcrumb-big-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-breadcrumb-big-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-details-breadcrumb-big-title {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .blog-details-breadcrumb-big-title {
    font-size: 31px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details-breadcrumb-big-title {
    font-size: 50px;
  }
}
.blog-details-date-box span {
  font-size: 30px;
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-date-box span {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-date-box span {
    font-size: 15px;
  }
}
.blog-details-date-box strong {
  font-weight: 500;
  font-size: 30px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details-date-box strong {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details-date-box strong {
    font-size: 15px;
  }
}

/*----------------------------------------*/
/*  6.1 Footer Style 1
/*----------------------------------------*/
.ai-footer-top-title {
  font-size: 70px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-footer-top-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-top-title {
    font-size: 42px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-footer-top-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-footer-top-title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .ai-footer-top-title {
    font-size: 27px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-footer-top-title {
    font-size: 35px;
  }
}
.ai-footer-top-title span {
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-arrow svg {
    height: 85px;
  }
}
.ai-footer-widget {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-widget {
    padding-top: 0;
    padding-bottom: 50px;
  }
}
.ai-footer-widget-menu a {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  display: block;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-widget-menu a {
    font-size: 16px;
  }
}
.ai-footer-widget-menu a:not(:last-child) {
  margin-bottom: 23px;
}
.ai-footer-widget-menu a:hover {
  color: var(--oit-clr-white);
}
.ai-footer-widget-info a {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  display: block;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-widget-info a {
    font-size: 16px;
  }
}
.ai-footer-widget-info a:not(:last-child) {
  margin-bottom: 23px;
}
.ai-footer-widget-info a:hover {
  color: var(--oit-clr-white);
}
.ai-footer-widget-title {
  font-size: 30px;
  margin-bottom: 35px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-widget-title {
    font-size: 24px;
  }
}
.ai-footer-widget-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-inline-end: 30px;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-widget-text p {
    font-size: 16px;
  }
}
.ai-footer-border {
  margin-top: 90px;
  border-top: 1px solid var(--oit-text-body);
  border-bottom: 1px solid var(--oit-text-body);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-border {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-border {
    margin-top: 50px;
    padding-top: 80px;
    padding-bottom: 30px;
  }
}
.ai-footer-border .row [class*=col]:not(:first-child) .ai-footer-widget {
  height: 100%;
  position: relative;
}
.ai-footer-border .row [class*=col]:not(:first-child) .ai-footer-widget::after {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  content: "";
  height: 100%;
  width: 1px;
  background-color: var(--oit-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-border .row [class*=col]:not(:first-child) .ai-footer-widget::after {
    display: none;
  }
}
.ai-footer-border .row [class*=col]:nth-child(3) .ai-footer-widget {
  margin-inline-start: -50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-footer-border .row [class*=col]:nth-child(3) .ai-footer-widget {
    margin-inline-start: -75px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-border .row [class*=col]:nth-child(3) .ai-footer-widget {
    margin-inline-start: -60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-border .row [class*=col]:nth-child(3) .ai-footer-widget {
    margin-inline-start: 0;
  }
}
.ai-footer-col-1-2 {
  padding-inline-start: 115px;
  margin-inline-start: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-footer-col-1-2 {
    padding-inline-start: 70px;
    margin-inline-start: 10px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-col-1-2 {
    padding-inline-start: 60px;
    margin-inline-start: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-footer-col-1-2 {
    padding-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-footer-col-1-2 {
    padding-inline-start: 20px;
    margin-inline-start: 0;
  }
}
@media (max-width: 767px) {
  .ai-footer-col-1-2 {
    padding-inline-start: 0;
    margin-inline-start: 0;
  }
}
.ai-footer-col-1-3 {
  padding-inline-start: 95px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-footer-col-1-3 {
    padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-col-1-3 {
    padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-footer-col-1-3 {
    padding-inline-start: 0;
  }
}
.ai-footer-col-1-4 {
  margin-inline-start: 70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-footer-col-1-4 {
    margin-inline-start: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-footer-col-1-4 {
    margin-inline-start: 33px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-footer-col-1-4 {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-footer-col-1-4 {
    margin-inline-start: 20px;
  }
}
@media (max-width: 767px) {
  .ai-footer-col-1-4 {
    margin-inline-start: 0;
  }
}

.ai-copyright-ptb {
  padding: 33px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-copyright-ptb {
    padding: 20px 0;
  }
}
.ai-copyright-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-copyright-text p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .ai-copyright-social {
    margin-top: 20px;
  }
}
.ai-copyright-social a {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 45px;
  border-radius: 50%;
  text-align: center;
  color: var(--oit-clr-white);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-inline-start: 8px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-copyright-social a {
    height: 40px;
    width: 40px;
    line-height: 35px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-copyright-social a svg {
    height: 16px;
  }
}
.ai-copyright-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}

.cb-footer-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.22;
  color: rgba(240, 242, 244, 0.7);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-footer-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-footer-title {
    font-size: 45px;
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .cb-footer-title {
    font-size: 30px;
    margin-bottom: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-footer-logo img {
    width: 150px;
  }
}
@media (max-width: 767px) {
  .cb-footer-logo img {
    width: 120px;
  }
}
.cb-footer-content {
  height: 100%;
  display: flex;
  margin-inline-start: 100px;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-footer-content {
    margin-inline-start: 20px;
  }
}
.cb-footer-area {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.cb-footer-area .ai-footer-widget {
  height: 100%;
  padding: 65px 70px;
  padding-inline-end: 0;
  border-inline-start: 1px solid #494949;
}
@media (max-width: 767px) {
  .cb-footer-area .ai-footer-widget {
    padding: 0 30px;
    padding-bottom: 50px;
  }
}
.cb-footer-area .ai-footer-widget-menu a:not(:last-child) {
  margin-bottom: 13px;
}
.cb-footer-area .cb-footer-col-2-1 {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-footer-area .cb-footer-col-2-1 {
    border-top: 1px solid #494949;
    border-inline-start: none;
  }
}
@media (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-1 {
    border: none;
  }
}
.cb-footer-area .cb-footer-col-2-1::after {
  position: absolute;
  content: "";
  bottom: -4px;
  inset-inline-start: -4px;
  height: 7px;
  width: 7px;
  background-color: var(--oit-text-body);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-1::after {
    display: none;
  }
}
.cb-footer-area .cb-footer-col-2-2 {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-footer-area .cb-footer-col-2-2 {
    border-top: 1px solid #494949;
  }
}
@media (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-2 {
    border: none;
  }
}
.cb-footer-area .cb-footer-col-2-2::after {
  position: absolute;
  content: "";
  bottom: -4px;
  inset-inline-start: -4px;
  height: 7px;
  width: 7px;
  background-color: var(--oit-text-body);
}
@media (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-2::after {
    display: none;
  }
}
.cb-footer-area .cb-footer-col-2-3 {
  border-top: 1px solid #494949;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-footer-area .cb-footer-col-2-3 {
    border-inline-start: none;
  }
}
@media (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-3 {
    border: none;
  }
}
.cb-footer-area .cb-footer-col-2-4 {
  border-top: 1px solid #494949;
}
@media (max-width: 767px) {
  .cb-footer-area .cb-footer-col-2-4 {
    border: none;
  }
}

.it-footer-area .cb-footer-title {
  color: var(--oit-text-body);
}
.it-footer-area .ai-footer-widget-title {
  color: var(--oit-text-body);
}
.it-footer-area .ai-footer-widget-menu a {
  color: var(--oit-text-body);
}
.it-footer-area .ai-footer-widget-info a {
  color: var(--oit-text-body);
}
.it-footer-area .ai-copyright-text p {
  padding: 19px 0;
  color: var(--oit-text-body);
}
.it-footer-border {
  border-top: 1px solid var(--oit-text-body);
  border-bottom: 1px solid var(--oit-text-body);
}

/*---------------------------------------------*/
/*                                              \
\   1.3 ARTIFICIAL INTELLIGENCE CSS START HERE  \           
|                                               \
/*---------------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.ai-hero-bg {
  padding-top: 190px;
  background: linear-gradient(180deg, rgba(160, 154, 255, 0.3) 0%, rgba(78, 84, 200, 0) 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-hero-bg {
    padding-top: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-bg {
    padding-top: 140px;
  }
}
@media (max-width: 767px) {
  .ai-hero-bg {
    padding-top: 120px;
  }
}
.ai-hero-bg .shape {
  position: absolute;
  top: 6%;
  inset-inline-end: 9%;
  z-index: -1;
  animation: shape-rotate 40s linear infinite;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-hero-bg .shape {
    inset-inline-end: -2%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-bg .shape {
    inset-inline-end: -35%;
  }
}
@media (max-width: 767px) {
  .ai-hero-bg .shape {
    display: none;
  }
}
.ai-hero-title {
  font-weight: 700;
  font-size: 120px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-hero-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-hero-title {
    font-size: 100px;
  }
  .ai-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-hero-title {
    font-size: 75px;
  }
  .ai-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-title {
    font-size: 75px;
    margin-bottom: 30px;
  }
  .ai-hero-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .ai-hero-title {
    font-size: 48px;
    margin-bottom: 30px;
  }
  .ai-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-hero-title {
    font-size: 60px;
  }
}
.ai-hero-title span {
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-hero-content {
    margin-bottom: 70px;
  }
}
.ai-hero-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: var(--oit-clr-black-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-hero-content p {
    margin-inline-end: 100px;
  }
  .ai-hero-content p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-hero-content p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-content p {
    font-size: 18px;
    margin-inline-end: 50px;
  }
  .ai-hero-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .ai-hero-content p {
    font-size: 16px;
    margin-inline-end: 0;
  }
  .ai-hero-content p br {
    display: none;
  }
}
.ai-hero-thumb img {
  border-radius: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-hero-thumb img {
    width: 100%;
  }
}
.ai-hero-thumb.big-thumb {
  height: 100%;
}
.ai-hero-thumb.big-thumb img {
  height: 100%;
  border-radius: 30px;
}
.ai-hero-info {
  padding: 40px 30px;
  padding-top: 30px;
  border-radius: 30px;
  border: 1px solid var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-hero-info {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-info {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .ai-hero-info {
    text-align: center;
    margin-bottom: 30px;
  }
}
.ai-hero-info.info-dark span {
  color: var(--oit-clr-white);
}
.ai-hero-info .info-title {
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px #6c63ff;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-hero-info .info-title {
    font-size: 50px;
  }
}
.ai-hero-info span {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ai-hero-info span {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-hero-info span {
    font-size: 14px;
  }
}
.ai-hero-arrow {
  position: absolute;
  top: 0;
  inset-inline-start: 11.5%;
  padding: 0 10px 10px 10px;
  border-radius: 0 0 50% 50%;
  background-color: #EBEBFB;
}
@media (max-width: 767px) {
  .ai-hero-arrow {
    display: none;
  }
}
.ai-hero-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -60px;
  width: 60px;
  height: 60px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-90deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23EBEBFB' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.ai-hero-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: -60px;
  width: 60px;
  height: 60px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-90deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(-180 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23EBEBFB' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.ai-hero-arrow a {
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  text-align: center;
  color: var(--oit-clr-white);
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-arrow a {
    height: 80px;
    width: 80px;
    line-height: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-arrow a svg {
    height: 25px;
  }
}
.ai-hero-Scroll {
  position: absolute;
  bottom: 6.5%;
  inset-inline-end: 8%;
  padding: 10px 10px 7px 0;
  background-color: var(--oit-clr-white);
  transform: rotate(-90deg);
  border-radius: 0px 100px 100px 0;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-hero-Scroll {
    bottom: 8.5%;
  }
}
@media (max-width: 767px) {
  .ai-hero-Scroll {
    display: none;
  }
}
.ai-hero-Scroll::before {
  content: "";
  position: absolute;
  bottom: -40px;
  inset-inline-start: 3px;
  width: 45px;
  height: 45px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-180deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.ai-hero-Scroll::after {
  content: "";
  position: absolute;
  bottom: 70px;
  inset-inline-start: 3px;
  width: 45px;
  height: 45px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-90deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.ai-hero-Scroll a {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
.ai-hero-Scroll a span {
  font-weight: 500;
  font-size: 16px;
  padding-inline-start: 10px;
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
.ai-hero-Scroll a svg {
  display: inline-block;
  color: var(--oit-clr-white);
  transform: rotate(-90deg);
}
.ai-hero-Scroll a i {
  display: inline-block;
  animation: scroll 1s infinite ease-in-out alternate;
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-area {
    padding-bottom: 90px;
  }
}
.ai-about-area .big-text {
  position: absolute;
  bottom: 0;
  inset-inline-start: -19%;
  letter-spacing: -11px;
  color: transparent;
  font-size: 240px;
  display: inline-block;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  z-index: -1;
  font-family: var(--oit-ff-heading);
  -webkit-text-stroke: 1px var(--oit-grey-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-area .big-text {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-thumb {
    height: 100%;
  }
}
.ai-about-thumb img {
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-thumb img {
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .ai-about-thumb.thumb-sm {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-about-thumb.thumb-sm {
    padding-bottom: 0;
  }
}
.ai-about-thumb.thumb-sm img {
  max-width: inherit;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-thumb.thumb-sm img {
    width: 100%;
  }
}
.ai-about-content {
  padding-top: 110px;
  padding-inline-start: 95px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-about-content {
    padding-inline-start: 25px;
    padding-top: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-about-content {
    padding-inline-start: 25px;
    padding-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-about-content {
    padding-top: 50px;
    padding-inline-start: 0;
  }
}
.ai-about-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  margin-inline-end: 70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-about-content p {
    font-size: 18px;
    margin-inline-end: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-about-content p {
    font-size: 18px;
    margin-inline-end: 40px;
  }
}
@media (max-width: 767px) {
  .ai-about-content p {
    font-size: 18px;
    margin-inline-end: 0;
  }
}
.ai-about-content p.text-bold {
  font-weight: 600;
  color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-service-area {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-service-area .ai-service-secttion-box.mb-80 {
    margin-bottom: 30px;
  }
}
.ai-service-title {
  font-size: 45px;
  line-height: 1.22;
  color: var(--oit-clr-white);
}
.ai-service-item {
  height: 100%;
  background: #3137D2;
  border-radius: 30px;
  padding: 40px;
  transition: opacity 0.3s ease;
}
.ai-service .ai-service-title {
  font-size: 30px;
}
.ai-service-item-2 {
  padding: 50px 60px;
  border-radius: 30px;
  display: flex;
  height: 100%;
  background: #3137D2;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ai-service-item-2 p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 25px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-project-area {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-project-area .ai-project-secttion-box.mb-80 {
    margin-bottom: 30px;
  }
}
.ai-project-item {
  padding: 35px;
  border-radius: 30px;
}
.ai-project-item p {
  font-weight: 500;
  line-height: 1.6;
  margin-inline-end: 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-project-item p {
    margin-inline-end: 0;
  }
}
.ai-project-item span {
  padding-left: 30px;
  position: relative;
  display: block;
}
.ai-project-item span:not(:last-child) {
  margin-bottom: 10px;
}
.ai-project-item span svg {
  position: absolute;
  top: 4px;
  left: 0;
}
.ai-project-title {
  font-weight: 600;
  font-size: 35px;
  letter-spacing: 0.03em;
}
@media (max-width: 767px) {
  .ai-project-title {
    font-size: 28px;
  }
}
.ai-project-content-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ai-project-thumb {
  height: 100%;
  margin-inline-start: 95px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-project-thumb {
    margin-inline-start: 0;
    margin-top: 50px;
    height: auto;
  }
}
.ai-project-thumb img {
  height: 100%;
  border-radius: 30px;
  outline: 1px solid var(--oit-clr-white);
}

/*----------------------------------------*/
/* text-slider css start here
/*----------------------------------------*/
.ai-text-slider-area {
  padding-top: 150px;
  padding-bottom: 230px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-text-slider-area {
    padding-top: 90px;
    padding-bottom: 150px;
  }
}
@media (max-width: 767px) {
  .ai-text-slider-area {
    padding: 90px 0;
  }
}
.ai-text-slider-wrap.gradient-bg {
  transform: rotate(5deg);
  transform-origin: center left;
  margin-inline-end: -20px;
}
@media (max-width: 767px) {
  .ai-text-slider-wrap.gradient-bg {
    transform: rotate(0);
    margin-bottom: 20px;
  }
}
.ai-text-slider-wrap.black-bg {
  transform: rotate(-5deg);
  margin-inline-start: -20px;
}
@media (max-width: 767px) {
  .ai-text-slider-wrap.black-bg {
    transform: rotate(0);
  }
}
.ai-text-slider-item {
  gap: 80px;
  padding: 5px 0;
  -webkit-animation: text-slide-animation 30s linear infinite;
  animation: text-slide-animation 30s linear infinite;
  transition: animation-duration 300ms;
}
.ai-text-slider-item.slide-ltr {
  -webkit-animation: text-slide-animation-2 30s linear infinite;
  animation: text-slide-animation-2 30s linear infinite;
  transition: animation-duration 300ms;
}
.ai-text-slider-item.slide-ltr span {
  color: var(--oit-clr-black);
}
.ai-text-slider-item span {
  font-weight: 500;
  font-size: 30px;
  line-height: 2;
  text-transform: uppercase;
  display: block;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-heading);
  white-space: nowrap;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-text-slider-item span {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-area {
    padding-bottom: 90px;
  }
}
.ai-team-thumb {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-thumb {
    bottom: -20%;
  }
}
.ai-team-thumb img {
  transition: 0.7s;
}
.ai-team-title {
  font-size: 35px;
  margin-bottom: 15px;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-title {
    font-size: 28px;
  }
}
.ai-team-content span {
  font-size: 20px;
  letter-spacing: -0.03em;
}
.ai-team-info {
  border-radius: 30px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ai-team-info .number {
  font-weight: 700;
  font-size: 160px;
  margin-bottom: 20px;
  line-height: 1;
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-team-info .number {
    font-size: 125px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-info .number {
    font-size: 90px;
  }
}
.ai-team-info .number i {
  font-style: normal;
}
.ai-team-info span {
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
}
.ai-team-item {
  min-height: 475px;
  overflow: hidden;
  border-radius: 30px;
  padding: 40px 50px 50px 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-item {
    padding: 40px 20px 50px 20px;
  }
}
.ai-team-item.team-2 {
  height: 665px;
  background: linear-gradient(133deg, #a09aff 0%, #4e54c8 100%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-team-item.team-2 {
    height: 450px;
  }
}
.ai-team-item.team-2 .ai-team-thumb {
  bottom: 0;
}
.ai-team-item:hover .ai-team-thumb img {
  transform: scale(1.1);
}

/*----------------------------------------*/
/* work css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-work-area {
    padding-top: 90px;
    padding-bottom: 30px;
  }
}
.ai-work-title {
  font-size: 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-work-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-work-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .ai-work-title {
    font-size: 25px;
  }
}
.ai-work-thumb {
  overflow: hidden;
  border-radius: 16px;
}
.ai-work-thumb img {
  transition: 0.6s;
}
.ai-work-item {
  padding-inline-start: 70px;
  border-inline-start: 2px solid var(--oit-grey-2);
}
@media (max-width: 767px) {
  .ai-work-item {
    padding-inline-start: 35px;
  }
}
.ai-work-item p {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-work-item p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .ai-work-item p {
    font-size: 14px;
  }
}
.ai-work-item .number {
  position: absolute;
  top: 0;
  inset-inline-start: -6%;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: var(--oit-clr-white);
  display: inline-block;
  height: 100px;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  text-align: center;
  color: var(--oit-clr-white);
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-work-item .number {
    height: 80px;
    width: 80px;
    line-height: 80px;
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ai-work-item .number {
    height: 80px;
    width: 80px;
    line-height: 80px;
    font-size: 25px;
    inset-inline-start: -5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-work-item .number {
    height: 80px;
    width: 80px;
    line-height: 80px;
    font-size: 25px;
    inset-inline-start: -6%;
  }
}
@media (max-width: 767px) {
  .ai-work-item .number {
    font-size: 16px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    inset-inline-start: -9%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-work-item .number {
    inset-inline-start: -5%;
  }
}
.ai-work-item:hover .ai-work-thumb img {
  transform: scale(1.1);
}
.ai-work-item-wrap {
  margin-inline-start: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-work-item-wrap {
    margin-inline-end: 40px;
  }
}
@media (max-width: 767px) {
  .ai-work-item-wrap {
    margin: 0 20px;
  }
}
.ai-work-area .row [class*=col-xl-7] .ai-work-item-wrap .ai-work-item:last-child {
  border-inline-start: none;
}
.ai-work-area .row [class*=col-xl-7] .ai-work-item-wrap .ai-work-item:first-child {
  border-inline-start: 2px solid var(--oit-theme-1);
}
.ai-work-area .big-text {
  position: absolute;
  bottom: 20%;
  inset-inline-start: 10%;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-work-area .big-text {
    bottom: 7%;
    height: 60%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-work-area .big-text {
    bottom: 7%;
    height: 50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-work-area .big-text {
    display: none;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-work-area .oit-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-work-area .oit-section-title {
    font-size: 50px;
  }
  .ai-work-area .oit-section-title br {
    display: none;
  }
}
.ai-work-section-box {
  position: sticky;
  z-index: 9;
  top: 120px;
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-testimonial-area {
    padding-top: 90px;
  }
}
.ai-testimonial-authour-box {
  padding: 25px 25px 30px 30px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--oit-grey-2);
}
.ai-testimonial-authour-title {
  font-size: 20px;
  font-weight: 500;
}
.ai-testimonial-authour-info span {
  font-size: 14px;
}
.ai-testimonial-logo {
  padding: 0 25px;
  margin-top: 30px;
}
.ai-testimonial-content {
  padding: 25px;
}
.ai-testimonial-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
.ai-testimonial-content p span {
  display: inline-block;
  margin-left: 45px;
}
.ai-testimonial-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  border-right: 1px solid var(--oit-grey-2);
}
.ai-testimonial-item.testimonial-alt .ai-testimonial-authour-box {
  padding: 30px 25px 25px 30px;
  margin-top: 5px;
  margin-bottom: 0;
  border-bottom: none;
  border-top: 1px solid var(--oit-grey-2);
}
.ai-testimonial-item.testimonial-alt .ai-testimonial-logo {
  margin-top: 0;
  margin-bottom: 30px;
  text-align: end;
}
.ai-testimonial-wrap {
  border-radius: 20px;
  border: 1px solid var(--oit-grey-2);
}

/*----------------------------------------*/
/* brand css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-brand-wrap {
    padding: 90px 0;
  }
}
.ai-brand-item {
  gap: 115px;
  -webkit-animation: text-slide-animation 30s linear infinite;
  animation: text-slide-animation 30s linear infinite;
  transition: animation-duration 300ms;
}
.ai-brand-logo {
  flex: 0 0 auto;
}
.ai-brand-text {
  font-weight: 600;
  font-size: 30px;
  display: block;
  line-height: 1.33;
  letter-spacing: 0.03em;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-funnel);
}
@media (max-width: 767px) {
  .ai-brand-text {
    font-size: 20px;
  }
  .ai-brand-text br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-brand-text {
    font-size: 25px;
  }
  .ai-brand-text br {
    display: block;
  }
}

/*----------------------------------------*/
/* faq css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-faq-area {
    padding-top: 90px;
    padding-bottom: 50px;
  }
}
.ai-faq-area .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.ai-faq-area .shape {
  position: absolute;
  bottom: 14%;
  inset-inline-start: 7%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-faq-area .shape {
    inset-inline-start: -3%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-faq-area .shape {
    bottom: 20%;
    inset-inline-start: -4%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-faq-area .shape {
    display: none;
  }
}
.ai-faq-area .contact-box {
  background-color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ai-faq-area .contact-box {
    width: 500px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ai-faq-area .contact-box {
    width: auto;
  }
}
.ai-faq-area .contact-box .contact-title {
  color: var(--oit-clr-white);
}
.ai-faq-accordion-wrap .accordion-item {
  position: relative;
  margin-bottom: 20px;
  padding: 23px 30px;
  border-radius: 10px;
  border: 1px solid var(--oit-grey-2);
  background-color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-item {
    padding: 20px 20px;
  }
}
.ai-faq-accordion-wrap .accordion-button {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding-right: 40px;
  font-family: var(--oit-ff-funnel);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ai-faq-accordion-wrap .accordion-button {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-button {
    font-size: 16px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-button {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-button .accordion-icon svg {
    height: 15px;
  }
}
.ai-faq-accordion-wrap .accordion-button:not(.collapsed) .accordion-icon svg {
  transform: rotate(90deg);
}
.ai-faq-accordion-wrap .accordion-body {
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 5px;
  margin-top: 20px;
  border-top: 1px solid var(--oit-grey-2);
}
@media (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-body {
    padding-right: 0;
  }
}
.ai-faq-accordion-wrap .accordion-body p {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
  padding-inline-start: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ai-faq-accordion-wrap .accordion-body p {
    font-size: 15px;
  }
}
.ai-faq-accordion-wrap .accordion-body p::before {
  position: absolute;
  content: "";
  top: 8px;
  inset-inline-start: 3px;
  content: "";
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--oit-clr-black);
}
.ai-faq-accordion-wrap .accordion-icon {
  position: absolute;
  top: -3px;
  right: 0;
}
.ai-faq-accordion-wrap .accordion-icon svg {
  transition: 0.3s;
}
.ai-faq-accordion-wrap.inner-style .accordion-item {
  background-color: var(--oit-grey-1);
}
.ai-faq-accordion-wrap.inner-style .accordion-body p {
  padding-inline-start: 0;
}
.ai-faq-accordion-wrap.inner-style .accordion-body p::before {
  display: none;
}

/*----------------------------------------*/
/*  18. PAYMENT CSS START
/*----------------------------------------*/
.row-custom {
  display: flex;
  margin: 0 -15px;
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .row-custom {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .row-custom {
    flex-direction: column;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.col-custom {
  flex: 0.4;
  width: 90px;
  height: 550px;
  background-size: cover;
  margin: 15px;
  border-radius: 30px;
  padding: 50px 50px;
  transition: 0.3s;
  background: linear-gradient(180deg, #a09aff 0%, #4e54c8 100%);
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .col-custom {
    padding: 40px 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .col-custom {
    height: 450px;
    border-radius: 20px;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-custom {
    height: 450px;
    border-radius: 20px;
    padding: 40px 25px;
  }
}
@media (max-width: 767px) {
  .col-custom {
    width: 100%;
    padding: 40px 30px;
  }
}
.col-custom::after {
  position: absolute;
  content: url(../img/service/service-1.png);
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0;
  transition: 0.3s;
}

.tp-panel-title {
  width: 500px;
  font-weight: 600;
  font-size: 30px;
  line-height: 20px;
  color: var(--oit-clr-white);
  margin-bottom: 0;
  transition: 0.3s;
  transform: rotate(90deg) translate(250px, 230px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-panel-title {
    font-size: 22px;
    transform: rotate(90deg) translate(250px, 237px);
  }
}

.tp-panel-item-2 {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7) translateY(20px);
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-start;
  height: 100%;
  position: relative;
  transition: all 0.5s ease;
}
.tp-panel-item-2 .oit-btn-gradient {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
.tp-panel-title-2 {
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
  padding-bottom: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-panel-title-2 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-panel-title-2 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .tp-panel-title-2 {
    font-size: 30px;
  }
  .tp-panel-title-2 br {
    display: none;
  }
}

.tp-panel-content-2 p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-panel-content-2 p {
    font-size: 15px;
  }
  .tp-panel-content-2 p br {
    display: none;
  }
}

/* Active State */
.col-custom.active {
  flex: 7;
}
.col-custom.active::after {
  opacity: 1;
}
.col-custom.active .tp-panel-item {
  display: none;
}
.col-custom.active .tp-panel-item-2 {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0.3s;
  transition: 0.3s;
}
.col-custom.active .tp-panel-item-2 {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  transition-delay: 0.2s;
}
.col-custom.active .tp-panel-title-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.col-custom.active .tp-panel-content-2 p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
.col-custom.active .oit-btn-gradient {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/*----------------------------------------*/
/*                                         \
\   1.4 AI SOLUTION CSS START HERE        \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.as-hero-line {
  position: absolute;
  bottom: -8%;
  left: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-hero-line {
    bottom: -10%;
  }
}
.as-hero-line span {
  display: block;
  height: 8px;
  margin-top: 2px;
  background-color: var(--oit-clr-black);
}
.as-hero-line span:nth-child(1) {
  height: 7px;
  margin-top: 5px;
}
.as-hero-line span:nth-child(2) {
  margin-top: 5px;
}
.as-hero-line span:nth-child(3) {
  margin-top: 7px;
}
.as-hero-line span:nth-child(4) {
  margin-top: 8px;
}
.as-hero-line span:nth-child(5) {
  margin-top: 9px;
  height: 10px;
}
.as-hero-title {
  font-weight: 500;
  font-size: 70px;
  line-height: 1.14;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-hero-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-hero-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-hero-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .as-hero-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .as-hero-title {
    font-size: 60px;
  }
}
.as-hero-content {
  margin-inline-start: 135px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-hero-content {
    margin-inline-start: 0;
  }
}
.as-hero-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-hero-content p {
    font-size: 18px;
  }
}
.as-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.as-hero-bg img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.as-hero-overlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
}
.as-hero-area {
  padding-top: 270px;
  padding-bottom: 175px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-hero-area {
    padding-top: 200px;
    padding-bottom: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-hero-area {
    padding-top: 150px;
    padding-bottom: 110px;
  }
}

/*----------------------------------------*/
/* banner css start here
/*----------------------------------------*/
.as-banner-area {
  background: #F8F9FA;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-banner-area {
    padding: 90px 0;
  }
}
.as-banner-item {
  padding: 45px 35px;
  border-radius: 30px;
  overflow: hidden;
  height: 450px;
  background-color: var(--oit-grey-1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .as-banner-item {
    height: auto;
  }
}
.as-banner-item.banner-1 {
  padding: 85px 50px;
}
@media (max-width: 767px) {
  .as-banner-item.banner-1 {
    padding: 35px 20px;
  }
}
.as-banner-item.banner-2 {
  height: 215px;
}
.as-banner-item.banner-3 {
  height: 215px;
  padding-right: 20px;
}
.as-banner-item.banner-3 p {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-banner-item.banner-3 p {
    font-size: 20px;
  }
}
.as-banner-item.banner-4 {
  background-color: var(--oit-grey-1);
}
.as-banner-item.banner-4 .title {
  font-size: 24px;
  letter-spacing: 0.04em;
}
.as-banner-item.banner-4 p {
  font-size: 14px;
  line-height: 1.7;
}
.as-banner-item p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .as-banner-item p {
    font-size: 16px;
  }
}
.as-banner-item span {
  font-size: 20px;
  color: var(--oit-clr-white);
}
.as-banner-item .number {
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  margin-bottom: 15px;
  letter-spacing: -0.01em;
  color: var(--oit-grey-2);
}
@media (max-width: 767px) {
  .as-banner-item .number {
    font-size: 60px;
  }
}
.as-banner-item .number i {
  font-style: normal;
}
.as-banner-item .shape {
  position: absolute;
  bottom: -67%;
  inset-inline-end: -19%;
  z-index: -1;
}
.as-banner-title {
  font-size: 45px;
  line-height: 1.22;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-banner-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .as-banner-title {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .as-banner-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .as-banner-title {
    font-size: 35px;
  }
}
.as-banner-content {
  padding-inline-end: 110px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-banner-content {
    padding-inline-end: 0;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.as-about-area {
  background: #F8F9FA;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-area {
    padding-bottom: 90px;
  }
}
.as-about-vision {
  padding: 10px;
  border-radius: 30px;
  margin-inline-end: 85px;
  border: 1px solid var(--oit-grey-2);
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-about-vision {
    margin-inline-end: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-vision {
    margin-inline-end: 0;
  }
}
.as-about-vision img {
  border-radius: 30px;
}
.as-about-vision-content {
  padding-left: 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.as-about-vision-content .title {
  margin-bottom: 15px;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-vision-content .title {
    font-size: 20px;
  }
}
.as-about-wrap {
  margin-inline-start: 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-wrap {
    margin-inline-start: 0;
  }
}
.as-about-wrap .as-about-vision-content {
  padding: 60px 40px;
  padding-top: 50px;
  height: 100%;
  border-radius: 0 30px 30px 0;
}
.as-about-wrap .as-about-vision-content .title {
  color: var(--oit-clr-white);
}
.as-about-wrap .as-about-vision-content p {
  color: var(--oit-grey-1);
}
.as-about-experience {
  padding: 60px 40px;
  padding-top: 40px;
}
.as-about-experience span {
  font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-experience span {
    font-size: 16px;
  }
}
.as-about-experience .number {
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--oit-gradient-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-experience .number {
    font-size: 40px;
  }
}
.as-about-experience .number i {
  font-style: normal;
  color: var(--oit-clr-black);
}
.as-about-experience-wrap {
  border-radius: 30px;
  background-color: var(--oit-grey-1);
  border: 1px solid var(--oit-grey-2);
}
.as-about-review span {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  display: block;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-about-review span {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-service-area {
    padding-top: 90px;
    padding-bottom: 40px;
  }
}
.as-service-area .shape {
  position: absolute;
  top: 9%;
  inset-inline-end: -7%;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-service-area .shape {
    inset-inline-end: -12%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-service-area .shape {
    top: -1%;
    inset-inline-end: -18%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-service-area .shape {
    top: 1%;
    inset-inline-end: -22%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-service-area .shape {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-service-area .ai-service-secttion-box.mb-80 {
    margin-bottom: 40px;
  }
}
.as-service-top-text {
  margin-inline-start: 125px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-service-top-text {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-service-top-text {
    margin-inline-start: 0;
    margin-inline-end: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-service-top-text {
    margin-inline-start: 0;
  }
}
.as-service-top-text p {
  font-size: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-service-top-text p {
    font-size: 16px;
  }
}
.as-service-content {
  padding: 40px 30px;
}
.as-service-item {
  border-radius: 30px;
  border: 1px solid var(--oit-grey-2);
  border-bottom: none;
  background-color: var(--oit-grey-1);
}
.as-service-item p {
  margin-bottom: 0;
}
.as-service-item:hover .as-service-thumb img {
  transform: scale(1.1);
}
.as-service-title {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 15px;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-service-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-service-title {
    font-size: 22px;
  }
}
.as-service-thumb {
  overflow: hidden;
  border-radius: 0 0 30px 30px;
}
.as-service-thumb img {
  transition: 0.5s;
}
.as-service-arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 10px 0 10px;
  border-radius: 50% 50% 0 0;
  background-color: var(--oit-clr-white);
}
.as-service-arrow::before {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-end: -35px;
  width: 35px;
  height: 35px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(-deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.as-service-arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: -35px;
  width: 35px;
  height: 35px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.as-service-arrow a {
  display: inline-block;
  height: 52px;
  width: 52px;
  line-height: 49px;
  border-radius: 50%;
  text-align: center;
  color: var(--oit-gradient-1);
  background: var(--oit-grey-1);
}
.as-service-arrow a:hover {
  color: var(--oit-clr-white);
  background: var(--oit-gradient-1);
}

/*----------------------------------------*/
/* text-slider css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-text-slider-area {
    padding-bottom: 80px;
  }
}
.as-text-slider-item {
  padding: 5px 0;
  -webkit-animation: text-slide-animation 30s linear infinite;
  animation: text-slide-animation 30s linear infinite;
  transition: animation-duration 300ms;
}
.as-text-slider-item span {
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: var(--oit-ff-heading);
  color: transparent;
  -webkit-text-stroke: 1px var(--oit-gradient-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-text-slider-item span {
    font-size: 80px;
  }
}
.as-text-slider-item svg {
  height: 85px;
  width: 85px;
  margin-inline-start: 15px;
  margin-inline-end: 45px;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-text-slider-item svg {
    height: 65px;
    width: 65px;
  }
}

/*----------------------------------------*/
/* feature css start here
/*----------------------------------------*/
.as-feature-area {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-area {
    padding-top: 90px;
    padding-bottom: 60px;
  }
}
.as-feature-thumb {
  border-radius: 30px;
  overflow: hidden;
}
.as-feature-thumb img {
  border-radius: 30px;
  max-width: inherit;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-thumb img {
    max-width: 100%;
  }
}
.as-feature-title {
  font-size: 45px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-feature-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-title {
    font-size: 32px;
  }
}
.as-feature-content {
  margin-inline-start: 80px;
  margin-inline-end: 270px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .as-feature-content {
    margin-inline-start: 140px;
    margin-inline-end: 100px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-feature-content {
    margin-inline-start: 20px;
    margin-inline-end: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-feature-content {
    margin-inline-start: 20px;
    margin-inline-end: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-feature-content {
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-content {
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin: 30px 0;
  }
}
.as-feature-wrap {
  border-radius: 30px;
  background-color: var(--oit-grey-1);
}
.as-feature-card {
  padding: 30px 40px;
  border-radius: 30px;
  overflow: hidden;
  min-height: 240px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-feature-card {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-feature-card {
    padding: 30px 20px;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-card {
    padding: 30px 20px;
    height: auto;
  }
}
.as-feature-card p {
  margin-right: 180px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-feature-card p {
    margin-right: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-feature-card p {
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .as-feature-card p {
    margin-right: 30px;
  }
}
@media (max-width: 767px) {
  .as-feature-card p {
    margin-right: 0;
  }
}
.as-feature-card .shape {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  z-index: -1;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-feature-card .shape {
    inset-inline-end: -15%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-card .shape {
    display: none;
  }
}
.as-feature-card .shape img {
  transition: 0.5s;
}
.as-feature-card.gradient-card {
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
.as-feature-card.gradient-card .as-feature-title-sm {
  color: var(--oit-clr-white);
}
.as-feature-card.gradient-card p {
  color: var(--oit-clr-white);
}
.as-feature-card:hover .shape img {
  transform: scale(1.05);
}
.as-feature-title-sm {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  margin-bottom: 15px;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-title-sm {
    font-size: 25px;
  }
}
.as-feature-nav-menu ul {
  background-color: var(--oit-clr-white);
  border-radius: 16px;
}
.as-feature-nav-menu ul li {
  width: 33.33%;
}
@media (max-width: 767px) {
  .as-feature-nav-menu ul li {
    width: 100%;
  }
}
.as-feature-nav-menu ul li .nav-link {
  width: 100%;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 20px 20px;
  border-radius: 16px;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
  border: 1px solid transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-feature-nav-menu ul li .nav-link {
    font-size: 18px;
    padding: 15px 20px;
  }
}
.as-feature-nav-menu ul li .nav-link:hover {
  border: 1px solid var(--oit-gradient-1);
}
.as-feature-nav-menu ul li .nav-link.active {
  border: 1px solid var(--oit-gradient-1);
}

/*----------------------------------------*/
/* script css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-area {
    padding-top: 70px;
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-area .as-script-secttion-box.text-center.mb-85 {
    margin-bottom: 40px;
  }
}
.as-script-thumb img {
  max-width: inherit;
  margin-inline-end: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-thumb img {
    margin-inline-end: 0;
    max-width: 100%;
  }
}
.as-script-title {
  font-weight: 500;
  font-size: 45px;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-script-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-script-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-script-title {
    font-size: 26px;
  }
  .as-script-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .as-script-title {
    font-size: 22px;
  }
  .as-script-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .as-script-title {
    font-size: 35px;
  }
}
.as-script-content {
  padding: 55px 50px;
  padding-bottom: 0;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--oit-grey-1);
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-content {
    padding: 55px 20px;
    padding-bottom: 0;
  }
}
.as-script-content.script-1 {
  padding-inline-end: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-content.script-1 {
    padding-inline-end: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-script-content.script-1 p br {
    display: block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-content.script-1 .mt-45 {
    margin-top: 0;
  }
}
.as-script-content.script-1 img {
  border-radius: 20px 0 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-content.script-1 img {
    border-radius: 20px 20px 0 0;
  }
}
.as-script-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 45px;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-script-content p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-script-content p {
    font-size: 18px;
  }
  .as-script-content p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-script-content p {
    font-size: 16px;
  }
  .as-script-content p br {
    display: none;
  }
}
.as-script-content img {
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--oit-grey-1);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-testimonial-area .as-testimonial-section-box {
    padding: 90px 0;
  }
}
.as-testimonial-logo img {
  border-radius: 10px;
}
.as-testimonial-item {
  border-radius: 30px;
  padding: 40px;
  margin-bottom: 20px;
  background: var(--oit-clr-white);
  border: 1px solid rgba(233, 233, 233, 0.5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-testimonial-item {
    padding: 30px 15px;
  }
}
.as-testimonial-item p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 35px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-testimonial-item p {
    font-size: 16px;
  }
}
.as-testimonial-authour-wrap span {
  font-size: 14px;
  display: block;
  color: var(--oit-clr-black);
}
.as-testimonial-authour-thumb img {
  height: 70px;
  width: 70px;
}
.as-testimonial-active-1 {
  animation: scroll-up 30s linear infinite;
}
.as-testimonial-active-1:hover {
  animation-play-state: paused;
}
.as-testimonial-active-2 {
  animation: scroll-down 30s linear infinite;
}
.as-testimonial-active-2:hover {
  animation-play-state: paused;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-testimonial-section-box .oit-section-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-testimonial-section-box {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.as-testimonial-wrap {
  height: 900px;
}
.as-testimonial-area {
  background-color: var(--oit-grey-1);
}
.as-testimonial-area .shape {
  position: absolute;
  top: 4%;
  inset-inline-start: 0;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-testimonial-area .shape {
    inset-inline-start: -7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-testimonial-area .shape {
    display: none;
  }
}

/*----------------------------------------*/
/* contact css start here
/*----------------------------------------*/
.as-contact-info-border {
  position: relative;
}
.as-contact-info-border::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 28px;
  height: 95%;
  width: 3px;
  z-index: -1;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-contact-info-border::after {
    height: 90%;
  }
}
.as-contact-info {
  padding-left: 70px;
  z-index: 1;
}
.as-contact-info:not(:last-child) {
  margin-bottom: 45px;
}
.as-contact-info span {
  position: absolute;
  top: 1px;
  inset-inline-start: 0;
  display: inline-block;
  height: 55px;
  width: 55px;
  line-height: 55px;
  border-radius: 50%;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-contact-info span {
    font-size: 16px;
  }
}
.as-contact-info p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-contact-info p {
    font-size: 18px;
  }
  .as-contact-info p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-contact-info p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .as-contact-info p {
    font-size: 16px;
  }
  .as-contact-info p br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .as-contact-info p {
    font-size: 18px;
  }
  .as-contact-info p br {
    display: block;
  }
}
.as-contact-form-box {
  margin-inline-start: 126px;
  padding: 50px;
  border-radius: 20px;
  backdrop-filter: blur(40px);
  border: 1px solid var(--oit-grey-1);
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .as-contact-form-box {
    margin-inline-start: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-contact-form-box {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .as-contact-form-box {
    margin-top: 50px;
    margin-inline-start: 0;
  }
}
@media (max-width: 767px) {
  .as-contact-form-box {
    margin-top: 50px;
    margin-inline-start: 0;
    padding: 35px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .as-contact-form-box {
    padding: 50px 25px;
  }
}
.as-contact-form-box label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.44;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-contact-form-box label {
    font-size: 16px;
  }
}
.as-contact-input-box {
  position: relative;
}
.as-contact-input-box::after {
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
  height: 1px;
  width: 0;
  transition: 0.8s;
  background-color: var(--oit-clr-black);
}
.as-contact-input-box input {
  border: none;
  padding: 0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: var(--oit-clr-black);
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.as-contact-input-box input::placeholder {
  font-size: 14px;
  color: var(--oit-text-body);
}
.as-contact-input-box input:focus {
  border-color: var(--oit-clr-black);
}
.as-contact-input-box:hover::after {
  width: 100%;
}
.as-contact-textarea-box {
  position: relative;
  line-height: 0;
}
.as-contact-textarea-box::after {
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
  height: 1px;
  width: 0;
  transition: 0.8s;
  background-color: var(--oit-clr-black);
}
.as-contact-textarea-box:hover::after {
  width: 100%;
}
.as-contact-textarea-box label {
  margin-bottom: 20px;
}
.as-contact-textarea-box textarea {
  padding: 0;
  height: 130px;
  resize: none;
  border: none;
  background-color: transparent;
  color: var(--oit-clr-black);
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.as-contact-textarea-box textarea::placeholder {
  font-size: 14px;
  color: var(--oit-text-body);
}
.as-contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-black);
}
.as-contact-textarea-box textarea:focus::placeholder {
  opacity: 0;
}
.as-contact-select {
  height: 50px;
  line-height: 50px;
}
.as-contact-select .nice-select {
  border: none;
  padding: 0;
  width: 100%;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.as-contact-select .nice-select span.current {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-contact-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .as-contact-area .oit-section-title {
    font-size: 52px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .as-contact-area .oit-section-title {
    font-size: 42px;
  }
}
.as-contact-area.ag-contact-style .as-contact-info span {
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.as-contact-area.inner-style {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 35px;
  margin-bottom: 120px;
  border-radius: 30px;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .as-contact-area.inner-style {
    margin: 0;
    border-radius: 0;
  }
}
.as-contact-area.inner-style .as-contact-form-box {
  border: 1px solid var(--oit-grey-2);
  background-color: var(--oit-clr-white);
}
.as-contact-area.inner-style .as-contact-info-border::after {
  z-index: 0;
  background-color: rgba(108, 99, 255, 0.5);
}
/*-------------------------------*/
/*                               \
\   1.5 CHATBOT CSS START HERE   \            
|                                \
/*------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.cb-hero-area {
  padding-top: 180px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-area {
    padding-top: 150px;
  }
}
.cb-hero-area .ai-brand-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-area .ai-brand-wrap {
    padding: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-area .ai-brand-wrap {
    display: none;
  }
}
.cb-hero-area .shape-1 {
  position: absolute;
  bottom: 10%;
  inset-inline-start: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cb-hero-area .shape-1 {
    inset-inline-start: -10%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-hero-area .shape-1 {
    inset-inline-start: -15%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-area .shape-1 {
    inset-inline-start: -22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-area .shape-1 {
    display: none;
  }
}
.cb-hero-area .shape-2 {
  position: absolute;
  bottom: 10%;
  inset-inline-end: -0.5%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .cb-hero-area .shape-2 {
    inset-inline-end: -10%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-hero-area .shape-2 {
    inset-inline-end: -15%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-area .shape-2 {
    inset-inline-end: -22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-area .shape-2 {
    display: none;
  }
}
.cb-hero-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
  margin: 0 130px;
  margin-bottom: 33px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-content p {
    font-size: 18px;
    margin: 0 60px;
    padding-bottom: 33px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-hero-content p {
    font-size: 18px;
    margin: 0 120px;
    padding-bottom: 33px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-hero-content p {
    font-size: 18px;
    margin: 0 50px;
    padding-bottom: 33px;
  }
}
@media (max-width: 767px) {
  .cb-hero-content p {
    font-size: 15px;
    margin: 0;
    padding-bottom: 33px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cb-hero-content p {
    font-size: 16px;
    margin: 0 40px;
    padding-bottom: 33px;
  }
}
.cb-hero-title {
  font-size: 70px;
  line-height: 1.14;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-hero-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .cb-hero-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cb-hero-title {
    font-size: 50px;
  }
}
.cb-hero-title span {
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cb-hero-input-wrap {
  position: relative;
  margin: 0 66px;
  margin-bottom: 100px;
}
@media (max-width: 767px) {
  .cb-hero-input-wrap {
    margin: 0;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cb-hero-input-wrap {
    margin: 0 40px;
    margin-bottom: 60px;
  }
}
.cb-hero-input-wrap input {
  padding-inline-start: 35px;
  padding-inline-end: 210px;
  height: 77px;
  line-height: 77px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
  border: 1px solid var(--oit-grey-1);
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-input-wrap input {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .cb-hero-input-wrap input {
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    padding-left: 20px;
    padding-right: 170px;
  }
}
.cb-hero-input-wrap input::placeholder {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-hero-input-wrap input::placeholder {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .cb-hero-input-wrap input::placeholder {
    font-size: 14px;
  }
}
.cb-hero-input-wrap button.oit-btn-gradient {
  position: absolute;
  top: 50%;
  inset-inline-end: 8px;
  transform: translateY(-50%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-hero-input-wrap button.oit-btn-gradient {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .cb-hero-input-wrap button.oit-btn-gradient {
    font-size: 14px;
    padding: 5px 20px;
  }
}
@media (max-width: 767px) {
  .cb-hero-input-wrap button.oit-btn-gradient svg {
    height: 12px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-hero-thumb {
    margin: 0 30px;
  }
}
@media (max-width: 767px) {
  .cb-hero-thumb {
    margin: 0 15px;
  }
}
.cb-hero-thumb img {
  border-radius: 15px 15px 0 0;
}
.cb-hero-info {
  min-width: 280px;
  padding: 25px 15px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--oit-grey-1);
  background-color: var(--oit-clr-white);
}
.cb-hero-info span {
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 10px;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-info span {
    font-size: 18px;
  }
}
.cb-hero-info p {
  font-size: 14px;
  margin-bottom: 0;
}
.cb-hero-info-wrap {
  position: absolute;
  top: 22%;
  inset-inline-start: 5%;
  padding: 10px 10px 0 10px;
  border-radius: 20px;
  backdrop-filter: blur(40px);
  background: linear-gradient(161deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-hero-info-wrap {
    inset-inline-start: 2%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-info-wrap {
    inset-inline-start: -2%;
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-hero-info-wrap {
    display: none;
  }
}
.cb-hero-info-wrap.info-2 {
  inset-inline-start: auto;
  inset-inline-end: 5%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-hero-info-wrap.info-2 {
    inset-inline-end: 2%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-hero-info-wrap.info-2 {
    transform: scale(0.7);
    inset-inline-end: -2%;
  }
}

/*----------------------------------------*/
/* feature css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area {
    padding: 90px 0;
  }
}
.cb-feature-area .shape {
  position: absolute;
  top: 11%;
  inset-inline-end: 7%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-feature-area .shape {
    top: 4%;
    inset-inline-end: 2%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area .shape {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area .cb-feature-secttion-box.mb-80 {
    margin-bottom: 40px;
  }
}
.cb-feature-area .as-banner-content {
  padding-right: 0;
}
.cb-feature-area .as-banner-item {
  height: 590px;
  border-radius: 20px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-feature-area .as-banner-item {
    height: 510px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area .as-banner-item {
    height: 100%;
  }
}
.cb-feature-area .as-banner-item.banner-4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cb-feature-area .as-banner-item.banner-5 {
  flex-direction: row;
  padding-inline-end: 0;
  padding-bottom: 0;
  padding-inline-start: 70px;
  padding-top: 60px;
  overflow: hidden;
  height: auto;
  border: 2px solid var(--oit-grey-1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-feature-area .as-banner-item.banner-5 {
    padding-inline-start: 25px;
  }
}
@media (max-width: 767px) {
  .cb-feature-area .as-banner-item.banner-5 {
    padding-top: 30px;
    padding: 0 15px;
  }
}
.cb-feature-area .as-banner-item.banner-5 .title {
  font-size: 35px;
}
@media (max-width: 767px) {
  .cb-feature-area .as-banner-item.banner-5 .title {
    font-size: 28px;
  }
}
.cb-feature-area .as-banner-item.banner-5 .as-banner-content {
  padding-top: 40px;
  padding-bottom: 60px;
}
.cb-feature-area .as-banner-item.banner-5 p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 47px;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-feature-area .as-banner-item.banner-5 p {
    font-size: 18px;
  }
  .cb-feature-area .as-banner-item.banner-5 p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .cb-feature-area .as-banner-item.banner-5 p {
    font-size: 16px;
  }
}
.cb-feature-area .as-banner-item.banner-5 img {
  border-radius: 30px 0 0 0;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.08);
}
@media (max-width: 767px) {
  .cb-feature-area .as-banner-item.banner-5 img {
    border-radius: 30px 30px 0 0;
  }
}
.cb-feature-area .as-banner-thumb {
  margin-inline-start: 78px;
  height: 100%;
}
@media (max-width: 767px) {
  .cb-feature-area .as-banner-thumb {
    margin-inline-start: 0;
  }
}
.cb-feature-area .as-banner-thumb img {
  height: 100%;
}
.cb-feature-area .as-banner-cat span {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.03em;
  border-radius: 1000px;
  padding: 6px 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  color: var(--oit-text-body);
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(73, 73, 73, 0.2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area .as-banner-cat span {
    font-size: 16px;
  }
}
.cb-feature-area .as-banner-cat span:not(:last-child) {
  margin-inline-end: 10px;
}
.cb-feature-area .as-banner-info span {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
  display: block;
  margin-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area .as-banner-info span {
    font-size: 16px;
  }
}
.cb-feature-area .as-banner-info span::before {
  display: inline-block;
  content: "";
  height: 8px;
  width: 8px;
  margin-bottom: 3px;
  margin-right: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.cb-feature-area.inner-style {
  margin: 0 35px;
  border-radius: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-feature-area.inner-style {
    margin: 0;
    border-radius: 0;
  }
}
.cb-feature-area.inner-style .as-banner-item {
  padding: 20px;
  background-color: var(--oit-clr-black);
}
.cb-feature-area.inner-style .as-banner-item .title {
  color: var(--oit-clr-white);
}
.cb-feature-area.inner-style .as-banner-item p {
  color: rgba(240, 242, 244, 0.8);
}
.cb-feature-area.inner-style .as-banner-item img {
  mix-blend-mode: luminosity;
  opacity: 0.7;
}
.cb-feature-area.inner-style .as-banner-item.banner-5 {
  padding-top: 40px;
  padding-inline-end: 0;
  padding-bottom: 0;
}
.cb-feature-area.inner-style .as-banner-content {
  padding: 35px 20px;
  padding-top: 0;
}
.cb-feature-area.inner-style .as-banner-info span {
  color: var(--oit-clr-white);
  font-weight: 400;
}
.cb-feature-area.inner-style .as-banner-info span::before {
  background: var(--oit-clr-white);
}
.cb-feature-area.inner-style .as-banner-cat span {
  color: var(--oit-clr-white);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(73, 73, 73, 0.2);
  background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
}

/*----------------------------------------*/
/* work css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-work-area {
    padding: 90px 0;
  }
}
.cb-work-area .shape {
  position: absolute;
  bottom: 8%;
  inset-inline-end: 4%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-work-area .shape {
    display: none;
  }
}
.cb-work-thumb {
  padding: 20px;
  border-radius: 30px;
  margin-inline-end: 49px;
  background-color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-work-thumb {
    margin-inline-end: 0;
  }
}
.cb-work-thumb img {
  border-radius: 30px;
}
.cb-work-info {
  margin-bottom: 25px;
}
.cb-work-info-thumb {
  margin-right: 30px;
  flex: 0 0 auto;
}
.cb-work-info-thumb img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.cb-work-info-title {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-work-info-title {
    font-size: 25px;
  }
}
.cb-work-info-content p {
  margin-bottom: 0;
  padding-right: 180px;
  color: rgba(73, 73, 73, 0.8);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-work-info-content p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-work-info-content p {
    padding-right: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cb-work-info-content p {
    padding-right: 50px;
  }
}
@media (max-width: 767px) {
  .cb-work-info-content p {
    padding-right: 0;
  }
}
.cb-work-content {
  margin-inline-start: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-work-content {
    margin-bottom: 70px;
  }
}

/*----------------------------------------*/
/* solution css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-solution-area {
    padding: 90px 0;
  }
}
.cb-solution-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-solution-content p {
    font-size: 16px;
  }
}
.cb-solution-list ul li {
  list-style-type: none;
  margin-bottom: 30px;
}
.cb-solution-list ul li span {
  position: relative;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  padding-left: 30px;
  display: block;
  letter-spacing: 0.04em;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-solution-list ul li span {
    font-size: 18px;
  }
}
.cb-solution-list ul li span svg {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
}
.cb-solution-thumb {
  overflow: hidden;
  border-radius: 20px;
  margin-inline-start: 26px;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-solution-thumb {
    margin-top: 70px;
    margin-inline-start: 0;
  }
}
.cb-solution-thumb img {
  border-radius: 20px;
}

/*----------------------------------------*/
/* price css start here
/*----------------------------------------*/
.cb-price-area {
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-price-area {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-price-area .cb-price-secttion-box.mb-85 {
    margin-bottom: 40px;
  }
}
.cb-price-area.inner-style {
  background-color: var(--oit-clr-white);
}
.cb-price-area.inner-style .cb-price-item {
  background-color: var(--oit-grey-1);
}
.cb-price-area.inner-style .cb-price-head {
  background-color: var(--oit-clr-white);
}
.cb-price-item {
  padding: 10px;
  border-radius: 20px;
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.cb-price-item.active .oit-btn-border {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.cb-price-head {
  padding: 30px;
  border-radius: 20px;
  background-color: var(--oit-grey-1);
}
.cb-price-head p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-price-head p br {
    display: none;
  }
}
.cb-price-body {
  padding: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-price-body {
    padding: 20px;
  }
}
.cb-price-badge {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}
.cb-price-badge-wrap {
  line-height: 1;
  margin-bottom: 20px;
}
.cb-price-value {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
.cb-price-value span {
  margin-left: 7px;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}
.cb-price-list {
  margin-bottom: 40px;
}
.cb-price-list-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 35px;
  display: inline-block;
  text-transform: uppercase;
}
.cb-price-list ul li {
  list-style-type: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  position: relative;
  padding-inline-start: 20px;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
}
.cb-price-list ul li:not(:last-child) {
  margin-bottom: 25px;
}
.cb-price-list ul li svg {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
}
.cb-price-btn .oit-btn-border {
  padding: 13px 22px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-price-tab-btn {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-area {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
.cb-team-area > .shape {
  position: absolute;
  top: 10%;
  inset-inline-end: 4%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-area > .shape {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-area .oit-section-title br {
    display: none;
  }
}
.cb-team-top {
  padding-bottom: 30px;
  margin-bottom: 5px;
  border-bottom: 1px solid #D9D9D9;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-top {
    padding-bottom: 20px;
    margin-bottom: 0;
  }
}
.cb-team-content {
  padding-top: 20px;
}
.cb-team-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-content p {
    font-size: 16px;
  }
}
.cb-team-content .shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.cb-team-funfact:first-child {
  padding-inline-end: 55px;
  margin-inline-end: 55px;
  border-inline-end: 1px solid #D9D9D9;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-funfact:first-child {
    padding-inline-end: 0;
    margin-inline-end: 0;
    border-inline-end: none;
  }
}
.cb-team-funfact .number {
  font-size: 70px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-team-funfact .number {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-funfact .number {
    font-size: 35px;
  }
}
.cb-team-funfact .number i {
  font-style: normal;
}
.cb-team-funfact span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-team-funfact span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-funfact span {
    font-size: 12px;
  }
}
.cb-team-badge {
  position: absolute;
  top: 30px;
  inset-inline-end: 30px;
  display: inline-block;
  font-weight: 500;
  font-size: 20px;
  border-radius: 10px;
  padding: 7px 10px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-badge {
    font-size: 16px;
  }
}
.cb-team-item {
  height: 310px;
  padding: 30px 35px;
  border-radius: 30px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cb-team-item {
    height: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-team-item {
    height: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-item {
    height: 100%;
    padding: 30px 25px;
  }
}
.cb-team-item.style-3 {
  height: 970px;
  padding: 80px 40px;
  padding-bottom: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .cb-team-item.style-3 {
    height: 820px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cb-team-item.style-3 {
    height: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-item.style-3 {
    height: 100%;
    padding: 80px 25px;
    padding-bottom: 0px;
  }
}
.cb-team-item.style-3 .cb-team-content {
  padding-top: 20px;
  margin-top: -65px;
  padding-bottom: 50px;
  z-index: 1;
}
.cb-team-item.style-3 .cb-team-content p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-item.style-3 .cb-team-content p {
    font-size: 16px;
  }
}
.cb-team-item.style-3 .cb-team-content .shape {
  position: absolute;
  top: -24%;
  left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-item.style-3 .cb-team-content .shape {
    top: -7%;
  }
}
.cb-team-item .ai-testimonial-authour-box {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.cb-team-item .ai-testimonial-authour-thumb img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .cb-team-item .ai-testimonial-authour-title {
    font-size: 17px;
  }
}

/*----------------------------------------*/
/*                                         \
\   1.6 AI AGENCY CSS START HERE           \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.ag-hero-area {
  border-radius: 0 0 40px 40px;
}
.ag-hero-area .bg {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  z-index: -1;
}
.ag-hero-content {
  padding: 0 60px;
  border-radius: 30px;
  padding-top: 130px;
  height: 100%;
  background-color: var(--oit-clr-white);
  border: 1px solid var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-hero-content {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-hero-content {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-hero-content {
    padding: 80px 30px;
    margin-bottom: 30px;
    height: auto;
  }
}
@media (max-width: 767px) {
  .ag-hero-content {
    padding: 50px 15px;
    margin-bottom: 30px;
    height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-hero-content {
    padding: 70px 30px;
    margin-bottom: 30px;
    height: auto;
  }
}
.ag-hero-content .shape {
  position: absolute;
  inset-inline-end: -5%;
  bottom: -3%;
  z-index: -1;
}
.ag-hero-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-text p {
    font-size: 16px;
  }
}
.ag-hero-title {
  font-size: 70px;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ag-hero-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-hero-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-hero-title {
    font-size: 40px;
  }
  .ag-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-hero-title {
    font-size: 37px;
  }
  .ag-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-hero-title {
    font-size: 55px;
  }
  .ag-hero-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .ag-hero-title {
    font-size: 30px;
  }
  .ag-hero-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-hero-title {
    font-size: 50px;
  }
  .ag-hero-title br {
    display: none;
  }
}
.ag-hero-title span {
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ag-hero-thumb {
  height: 100%;
}
@media (max-width: 767px) {
  .ag-hero-thumb {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-hero-thumb {
    margin-top: 0;
  }
}
.ag-hero-thumb img {
  height: 100%;
  border-radius: 40px;
}
.ag-hero-play-btn {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: 22px 40px;
  padding-right: 70px;
  border-radius: 40px 0 0 0;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-hero-play-btn {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-play-btn {
    padding: 15px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-play-btn svg {
    height: 25px;
  }
}
.ag-hero-play-btn::before {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-inline-start: -60px;
  width: 60px;
  height: 60px;
  -webkit-transform: scaleX(-1) rotate(-180deg);
  transform: scaleX(-1) rotate(-180deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F2F4' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-play-btn::before {
    inset-inline-start: -36px;
    width: 40px;
    height: 40px;
  }
}
.ag-hero-play-btn::after {
  content: "";
  position: absolute;
  top: -56px;
  inset-inline-end: 2px;
  width: 60px;
  height: 60px;
  -webkit-transform: scaleX(-1) rotate(-180deg);
  transform: scaleX(-1) rotate(-180deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='%23F0F2F4' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-play-btn::after {
    top: -48px;
    inset-inline-end: 0px;
    width: 50px;
    height: 50px;
  }
}
.ag-hero-play-btn span {
  display: inline-block;
  margin-inline-start: 10px;
  font-size: 16px;
  background: linear-gradient(90deg, var(--oit-gradient-1) 0%, var(--oit-gradient-2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-play-btn span {
    font-size: 12px;
    margin-inline-start: 5px;
  }
}
.ag-hero-info {
  padding: 45px 62px;
  padding-top: 30px;
  position: relative;
  border-radius: 30px;
  height: 350px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ag-hero-info {
    padding: 45px 20px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-hero-info {
    height: 300px;
    padding: 45px 20px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info {
    height: 240px;
    padding: 45px 20px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info .oit-btn-gradient {
    font-size: 14px;
    padding: 11px 25px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info.style-1 {
    background-color: var(--oit-clr-black);
  }
}
.ag-hero-info.style-1::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
  border-radius: 40px;
  background-color: var(--oit-clr-black);
  -webkit-mask-image: url(../img/hero/mask.png);
  -webkit-mask-size: cover;
  -webkit-mask-position: top right;
  -webkit-mask-repeat: no-repeat;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info.style-1::after {
    display: none;
  }
}
.ag-hero-info.style-2 {
  height: 295px;
  padding-top: 35px;
  border: 1px solid var(--oit-grey-1);
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info.style-2 {
    height: 220px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info.style-2 img {
    width: 120px;
  }
}
.ag-hero-info.style-2 span {
  display: block;
  font-weight: 600;
  font-size: 70px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info.style-2 span {
    font-size: 35px;
    margin-inline-end: 0;
  }
}
.ag-hero-info.style-2 p {
  color: var(--oit-clr-black);
}
.ag-hero-info p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info p {
    font-size: 16px;
  }
}
.ag-hero-info .big-text {
  font-size: 75px;
  color: transparent;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 35px;
  display: block;
  text-align: end;
  font-family: var(--oit-ff-heading);
  -webkit-text-stroke: 1px #5090E1;
  letter-spacing: -4px;
  margin-inline-end: -32px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ag-hero-info .big-text {
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-hero-info .big-text {
    font-size: 55px;
    margin-inline-end: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-hero-info .big-text {
    display: none;
  }
}

/*----------------------------------------*/
/* banner css start here
/*----------------------------------------*/
.ag-banner-style {
  background-color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-banner-style {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.ag-about-thumb {
  position: absolute;
  bottom: 0;
  inset-inline-end: 8%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ag-about-thumb {
    inset-inline-end: 7%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-about-thumb {
    inset-inline-end: -3%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-about-thumb {
    inset-inline-end: 1%;
    bottom: -10%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-about-thumb {
    display: none;
  }
}
.ag-about-style .shape {
  position: absolute;
  top: -31%;
  inset-inline-end: 0;
  z-index: -1;
}
.ag-about-style .shape-2 {
  position: absolute;
  top: -15%;
  inset-inline-end: 5%;
  z-index: -1;
}
.ag-about-style .ai-about-content {
  padding-top: 65px;
  padding-inline-start: 115px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-about-style .ai-about-content {
    padding-inline-start: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-about-style .ai-about-content {
    padding-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-about-style .ai-about-content {
    padding-top: 25px;
    padding-inline-start: 0;
  }
}
.ag-about-style .big-text {
  bottom: 31%;
  inset-inline-start: -3%;
  letter-spacing: -11px;
  font-size: 125px;
  transform: rotate(-90deg);
  letter-spacing: -9px;
  -webkit-text-stroke: 1px var(--oit-gradient-2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-about-style .big-text {
    inset-inline-start: -11%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-about-style .big-text {
    font-size: 100px;
    inset-inline-start: -11%;
  }
}
.ag-about-style .ai-about-content p {
  margin-inline-end: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-about-style .ai-about-content p {
    font-size: 16px;
    margin-inline-end: 0;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
.ag-service-area {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-service-area {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-service-area {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-service-area .ag-service-secttion-box.mb-90 {
    margin-bottom: 50px;
  }
}
.ag-service-title {
  font-size: 30px;
  line-height: 1.3;
  margin-right: 50px;
  letter-spacing: 0.03em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-service-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-service-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-service-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-service-title {
    font-size: 20px;
  }
}
.ag-service-icon svg, .ag-service-icon i {
  transition: 0.3s;
  color: var(--oit-clr-white);
}
.ag-service-arrow {
  transition: 0.3s;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-service-arrow svg {
    height: 20px;
  }
}
.ag-service-arrow:hover {
  color: var(--oit-gradient-1);
}
.ag-service-item {
  overflow: hidden;
  padding: 40px 40px;
  padding-bottom: 30px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  width: 100%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ag-service-item {
    height: 450px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-service-item {
    height: 400px;
    padding: 35px 20px;
  }
}
.ag-service-item::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.3s;
  backdrop-filter: blur(20px);
  z-index: -1;
  background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.ag-service-item::after {
  position: absolute;
  content: "";
  background-image: url(../img/service/service-4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.3s;
  opacity: 0;
  z-index: -1;
}
.ag-service-item:hover::before {
  z-index: -2;
}
.ag-service-item:hover::after {
  opacity: 1;
}
.ag-service-item:hover .ag-service-icon svg, .ag-service-item:hover .ag-service-icon i {
  color: var(--oit-gradient-1);
}
.ag-service-wrap {
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ag-service-wrap .row [class*=col-xl-3]:first-child .ag-service-item {
  border-radius: 20px 0 0 0;
}
.ag-service-wrap .row [class*=col-xl-3]:first-child .ag-service-item::before {
  border-radius: 20px 0 0 0;
}
.ag-service-wrap .row [class*=col-xl-3]:first-child .ag-service-item::after {
  border-radius: 20px 0 0 0;
}

/*----------------------------------------*/
/* project css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-area {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-area .ag-project-secttion-box.mb-90 {
    margin-bottom: 40px;
  }
}
.ag-project-top-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-inline-start: 85px;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-project-top-text p {
    font-size: 17px;
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-top-text p {
    font-size: 17px;
    margin-bottom: 40px;
    margin-inline-start: 0;
  }
}
.ag-project-cat span {
  font-size: 14px;
  display: inline-block;
  border-radius: 5px;
  padding: 2px 15px;
  padding-bottom: 4px;
  color: var(--oit-clr-black);
  margin-bottom: 20px;
  border: 1px solid rgba(13, 13, 13, 0.4);
  background: linear-gradient(209deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.2) 100%);
}
@media (max-width: 767px) {
  .ag-project-cat span {
    font-size: 12px;
    line-height: 1;
    padding: 4px 10px;
  }
}
.ag-project-cat span:not(:last-child) {
  margin-right: 15px;
}
.ag-project-date span {
  font-size: 14px;
  color: var(--oit-clr-black);
}
.ag-project-thumb {
  display: flex;
  gap: 15px;
  justify-content: end;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .ag-project-thumb {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-project-thumb {
    flex-wrap: nowrap;
  }
}
.ag-project-thumb img {
  width: 100%;
  transition: 0.6s;
}
.ag-project-thumb-sm {
  display: flex;
  gap: 15px;
  justify-content: end;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .ag-project-thumb-sm {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ag-project-thumb-sm {
    flex-wrap: nowrap;
  }
}
.ag-project-thumb-sm img {
  width: 100%;
  transition: 0.6s;
  border-radius: 20px;
}
.ag-project-thumb-wrap {
  margin-inline-start: 84px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ag-project-thumb-wrap {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-thumb-wrap {
    margin-top: 50px;
    margin-inline-start: 0;
  }
}
.ag-project-number {
  margin-top: 8px;
  margin-inline-end: 100px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-number {
    margin-inline-end: 40px;
  }
}
@media (max-width: 767px) {
  .ag-project-number {
    margin-inline-end: 0;
    margin-bottom: 20px;
  }
}
.ag-project-number span {
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-number span {
    font-size: 17px;
  }
}
.ag-project-title {
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.03em;
  margin-bottom: 28px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-title {
    font-size: 24px;
  }
}
.ag-project-content p {
  font-weight: 500;
  margin-bottom: 28px;
  margin-inline-end: 50px;
}
@media (max-width: 767px) {
  .ag-project-content p {
    margin-inline-end: 0;
  }
}
@media (max-width: 767px) {
  .ag-project-content-wrap {
    flex-wrap: wrap;
  }
}
.ag-project-arrow {
  font-weight: 600;
  color: var(--oit-clr-black);
}
.ag-project-arrow svg {
  display: inline-block;
  margin-left: 5px;
}
.ag-project-arrow:hover {
  color: var(--oit-gradient-1);
}
.ag-project-item {
  padding: 50px;
  border-radius: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--oit-grey-1);
  border: 1px solid #E9E9E9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-item {
    padding: 35px 0;
    padding-inline-start: 20px;
    padding-inline-end: 30px;
  }
}
.ag-project-item .shape {
  position: absolute;
  bottom: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.5s;
  inset-inline-start: -50%;
  height: 100%;
}
.ag-project-item:hover .shape {
  opacity: 1;
  inset-inline-start: 0;
}
.ag-project-item:hover .ag-project-thumb img {
  transform: scale(1.1);
}
.ag-project-btn {
  padding: 39px 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-btn {
    padding: 20px 20px;
  }
}
.ag-project-btn a {
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-btn a {
    font-size: 20px;
  }
}
.ag-project-btn a svg {
  display: inline-block;
  margin-left: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-project-btn a svg {
    height: 18px;
  }
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-area {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-area .oit-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-area .ag-team-secttion-box.mb-80 {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-top-text.mb-80 {
    margin-bottom: 30px;
  }
}
.ag-team-top-text p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  margin-inline-start: 85px;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ag-team-top-text p {
    font-size: 17px;
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-top-text p {
    font-size: 17px;
    margin-bottom: 40px;
    margin-inline-start: 0;
  }
}
.ag-team-content {
  overflow: hidden;
  position: absolute;
  bottom: 30px;
  padding: 30px;
  padding-top: 20px;
  border-radius: 20px;
  transition: 0.3s;
  inset-inline-start: 30px;
  inset-inline-end: 30px;
  backdrop-filter: blur(20px);
  background: linear-gradient(209deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.2) 100%);
}
@media (max-width: 767px) {
  .ag-team-content {
    padding: 25px 20px;
  }
}
.ag-team-thumb img {
  border-radius: 20px;
}
.ag-team-title {
  font-size: 35px;
  line-height: 1.57;
  letter-spacing: 0.03em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ag-team-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-team-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .ag-team-title {
    font-size: 20px;
  }
}
.ag-team-social-box {
  padding-top: 55px;
  transition: 0.3s;
  margin-bottom: -95px;
}
@media (max-width: 767px) {
  .ag-team-social-box {
    padding-top: 45px;
  }
}
.ag-team-social a {
  display: inline-block;
  height: 44px;
  width: 44px;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  color: var(--oit-clr-white);
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-social a {
    height: 35px;
    width: 35px;
    line-height: 29px;
  }
}
.ag-team-social a:not(:last-child) {
  margin-right: 4px;
}
.ag-team-social a svg {
  height: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-social a svg {
    height: 14px;
  }
}
.ag-team-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.ag-team-content-wrap {
  overflow: hidden;
}
.ag-team-item {
  border-radius: 20px;
  overflow: hidden;
}
.ag-team-item span {
  font-size: 20px;
  letter-spacing: -0.03em;
  display: block;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ag-team-item span {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .ag-team-item span {
    font-size: 14px;
  }
}
.ag-team-item:hover .ag-team-social-box {
  margin-bottom: 0;
}
.ag-team-arrow {
  display: inline-block;
  height: 44px;
  width: 44px;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  color: var(--oit-clr-white);
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-arrow {
    height: 35px;
    width: 35px;
    line-height: 29px;
  }
}
.ag-team-arrow svg {
  height: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ag-team-arrow svg {
    height: 14px;
  }
}
.ag-team-arrow:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-gradient-1);
}

/*----------------------------------------*/
/* career css start here
/*----------------------------------------*/
.career-item {
  padding: 20px 30px 30px 30px;
  border-radius: 20px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-item {
    padding: 25px 20px;
  }
}
@media (max-width: 767px) {
  .career-item {
    padding: 25px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .career-item {
    padding: 40px;
  }
}
.career-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  margin-bottom: 35px;
  margin-right: 40px;
  letter-spacing: -0.06em;
}
.career-item .title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.47;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-item .title {
    font-size: 25px;
  }
}
.career-item .oit-btn-border {
  padding: 10px 30px;
}
.career-price {
  font-size: 14px;
  border-radius: 5px;
  padding: 11px 20px;
  display: inline-block;
  line-height: 1;
  color: var(--it-common-white);
  background-color: var(--it-text-body);
  border: 1px solid rgba(26, 182, 157, 0.3);
}
@media (max-width: 767px) {
  .career-price {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .career-price {
    margin-bottom: 0;
  }
}
.career-meta {
  margin-bottom: 25px;
}
.career-meta span {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-meta span {
    font-size: 12px;
  }
}
.career-meta span svg {
  display: inline-block;
  margin-right: 5px;
}
.career-meta span:not(:last-child) {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #D9D9D9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-area {
    margin-top: 70px;
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
.career-area .shape-1 {
  position: absolute;
  top: 5%;
  right: 20%;
}

.gallery-thumb {
  border-radius: 30px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .gallery-thumb {
    border-radius: 10px;
  }
}
.gallery-thumb img {
  width: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.dg-funfact-area p {
  padding-right: 110px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-area p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-right {
    margin-top: 70px;
  }
}
.dg-funfact-item {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dg-funfact-item p {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 0;
  text-align: end;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-funfact-item p {
    font-size: 16px;
  }
}
.dg-funfact-title {
  font-weight: 500;
  font-size: 120px;
  line-height: 0.67;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-funfact-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-funfact-title {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .dg-funfact-title {
    font-size: 60px;
  }
}
.dg-funfact-title span {
  font-size: 45px;
}
.dg-funfact-title i {
  font-style: normal;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-area {
    padding-top: 90px;
    padding-bottom: 40px;
  }
}
.dg-step-area.about-style .dg-step-item {
  background-color: var(--oit-grey-1);
}
.dg-step-area .shape {
  position: absolute;
  top: -22%;
  right: -7%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-area .shape {
    display: none;
  }
}
.dg-step-item {
  border-radius: 10px;
  background-color: var(--oit-clr-white);
  padding: 35px 40px 38px 40px;
}
.dg-step-item span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.dg-step-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: -0.06em;
}
.dg-step-title {
  font-weight: 500;
  line-height: 1.47;
  margin-bottom: 23px;
  letter-spacing: -0.01em;
}

/*----------------------------------------*/
/*  error agency css here
/*----------------------------------------*/
.error-ptb {
  margin-top: 175px;
  padding-top: 170px;
  padding-bottom: 150px;
  margin: 0 35px;
  border-radius: 30px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .error-ptb {
    padding: 90px 0;
  }
}
@media (max-width: 767px) {
  .error-ptb {
    padding: 90px 0;
    margin: 0;
    border-radius: 0;
  }
}
.error-title {
  font-weight: 700;
  font-size: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .error-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-title {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .error-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error-title {
    font-size: 55px;
  }
}

/*----------------------------------------*/
/*  project details css
/*----------------------------------------*/
.project-details-big-thumb {
  margin-top: -230px;
  border-radius: 40px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-details-big-thumb {
    margin-top: -290px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-details-big-thumb {
    margin-top: -220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-details-big-thumb {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: -150px;
    margin-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .project-details-big-thumb {
    margin-top: 70px;
    margin-bottom: 40px;
    border-radius: 10px;
  }
}
.project-details-thumb img {
  border-radius: 20px;
}
.project-details-area .postbox-dsc p {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-family: var(--oit-ff-title);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project-details-area .postbox-dsc p {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .project-details-area .postbox-dsc p {
    font-size: 16px;
  }
}
.project-details-area .service-details-list li {
  padding-left: 35px;
}
.project-details-area .service-details-list li:not(:last-child) {
  margin-bottom: 17px;
}
.project-details-area .service-details-list li span {
  font-weight: 600;
  font-size: 30px;
  display: inline-block;
  margin-bottom: 5px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .service-details-list li span {
    font-size: 22px;
  }
}
.project-details-area .service-details-list li span svg, .project-details-area .service-details-list li span i {
  top: 8px;
  height: 30px;
}
.project-details-area .service-details-list li p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-details-area .service-details-list li p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .service-details-list li p {
    font-size: 15px;
  }
}

.inner-style .ag-project-item {
  padding: 0;
}
.inner-style .ag-project-thumb-wrap {
  padding: 28px;
  margin-top: 0;
  padding-bottom: 50px;
  margin-inline-start: 0;
  border-bottom: 1px solid rgba(73, 73, 73, 0.2);
}
.inner-style .ag-project-content-wrap {
  padding: 20px 28px;
  padding-top: 20px;
}
.inner-style .ag-project-content-wrap span {
  font-weight: 500;
  font-size: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .inner-style .ag-project-content-wrap span {
    font-size: 16px;
  }
}
.inner-style .ag-project-content-wrap .arrow {
  display: inline-block;
  height: 56px;
  width: 56px;
  line-height: 56px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  color: var(--oit-clr-white);
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .inner-style .ag-project-content-wrap .arrow {
    height: 45px;
    width: 45px;
    line-height: 43px;
  }
}
@media (max-width: 767px) {
  .inner-style .ag-project-content-wrap .arrow {
    margin-top: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .inner-style .ag-project-content-wrap .arrow {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .inner-style .ag-project-content-wrap .arrow svg {
    height: 18px;
  }
}
.inner-style .ag-project-content-wrap .arrow:hover {
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .inner-style .ag-project-content-wrap .case-study-title {
    font-size: 24px;
  }
}

/*----------------------------------------*/
/*  service details css
/*----------------------------------------*/
.service-details-area .career-details-list li span {
  font-weight: 500;
  color: var(--oit-text-body);
}
.service-details-area .dg-step-item p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.06em;
}
.service-details-area .dg-step-title {
  margin-bottom: 15px;
}
.service-details-list li {
  position: relative;
  list-style-type: none;
  padding-left: 30px;
  margin-bottom: 15px;
}
.service-details-list li span {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .service-details-list li span {
    font-size: 17px;
  }
}
.service-details-list li span svg {
  position: absolute;
  top: 3px;
  left: 0;
  height: 24px;
}

.oit-service-1 .oit-service-item {
  margin: 0;
  margin-bottom: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .step-area {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .step-area .step-section-title {
    margin-bottom: 30px;
  }
}
.step-item {
  border-radius: 10px;
  padding: 25px 30px 30px;
  background-color: var(--oit-grey-2);
}
.step-item span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 125px;
  text-transform: uppercase;
}
.step-item p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.8px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .step-item p {
    font-size: 16px;
  }
}
.step-big-text {
  position: absolute;
  top: 1%;
  right: 6%;
  font-size: 150px;
  color: transparent;
  margin-bottom: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  font-family: var(--oit-ff-funnel);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .step-big-text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .step-big-text {
    font-size: 60px;
  }
}
.step-title {
  font-size: 30px;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

/*----------------------------------------*/
/*  5.4 contact details css
/*----------------------------------------*/
.contact-details-big-title {
  font-weight: 500;
  font-size: 120px;
  line-height: 1.08;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .contact-details-big-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-details-big-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-details-big-title {
    font-size: 60px;
  }
  .contact-details-big-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .contact-details-big-title {
    font-size: 28px;
    margin-bottom: 40px !important;
  }
  .contact-details-big-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact-details-big-title {
    font-size: 45px;
    margin-bottom: 60px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-thumb {
    padding-bottom: 60px !important;
  }
}
.contact-details-thumb img {
  border-radius: 20px;
}
.contact-details-time span {
  display: block;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-time span svg {
    height: 50px;
    width: 50px;
  }
}
.contact-details-time strong {
  font-weight: 600;
  font-size: 45px;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-time strong {
    font-size: 18px;
  }
}
.contact-details-info-wrap {
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid #D9D9D9;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-wrap {
    fpb: 30px;
  }
}
.contact-details-info-wrap .oit-btn-border {
  padding: 15px 24px;
}
@media (max-width: 767px) {
  .contact-details-info-wrap .contact-btn {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .contact-details-info-wrap .oit-btn-border {
    padding: 4px 24px;
    font-size: 12px;
  }
}
.contact-details-info-top span {
  font-weight: 600;
  font-size: 30px;
  display: block;
  margin-bottom: 20px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top span {
    font-size: 18px;
  }
}
.contact-details-info-top a {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top a {
    font-size: 15px;
  }
}
.contact-details-info-top-box {
  padding-bottom: 35px;
  margin-bottom: 30px;
  border-bottom: 1px solid #D9D9D9;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-top-box {
    flex-wrap: wrap;
  }
}
.contact-details-info-bottom span {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  display: block;
}
.contact-details-info-bottom a {
  font-weight: 400;
  font-size: 30px;
  display: block;
  margin-bottom: 30px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-details-info-bottom a {
    font-size: 18px;
    margin-bottom: 15px;
  }
}
.contact-box {
  padding: 50px;
  border-radius: 10px;
  width: 555px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-box {
    width: 520px;
  }
}
@media (max-width: 767px) {
  .contact-box {
    width: auto;
    padding: 40px 30px;
  }
}
.contact-box .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
}
.contact-box .shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contact-info a {
  font-size: 30px;
  display: block;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
@media (max-width: 767px) {
  .contact-info a {
    font-size: 24px;
  }
}
.contact-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .contact-title {
    font-size: 20px;
  }
}
.contact-info span {
  color: var(--oit-clr-black);
}
.contact-info a {
  color: rgba(13, 13, 13, 0.7);
}
@media (max-width: 767px) {
  .contact-info a br {
    display: none;
  }
}
.contact-social a {
  color: var(--oit-clr-black);
}
.contact-form-box {
  padding: 50px;
  border-radius: 20px;
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-form-box {
    margin-top: 70px;
  }
}
@media (max-width: 767px) {
  .contact-form-box {
    padding: 30px;
    margin-top: 50px;
  }
}
.contact-form-box label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.44;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.contact-input-box input {
  color: var(--oit-clr-black);
  background-color: transparent;
  border: none;
  padding: 0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: var(--oit-clr-black);
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.contact-input-box input::placeholder {
  font-size: 14px;
  color: rgba(13, 13, 13, 0.8);
}
.contact-input-box input:focus {
  border-color: var(--oit-clr-black);
}
.contact-textarea-box label {
  margin-bottom: 20px;
}
.contact-textarea-box textarea {
  padding: 0;
  height: 130px;
  resize: none;
  border: none;
  color: var(--oit-clr-black);
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.contact-textarea-box textarea::placeholder {
  font-size: 14px;
  color: rgba(13, 13, 13, 0.8);
}
.contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-black);
}
.contact-textarea-box textarea:focus::placeholder {
  opacity: 0;
}
.contact-select {
  height: 50px;
  line-height: 50px;
}
.contact-select .nice-select {
  border: none;
  padding: 0;
  width: 100%;
  font-size: 14px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.contact-select .nice-select span.current {
  font-size: 14px;
  color: rgba(13, 13, 13, 0.8);
}
.contact-select .nice-select::after {
  border-bottom: 2px solid var(--oit-clr-black);
  border-right: 2px solid var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-area {
    padding: 90px 0;
  }
}

.map-area {
  line-height: 0;
}
.map-area iframe {
  width: 100%;
  height: 665px;
  border: 0;
  line-height: 0;
  filter: grayscale(100%) brightness(65%) contrast(120%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .map-area iframe {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .map-area iframe {
    height: 350px;
  }
}
@media (max-width: 767px) {
  .map-area iframe {
    height: 350px;
  }
}

.step-2-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .step-2-title {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .step-2-title {
    font-size: 25px;
  }
}
.step-2-item {
  border-radius: 20px;
  padding: 45px 35px;
  padding-bottom: 20px;
  background-color: var(--oit-grey-1);
  border: 1px solid var(--oit-grey-1);
}
@media (max-width: 767px) {
  .step-2-item {
    flex-wrap: wrap;
  }
}
.step-2-item p {
  font-size: 20px;
  line-height: 1.6;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .step-2-item p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .step-2-item p {
    font-size: 16px;
  }
}
.step-2-item span {
  font-size: 45px;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  margin-right: 50px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .step-2-item span {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .step-2-item span {
    font-size: 25px;
    margin-bottom: 15px;
  }
}

/*----------------------------------------*/
/*  team-details details css
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .team-details-area {
    padding-top: 90px;
    padding-bottom: 30px;
  }
}
.team-details-area .row ~ .col {
  height: 100%;
}

.profile-card {
  border-radius: 30px;
}
.profile-thumb {
  margin-inline-end: 35px;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .profile-thumb {
    margin-inline-end: 0;
  }
}
.profile-thumb img {
  height: 100%;
  object-fit: cover;
}
.profile-content {
  padding: 30px 120px 30px 0;
  margin-inline-start: 65px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .profile-content {
    margin-inline-start: 0;
    padding: 30px;
  }
}
.profile-content .title {
  font-weight: 600;
  font-size: 45px;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .profile-content .title {
    font-size: 30px;
  }
}
.profile-content > span {
  font-weight: 600;
  font-size: 20px;
  display: block;
  margin-bottom: 45px;
  color: rgba(13, 13, 13, 0.6);
}
.profile-content > p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.67;
}
@media (max-width: 767px) {
  .profile-content > p {
    font-size: 16px;
  }
}
.profile-content .contact-info {
  position: relative;
  padding-inline-start: 40px;
  padding-bottom: 15px;
  margin-bottom: 55px;
  border-bottom: 1px solid #D9D9D9;
}
.profile-content .contact-info > a {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-black);
}
.profile-content .contact-info span {
  display: block;
  font-size: 14px;
  margin-top: 3px;
}
.profile-content .contact-info svg {
  position: absolute;
  top: 10px;
  left: 0;
}
.profile-content .contact-social {
  padding-bottom: 32px;
  margin-bottom: 55px;
  border-bottom: 1px solid #D9D9D9;
}
.profile-content .contact-social a {
  height: 40px;
  width: 40px;
  line-height: 36px;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  color: var(--oit-clr-black);
  background: rgba(13, 13, 13, 0.08);
}
.profile-content .contact-social a:not(:last-child) {
  margin-right: 10px;
}
.profile-content .contact-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}

.timeline-area {
  margin: 0 35px;
  border-radius: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-area {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .timeline-area {
    margin: 0;
    border-radius: 0;
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
.timeline-area .shape {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}
.timeline-item-wrap {
  position: relative;
  padding-inline-start: 175px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .timeline-item-wrap {
    padding-inline-start: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .timeline-item-wrap {
    padding-inline-start: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-item-wrap {
    padding-inline-start: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .timeline-item-wrap {
    padding-inline-start: 0;
  }
}
.timeline-item-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 2%;
  height: 87%;
  width: 10px;
  border-radius: 100px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-item-wrap::after {
    inset-inline-start: 6%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .timeline-item-wrap::after {
    display: none;
  }
}
.timeline-item {
  padding: 45px 40px;
  padding-bottom: 40px;
  border-radius: 30px;
  border: 1px solid var(--oit-grey-2);
  background-color: var(--oit-clr-white);
  position: relative;
}
@media (max-width: 767px) {
  .timeline-item {
    padding: 40px 20px;
    border-radius: 10px;
  }
}
.timeline-item::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: -9.7%;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  z-index: 1;
  transform: translateY(-50%);
  background-color: var(--oit-text-body);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .timeline-item::after {
    inset-inline-start: -7%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .timeline-item::after {
    inset-inline-start: -8.7%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .timeline-item::after {
    inset-inline-start: -5.4%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .timeline-item::after {
    inset-inline-start: -11%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .timeline-item::after {
    display: none;
  }
}
@media (max-width: 767px) {
  .timeline-item-top {
    flex-wrap: wrap;
  }
}
.timeline-item-top .title {
  font-size: 24px;
  margin-bottom: 0;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .timeline-item-top .title {
    font-size: 20px;
  }
}
.timeline-item-top span {
  color: #9333ED;
}
@media (max-width: 767px) {
  .timeline-item-top .date {
    margin-top: 20px;
  }
}
.timeline-item-top .date span {
  color: var(--oit-clr-black);
}
.timeline-item p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .timeline-item p {
    font-size: 16px;
  }
}

/*------------------------------------*/
/*                                     \
\   1.7 IT SOLUTION CSS START HERE     \            
|                                      \
/*------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.it-hero-area {
  padding-top: 135px;
}
.it-hero-area .row [class*=col-xl-2] {
  height: 100%;
}
.it-hero-btn {
  position: absolute;
  bottom: 7%;
  inset-inline-start: 22%;
  z-index: 2;
  display: inline-block;
  padding: 16px 45px;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-align: center;
  color: var(--oit-clr-white);
  background: rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-btn {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  .it-hero-btn {
    font-size: 14px;
    padding: 16px 25px;
    inset-inline-start: 25%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-btn {
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }
}
.it-hero-btn span:first-child::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.it-hero-btn span:first-child::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.it-hero-btn span:last-child::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.it-hero-btn span:last-child::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 5px;
  height: 5px;
  background: linear-gradient(90deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
.it-hero-btn:hover {
  color: #5090e1;
}
.it-hero-title {
  font-weight: 500;
  font-size: 70px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .it-hero-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .it-hero-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-title {
    font-size: 55px;
  }
}
.it-hero-content {
  padding-top: 155px;
  padding-inline-start: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-content {
    padding-top: 40px;
    padding-bottom: 50px;
    padding-inline-start: 0;
  }
}
.it-hero-thumb {
  margin-inline-start: -112px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-thumb {
    margin-inline-start: 0;
  }
}
.it-hero-thumb .shape-1 {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 100%;
}
.it-hero-thumb .shape-2 {
  position: absolute;
  top: -22%;
  z-index: -1;
  inset-inline-start: -14%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-thumb .shape-2 {
    inset-inline-start: -28%;
  }
}
.it-hero-thumb-2 {
  position: relative;
  text-align: center;
  padding: 31px 21px;
  margin-bottom: 55px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.it-hero-thumb-2::before {
  position: absolute;
  top: 0;
  inset-inline-start: -1px;
  content: "";
  height: 31px;
  width: 1px;
  background-color: var(--oit-clr-white);
}
.it-hero-thumb-2::after {
  position: absolute;
  bottom: 0;
  inset-inline-end: -1px;
  content: "";
  height: 31px;
  width: 1px;
  background-color: var(--oit-clr-white);
}
.it-hero-thumb-2-wrap {
  position: absolute;
  bottom: 0;
  inset-inline-start: 30px;
  height: 100%;
  display: flex;
  width: 263px;
  justify-content: end;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-thumb-2-wrap {
    width: 170px;
  }
}
.it-hero-review {
  position: relative;
  text-align: center;
  padding: 31px 21px;
  padding-inline-end: 35px;
  margin-bottom: 265px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review {
    margin-bottom: 100px;
    padding: 31px 18px;
  }
}
.it-hero-review img {
  display: block;
  margin-bottom: 15px;
}
.it-hero-review span {
  color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review span {
    font-size: 12px;
  }
}
.it-hero-review span.number {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
  margin-right: 22px;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review span.number {
    font-size: 20px;
  }
}
.it-hero-review span.number i {
  font-style: normal;
}
.it-hero-review p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 0;
  margin-top: 10px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review p {
    font-size: 12px;
  }
  .it-hero-review p br {
    display: none;
  }
}
.it-hero-review-text p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  max-width: 240px;
  padding: 0 15px;
  margin-bottom: 50px;
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review-text p {
    font-size: 12px;
  }
  .it-hero-review-text p br {
    display: none;
  }
}
.it-hero-review-wrap {
  position: absolute;
  bottom: 0;
  inset-inline-end: 30px;
  height: 100%;
  display: flex;
  width: 274px;
  justify-content: end;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-review-wrap {
    width: 207px;
  }
}

/*----------------------------------------*/
/* feature css start here
/*----------------------------------------*/
.it-feature-area {
  margin: 0 40px;
  border-radius: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-area {
    margin: 0;
    padding-top: 90px;
    padding-bottom: 60px;
  }
}
.it-feature-area .shape {
  position: absolute;
  top: 7%;
  inset-inline-end: 0;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-area .it-feature-secttion-box.mb-85 {
    margin-bottom: 40px;
  }
}
.it-feature-item {
  padding: 40px 34px;
  background-color: #E2DEFF;
  border-radius: 30px;
  border: 1px solid var(--oit-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-item {
    padding: 40px 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-item {
    padding: 40px 25px;
  }
}
.it-feature-item.feature-2 {
  background-color: #FED3F1;
}
.it-feature-item.feature-3 {
  background-color: #F7FE8E;
}
.it-feature-item.feature-4 {
  background-color: #C1EFDC;
}
.it-feature-item p {
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-item p {
    font-size: 14px;
  }
}
.it-feature-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .it-feature-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-feature-title {
    font-size: 20px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-style {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.it-about-style .ai-about-content {
  padding-top: 0;
  padding-inline-start: 0;
}
.it-about-style .ai-about-content p {
  margin-inline-end: 0;
  margin-inline-start: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-style .ai-about-content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-style .ai-about-content p {
    font-size: 16px;
    margin-inline-start: 0;
  }
}
.it-about-style .ai-about-secttion-box {
  margin-inline-start: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-style .ai-about-secttion-box {
    margin-inline-start: 0;
    margin-bottom: 70px;
  }
}
.it-about-style .oit-section-title {
  font-size: 60px;
  line-height: 1.17;
  letter-spacing: -0.01em;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-about-style .oit-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-style .oit-section-title {
    font-size: 45px;
  }
  .it-about-style .oit-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-style .oit-section-title {
    font-size: 50px;
  }
  .it-about-style .oit-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-about-style .oit-section-title {
    font-size: 45px;
  }
  .it-about-style .oit-section-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-about-style .oit-section-title {
    font-size: 32px;
  }
  .it-about-style .oit-section-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-about-style .oit-section-title {
    font-size: 40px;
  }
}
.it-about-style .ai-about-thumb {
  margin-top: -215px;
  margin-inline-end: 93px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-style .ai-about-thumb {
    margin-top: -100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-about-style .ai-about-thumb {
    margin-top: 0;
    margin-inline-end: 0;
  }
}
@media (max-width: 767px) {
  .it-about-style .ai-about-thumb {
    margin-top: 0;
    padding-bottom: 30px;
    margin-inline-end: 0;
  }
}
@media (max-width: 767px) {
  .it-about-style .ai-about-thumb img {
    width: 100%;
  }
}
.it-about-style .big-text {
  inset-inline-start: 22%;
  bottom: 18%;
  letter-spacing: -16px;
  font-size: 185px;
  z-index: -1;
  -webkit-text-stroke: 1px rgba(56, 239, 126, 0.3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-style .big-text {
    font-size: 120px;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.it-service-area .ai-top-text {
  margin-inline-start: 58px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-area .ai-top-text {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-area .it-service-secttion-box.mb-85 {
    margin-bottom: 30px;
  }
}
.it-service-title {
  font-size: 30px;
  line-height: 1.33;
  letter-spacing: 0.03em;
  transition: 0.3s;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-title {
    font-size: 22px;
  }
}
.it-service-arrow {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  padding: 15px 8px 15px 20px;
  background-color: var(--oit-clr-white);
  border-radius: 50% 0 0 0;
}
.it-service-arrow::before {
  content: "";
  position: absolute;
  top: -35px;
  inset-inline-end: 0px;
  width: 35px;
  height: 35px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.it-service-arrow:after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: -35px;
  width: 35px;
  height: 35px;
  -webkit-transform: scaleX(-1) rotate(-90deg);
  transform: scaleX(-1) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg' transform='rotate(180)'%3E%3Cg transform='rotate(90 100 100)'%3E%3Cpath d='M0,0 L0,200 Q0,0 200,0 Z' fill='white' /%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}
.it-service-arrow a {
  display: inline-block;
  height: 52px;
  width: 52px;
  line-height: 52px;
  border-radius: 50%;
  text-align: center;
  color: var(--oit-clr-white);
  position: relative;
  z-index: 1;
}
.it-service-arrow a::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  z-index: -1;
  transition: 0.3s;
  border-radius: 50%;
  background: var(--oit-clr-black);
}
.it-service-arrow a::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  z-index: -2;
  border-radius: 50%;
  background: linear-gradient(90deg, #66e0ff 0%, #65b757 100%);
}
.it-service-arrow a:hover::before {
  transform: scale(0);
}
.it-service-item {
  position: relative;
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px;
  overflow: hidden;
  padding: 40px 40px 80px 40px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-item {
    padding: 30px 20px 70px 20px;
  }
}
.it-service-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
  opacity: 0;
  transition: 0.3s;
  background-color: rgba(16, 18, 22, 0.7);
}
.it-service-item .bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: 0.3s;
}
.it-service-item p {
  transition: 0.3s;
}
.it-service-item span {
  transition: 0.3s;
  color: var(--oit-clr-black);
}
.it-service-item:hover::after {
  opacity: 1;
}
.it-service-item:hover .bg {
  opacity: 1;
}
.it-service-item:hover span, .it-service-item:hover p {
  color: var(--oit-clr-white);
}
.it-service-item:hover .it-service-title {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
.it-team-style {
  border-radius: 40px;
  margin: 0 40px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-team-style {
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-style {
    margin: 0;
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.it-team-style .shape {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  z-index: -1;
}
.it-team-style .ai-team-item.team-2 {
  background: linear-gradient(-90deg, #66e0ff 0%, #65b757 100%);
}
.it-team-style .ai-team-info .number {
  background: linear-gradient(-90deg, #66e0ff 0%, #65b757 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
.it-testimonial-item {
  padding: 30px 30px;
  padding-bottom: 40px;
  border-radius: 14px;
  margin-bottom: 25px;
  border: 1px solid var(--oit-grey-2);
  background: var(--oit-grey-1);
}
@media (max-width: 767px) {
  .it-testimonial-item {
    padding: 30px 20px;
    padding-bottom: 40px;
  }
}
.it-testimonial-item .ai-testimonial-authour-box {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.it-testimonial-item .ai-testimonial-authour-thumb img {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.it-testimonial-content p {
  font-size: 14px;
  line-height: 1.7;
}
.it-testimonial-ratting span {
  display: inline;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  color: var(--oit-clr-black);
  display: flex;
  line-height: 1;
  align-items: center;
  border: 1px solid rgba(13, 13, 13, 0.14);
}
.it-testimonial-ratting span svg {
  margin-left: 5px;
}
.it-testimonial-wrap {
  height: 1000px;
  position: relative;
}
.it-testimonial-wrap > .shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;
}
.it-testimonial-active-1 {
  animation: scroll-up 30s linear infinite;
}
.it-testimonial-active-1:hover {
  animation-play-state: paused;
}
.it-testimonial-active-2 {
  animation: scroll-down 30s linear infinite;
}
.it-testimonial-active-2:hover {
  animation-play-state: paused;
}
.it-testimonial-active-2 .it-testimonial-item {
  margin-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-testimonial-area {
    padding-top: 90px;
  }
}
.it-testimonial-area > .shape {
  position: absolute;
  top: 11%;
  inset-inline-end: 7%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-testimonial-area .oit-section-title br {
    display: none;
  }
}

/*----------------------------------------*/
/* faq css start here
/*----------------------------------------*/
.it-faq-style .ai-faq-accordion-wrap .accordion-button {
  color: var(--oit-clr-white);
}
.it-faq-style .ai-faq-accordion-wrap .accordion-body {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.it-faq-style .ai-faq-accordion-wrap .accordion-body p {
  color: var(--oit-clr-white);
}
.it-faq-style .ai-faq-accordion-wrap .accordion-body p::before {
  background-color: var(--oit-clr-white);
}
.it-faq-style .ai-faq-accordion-wrap .accordion-item {
  background-color: var(--oit-clr-black);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.it-faq-style .ai-faq-accordion-wrap .accordion-button:not(.collapsed) .accordion-icon svg {
  color: #66E0FF;
}
.it-faq-feature-wrap {
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-faq-content {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-faq-style {
    padding-top: 90px;
    padding-bottom: 70px;
  }
}
.it-faq-feature {
  padding: 29px 30px;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 767px) {
  .it-faq-feature {
    padding: 20px 15px;
  }
}
.it-faq-feature span {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-heading);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-faq-feature span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-faq-feature span svg {
    height: 40px;
  }
}
.it-faq-feature p {
  font-weight: 500;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.6);
}

/*----------------------------------------*/
/*  gallery details css
/*----------------------------------------*/
.gallery-btn {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}
.gallery-btn a {
  color: var(--oit-clr-white);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--oit-clr-black);
  padding: 15px 35px;
  border-radius: 20px;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .gallery-btn a {
    font-size: 20px;
    padding: 10px 25px;
    border-radius: 10px;
  }
}
.gallery-btn a:hover {
  color: var(--oit-gradient-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .gallery-menu {
    margin-bottom: 40px;
  }
}
.gallery-menu button {
  padding: 22px 30px;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  margin: 0 5px;
  border-radius: 20px;
  margin-bottom: 20px;
  font-family: var(--oit-ff-heading);
  letter-spacing: 0.04em;
  color: var(--oit-clr-black);
  border: 1px solid var(--oit-gradient-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .gallery-menu button {
    font-size: 20px;
    padding: 15px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .gallery-menu button {
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .gallery-menu button {
    font-size: 18px;
    padding: 14px 20px;
  }
}
.gallery-menu button.active {
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}
.gallery-item {
  overflow: hidden;
  border-radius: 30px;
}
.gallery-item:hover .gallery-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scaleX(1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .gallery-area {
    padding-top: 90px;
    padding-bottom: 0;
  }
}

/*----------------------------------------*/
/* price css start here
/*----------------------------------------*/
.price-area {
  margin: 0 35px;
  border-radius: 30px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-area {
    padding-top: 80px;
    padding-bottom: 50px;
    margin: 0;
    border-radius: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .price-area .oit-section-title-box {
    padding-left: 0;
    margin-bottom: 50px;
  }
}
.price-area .shape {
  position: absolute;
  top: -23%;
  z-index: -1;
  inset-inline-end: -15%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-area .shape {
    display: none;
  }
}
.price-item {
  padding: 45px 50px;
  border-radius: 30px;
  min-height: 585px;
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-item {
    min-height: auto;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .price-item {
    padding: 35px 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-item {
    padding: 30px;
  }
}
.price-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .price-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .price-title {
    font-size: 20px;
  }
}
.price-head {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-head {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .price-head-content {
    margin-right: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .price-head-content {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.price-head-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .price-head-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .price-head-content p {
    font-size: 16px;
  }
  .price-head-content p br {
    display: none;
  }
}
.price-head-btn .nav {
  padding: 6px;
  border-radius: 1000px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.price-head-btn .nav button {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  border-radius: 1000px;
  padding: 18px 19px;
  display: inline-block;
  color: var(--oit-clr-white);
  background-color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .price-head-btn .nav button {
    font-size: 16px;
    padding: 10px 19px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .price-head-btn .nav button {
    padding: 11px 20px;
  }
}
.price-head-btn .nav button.active {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.price-list-item {
  display: flex;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 15px;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.7);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .price-list-item {
    font-size: 14px;
  }
}
.price-list-item i {
  margin-right: 8px;
  transform: translateY(-1px);
}
.price-list-label {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
.price-btn-box {
  padding: 20px 40px;
  padding-right: 20px;
  border-radius: 10px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
  .price-btn-box {
    flex-wrap: wrap;
    padding: 20px;
  }
}
.price-range {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .price-range {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.price-range i {
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
  .price-avater-box {
    flex-wrap: wrap;
  }
  .price-avater-box img {
    margin-bottom: 10px;
  }
}
.price-avater-box span {
  position: relative;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.7);
}
.price-avater-box span::before {
  content: "";
  height: 15px;
  width: 15px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #15DB46;
}
.price-info {
  padding: 40px 40px;
  border-radius: 10px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .price-info {
    padding: 40px 30px;
  }
}
@media (max-width: 767px) {
  .price-info {
    padding: 10px;
  }
}
.price-info-icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: inline-block;
  line-height: 58px;
  text-align: center;
  font-size: 24px;
  margin-right: 15px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.8);
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.price-info-desc span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.price-info-desc a {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .price-info-desc a {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/* case-study css start here
/*----------------------------------------*/
.case-study-big-thumb {
  margin-top: -225px;
  position: relative;
  z-index: 1;
  border-radius: 30px;
  overflow: hidden;
  outline: 4px solid var(--oit-clr-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-study-big-thumb {
    margin: 0 55px;
    margin-top: -200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-study-big-thumb {
    margin: 0 35px;
    margin-top: -140px;
  }
}
@media (max-width: 767px) {
  .case-study-big-thumb {
    margin: 0;
    margin-top: 70px;
    border-radius: 10px;
  }
}
.case-study-content p {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-study-content p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .case-study-content p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .case-study-content p {
    font-size: 15px;
  }
  .case-study-content p br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .case-study-content p {
    font-size: 18px;
  }
}
.case-study-content p span {
  color: rgba(73, 73, 73, 0.5);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-area {
    padding-bottom: 90px;
  }
}
.case-study-area .problem-card {
  padding: 40px;
  padding-bottom: 20px;
  border-radius: 30px;
  background-color: #F2D0D4;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-area .problem-card {
    padding: 30px 20px;
  }
}
.case-study-area .problem-card svg {
  margin-bottom: 25px;
}
.case-study-area .problem-card-wrap.solution-card .problem-card {
  background-color: #D0F2E4;
}
.case-study-area .problem-title {
  font-size: 30px;
  line-height: 1.33;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-area .problem-title {
    font-size: 24px;
  }
}
.case-study-area .problem p {
  font-size: 20px;
  line-height: 1.6;
}
.case-study-area.details-style {
  padding-bottom: 0;
}
.case-study-banner-thumb img {
  width: 100%;
  border-radius: 30px;
}
@media (max-width: 767px) {
  .case-study-banner-thumb img {
    border-radius: 10px;
  }
}
.case-study-reviw-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  padding-inline-start: 85px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .case-study-reviw-content {
    padding-inline-start: 135px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .case-study-reviw-content {
    padding-inline-start: 15px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-study-reviw-content {
    padding-inline-start: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-content {
    padding: 40px;
    padding-inline-start: 0;
  }
}
@media (max-width: 767px) {
  .case-study-reviw-content {
    padding: 40px 25px;
  }
}
.case-study-reviw-content p {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 80px;
  letter-spacing: 0.04em;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-family);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .case-study-reviw-content p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-content p {
    margin-bottom: 40px;
    font-size: 17px;
  }
}
.case-study-reviw-content .title {
  font-size: 35px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-content .title {
    font-size: 20px;
  }
}
.case-study-reviw-content span {
  font-weight: 500;
  font-size: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-content span {
    font-size: 15px;
  }
}
.case-study-reviw-content svg {
  margin-bottom: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-content .logo {
    width: 80px;
  }
}
.case-study-reviw-wrap {
  overflow: hidden;
  border-radius: 30px;
  background-color: var(--oit-grey-1);
}
.case-study-reviw-thumb {
  height: 100%;
}
.case-study-reviw-thumb img {
  border-radius: 30px;
  max-width: inherit;
  height: 100%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-reviw-thumb img {
    width: 100%;
    object-fit: cover;
  }
}
.case-study-item {
  padding: 30px;
  border-radius: 30px;
  background-color: var(--oit-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .case-study-item {
    padding: 25px 20px;
  }
}
.case-study-item p {
  font-weight: 500;
}
.case-study-meta span {
  font-size: 14px;
  padding: 8px 15px;
  line-height: 1;
  border-radius: 5px;
  display: inline-block;
  color: var(--oit-clr-black);
  backdrop-filter: blur(10px);
  background: linear-gradient(209deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.2) 100%);
}
.case-study-meta span:first-child {
  margin-right: 20px;
}
.case-study-thumb {
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
}
.case-study-title {
  font-size: 30px;
  line-height: 1.33;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .case-study-title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .case-study-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .case-study-title {
    font-size: 28px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.vission-area {
  margin: 0 40px;
  border-radius: 30px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .vission-area {
    margin: 0;
    border-radius: 0;
  }
}
.vission-wrap {
  padding: 30px 40px;
  border-radius: 10px;
  margin-inline-start: 45px;
  backdrop-filter: blur(10px);
  background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .vission-wrap {
    margin-inline-start: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .vission-wrap {
    margin: 0 30px;
  }
}
@media (max-width: 767px) {
  .vission-wrap {
    margin: 0;
    padding: 30px 20px;
  }
}
.vission-item span {
  display: block;
  margin-bottom: 10px;
}
.vission-item p {
  font-weight: 500;
  margin-inline-end: 45px;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .vission-item p {
    margin-inline-end: 0;
  }
}
.vission-item.mission-item {
  padding-bottom: 20px;
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.vission-title {
  font-size: 35px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--oit-clr-white);
}

.history-area .shape-3 {
  position: absolute;
  top: -20%;
  right: 0;
  z-index: -1;
}
.history-year {
  font-size: 300px;
  font-weight: 600;
  line-height: 0.9;
  color: var(--oit-grey-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .history-year {
    font-size: 250px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history-year {
    font-size: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .history-year {
    font-size: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .history-year {
    font-size: 180px;
  }
}
@media (max-width: 767px) {
  .history-year {
    font-size: 110px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .history-year {
    font-size: 150px;
  }
}
.history-title {
  font-weight: 600;
  font-size: 45px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .history-title {
    font-size: 35px;
  }
}
.history-item > span {
  display: block;
  margin-bottom: 25px;
}
.history-item p {
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 20px;
  margin-inline-end: 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .history-item p {
    margin-inline-end: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .history-item p {
    margin-inline-end: 0;
  }
}
.history-item p span {
  font-weight: 700;
  color: var(--oit-clr-black);
}
.history-wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  padding-inline-start: 150px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .history-wrap {
    padding-inline-start: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history-wrap {
    padding-inline-start: 90px;
    margin-inline-start: -50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .history-wrap {
    padding-inline-start: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .history-wrap {
    margin-top: 50px;
    padding-inline-start: 90px;
    margin-inline-start: 50px;
  }
}
@media (max-width: 767px) {
  .history-wrap {
    margin-top: 50px;
    padding-inline-start: 0;
    margin-inline-start: 0;
  }
}
.history-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10px;
  border-radius: 100px;
  background-color: var(--oit-grey-1);
}
@media (max-width: 767px) {
  .history-wrap::before {
    display: none;
  }
}
.history-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30%;
  width: 10px;
  border-radius: 100px;
  z-index: 1;
  background: linear-gradient(357deg, #9333ed 0%, #5090e1 48.23%, #0eedd4 100%);
}
@media (max-width: 767px) {
  .history-wrap::after {
    display: none;
  }
}
.history-nav .shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.history-nav .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.history-nav .swiper-slide-active .history-year {
  color: var(--oit-clr-black);
}

.history-nav-active {
  height: 800px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .history-nav-active {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .history-nav-active {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .history-nav-active {
    height: 500px;
  }
}
@media (max-width: 767px) {
  .history-nav-active {
    height: 340px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .history-nav-active {
    height: 500px;
  }
}

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