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

    Theme Name: docodex - Creative Agency & Portfolio HTML Template
    Author: Ordianit
    Support:ordianit@gmail.com
    Description: docodex - Creative Agency & Portfolio HTML Template
    Version: 1.0.1

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

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

	-----------------
    INDEXING START HERE
	-----------------
	1.1 Theme Css
	1.2 Common Classes
	1.4 BRAND AGENCY CSS START HERE 
	1.5 DESIGN AGENCY CSS START HERE
	1.6 DESIGN STUDIO CSS START HERE
	1.7 DIGITAL AGENCY CSS HERE 
	1.8 SOLO DESIGN AGENCY CSS START HERE



**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Css
/*----------------------------------------*/
:root {
  /**=========== color ===========*/
  --oit-clr-white: #fff;
  --oit-clr-black: #000;
  --oit-grey-1: #f5f5f5;
  --oit-grey-2: #494949;
  --oit-text-body: #5d5d5d;
  --oit-theme-1: #000;
  --oit-border-1: #EAEBED;
}

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

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  font-weight: 500;
  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: 14px;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 26px;
  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;
}

.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;
  overflow: hidden;
}
.image-gsl-auto {
  display: block;
  width: 100%;
  overflow: hidden;
}
.st-project-thumb.image-gsl,
.oit-project-thumb .image-gsl,
.service-details-thumb.image-gsl,
.portfolio-gallery-thumb.image-gsl {
  display: block;
  width: 100%;
}
.image-gsl img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: inline-block;
}
.image-gsl picture {
  display: block;
}
.image-gsl picture img {
  display: block;
}
.image-gsl-auto img {
  display: block;
  height: auto;
}
.image-gsl-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-block;
  pointer-events: none;
  object-fit: cover;
}
.image-gsl-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.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);
}

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

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

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/
.oit-btn-border {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 22px;
  padding-right: 8px;
  border-radius: 30px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-white);
  gap: 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) {
  .oit-btn-border {
    font-size: 14px;
    padding: 5px 22px;
    padding-right: 8px;
  }
}
.oit-btn-border.btn-blur-bg {
  backdrop-filter: blur(40px);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.oit-btn-border.btn-black-bg {
  color: var(--oit-clr-white);
  border-color: var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}
.oit-btn-border.btn-black-bg i {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.oit-btn-border.btn-white-bg {
  padding: 10px 26px;
  padding-right: 8px;
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  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) {
  .oit-btn-border.btn-white-bg {
    padding: 5px 26px;
    padding-right: 8px;
  }
}
.oit-btn-border.btn-white-bg i {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.oit-btn-border.btn-white-bg:hover {
  color: var(--oit-clr-black);
}
.oit-btn-border.btn-large {
  padding: 17px 26px;
}
@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.btn-large {
    padding: 12px 26px;
  }
}
.oit-btn-border.btn-small {
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  color: var(--oit-grey-2);
  background-color: var(--oit-grey-1);
}
.oit-btn-border.btn-small:hover {
  background-color: var(--oit-clr-black);
}
.oit-btn-border span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}
.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: 38px;
  width: 38px;
  line-height: 38px;
  border-radius: 50%;
  margin-left: 2px;
  text-align: center;
  display: inline-block;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.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 {
  color: var(--oit-clr-white);
}
.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);
}
.oit-btn-line {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: var(--oit-clr-black);
}
.oit-btn-line.fsz-30 {
  font-size: 30px;
}
.oit-btn-line.fsz-30 span {
  padding-bottom: 5px;
}
.oit-btn-line.fsz-30 i {
  width: 24px;
  height: 24px;
  padding-bottom: 5px;
}
.oit-btn-line.fsz-30:hover i svg:first-child {
  transform: translate(24px, -24px);
}
.oit-btn-line i {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  display: inline-flex;
  margin-left: 7px;
}
.oit-btn-line i svg {
  transform: translateY(-2px);
  position: absolute;
  bottom: -1px;
  left: 1px;
  transition: all 0.2s ease-out;
}
.oit-btn-line i svg:last-child {
  left: -12px;
  bottom: -12px;
  transform: translate(0, 0);
  opacity: 0;
}
.oit-btn-line:hover {
  color: var(--oit-clr-black);
}
.oit-btn-line:hover i svg:first-child {
  transform: translate(16px, -16px);
}
.oit-btn-line:hover i svg:last-child {
  opacity: 1;
  visibility: visible;
  transform: translate(13px, -13px);
}
.oit-btn-line:hover span::after {
  transform: translate(1rem);
}
.oit-btn-line:hover span::before {
  transform: translate(calc(100% + 1rem));
}
.oit-btn-line span {
  position: relative;
  overflow: hidden;
}
.oit-btn-line span::before, .oit-btn-line span::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.5s cubic-bezier(0.59, 0.23, 0.22, 0.96);
}
.oit-btn-line span::before {
  left: 0;
}
.oit-btn-line span::after {
  left: -1rem;
  transform: translate(-100%);
}

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

/*----------------------------------------*/
/*  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;
  line-height: 1.1;
  display: inline-block;
  text-transform: uppercase;
}
@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: 700;
  font-size: 70px;
  line-height: 1.06;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-section-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-section-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-section-title {
    font-size: 80px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-section-title {
    font-size: 70px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .oit-section-title {
    font-size: 40px;
  }
  .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: 50px;
  }
  .oit-section-title span {
    padding-left: 0;
  }
}
.oit-section-title.fsz-60 {
  font-size: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-section-title.fsz-60 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-section-title.fsz-60 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .oit-section-title.fsz-60 {
    font-size: 35px;
  }
}
.oit-section-title.fsz-120 {
  font-size: 120px;
  font-weight: 500;
  line-height: 0.9;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-section-title.fsz-120 {
    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) {
  .oit-section-title.fsz-120 {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .oit-section-title.fsz-120 {
    font-size: 60px;
  }
}
@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-section-title-box {
    padding-left: 0;
    margin-bottom: 40px;
  }
}

/*----------------------------------------*/
/*  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: pointer;
}

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

.oitoffcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -100%;
  width: 450px;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 9999;
  padding: 50px;
  opacity: 0;
  z-index: 1000;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: 0.3s linear;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  background: var(--oit-clr-white) none repeat scroll 0 0;
}

body.offcanvas-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.offcanvas-open #smooth-wrapper,
body.offcanvas-open #smooth-content {
  pointer-events: none;
}

body.offcanvas-open .oit-offcanvas-area,
body.offcanvas-open .oitoffcanvas,
body.offcanvas-open .body-overlay {
  pointer-events: auto;
}

.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: 170px;
  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(0, 0, 0, 0.1);
}
.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;
}
.oitoffcanvas__portal {
  margin-bottom: 34px;
}
.oitoffcanvas__portal a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--oit-clr-black);
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  text-transform: capitalize;
}
.oitoffcanvas__portal a:hover {
  color: var(--oit-theme-1);
}

/* 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-logo {
    padding: 15px 0;
  }
}
.oit-header-bar {
  height: 56px;
  width: 56px;
  line-height: 56px;
  border-radius: 50%;
  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) {
  .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-black);
}
.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: 600;
  font-size: 16px;
  display: inline-block;
  color: var(--oit-clr-black);
}
.oit-header-menu-2 > nav > ul > li {
  margin: 0 30px;
}
.oit-header-menu-2 > nav > ul > li > a {
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
.oit-header-bdr {
  border-bottom: 1px dashed var(--oit-clr-black);
}

/*----------------------------------------*/
/*  4.1 Main menu css
/*----------------------------------------*/
.oit-header-menu nav ul li {
  position: relative;
}
.oit-header-menu nav ul li .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 230px;
  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.index-submenu {
  width: 270px;
}
.oit-header-menu nav ul li .submenu li {
  list-style: none;
  display: block;
  padding: 0 30px;
}
.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: 14px;
  position: relative;
  display: inline-block;
  letter-spacing: 0.2px;
  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;
}

.oitoffcanvas .oit-menu-mobile {
  max-height: none;
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu,
.oitoffcanvas .oit-menu-mobile nav {
  width: 100%;
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu nav ul li .submenu.services-mega-menu {
  display: none;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-height: min(52vh, 430px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 12px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  scrollbar-color: rgba(13, 13, 13, 0.35) rgba(13, 13, 13, 0.08);
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu nav ul li .submenu.services-mega-menu::-webkit-scrollbar {
  width: 8px;
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu nav ul li .submenu.services-mega-menu::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.08);
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu nav ul li .submenu.services-mega-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.35);
}
.oitoffcanvas .oit-menu-mobile .oit-header-menu nav ul li .submenu.services-mega-menu::before {
  display: none;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu > li,
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu .services-mega-column {
  display: block;
  width: 100%;
  padding: 0;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu .services-mega-column:not(:last-child) {
  margin-bottom: 16px;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu .services-mega-title {
  display: block;
  margin: 8px 0 6px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
  color: rgba(13, 13, 13, 0.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu ul {
  display: block;
  width: 100%;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu ul li a {
  display: block;
  width: 100%;
  min-height: auto;
  margin-left: 0;
  padding: 8px 18px 8px 12px;
  border-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu ul li:hover > a,
.oitoffcanvas .oit-menu-mobile .submenu.services-mega-menu ul li.active > a {
  padding-left: 18px;
}

/* Services mega menu */
.oit-header-menu nav ul li.services-mega-parent {
  position: relative;
}

.oit-header-menu nav ul li .submenu.services-mega-menu {
  left: 50%;
  width: 820px;
  padding: 34px 36px 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  border-radius: 16px;
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(48, 48, 47, 0.1);
  box-shadow: 0 24px 70px rgba(3, 11, 30, 0.14);
  transform: translateX(-50%) perspective(300px) rotateX(-18deg);
}

.oit-header-menu nav ul li:hover > .submenu.services-mega-menu {
  transform: translateX(-50%) perspective(300px) rotateX(0deg);
}

.oit-header-menu nav ul li .submenu.services-mega-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 18px;
  height: 18px;
  background-color: var(--oit-clr-white);
  border-left: 1px solid rgba(48, 48, 47, 0.08);
  border-top: 1px solid rgba(48, 48, 47, 0.08);
  transform: translateX(-50%) rotate(45deg);
}

.oit-header-menu nav ul li .submenu.services-mega-menu > li {
  padding: 0;
  margin: 0;
}

.oit-header-menu nav ul li .submenu.services-mega-menu > li:not(:last-child) {
  margin-bottom: 0;
}

.oit-header-menu nav ul li .submenu.services-mega-menu .services-mega-title {
  display: block;
  margin-bottom: 16px;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.55);
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul {
  position: static;
  width: auto;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li {
  padding: 0;
  margin: 0;
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li:not(:last-child) {
  margin-bottom: 9px;
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
  text-transform: none;
  color: var(--oit-clr-black);
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li a::before {
  top: 50%;
  transform: translateY(-50%);
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li:hover > a,
.oit-header-menu nav ul li .submenu.services-mega-menu ul li.active > a {
  padding-left: 20px;
  color: var(--oit-clr-black);
}

.oit-header-menu nav ul li .submenu.services-mega-menu ul li:hover > a::before,
.oit-header-menu nav ul li .submenu.services-mega-menu ul li.active > a::before {
  width: 15px;
  visibility: visible;
  opacity: 1;
}

/* Keep desktop mega menu only on large screens */
@media (max-width: 1399px) {
  .oit-header-menu nav ul li .submenu.services-mega-menu {
    left: auto;
    right: 0;
    width: 760px;
    transform: perspective(300px) rotateX(-18deg);
  }

  .oit-header-menu nav ul li:hover > .submenu.services-mega-menu {
    transform: perspective(300px) rotateX(0deg);
  }

  .oit-header-menu nav ul li .submenu.services-mega-menu::before {
    left: auto;
    right: 45px;
    transform: rotate(45deg);
  }
}

/*----------------------------------------*/
/*  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-right: 80px;
  padding: 40px 50px;
  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) {
  .postbox-left {
    margin-right: 0;
    padding: 30px 40px;
  }
}
@media (max-width: 767px) {
  .postbox-left {
    margin-right: 0;
    padding: 30px 20px;
  }
}
.postbox-left.left-style {
  margin-right: 0;
  margin-left: 80px;
}
@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.left-style {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .postbox-left.left-style {
    margin-left: 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;
  color: var(--oit-grey-2);
}
@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: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-dsc p {
    font-size: 16px;
  }
}
.postbox-banner img {
  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) {
  .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-left: 80px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .postbox-banner-wrap .postbox-dsc {
    padding-left: 95px;
  }
}
@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-left: 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;
  color: 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-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;
  backdrop-filter: blur(40px);
  background: linear-gradient(209deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.2) 100%);
}
@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;
  }
}
.blog-detail-breadcrumb-excerpt {
  max-width: 860px;
}
.blog-detail-breadcrumb-excerpt p {
  color: rgba(255, 255, 255, 0.78);
}
.blog-detail-area {
  position: relative;
}
.blog-detail-hero-card {
  position: relative;
  z-index: 2;
  margin-top: -78px;
  margin-bottom: 34px;
  padding: 34px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 30px;
  background: var(--oit-clr-white);
  box-shadow: 0 30px 80px rgba(13, 13, 13, 0.08);
}
.blog-detail-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}
.blog-detail-meta-pills span {
  display: flex;
  min-width: 150px;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 18px;
  background: #f6f6f6;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.52);
}
.blog-detail-meta-pills strong {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--oit-clr-black);
}
.blog-detail-cover {
  overflow: hidden;
  height: 560px;
  margin-top: 34px;
  border-radius: 26px;
  background: #101216;
}
.blog-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-detail-side-stack {
  position: sticky;
  top: 115px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.blog-detail-side-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.52);
}
.blog-detail-side-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}
.postbox-toc,
.blog-detail-side-card {
  padding: 28px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 22px;
  background: var(--oit-clr-white);
  box-shadow: 0 18px 45px rgba(13, 13, 13, 0.05);
}
.postbox-toc-title {
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--oit-clr-black);
}
.postbox-toc-list {
  margin: 0;
  padding: 0;
}
.postbox-toc-list li {
  position: relative;
  list-style: none;
  padding-left: 18px;
}
.postbox-toc-list li:not(:last-child) {
  margin-bottom: 12px;
}
.postbox-toc-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oit-clr-black);
}
.postbox-toc-list .toc-h3 {
  margin-left: 12px;
}
.postbox-toc-list a {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: var(--oit-text-body);
  text-decoration: none;
}
.postbox-toc-list a:hover {
  color: var(--oit-clr-black);
}
.blog-detail-side-card {
  background: #101216;
}
.blog-detail-side-card .blog-detail-side-label {
  color: rgba(255, 255, 255, 0.62);
}
.blog-detail-side-card h3 {
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: var(--oit-clr-white);
}
.blog-detail-side-card p {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.blog-detail-side-card a {
  color: var(--oit-clr-white);
}
.blog-detail-article-card {
  padding: 58px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 30px;
  background: var(--oit-clr-white);
  box-shadow: 0 26px 70px rgba(13, 13, 13, 0.06);
}
.blog-detail-article-card > p,
.blog-detail-article-card li {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.72;
  color: var(--oit-text-body);
}
.blog-detail-article-card > p:not(:last-child) {
  margin-bottom: 24px;
}
.blog-detail-article-card > h2,
.blog-detail-article-card > h3 {
  margin-top: 44px;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--oit-clr-black);
}
.blog-detail-article-card > h2:first-child,
.blog-detail-article-card > h3:first-child {
  margin-top: 0;
}
.blog-detail-article-card > h2 {
  font-size: 40px;
  line-height: 1.15;
}
.blog-detail-article-card > h3 {
  font-size: 30px;
  line-height: 1.2;
}
.blog-detail-article-card .postbox-banner img,
.blog-detail-related .oit-blog-thumb img {
  border-radius: 20px;
}
.blog-detail-tag-share {
  padding: 28px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 22px;
  background: #f6f6f6;
}
.blog-detail-cta-card .postbox-comment ul {
  padding-left: 0;
}
.blog-detail-cta-card .postbox-comment ul li {
  border: 1px solid rgba(13, 13, 13, 0.08);
  background: #101216;
}
.blog-detail-cta-card .postbox-user-info .user-title {
  color: var(--oit-clr-white);
}
.blog-detail-cta-card .postbox-user-info p {
  color: rgba(255, 255, 255, 0.72);
}
.blog-detail-cta-card .border-line {
  color: var(--oit-clr-white);
}
.blog-detail-related {
  padding-top: 8px;
}
.blog-detail-related .oit-blog-item {
  height: 100%;
  border-radius: 22px;
  background: #f6f6f6;
}
.blog-detail-related .oit-blog-thumb img {
  height: 190px;
  object-fit: cover;
}
.blog-detail-related .oit-blog-content {
  padding: 22px;
}
.blog-detail-related .oit-blog-title {
  font-size: 20px;
  line-height: 1.25;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-detail-article-card {
    padding: 42px;
  }
  .blog-detail-cover {
    height: 460px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-detail-hero-card {
    margin-top: -45px;
    padding: 24px;
    border-radius: 22px;
  }
  .blog-detail-meta-pills {
    justify-content: flex-start;
  }
  .blog-detail-cover {
    height: 360px;
    border-radius: 20px;
  }
  .blog-detail-side-stack {
    position: static;
    margin-bottom: 30px;
  }
  .blog-detail-article-card,
  .postbox-toc,
  .blog-detail-side-card,
  .blog-detail-tag-share {
    padding: 26px;
    border-radius: 20px;
  }
  .blog-detail-article-card > h2 {
    font-size: 28px;
  }
  .blog-detail-article-card > h3 {
    font-size: 23px;
  }
  .blog-detail-article-card > p,
  .blog-detail-article-card li {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .blog-detail-cover {
    height: 260px;
  }
  .blog-detail-meta-pills span {
    min-width: 100%;
  }
  .blog-detail-cta-card .postbox-comment ul li {
    padding: 28px;
  }
}
.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-grey-2);
}
@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-grey-2);
}
@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;
}
.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);
}
.postbox-video-btn svg {
  color: var(--oit-clr-black);
}
.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);
}

.oit-pagination ul {
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.oit-pagination ul li {
  display: inline-flex;
  list-style-type: none;
}
.oit-pagination ul li a,
.oit-pagination ul li span {
  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;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
  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,
  .oit-pagination ul li span {
    width: 50px;
    height: 50px;
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  .oit-pagination ul li a,
  .oit-pagination ul li span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
}
.oit-pagination ul li a i,
.oit-pagination ul li a svg,
.oit-pagination ul li span svg {
  font-size: 20px;
}
.oit-pagination ul li.current a,
.oit-pagination ul li.current span {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-black);
}
.oit-pagination ul li:hover a {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-black);
}
.oit-pagination ul li.is-disabled span {
  opacity: 0.45;
  cursor: not-allowed;
  color: rgba(13, 13, 13, 0.55);
  background-color: #f5f5f5;
}

/*----------------------------------------*/
/*  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);
  background: rgba(73, 73, 73, 0.1);
  border: 1px solid transparent;
}
.sidebar-search-box input::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: var(--oit-grey-2);
}
.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;
  transform: translateY(-50%);
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.sidebar-widget {
  padding: 20px 30px 30px 30px;
  background-color: var(--oit-clr-white);
}
@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;
  margin-bottom: 30px;
  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-clr-black);
}
.sidebar-widget-list.active span {
  color: var(--oit-clr-black);
}
.sidebar-widget-list:hover {
  color: var(--oit-clr-black);
}
.sidebar-widget-list:hover span {
  color: var(--oit-clr-black);
}
.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;
}

/*----------------------------------------*/
/*  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) {
  .oit-blog-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.oit-blog-content span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 15px;
  display: inline-block;
  letter-spacing: -0.02em;
}
.oit-blog-content span svg {
  margin-right: 8px;
  display: inline-block;
  transform: translateY(-2px);
}
.oit-blog-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-blog-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-blog-title {
    font-size: 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) {
  .oit-blog-title {
    font-size: 25px;
  }
}
.oit-blog-thumb {
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 30px;
}
.oit-blog-thumb img {
  width: 100%;
  transition: 0.9s;
}
.oit-blog-item:hover .oit-blog-thumb img {
  transform: scale(1.1);
}

/*----------------------------------------*/
/*  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;
  background-color: #1c1c1c;
}
.blog-details-breadcrumb-area.breadcrumb-image-bg {
  overflow: hidden;
  background-color: #101216;
  background-image: url("../img/hero/breadcrumb.76b7b7d14343.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.blog-details-breadcrumb-area.breadcrumb-image-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.72) 48%, rgba(13, 13, 13, 0.55) 100%);
}
.blog-details-breadcrumb-area.breadcrumb-image-bg > .container,
.blog-details-breadcrumb-area.breadcrumb-image-bg > .shape,
.blog-details-breadcrumb-area.breadcrumb-image-bg > .shape-2 {
  position: relative;
  z-index: 1;
}
@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), (max-width: 767px) {
  .blog-details-breadcrumb-badges .badge {
    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;
  color: #fff;
}
.blog-details-breadcrumb-big-title.title-mb {
  margin-bottom: 25px;
  color: #fff;
}
@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
/*----------------------------------------*/
@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-footer-area {
    padding-top: 70px;
    padding-bottom: 0px;
  }
}
.oit-footer-widget {
  padding: 50px;
  min-height: 560px;
  border-radius: 30px;
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
@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) {
  .oit-footer-widget {
    padding: 30px;
  }
}
.oit-footer-widget-menu ul li {
  list-style-type: none;
}
.oit-footer-widget-menu ul li:not(:last-child) {
  margin-bottom: 22px;
}
.oit-footer-widget-menu ul li a {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
}
.oit-footer-widget-menu ul li a svg {
  margin-right: 5px;
  display: inline-block;
  transform: translateY(-3px);
}
.oit-footer-widget-menu ul li a:hover svg {
  transform: translateY(-3px);
  animation: shape-rotate 5s linear infinite;
}
.oit-footer-widget-rules a {
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  color: var(--oit-clr-white);
}
.oit-footer-widget-info {
  flex: 1;
}
.oit-footer-widget-info a {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  padding: 70px 10px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
  padding: 70px 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-footer-widget-info a {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .oit-footer-widget-info a {
    font-size: 24px;
  }
}
.oit-footer-widget-info a:first-child {
  padding-top: 0;
}
.oit-footer-widget-info a:last-child {
  padding-bottom: 0;
}
.oit-footer-widget-info a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-widget-social a {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--oit-clr-white);
  font-family: var(--oit-ff-funnel);
  padding: 25px 0;
}
.oit-footer-widget-social a:first-child {
  padding-top: 0;
}
.oit-footer-widget-social a:last-child {
  padding-bottom: 0;
}
.oit-footer-widget-social a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-widget-social a:not(:last-child):hover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}
.oit-footer-widget-copyright p {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--oit-clr-white);
}
.oit-footer-2-widget-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 25px;
  color: var(--oit-clr-white);
}
.oit-footer-2-widget p {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-footer-2-widget p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-footer-2-widget p {
    font-size: 18px;
  }
  .oit-footer-2-widget p br {
    display: none;
  }
}
.oit-footer-2-widget-menu ul li {
  list-style: none;
  display: inline-block;
  margin-bottom: 8px;
}
.oit-footer-2-widget-menu ul li:not(:last-child) {
  margin-right: 5px;
}
.oit-footer-2-widget-menu ul li a {
  padding: 12px 30px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  border-radius: 100px;
  display: inline-block;
  letter-spacing: -0.02em;
  background: #202020;
  color: var(--oit-clr-white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-footer-2-widget-menu ul li a {
    padding: 12px 19px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-footer-2-widget-menu ul li a {
    padding: 9px 15px;
    font-size: 14px;
  }
}
.oit-footer-2-widget-menu ul li a:hover {
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
.oit-footer-2-widget-social a {
  height: 50px;
  width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
  background: #202020;
  color: var(--oit-clr-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-footer-2-widget-social a svg {
  display: block;
  flex: 0 0 auto;
}
.oit-footer-2-widget-social a:not(:last-child) {
  margin-right: 5px;
}
.oit-footer-2-widget-social a:hover {
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-white);
  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) {
  .oit-footer-2-area {
    padding-top: 70px;
  }
}
.oit-footer-2-shape {
  position: absolute;
  bottom: 0%;
  left: 28%;
  z-index: -1;
  animation: shape-rotate 40s linear infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-footer-2-shape {
    bottom: 10%;
  }
}

@media (max-width: 767px) {
  .footer-widget-2-1 {
    padding-bottom: 0;
    margin-bottom: 60px;
  }
}
.footer-widget-2-2, .footer-widget-2-4 {
  padding-left: 115px;
}
@media (max-width: 767px) {
  .footer-widget-2-2, .footer-widget-2-4 {
    padding-left: 0;
  }
}

.oit-copyright-2-style {
  padding-top: 20px;
  padding-bottom: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.oit-copyright-2-style .oit-copyright-left p {
  color: var(--oit-clr-white);
}
.oit-copyright-2-style .oit-copyright-right a, .oit-copyright-2-style .oit-copyright-right span {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/*                                         \
\   1.5 DESIGN AGENCY CSS START HERE       \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.oit-hero-ptb {
  padding-top: 160px;
  padding-bottom: 50px;
}
.oit-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.oit-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .oit-hero-content {
    margin-bottom: 40px;
  }
}
.oit-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 35px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-hero-content p {
    font-size: 16px;
  }
  .oit-hero-content p br {
    display: none;
  }
}
.oit-hero-category {
  padding: 30px;
  padding-top: 20px;
  min-width: 350px;
  border-radius: 10px;
  display: inline-block;
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}
.oit-hero-category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
.oit-hero-category-item a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 20px 0;
  display: block;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.oit-hero-category-item a:hover {
  color: var(--oit-clr-white);
}
.oit-hero-category-item.active a {
  color: var(--oit-clr-white);
}
.oit-hero-bigtext {
  line-height: 0.8;
  font-size: 245px;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: -7px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-hero-bigtext {
    font-size: 220px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-hero-bigtext {
    font-size: 195px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-hero-bigtext {
    font-size: 165px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-bigtext {
    font-size: 135px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-bigtext {
    font-size: 110px;
  }
}
@media (max-width: 767px) {
  .oit-hero-bigtext {
    font-size: 80px;
    letter-spacing: 0.7px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-hero-bigtext {
    font-size: 70px;
    letter-spacing: 0.7px;
  }
}
.oit-hero-shape-1 {
  margin-bottom: 160px;
  display: inline-block;
  color: var(--oit-clr-white);
  animation: shape-rotate 2s linear infinite;
}
@media (max-width: 767px) {
  .oit-hero-shape-1 {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-hero-text-wrap {
    margin-top: 40px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-about-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-about-area {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-about-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .oit-about-text {
    margin-bottom: 30px;
  }
}
.oit-about-text p {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-funnel);
}
.oit-about-text p span {
  color: rgba(0, 0, 0, 0.4);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-about-text p {
    font-size: 40px;
  }
  .oit-about-text p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-about-text p {
    font-size: 35px;
  }
  .oit-about-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-about-text p {
    font-size: 30px;
  }
  .oit-about-text p br {
    display: none;
  }
}
.oit-about-thumb {
  flex: 0 0 auto;
  margin-right: 35px;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .oit-about-thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.oit-about-thumb img {
  width: 100%;
  border-radius: 20px;
}
.oit-about-content {
  height: 100%;
  padding-right: 80px;
}
@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) {
  .oit-about-content {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .oit-about-content {
    flex-wrap: wrap;
  }
}
.oit-about-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 130px;
  letter-spacing: -0.04em;
}
@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) {
  .oit-about-content p br {
    display: none;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-about-content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-about-content p {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .oit-about-content p {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .oit-about-content-wrap {
    flex-wrap: wrap;
  }
}
.oit-about-shape {
  position: absolute;
  top: 14%;
  left: 12%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-about-shape {
    top: 1%;
    left: auto;
    right: 5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-about-btn {
    padding-bottom: 65px;
  }
}
@media (max-width: 767px) {
  .oit-about-btn {
    padding-bottom: 40px;
  }
}

/*----------------------------------------*/
/* project 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) {
  .oit-project-area {
    padding-top: 70px;
  }
}
.oit-project-area.dg-project-style .oit-project-content {
  padding-left: 0;
  padding-right: 0;
}
.oit-project-area.dg-project-style span:first-child::after {
  display: none;
}
.oit-project-area.project-style-2 .project-item-1 {
  margin-top: 285px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .project-item-1 {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-1 {
    margin-top: 0;
  }
}
.oit-project-area.project-style-2 .project-item-3 {
  margin-top: 55px;
  margin-bottom: 95px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .project-item-3 {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-3 {
    margin-bottom: 40px;
    margin-top: 0px;
  }
}
.oit-project-area.project-style-2 .project-item-5 {
  margin-top: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area.project-style-2 .project-item-5 {
    margin-top: 20px;
  }
}
.oit-project-area.project-style-2 .oit-project-thumb {
  border-radius: 0;
}
.oit-project-area.project-style-2 .oit-project-thumb img {
  border-radius: 0;
}
.oit-project-area.project-style-2 .oit-project-item {
  border-radius: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-project-area.project-style-2 .oit-project-title {
    font-size: 25px;
  }
}
@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-project-area.project-style-2 .oit-project-category span {
    font-size: 16px;
  }
}
.oit-project-shape {
  position: absolute;
  top: 95px;
  right: 2%;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-project-shape {
    right: -3%;
    transform: scale(0.6);
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-project-shape {
    top: 0;
    right: -4%;
    transform: scale(0.6);
  }
}
.oit-project-thumb {
  width: 100%;
}
.oit-project-thumb img {
  border-radius: 10px;
}
.oit-project-content {
  padding: 30px;
  padding-bottom: 15px;
  padding-top: 25px;
  background-color: var(--oit-grey-1);
}
@media (max-width: 767px) {
  .oit-project-content {
    flex-wrap: wrap;
  }
}
.oit-project-title {
  font-weight: 500;
  font-size: 45px;
  line-height: 1;
  margin-bottom: 0;
  padding-bottom: 15px;
  letter-spacing: -0.01em;
  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) {
  .oit-project-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-project-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .oit-project-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-project-title {
    font-size: 30px;
  }
}
.oit-project-category {
  padding-bottom: 15px;
}
.oit-project-category span {
  position: relative;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: #494949;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .oit-project-category span {
    font-size: 18px;
  }
}
.oit-project-category span:first-child {
  padding-right: 20px;
  margin-right: 20px;
}
.oit-project-category span:first-child::after {
  position: absolute;
  top: 9px;
  right: -5px;
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #494949;
}
.oit-project-item {
  border-radius: 10px;
  overflow: hidden;
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-service-area {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-service-area .oit-project-shape {
    top: 2%;
    right: 4%;
  }
}
.oit-service-item {
  padding: 50px;
  border-radius: 24px;
  margin: 0 125px;
  margin-bottom: 50px;
}
@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) {
  .oit-service-item {
    margin: 0;
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-service-item {
    margin: 0;
    padding: 30px;
    margin-bottom: 30px;
  }
}
.oit-service-thumb {
  flex: 0 0 auto;
  overflow: hidden;
  margin-right: 35px;
  border-radius: 14px;
  border: 2px solid 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) {
  .oit-service-thumb {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .oit-service-thumb {
    margin-right: 0;
    margin-bottom: 30px;
    flex: auto;
  }
}
.oit-service-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  margin-bottom: 40px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-service-title {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-service-title {
    font-size: 35px;
    margin-bottom: 25px;
  }
}
@media (max-width: 767px) {
  .oit-service-title {
    font-size: 30px;
    margin-bottom: 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) {
  .oit-service-content-wrap {
    flex-wrap: wrap;
  }
}
.oit-service-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  letter-spacing: -0.04em;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-service-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-service-content p {
    font-size: 17px;
  }
  .oit-service-content p br {
    display: none;
  }
}
.oit-service-category {
  margin-bottom: 15px;
}
.oit-service-category span {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  color: #494949;
  letter-spacing: -0.04em;
}
@media (max-width: 767px) {
  .oit-service-category span {
    font-size: 16px;
  }
}
.oit-service-category span svg {
  margin-right: 10px;
  transform: translateY(2px);
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.oit-funfact-title {
  font-weight: 400;
  font-size: 100px;
  line-height: 0.8;
  margin-bottom: 35px;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.oit-funfact-title i {
  font-style: normal;
}
.oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
  border-inline-end: 1px solid rgba(0, 0, 0, 0.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) {
  .oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
    border-inline-end: 0;
  }
}
.oit-funfact-item {
  padding: 65px 30px;
  height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-funfact-item {
    padding: 40px 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) {
  .oit-funfact-item {
    padding: 30px 0;
    border-right: 0;
  }
}
.oit-funfact-item span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-funfact-item span {
    font-size: 14px;
  }
}
.oit-funfact-bdr {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-funfact-area .row [class*=col-]:last-child .oit-funfact-item {
  border-right: 0;
}

/*----------------------------------------*/
/* award 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) {
  .oit-award-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.oit-award-title-box p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.04em;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-award-title-box p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-award-title-box p {
    font-size: 16px;
  }
  .oit-award-title-box p br {
    display: none;
  }
}
.oit-award-icon {
  transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
  .oit-award-icon {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .oit-award-content {
    flex-direction: column;
  }
}
.oit-award-content p, .oit-award-content span {
  font-weight: 500;
  font-size: 30px;
  line-height: 0.87;
  margin-bottom: 0;
  transition: all 0.3s ease-in-out;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-award-content p, .oit-award-content span {
    font-size: 25px;
  }
}
@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-award-content p, .oit-award-content span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-award-content p, .oit-award-content span {
    flex-wrap: wrap;
    font-size: 18px;
    text-align: center;
  }
}
.oit-award-content p {
  padding-left: 20px;
}
@media (max-width: 767px) {
  .oit-award-content p {
    padding-left: 0;
    padding: 20px 0;
  }
}
.oit-award-content span {
  color: var(--oit-clr-black);
}
.oit-award-item {
  padding: 35px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.oit-award-item:hover .oit-award-icon {
  transform: translateX(20px);
}
@media (max-width: 767px) {
  .oit-award-item:hover .oit-award-icon {
    transform: translateX(0px);
  }
}
@media (max-width: 767px) {
  .oit-award-item:hover .oit-award-content span {
    transform: translateX(0px);
  }
}
.oit-award-item-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/*----------------------------------------*/
/* 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) {
  .oit-team-area {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.oit-team-item {
  padding: 55px 50px;
  border-radius: 10px;
  background-color: #F5F5F5;
}
@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-team-item {
    padding: 30px 30px;
  }
}
.oit-team-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-team-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-team-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-team-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .oit-team-title {
    font-size: 25px;
  }
}
.oit-team-content span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  color: rgba(13, 13, 13, 0.6);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-team-content span {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .oit-team-content span {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.oit-team-social span {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  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) {
  .oit-team-social span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .oit-team-social span {
    font-size: 16px;
  }
}
.oit-team-social span:not(:first-child) {
  margin-left: 30px;
}
@media (max-width: 767px) {
  .oit-team-social span:not(:first-child) {
    margin-left: 15px;
  }
}

/*----------------------------------------*/
/* price 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) {
  .oit-price-area {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-price-area .oit-section-title-box {
    padding-left: 0;
    margin-bottom: 50px;
  }
}
.oit-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) {
  .oit-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) {
  .oit-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) {
  .oit-price-item {
    padding: 30px;
  }
}
.oit-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) {
  .oit-price-title {
    font-size: 25px;
  }
}
@media (max-width: 767px) {
  .oit-price-title {
    font-size: 20px;
  }
}
.oit-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) {
  .oit-price-head {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-price-head-content {
    margin-right: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .oit-price-head-content {
    margin-right: 0;
    margin-bottom: 30px;
  }
}
.oit-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) {
  .oit-price-head-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .oit-price-head-content p {
    font-size: 16px;
  }
  .oit-price-head-content p br {
    display: none;
  }
}
.oit-price-head-btn .nav {
  padding: 6px;
  border-radius: 1000px;
  background-color: #0D0D0D;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.oit-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) {
  .oit-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) {
  .oit-price-head-btn .nav button {
    padding: 11px 20px;
  }
}
.oit-price-head-btn .nav button.active {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.oit-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) {
  .oit-price-list-item {
    font-size: 14px;
  }
}
.oit-price-list-item i {
  margin-right: 8px;
  transform: translateY(-1px);
}
.oit-price-list-label {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
.oit-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) {
  .oit-price-btn-box {
    flex-wrap: wrap;
    padding: 20px;
  }
}
.oit-price-range {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-price-range {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.oit-price-range i {
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
  .oit-price-avater-box {
    flex-wrap: wrap;
  }
  .oit-price-avater-box img {
    margin-bottom: 10px;
  }
}
.oit-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);
}
.oit-price-avater-box span::before {
  content: "";
  height: 15px;
  width: 15px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #15DB46;
}
.oit-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) {
  .oit-price-info {
    padding: 40px 30px;
  }
}
@media (max-width: 767px) {
  .oit-price-info {
    padding: 10px;
  }
}
.oit-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);
}
.oit-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);
}
.oit-price-info-desc a {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-price-info-desc a {
    font-size: 16px;
  }
}

/*----------------------------------------*/
/* faq 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) {
  .oit-faq-area {
    padding-top: 70px;
    padding-bottom: 50px;
  }
}
.oit-faq-style .oit-price-item {
  padding: 45px 50px;
  min-height: auto;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-faq-style .oit-price-item {
    padding: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-faq-style .oit-price-item {
    padding: 30px;
    width: 100%;
  }
}
.oit-faq-accordion-wrap .accordion-item {
  position: relative;
  margin-bottom: 25px;
  padding: 30px 40px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-item {
    padding: 30px;
  }
}
.oit-faq-accordion-wrap .accordion-button {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  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), (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-button {
    font-size: 20px;
  }
}
.oit-faq-accordion-wrap .accordion-button:not(.collapsed) .accordion-icon svg {
  transform: rotate(135deg);
}
.oit-faq-accordion-wrap .accordion-body {
  padding-right: 50px;
}
@media (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-body {
    padding-right: 0;
  }
}
.oit-faq-accordion-wrap .accordion-body p {
  padding-top: 10px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  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), (max-width: 767px) {
  .oit-faq-accordion-wrap .accordion-body p {
    font-size: 15px;
  }
}
.oit-faq-accordion-wrap .accordion-icon {
  position: absolute;
  top: -3px;
  right: 0;
}
.oit-faq-accordion-wrap .accordion-icon svg {
  transition: 0.3s;
}

/*----------------------------------------*/
/* text-slider 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) {
  .oit-text-slider-area {
    padding-top: 70px;
    padding-bottom: 60px;
  }
}
.oit-text-slider-item {
  gap: 40px;
  -webkit-animation: text-slide-animation 30s linear infinite;
  animation: text-slide-animation 30s linear infinite;
  transition: animation-duration 300ms;
}
.oit-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;
}
.oit-text-slider-item span {
  font-weight: 800;
  font-size: 100px;
  line-height: 1;
  color: #494949;
  white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .oit-text-slider-item span {
    font-size: 60px;
  }
}
.oit-text-slider-item span svg {
  margin-top: -10px;
  display: inline-block;
  animation: shape-rotate 10s linear infinite;
}
.oit-text-slider-item img {
  margin: 0 -20px;
}
.oit-text-slider-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-50%);
}

/*----------------------------------------*/
/*                                         \
\   1.7 DIGITAL AGENCY CSS HERE            \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.dg-hero-bdr {
  padding-left: 110px;
  border-left: 1px dashed var(--oit-clr-black);
  border-right: 1px dashed 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) {
  .dg-hero-bdr {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-hero-bdr {
    padding-left: 20px;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .dg-hero-bdr {
    padding-left: 20px;
    padding-top: 120px;
    padding-right: 20px;
    padding-bottom: 60px;
  }
}
.dg-hero-title {
  font-weight: 800;
  font-size: 200px;
  line-height: 0.95;
  text-transform: uppercase;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-hero-title {
    font-size: 145px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-hero-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-hero-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-hero-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-hero-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .dg-hero-title {
    font-size: 35px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-hero-title-box {
    margin-bottom: 20px;
  }
}
.dg-hero-title img {
  transform: translateY(-16px);
  border-radius: 1000px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-hero-title img {
    transform: translateY(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) {
  .dg-hero-title img {
    display: none;
  }
}
.dg-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  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), (max-width: 767px) {
  .dg-hero-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .dg-hero-content p {
    font-size: 16px;
  }
}
.dg-hero-img {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-hero-img {
    max-width: 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) {
  .dg-hero-img {
    border-radius: 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) {
  .dg-hero-img {
    position: static;
    max-width: 40%;
    border-radius: 10px;
    margin-bottom: 20px;
  }
}

/*----------------------------------------*/
/* about 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) {
  .dg-about-style {
    padding-top: 70px;
  }
}
@media (max-width: 767px) {
  .dg-about-style.oit-about-area {
    padding-bottom: 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) {
  .dg-about-style .oit-about-text {
    margin-bottom: 40px;
  }
}
.dg-about-style .oit-about-thumb {
  margin-right: 0;
  height: auto;
}
.dg-about-style .oit-about-content {
  height: auto;
}
@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-about-style .oit-about-content {
    margin-bottom: 40px;
  }
}
.dg-about-style .oit-about-content p {
  margin-bottom: 40px;
  padding-right: 120px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-about-style .oit-about-content 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-about-style .oit-about-content p {
    padding-right: 0;
    font-size: 16px;
  }
}
.dg-about-style .oit-funfact-item {
  padding: 0;
  border-right: 0;
}
@media (max-width: 767px) {
  .dg-about-style .oit-funfact-item {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .dg-about-style .oit-funfact-item span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-about-style .oit-funfact-title {
    font-size: 80px;
    margin-bottom: 12px;
  }
}
.dg-about-shape {
  position: absolute;
  top: 8%;
  right: 10%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-about-shape {
    right: 3%;
  }
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
.dg-service-style .oit-service-item {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-item {
    flex-wrap: wrap;
  }
}
.dg-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .dg-service-style .oit-service-content {
    padding-bottom: 30px;
  }
}
.dg-service-style .oit-service-content p {
  padding-bottom: 30px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dg-service-style .oit-service-content-wrap {
  padding: 20px 30px;
  padding-right: 62px;
}
@media (max-width: 767px) {
  .dg-service-style .oit-service-content-wrap {
    padding: 0;
  }
}
.dg-service-style .oit-service-category span {
  color: rgba(255, 255, 255, 0.7);
}
.dg-service-style .oit-service-thumb {
  margin-right: 0;
  border: 2px solid var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-thumb {
    margin-bottom: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-service-style .oit-service-thumb img {
    width: 100%;
  }
}

/*----------------------------------------*/
/* project 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) {
  .dg-project-style {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.dg-project-style .oit-project-content {
  background-color: transparent;
}
.dg-project-style .oit-project-thumb {
  border-radius: 14px;
  overflow: hidden;
}
.dg-project-style .oit-project-shape {
  top: -3%;
  right: -6%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-project-style .oit-project-shape {
    right: -7%;
    transform: scale(0.4);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-project-style .oit-section-title-box {
    margin-bottom: 60px;
  }
}
@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-project-style .oit-project-btn {
    margin-top: 0px;
  }
}

.portfolio-filter-card {
  position: relative;
  z-index: 20;
  padding: 34px;
  border-radius: 28px;
  background-color: #f5f5f5;
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 22px 70px rgba(13, 13, 13, 0.07);
}
.portfolio-filter-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.portfolio-filter-dropdown {
  position: relative;
}
.portfolio-filter-dropdown details {
  position: relative;
}
.portfolio-filter-dropdown summary {
  gap: 14px;
  width: 100%;
  height: 62px;
  cursor: pointer;
  display: flex;
  line-height: 1;
  padding: 0 20px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 18px;
  align-items: center;
  color: var(--oit-clr-black);
  justify-content: space-between;
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.12);
  transition: all 0.25s ease;
}
.portfolio-filter-dropdown summary::-webkit-details-marker {
  display: none;
}
.portfolio-filter-dropdown summary i {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--oit-clr-black);
  background-color: #f5f5f5;
  transition: all 0.25s ease;
}
.portfolio-filter-dropdown details[open] summary {
  border-color: var(--oit-clr-black);
  box-shadow: 0 12px 35px rgba(13, 13, 13, 0.08);
}
.portfolio-filter-dropdown details[open] summary i {
  color: var(--oit-clr-white);
  transform: rotate(180deg);
  background-color: var(--oit-clr-black);
}
.portfolio-filter-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 10px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 18px;
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.12);
  box-shadow: 0 24px 70px rgba(13, 13, 13, 0.16);
}
.portfolio-filter-option,
.portfolio-filter-empty {
  gap: 10px;
  display: flex;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 12px;
  align-items: center;
  color: rgba(13, 13, 13, 0.78);
}
.portfolio-filter-option {
  cursor: pointer;
}
.portfolio-filter-option:hover {
  color: var(--oit-clr-black);
  background-color: #f5f5f5;
}
.portfolio-filter-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--oit-clr-black);
}
.portfolio-filter-empty {
  color: rgba(13, 13, 13, 0.55);
}
.portfolio-filter-actions {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.portfolio-filter-reset {
  min-height: 56px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 30px;
  text-transform: uppercase;
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.16);
}
.portfolio-filter-reset:hover {
  color: var(--oit-clr-white);
  border-color: var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}

.docodex-language-switcher {
  align-items: center;
  gap: 4px;
  margin-right: 16px;
}

.docodex-language-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(13, 13, 13, 0.16);
  border-radius: 999px;
  color: #0d0d0d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.7);
}

.docodex-language-switcher a:hover,
.docodex-language-switcher a.is-active {
  color: #fff;
  border-color: #0d0d0d;
  background: #0d0d0d;
}

.docodex-language-switcher-offcanvas {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 18px;
}

.docodex-footer-language {
  display: block;
  max-width: 300px;
  margin: 0 0 26px;
}

.docodex-footer-language label {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docodex-footer-language-select-wrap {
  position: relative;
}

.docodex-footer-language-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #0d0d0d;
  border-bottom: 2px solid #0d0d0d;
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.docodex-footer-language select {
  width: 100%;
  min-height: 54px;
  padding: 0 52px 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  outline: 0;
  color: #0d0d0d;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.docodex-footer-language select:hover,
.docodex-footer-language select:focus {
  border-color: #fff;
  box-shadow: 0 14px 35px rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.portfolio-grid-wrap {
  padding: 0 28px;
}
.portfolio-grid-row {
  row-gap: 44px;
}
.portfolio-grid-meta {
  gap: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.portfolio-grid-meta span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.58);
}
.portfolio-grid-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: rgba(13, 13, 13, 0.72);
}
.portfolio-grid-item {
  height: 100%;
  min-height: 520px;
  isolation: isolate;
  background-color: #101216;
  box-shadow: 0 18px 45px rgba(13, 13, 13, 0.08);
}
.portfolio-grid-link,
.portfolio-grid-thumb {
  height: 100%;
  display: block;
}
.portfolio-grid-thumb {
  overflow: hidden;
  background-color: #101216;
}
.portfolio-grid-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.55s ease, filter 0.55s ease;
}
.portfolio-grid-item:hover .portfolio-grid-thumb img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.055);
}
.portfolio-grid-content {
  padding: 24px;
}
.portfolio-grid-content .st-project-title {
  max-width: 72%;
  font-size: clamp(18px, 1.25vw, 24px);
}
.portfolio-grid-content .st-project-content span {
  flex: 0 0 auto;
  font-size: 14px;
  opacity: 0.82;
}
.portfolio-grid-category {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
}
.portfolio-grid-category a {
  padding: 4px 13px;
  font-size: 12px;
}
.portfolio-grid-empty {
  padding: 56px;
  border-radius: 28px;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.portfolio-grid-empty span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.58);
}
.portfolio-grid-empty h3 {
  margin-bottom: 24px;
  color: var(--oit-clr-black);
}
@media (min-width: 1600px) {
  .portfolio-grid-item {
    min-height: 560px;
  }
}
@media (max-width: 1399px) {
  .portfolio-grid-wrap {
    padding: 0 20px;
  }
  .portfolio-grid-item {
    min-height: 470px;
  }
}
@media (max-width: 991px) {
  .portfolio-grid-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .portfolio-grid-item {
    min-height: 430px;
  }
}
@media (max-width: 575px) {
  .portfolio-grid-wrap {
    padding: 0 14px;
  }
  .portfolio-grid-item {
    min-height: 420px;
  }
  .portfolio-grid-content {
    padding: 20px;
  }
  .portfolio-grid-content .st-project-title {
    max-width: 76%;
  }
}
@media (max-width: 991px) {
  .portfolio-filter-card {
    padding: 24px;
  }
  .portfolio-filter-actions {
    justify-content: flex-start;
  }
}

.portfolio-detail-area {
  overflow: hidden;
}
.portfolio-detail-hero-card {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border-radius: 34px;
  color: var(--oit-clr-white);
  background:
    radial-gradient(circle at 18% 22%, rgba(104, 152, 255, 0.22), transparent 30%),
    linear-gradient(135deg, #101216 0%, #181f2c 52%, #0d0d0d 100%);
  box-shadow: 0 30px 80px rgba(13, 13, 13, 0.18);
}
.portfolio-detail-hero-card::before {
  position: absolute;
  content: "";
  width: 360px;
  height: 360px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.portfolio-detail-hero-copy {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  padding: 18px 10px 18px 0;
}
.portfolio-detail-eyebrow,
.portfolio-detail-section-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portfolio-detail-eyebrow {
  color: #d8e5ff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.portfolio-detail-section-kicker {
  color: #315ea8;
  background: rgba(49, 94, 168, 0.08);
  border: 1px solid rgba(49, 94, 168, 0.12);
}
.portfolio-detail-hero-copy h2 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(46px, 5vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--oit-clr-white);
}
.portfolio-detail-hero-copy p {
  max-width: 620px;
  margin-bottom: 34px;
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.76);
}
.portfolio-detail-action-row {
  gap: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.portfolio-detail-ghost-link,
.portfolio-detail-small-link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
.portfolio-detail-ghost-link {
  color: var(--oit-clr-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.portfolio-detail-ghost-link:hover {
  color: var(--oit-clr-black);
  background: var(--oit-clr-white);
}
.portfolio-detail-cover {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  border-radius: 28px;
  background-color: #222836;
}
.portfolio-detail-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.portfolio-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.portfolio-detail-meta-card {
  padding: 28px;
  border-radius: 24px;
  background: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 18px 40px rgba(13, 13, 13, 0.05);
}
.portfolio-detail-meta-card span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.48);
}
.portfolio-detail-meta-card strong {
  display: block;
  font-size: 22px;
  line-height: 1.15;
  color: var(--oit-clr-black);
}
.portfolio-detail-editorial-card,
.portfolio-detail-sidebar,
.portfolio-detail-gallery,
.portfolio-detail-related {
  padding: 38px;
  border-radius: 30px;
  background: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 20px 50px rgba(13, 13, 13, 0.06);
}
.portfolio-detail-section-title {
  margin-bottom: 24px;
  font-size: clamp(32px, 3.5vw, 58px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--oit-clr-black);
}
.portfolio-detail-rich-text p {
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.68);
}
.portfolio-detail-rich-text p:last-child {
  margin-bottom: 0;
}
.portfolio-detail-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.portfolio-detail-story-card {
  min-height: 270px;
  padding: 30px;
  border-radius: 26px;
  background: #f6f7fa;
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.portfolio-detail-story-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #315ea8;
  background: rgba(49, 94, 168, 0.1);
}
.portfolio-detail-story-card h3 {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--oit-clr-black);
}
.portfolio-detail-story-card p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(13, 13, 13, 0.66);
}
.portfolio-detail-story-card.is-blue {
  background: #edf4ff;
  border-color: rgba(49, 94, 168, 0.12);
}
.portfolio-detail-story-card.is-dark {
  color: var(--oit-clr-white);
  background: #101216;
}
.portfolio-detail-story-card.is-dark span {
  color: var(--oit-clr-white);
  background: rgba(255, 255, 255, 0.12);
}
.portfolio-detail-story-card.is-dark h3 {
  color: var(--oit-clr-white);
}
.portfolio-detail-story-card.is-dark p {
  color: rgba(255, 255, 255, 0.75);
}
.portfolio-detail-story-card.is-wide {
  grid-column: 1 / -1;
  min-height: auto;
  background:
    linear-gradient(135deg, rgba(49, 94, 168, 0.11), rgba(13, 13, 13, 0.03)),
    #f8fbff;
}
.portfolio-detail-sidebar {
  position: sticky;
  top: 110px;
}
.portfolio-detail-sidebar-block:not(:last-child) {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}
.portfolio-detail-pill-list {
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}
.portfolio-detail-pill-list a,
.portfolio-detail-pill-list span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--oit-clr-black);
  background: #f3f5f8;
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.portfolio-detail-pill-list a:hover {
  color: var(--oit-clr-white);
  background: var(--oit-clr-black);
}
.portfolio-detail-pill-list.is-muted span {
  color: #315ea8;
  background: rgba(49, 94, 168, 0.08);
  border-color: rgba(49, 94, 168, 0.1);
}
.portfolio-detail-sidebar-cta {
  padding: 28px;
  border-radius: 24px;
  color: var(--oit-clr-white);
  background: linear-gradient(135deg, #101216, #263654);
}
.portfolio-detail-sidebar-cta h3 {
  margin-bottom: 12px;
  font-size: 28px;
  color: var(--oit-clr-white);
}
.portfolio-detail-sidebar-cta p {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.72);
}
.portfolio-detail-sidebar-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--oit-clr-black);
  background: var(--oit-clr-white);
}
.portfolio-detail-gallery p {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.62);
}
.portfolio-detail-gallery-card {
  margin: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #f4f5f7;
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.portfolio-detail-gallery-thumb {
  height: 320px;
  overflow: hidden;
}
.portfolio-detail-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.portfolio-detail-gallery-card figcaption {
  padding: 16px 20px 18px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(13, 13, 13, 0.64);
}
.portfolio-detail-small-link {
  color: var(--oit-clr-black);
  background: #f2f4f7;
  border: 1px solid rgba(13, 13, 13, 0.1);
}
.portfolio-detail-small-link:hover {
  color: var(--oit-clr-white);
  background: var(--oit-clr-black);
}
.portfolio-related-card {
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #f6f7f9;
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.portfolio-related-thumb {
  display: block;
  height: 250px;
  overflow: hidden;
  background: #101216;
}
.portfolio-related-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.portfolio-related-card:hover .portfolio-related-thumb img {
  transform: scale(1.06);
}
.portfolio-related-content {
  padding: 24px;
}
.portfolio-related-content span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.48);
}
.portfolio-related-content h3 {
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.portfolio-detail-final-cta {
  gap: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px;
  border-radius: 32px;
  color: var(--oit-clr-white);
  background:
    radial-gradient(circle at 20% 20%, rgba(104, 152, 255, 0.18), transparent 28%),
    #101216;
}
.portfolio-detail-final-cta h2 {
  max-width: 800px;
  margin-bottom: 0;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--oit-clr-white);
}
.portfolio-detail-final-cta p {
  max-width: 720px;
  margin-top: 16px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 1199px) {
  .portfolio-detail-hero-copy {
    min-height: auto;
    padding: 0 0 30px;
  }
  .portfolio-detail-cover {
    min-height: 430px;
  }
  .portfolio-detail-sidebar {
    position: static;
    margin-top: 30px;
  }
}
@media (max-width: 991px) {
  .portfolio-detail-hero-card,
  .portfolio-detail-editorial-card,
  .portfolio-detail-sidebar,
  .portfolio-detail-gallery,
  .portfolio-detail-related,
  .portfolio-detail-final-cta {
    padding: 28px;
    border-radius: 26px;
  }
  .portfolio-detail-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portfolio-detail-story-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-detail-story-card.is-wide {
    grid-column: auto;
  }
  .portfolio-detail-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .portfolio-detail-hero-card,
  .portfolio-detail-editorial-card,
  .portfolio-detail-sidebar,
  .portfolio-detail-gallery,
  .portfolio-detail-related,
  .portfolio-detail-final-cta {
    padding: 22px;
    border-radius: 22px;
  }
  .portfolio-detail-hero-copy h2 {
    font-size: 42px;
  }
  .portfolio-detail-hero-copy p,
  .portfolio-detail-rich-text p {
    font-size: 16px;
  }
  .portfolio-detail-cover {
    min-height: 320px;
    border-radius: 20px;
  }
  .portfolio-detail-meta-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-detail-meta-card {
    padding: 22px;
  }
  .portfolio-detail-story-card {
    min-height: auto;
    padding: 24px;
  }
  .portfolio-detail-gallery-thumb,
  .portfolio-related-thumb {
    height: 240px;
  }
}

/*----------------------------------------*/
/* funfact 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) {
  .dg-funfact-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.dg-funfact-style .oit-award-title-box p {
  padding-right: 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) {
  .dg-funfact-style .oit-award-title-box p {
    padding-right: 0;
  }
}
.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;
}

/*----------------------------------------*/
/* bin-to-card 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) {
  .oit-bin-to-card-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.oit-bin-to-card-item {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  padding: 30px 30px 40px 30px;
}
.oit-bin-to-card-item.card-1 {
  min-height: 425px;
}
.oit-bin-to-card-item.card-3 {
  min-height: 300px;
}
.oit-bin-to-card-item p {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-white);
}
.oit-bin-to-card-item > span {
  font-weight: 500;
  font-size: 18px;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-item > span {
    font-size: 14px;
  }
}
.oit-bin-to-card-item > span i {
  font-weight: 700;
  font-size: 16px;
  font-style: normal;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
}
.oit-bin-to-card-item > span.style-2 {
  font-size: 16px;
}
.oit-bin-to-card-item > img {
  border-radius: 20px;
}
.oit-bin-to-card-item .ratting-text > span {
  font-size: 20px;
  line-height: 1.5;
}
.oit-bin-to-card-item .ratting-text > span:first-child {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  color: var(--oit-clr-black);
  font-family: var(--oit-ff-funnel);
}
.oit-bin-to-card-item.item-style-2 {
  padding-bottom: 0;
}
.oit-bin-to-card-item.item-style-3 {
  padding: 30px 45px 35px 50px;
}
.oit-bin-to-card-item.item-overlay {
  height: 100%;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}
.oit-bin-to-card-item.item-overlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.7);
}
.oit-bin-to-card-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-bin-to-card-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-title {
    font-size: 20px;
  }
}
.oit-bin-to-card-big-title {
  font-weight: 600;
  font-size: 45px;
  line-height: 1.2;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-bin-to-card-big-title {
    font-size: 35px;
  }
}
.oit-bin-to-card-list ul li {
  list-style-type: none;
}
.oit-bin-to-card-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.oit-bin-to-card-list ul li span {
  position: relative;
  padding-left: 30px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.oit-bin-to-card-list ul li span svg {
  position: absolute;
  top: 2px;
  left: 0;
}
.oit-bin-to-card-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.oit-bin-to-card-shape-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  z-index: -1;
}
.oit-bin-to-card-shape-3 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

/*----------------------------------------*/
/* 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) {
  .dg-team-area {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.dg-team-author-wrap {
  padding: 8px 20px;
  border-radius: 10px;
  background-color: var(--oit-clr-white);
}
.dg-team-author-info span {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(13, 13, 13, 0.6);
}
.dg-team-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 5px;
}
.dg-team-social a {
  height: 38px;
  width: 38px;
  line-height: 34px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  transition: 0.4s;
  color: var(--oit-clr-black);
  background-color: var(--oit-grey-1);
  outline: 1px solid rgba(13, 13, 13, 0.08);
}
.dg-team-social a:not(:last-child) {
  margin-right: 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-team-social a:not(:last-child) {
    margin-right: 2px;
  }
}
.dg-team-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.dg-team-thumb {
  overflow: hidden;
}
.dg-team-thumb img {
  transition: 1.3s all ease;
}
.dg-team-shape {
  position: absolute;
  right: 7%;
  top: -16%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .dg-team-shape {
    transform: scale(0.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) {
  .dg-team-btn {
    padding-top: 0;
  }
}

/*----------------------------------------*/
/* step 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) {
  .dg-step-area {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}
.dg-step-area.about-style .dg-step-item {
  background-color: var(--oit-grey-1);
}
.dg-step-item {
  border-radius: 10px;
  padding: 25px 30px 30px;
  background-color: var(--oit-clr-white);
}
.dg-step-item span {
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 125px;
  text-transform: uppercase;
}
.dg-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) {
  .dg-step-item p {
    font-size: 16px;
  }
}
.dg-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) {
  .dg-step-big-text {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .dg-step-big-text {
    font-size: 60px;
  }
}
.dg-step-title {
  font-size: 30px;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

/*----------------------------------------*/
/* 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) {
  .dg-testimonial-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.dg-testimonial-item {
  padding: 40px;
  min-height: 550px;
  border-radius: 10px;
  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) {
  .dg-testimonial-item {
    min-height: 500px;
  }
}
.dg-testimonial-item p.text-large {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  margin-right: 45px;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-testimonial-item p.text-large {
    font-size: 27px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .dg-testimonial-item p.text-large {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .dg-testimonial-item p.text-large {
    font-size: 20px;
    margin-right: 0;
  }
}
.dg-testimonial-item p.text-large.large-style-2 {
  margin-right: 0;
  margin-top: 35px;
}
.dg-testimonial-item p.text-small {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
}
@media (max-width: 767px) {
  .dg-testimonial-item p.text-small {
    font-size: 15px;
  }
}
.dg-testimonial-item p.text-small span {
  color: var(--oit-text-body);
}
.dg-testimonial-authour-title {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 3px;
}
.dg-testimonial-authour-info {
  font-weight: 400;
  font-size: 14px;
}
.dg-testimonial-shape {
  position: absolute;
  top: 7%;
  right: 6.5%;
  z-index: -1;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .dg-testimonial-shape {
    right: -3%;
    transform: scale(0.5);
  }
}
@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) {
  .dg-testimonial-shape {
    right: -3%;
    transform: scale(0.5);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .dg-testimonial-shape {
    top: 0;
    right: -3%;
    transform: scale(0.5);
  }
}
.dg-testimonial-active {
  margin-right: -555px;
}
@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-testimonial-active {
    margin-right: 0;
  }
}

/*----------------------------------------*/
/* contact 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) {
  .dg-contact-area {
    padding-top: 70px;
    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) {
  .dg-contact-area.faq-style .dg-contact-info-wrap {
    padding-bottom: 40px;
  }
}
.dg-contact-info span {
  font-weight: 600;
  font-size: 18px;
  display: block;
  margin-bottom: 7px;
  color: var(--oit-clr-white);
  text-transform: uppercase;
}
.dg-contact-info a {
  line-height: 1.63;
  color: rgba(255, 255, 255, 0.7);
}
.dg-contact-info-wrap {
  max-width: 590px;
}
@media (max-width: 767px) {
  .dg-contact-info-wrap {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
.dg-contact-social a {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--oit-clr-white);
  display: inline-block;
}
.dg-contact-social a:not(:last-child) {
  margin-right: 40px;
}
@media (max-width: 767px) {
  .dg-contact-social a:not(:last-child) {
    margin-right: 20px;
  }
}
.dg-contact-social a svg {
  height: 10px;
  width: 10px;
  margin-left: 3px;
  display: inline-block;
}
.dg-contact-form-box {
  padding: 50px;
  border-radius: 20px;
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .dg-contact-form-box {
    padding: 30px;
  }
}
.dg-contact-form-box label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.44;
  margin-bottom: 8px;
  text-transform: uppercase;
  color: var(--oit-clr-white);
}
.dg-contact-input-box input {
  border: none;
  padding: 0;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: var(--oit-clr-white);
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-input-box input::placeholder {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-input-box input:focus {
  border-color: var(--oit-clr-white);
}
.dg-contact-textarea-box label {
  margin-bottom: 20px;
}
.dg-contact-textarea-box textarea {
  padding: 0;
  height: 130px;
  resize: none;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-textarea-box textarea::placeholder {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-white);
}
.dg-contact-textarea-box textarea:focus::placeholder {
  opacity: 0;
}
.dg-contact-select {
  height: 50px;
  line-height: 50px;
}
.dg-contact-input-box select,
.dg-contact-select select {
  border: none;
  width: 100%;
  height: 50px;
  min-height: 50px;
  line-height: 50px;
  padding: 0 34px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 6.25L11 1.25' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dg-contact-input-box select:focus,
.dg-contact-select select:focus {
  color: var(--oit-clr-white);
  border-color: var(--oit-clr-white);
}
.dg-contact-input-box select option,
.dg-contact-select select option {
  color: var(--oit-clr-white);
  background-color: #0D0D0D;
}
.dg-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);
}
.dg-contact-select .nice-select.open,
.dg-contact-select .nice-select:focus {
  border-color: var(--oit-clr-white);
}
.dg-contact-select .nice-select::after {
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  right: 4px;
}
.dg-contact-select .nice-select span.current {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.dg-contact-select .nice-select .list {
  padding: 12px 0;
  margin-top: 10px;
  border-radius: 14px;
  text-align: left;
  overflow: hidden;
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.dg-contact-select .nice-select .option {
  min-height: 38px;
  line-height: 38px;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.82);
}
.dg-contact-select .nice-select .option:hover,
.dg-contact-select .nice-select .option.focus,
.dg-contact-select .nice-select .option.selected {
  color: var(--oit-clr-white);
  background-color: rgba(255, 255, 255, 0.08);
}
.dg-contact-shape-1 {
  position: absolute;
  bottom: 0;
  left: 16%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .dg-contact-shape-1 {
    left: 0;
  }
}
.dg-contact-shape-1 img {
  opacity: 0.3;
}
@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-contact-left {
    padding-top: 0;
  }
}

/*----------------------------------------*/
/*                                         \
|   1.6 DESIGN STUDIO CSS START HERE       \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.st-hero-bg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.st-hero-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.st-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.st-hero-title {
  font-weight: 700;
  font-size: 250px;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 250px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .st-hero-title {
    font-size: 225px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-hero-title {
    font-size: 195px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .st-hero-title {
    font-size: 170px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .st-hero-title {
    font-size: 130px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .st-hero-title {
    font-size: 90px;
    padding-bottom: 50px;
  }
}
.st-hero-title span {
  display: inline-block;
}
.st-hero-title span:first-child {
  background: url("../img/hero/hero-5-bg.ec9c377fb172.jpg");
  background-size: cover;
  color: var(--oit-clr-white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.st-hero-title span:last-child {
  background: url("../img/hero/herobg.71aa6208fc2d.webp");
  background-size: cover;
  color: var(--oit-clr-white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transform: translateY(220px);
  margin-left: 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) {
  .st-hero-title span:last-child {
    transform: translateY(0);
    margin-left: 0px;
  }
}
.st-hero-content p {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
  padding-right: 60px;
  letter-spacing: -0.01em;
  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) {
  .st-hero-content p {
    padding-right: 0;
    font-size: 16px;
  }
}
.st-hero-text-circle {
  position: absolute;
  cursor: pointer;
  bottom: 10%;
  right: 20%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-hero-text-circle {
    bottom: 2%;
    right: 5%;
    transform: scale(0.7);
  }
}
@media (max-width: 767px) {
  .st-hero-text-circle {
    bottom: 1%;
    right: 1%;
    transform: scale(0.6);
  }
}
.st-hero-text-circle img {
  animation: shape-rotate 20s linear infinite;
}
.st-hero-text-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*----------------------------------------*/
/* text slider css start here
/*----------------------------------------*/
.st-text-slider-stye .oit-text-slider-item span {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* 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) {
  .st-service-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.st-service-style .oit-project-shape {
  right: 11%;
}
.st-service-style .oit-service-item {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  padding-bottom: 50px;
  background-color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 600px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-service-style .oit-service-item {
    flex-wrap: wrap;
    padding-bottom: 45px;
  }
}
.st-service-style .oit-service-thumb {
  margin-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) {
  .st-service-style .oit-service-thumb {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  .st-service-style .oit-service-thumb img {
    width: 100%;
    object-fit: cover;
  }
}
.st-service-style .oit-service-content p {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 50px;
  padding-right: 100px;
  color: var(--oit-grey-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-service-style .oit-service-content p {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .st-service-style .oit-service-content p {
    font-size: 20px;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-service-style .oit-service-content p {
    font-size: 20px;
    padding-right: 0;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .st-service-style .oit-service-content p {
    font-size: 16px;
    padding-right: 0;
  }
  .st-service-style .oit-service-content p br {
    display: none;
  }
}
.st-service-style .oit-service-title {
  font-size: 80px;
  margin-bottom: 60px;
  display: flex;
  line-height: 1.1;
}
.st-service-style .oit-service-title span {
  font-weight: 400;
  font-size: 20px;
  margin-right: 30px;
  margin-top: 35px;
  display: inline-block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .st-service-style .oit-service-title {
    font-size: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .st-service-style .oit-service-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .st-service-style .oit-service-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .st-service-style .oit-service-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .st-service-style .oit-service-title {
    font-size: 40px;
  }
}
.st-service-cat span {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  border-radius: 100px;
  padding: 5px 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: inline-block;
  border: 1px solid rgba(93, 93, 93, 0.3);
}
@media (max-width: 767px) {
  .st-service-style .oit-service-content-wrap,
  .st-service-style .oit-service-content-wrap .row,
  .st-service-style .st-service-cat {
    max-width: 100%;
    min-width: 0;
  }
  .st-service-cat span {
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 14px;
    margin-bottom: 0;
    margin-right: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .st-service-style .oit-service-content-wrap .row > .col-5 {
    width: 100%;
  }
  .st-service-style .st-service-cat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-bottom: 28px;
    overflow: visible;
    padding-bottom: 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) {
  .st-project-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
.st-project-content span {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--oit-clr-white);
}
@media (max-width: 767px) {
  .st-project-content span {
    font-size: 14px;
  }
}
.st-project-content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 767px) {
  .st-project-content-wrap {
    padding: 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) {
  .st-project-subtitle-box {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-project-subtitle-box {
    margin-bottom: 15px;
  }
}
.st-project-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oit-clr-white);
}
.st-project-title a {
  color: inherit;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .st-project-title {
    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) {
  .st-project-title-box {
    margin-bottom: 60px;
    padding-left: 0;
  }
}
.st-project-category a {
  font-weight: 400;
  font-size: 16px;
  border-radius: 20px;
  padding: 3px 22px;
  display: inline-block;
  letter-spacing: -0.02em;
  backdrop-filter: blur(40px);
  color: var(--oit-clr-white);
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.st-project-category a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.st-project-item {
  overflow: hidden;
  border-radius: 15px;
}
.st-project-item::after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 58%);
}
.st-project-thumb {
  position: relative;
  z-index: 1;
}
.st-project-thumb.image-gsl .image-gsl-canvas {
  z-index: 2;
}
.st-project-thumb.image-gsl img {
  display: 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) {
  .st-project-btn {
    margin-top: 30px;
  }
}

/*----------------------------------------*/
/* team css start here
/*----------------------------------------*/
.st-team-style .dg-team-item {
  overflow: hidden;
  border-radius: 10px;
}
.st-team-style .dg-team-author-wrap {
  border-radius: 0;
  padding: 17px 25px;
  background-color: var(--oit-grey-1);
}

/*----------------------------------------*/
/* price 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) {
  .st-price-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
.st-price-item {
  padding: 10px;
  border-radius: 20px;
  background-color: var(--oit-grey-1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.st-price-item.active .st-price-btn .oit-btn-border {
  color: var(--oit-clr-white);
  border: 1px solid var(--oit-clr-black);
  background-color: var(--oit-clr-black);
}
.st-price-head {
  padding: 30px;
  border-radius: 20px;
  background-color: var(--oit-clr-white);
}
.st-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) {
  .st-price-head p br {
    display: none;
  }
}
.st-price-body {
  padding: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .st-price-body {
    padding: 20px;
  }
}
.st-price-badge {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}
.st-price-badge-wrap {
  line-height: 1;
  margin-bottom: 20px;
}
.st-price-value {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
.st-price-value span {
  margin-left: 7px;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}
.st-price-list {
  margin-bottom: 40px;
}
.st-price-list-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 35px;
  display: inline-block;
  text-transform: uppercase;
}
.st-price-list ul li {
  list-style-type: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oit-clr-black);
}
.st-price-list ul li::before {
  content: "";
  height: 8px;
  width: 8px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #FF5E00;
  transform: translateY(-2px);
}
.st-price-list ul li:not(:last-child) {
  margin-bottom: 25px;
}
.st-price-btn .oit-btn-border {
  padding: 13px 22px;
  border-radius: 10px;
  color: var(--oit-clr-black);
  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) {
  .st-price-tab-btn {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* testimonial css start here
/*----------------------------------------*/
.st-testimonial-style .dg-testimonial-item p.text-large {
  margin-right: 0;
}
.st-testimonial-style .dg-testimonial-item {
  border-radius: 0;
}
.st-testimonial-active {
  margin-right: -300px;
}
@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) {
  .st-testimonial-active {
    margin-right: 0;
  }
}
.st-testimonial-info {
  height: 100%;
  padding: 30px;
  border-radius: 20px 0 0 20px;
  background-color: var(--oit-clr-white);
}
.st-testimonial-info span {
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  display: block;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}
.st-testimonial-info p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.05em;
}
.st-testimonial-info img {
  margin-bottom: 20px;
}
.st-testimonial-ratting {
  font-weight: 700;
  font-size: 144px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--oit-clr-black);
}
.st-testimonial-ratting-icon {
  margin-bottom: 35px;
}
.st-testimonial-ratting-icon i {
  color: #FF5E00;
  margin: 0 2px;
  display: inline-block;
}

/*----------------------------------------*/
/*                                         \
\   1.8 SOLO DESIGN AGENCY CSS START HERE  \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.sd-hero-bg {
  overflow: hidden;
  padding-top: 300px;
  padding-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) {
  .sd-hero-bg {
    padding-top: 230px;
  }
}
@media (max-width: 767px) {
  .sd-hero-bg {
    padding-top: 180px;
  }
}
.sd-hero-bg::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.sd-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sd-hero-video video {
  object-fit: cover;
  background-size: covar;
}
.sd-hero-title {
  font-size: 320px;
  line-height: 0.8;
  margin-bottom: 220px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-hero-title {
    font-size: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sd-hero-title {
    font-size: 180px;
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sd-hero-title {
    font-size: 150px;
    margin-bottom: 100px;
  }
}
@media (max-width: 767px) {
  .sd-hero-title {
    font-size: 70px;
    margin-bottom: 100px;
  }
}
.sd-hero-info span, .sd-hero-info a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: var(--oit-clr-white);
}
.sd-hero-info img {
  flex: 0 0 auto;
  margin-right: 20px;
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.sd-about-mission-wrap {
  padding: 35px 30px;
  min-width: 900px;
  border-radius: 10px;
  display: inline-block;
  background: var(--oit-clr-white);
  box-shadow: 0 4px 50px 0 rgba(13, 13, 13, 0.05);
}
@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) {
  .sd-about-mission-wrap {
    min-width: auto;
  }
}
.sd-about-mission-wrap .nav-tab {
  padding-bottom: 20px;
}
.sd-about-mission-wrap .nav-tab li button {
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(73, 73, 73, 0.8);
}
.sd-about-mission-wrap .nav-tab li button.active {
  color: var(--oit-clr-black);
}
.sd-about-mission-wrap .nav-tab li:not(:last-child) {
  margin-right: 50px;
}
@media (max-width: 767px) {
  .sd-about-mission-wrap .nav-tab li:not(:last-child) {
    margin-right: 20px;
  }
}
.sd-about-mission-wrap .tab-content p {
  margin-bottom: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: rgba(73, 73, 73, 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) {
  .sd-about-mission-wrap .tab-content p br {
    display: none;
  }
}

/*----------------------------------------*/
/* 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) {
  .sd-service-style.oit-service-area {
    padding-top: 70px;
    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) {
  .sd-service-style .oit-section-title-box {
    margin-bottom: 40px;
  }
}
.sd-service-style .oit-service-thumb {
  margin-right: 0;
  border: none;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .sd-service-style .oit-service-thumb img {
    width: 100%;
  }
}
.sd-service-style .oit-service-content-wrap {
  padding-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-content-wrap {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sd-service-style .oit-service-item {
    padding: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-item {
    flex-wrap: wrap;
    padding: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-service-style .oit-service-content {
    margin-bottom: 30px;
  }
}
.sd-service-style .oit-service-content p {
  margin-bottom: 50px;
}
.sd-service-style .oit-service-category span {
  color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* 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) {
  .sd-project-area {
    padding-top: 70px;
  }
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.sd-funfact-title {
  font-weight: 400;
  font-size: 60px;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--oit-clr-black);
}
.sd-funfact-title i {
  font-style: normal;
}
.sd-funfact-card {
  position: relative;
  padding: 40px;
  z-index: 1;
  border-radius: 10px;
}
.sd-funfact-card.card-1 {
  min-height: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-1 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-2 {
  min-height: 540px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sd-funfact-card.card-2 {
    min-height: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-funfact-card.card-2 {
    min-height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-2 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-3 {
  min-height: 260px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-3 {
    min-height: 300px;
  }
}
.sd-funfact-card.card-4 {
  min-height: 400px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sd-funfact-card.card-4 {
    min-height: 300px;
  }
}
.sd-funfact-card span {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  text-align: end;
  text-transform: uppercase;
}
@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) {
  .sd-funfact-card span {
    font-size: 16px;
  }
}
.sd-funfact-card.sd-content-white span {
  color: var(--oit-clr-white);
}
.sd-funfact-card.sd-content-white .sd-funfact-title {
  color: var(--oit-clr-white);
}
.sd-funfact-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.sd-funfact-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.sd-funfact-shape-3 {
  position: absolute;
  top: 0%;
  right: 14%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .sd-funfact-shape-3 {
    transform: scale(0.7);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sd-funfact-shape-3 {
    top: -5%;
    transform: scale(0.5);
  }
}

/*----------------------------------------*/
/* choose css start here
/*----------------------------------------*/
.sd-choose-top-content p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.sd-choose-card {
  border-radius: 10px;
  padding: 10px;
  background-color: var(--oit-clr-white);
}
.sd-choose-card-icon {
  margin-right: 10px;
  color: var(--oit-clr-black);
}
.sd-choose-card-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  color: var(--oit-clr-black);
}
.sd-choose-card-inner {
  border-radius: 10px;
  border: 1px solid var(--oit-clr-black);
}
.sd-choose-card-head {
  padding: 40px;
  border-bottom: 1px solid var(--oit-clr-black);
}
.sd-choose-card-body {
  padding: 50px 40px 35px 40px;
}
.sd-choose-card-body p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  letter-spacing: -0.04em;
}

/*----------------------------------------*/
/* 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) {
  .sd-team-area .oit-section-title-box {
    margin-bottom: 40px;
  }
}
.sd-team-area .shape-1 {
  position: absolute;
  top: 6%;
  right: 13%;
}
.sd-team-row-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-row-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-row-item .row [class*=col]:not(:last-child) .sd-team-item {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.sd-team-thumb {
  overflow: hidden;
  flex: 0 0 auto;
  margin-right: 25px;
}
.sd-team-thumb img {
  border-radius: 10px;
}
.sd-team-content span {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.sd-team-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--oit-clr-black);
}
.sd-team-item {
  height: 100%;
  padding: 30px 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) {
  .sd-team-item {
    padding: 15px 0;
  }
}
.sd-team-social a {
  height: 50px;
  width: 50px;
  line-height: 46px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  color: var(--oit-clr-black);
  background-color: rgba(13, 13, 13, 0.08);
}
.sd-team-social a:hover {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/*                                         \
\   1.4 BRAND AGENCY CSS START HERE        \          
|                                          \
/*----------------------------------------*/
/*----------------------------------------*/
/* hero css start here
/*----------------------------------------*/
.oit-hero-5-bg {
  padding-top: 260px;
  padding-bottom: 110px;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-bg {
    padding-top: 200px;
    padding-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-bg {
    padding-top: 160px;
    padding-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-bg {
    padding-top: 120px;
    padding-bottom: 30px;
  }
}
.oit-hero-5-title {
  font-size: 195px;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .oit-hero-5-title {
    font-size: 175px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .oit-hero-5-title {
    font-size: 155px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oit-hero-5-title {
    font-size: 135px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-title {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-title {
    font-size: 70px;
  }
}
.oit-hero-5-title.stroke-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--oit-clr-white);
}
.oit-hero-5-glob {
  margin-top: -240px;
  display: inline-block;
  height: 720px;
  width: 720px;
  border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .oit-hero-5-glob {
    height: 500px;
    width: 500px;
    margin-top: -150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-glob {
    height: 400px;
    width: 400px;
    margin-top: -100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-glob {
    height: 360px;
    width: 360px;
    margin-top: -100px;
  }
}
.oit-hero-5-glob::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0) 75%);
}
.oit-hero-5-glob img {
  animation: shape-rotate 60s linear infinite;
}
.oit-hero-5-bottom {
  margin-top: -300px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oit-hero-5-bottom {
    margin-top: -100px;
  }
}
@media (max-width: 767px) {
  .oit-hero-5-bottom {
    margin-top: 0px;
  }
}

/*----------------------------------------*/
/* about css start here
/*----------------------------------------*/
.oit-about-text.fs-120 p {
  font-weight: 500;
  font-size: 120px;
  line-height: 1;
  color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* about vision css start here
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ba-about-area {
    padding-top: 70px;
    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) {
  .ba-about-area {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .ba-about-area .oit-section-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-area .oit-section-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ba-about-area .oit-section-title {
    font-size: 55px;
  }
}
@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) {
  .ba-about-area .dg-about-content-wrap {
    padding-left: 0;
  }
}
.ba-about-vision-wrap .row [class*=col-]:not(:last-child) .ba-about-vision-item {
  border-right: 1px solid #d9d9d9;
}
.ba-about-vision-title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 30px;
  color: var(--oit-clr-black);
}
.ba-about-vision-inner {
  padding-left: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-vision-inner {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-vision-inner {
    padding-left: 0;
  }
}
.ba-about-vision-item {
  height: 100%;
}
.ba-about-vision-item p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  padding-right: 85px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-about-vision-item p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ba-about-vision-item p {
    font-size: 16px;
    padding-right: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-about-vision-item p {
    font-size: 16px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ba-about-vision-item p {
    padding-right: 0;
  }
}
.ba-about-vision-item p span {
  color: var(--oit-clr-black);
}
.ba-about-vision-item ul li {
  list-style-type: none;
  margin-bottom: 15px;
}
.ba-about-vision-item ul li span {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: #494949;
  letter-spacing: -0.02em;
}
.ba-about-vision-item ul li span::before {
  content: "";
  height: 7px;
  width: 7px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-2px);
  background-color: var(--oit-clr-black);
}

/*----------------------------------------*/
/* funfact css start here
/*----------------------------------------*/
.ba-funfact-style .sd-funfact-card {
  padding: 30px;
  min-height: 300px;
}
.ba-funfact-style .sd-funfact-shape-3 {
  top: -25%;
  right: 16%;
}
.ba-funfact-style .sd-funfact-title {
  margin-bottom: 0;
}
@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), (max-width: 767px) {
  .ba-funfact-style .sd-funfact-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ba-funfact-style .sd-funfact-title {
    font-size: 55px;
  }
}
.ba-funfact-style .sd-funfact-card.sd-content-white p {
  color: var(--oit-clr-white);
}
.ba-funfact-content p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  color: #5d5d5d;
  margin-bottom: 0;
  flex: 0 0 auto;
}

/*----------------------------------------*/
/* service css start here
/*----------------------------------------*/
.ba-service-style .oit-service-content-wrap {
  padding: 20px 30px;
  padding-right: 45px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-service-style .oit-service-content-wrap {
    padding: 5px 8px;
    padding-right: 20px;
  }
}
@media (max-width: 767px) {
  .ba-service-style .oit-service-content-wrap {
    padding: 0;
  }
}
.ba-service-style .oit-service-item {
  margin: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ba-service-style .oit-project-shape {
    top: 34px;
  }
}
.ba-service-tab-btn {
  margin-right: 50px;
  border-top: 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) {
  .ba-service-tab-btn {
    margin-right: 0;
  }
}
.ba-service-tab-btn ul {
  flex-direction: column;
}
.ba-service-tab-btn ul li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 45px;
  width: 100%;
  line-height: 1;
  padding: 35px 10px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .ba-service-tab-btn ul li button {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .ba-service-tab-btn ul li button {
    font-size: 30px;
  }
}
.ba-service-tab-btn ul li button.active {
  color: var(--oit-clr-white);
}

/*----------------------------------------*/
/* career css start here
/*----------------------------------------*/
.career-details-meta span {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .career-details-meta span {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career-details-meta span {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career-details-meta span {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-meta span {
    font-size: 15px;
  }
}
.career-details-meta strong {
  font-weight: 500;
  font-size: 30px;
  margin-left: 20px;
  line-height: 1.5;
  color: var(--oit-clr-black);
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
  .career-details-meta strong {
    font-size: 25px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .career-details-meta strong {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .career-details-meta strong {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .career-details-meta strong {
    font-size: 15px;
  }
}
.career-details-meta:not(:last-child) {
  padding-right: 40px;
  margin-right: 40px;
  line-height: 1;
  border-right: 1px solid rgba(73, 73, 73, 0.5);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .career-details-meta:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .career-details-meta:not(:last-child) {
    margin-bottom: 15px;
    border: 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) {
  .career-details-meta-box {
    flex-wrap: wrap;
    align-items: start !important;
    justify-content: start !important;
    margin-bottom: 50px;
  }
}
.career-details-list li {
  list-style-type: none;
  padding-left: 30px;
  position: relative;
}
.career-details-list li:not(:last-child) {
  margin-bottom: 25px;
}
.career-details-list li span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  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) {
  .career-details-list li span {
    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) {
  .career-details-list li span {
    font-size: 16px;
  }
}
.career-details-list li span svg, .career-details-list li span i {
  position: absolute;
  top: 0;
  left: 0;
}
.career-details-deadline span {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
}
@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-details-deadline span {
    font-size: 18px;
  }
}
.career-details-deadline strong {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.33;
  margin-right: 15px;
  display: inline-block;
  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), (max-width: 767px) {
  .career-details-deadline strong {
    font-size: 18px;
  }
}
.career-details-area .postbox-dsc p {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 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) {
  .career-details-area .postbox-dsc p {
    font-size: 16px;
  }
}

.career-item {
  padding: 20px 30px 30px 30px;
  border-radius: 10px;
  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-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;
}
.career-area .shape-1 {
  position: absolute;
  top: 5%;
  right: 20%;
}

.dg-step-area.career-style .shape {
  position: absolute;
  top: -10%;
  right: -8%;
}
@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.career-style .shape {
    display: none;
  }
}
.dg-step-area.career-style .dg-step-item {
  padding: 35px 40px 38px 40px;
}
.dg-step-area.career-style .dg-step-item > span {
  margin-bottom: 25px;
}
.dg-step-area.career-style .dg-step-item p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: -0.06em;
}
.dg-step-area.career-style .dg-step-item .dg-step-title {
  font-weight: 500;
  line-height: 1.47;
  margin-bottom: 23px;
  letter-spacing: -0.01em;
}

.dg-contact-area.faq-style .dg-contact-info span {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-info a {
  color: rgba(13, 13, 13, 0.7);
}
@media (max-width: 767px) {
  .dg-contact-area.faq-style .dg-contact-info a br {
    display: none;
  }
}
.dg-contact-area.faq-style .dg-contact-social a {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-form-box {
  border: none;
  box-shadow: none;
  backdrop-filter: blur(10px);
  background: rgba(237, 237, 237, 0.7);
}
.dg-contact-area.faq-style .dg-contact-form-box label {
  color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-input-box input {
  color: var(--oit-clr-black);
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-input-box select,
.dg-contact-area.faq-style .dg-contact-select select {
  color: rgba(13, 13, 13, 0.8);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 6.25L11 1.25' fill='none' stroke='rgba(13,13,13,0.85)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-input-box select:focus,
.dg-contact-area.faq-style .dg-contact-select select:focus {
  color: var(--oit-clr-black);
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-input-box select option,
.dg-contact-area.faq-style .dg-contact-select select option {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.dg-contact-area.faq-style .dg-contact-input-box input::placeholder {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-input-box input:focus {
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea {
  background-color: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea::placeholder {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-textarea-box textarea:focus {
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select {
  background-color: transparent;
  color: rgba(13, 13, 13, 0.8);
  border-bottom: 1px solid rgba(13, 13, 13, 0.2);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select.open,
.dg-contact-area.faq-style .dg-contact-select .nice-select:focus {
  border-color: var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select span.current {
  color: rgba(13, 13, 13, 0.8);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select::after {
  border-bottom: 2px solid var(--oit-clr-black);
  border-right: 2px solid var(--oit-clr-black);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select .list {
  background-color: var(--oit-clr-white);
  border: 1px solid rgba(13, 13, 13, 0.12);
  box-shadow: 0 18px 45px rgba(13, 13, 13, 0.14);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select .option {
  color: rgba(13, 13, 13, 0.78);
}
.dg-contact-area.faq-style .dg-contact-select .nice-select .option:hover,
.dg-contact-area.faq-style .dg-contact-select .nice-select .option.focus,
.dg-contact-area.faq-style .dg-contact-select .nice-select .option.selected {
  color: var(--oit-clr-black);
  background-color: rgba(13, 13, 13, 0.06);
}
.dg-contact-area.faq-style .dg-contact-shape-1 {
  position: absolute;
  bottom: auto;
  top: -9%;
  left: auto;
  right: -7%;
  opacity: 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) {
  .dg-contact-area.faq-style .dg-contact-shape-1 {
    display: none;
  }
}
.dg-contact-area.faq-style .dg-contact-shape-1 img {
  opacity: 1;
}

/*----------------------------------------*/
/*  7.7 error agency css here
/*----------------------------------------*/
.error-ptb {
  padding-top: 170px;
  padding-bottom: 120px;
}
.error-title {
  font-weight: 700;
  font-size: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-title {
    font-size: 50px;
  }
}
@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;
  }
}

/*----------------------------------------*/
/*  5.4 project details css
/*----------------------------------------*/
@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 {
    padding: 70px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area .project-details-thumb-box.mb-110 {
    margin-bottom: 50px !important;
  }
}
.project-details-area .postbox-dsc p {
  font-size: 30px;
  line-height: 1.33;
  letter-spacing: 0;
  margin-right: 70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 25px;
  }
}
@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) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .project-details-area .postbox-dsc p {
    margin-right: 0;
    font-size: 16px;
  }
}
.project-details-area .career-details-list li {
  padding-left: 35px;
}
.project-details-area .career-details-list li:not(:last-child) {
  margin-bottom: 17px;
}
.project-details-area .career-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 .career-details-list li span {
    font-size: 16px;
  }
}
.project-details-area .career-details-list li span svg, .project-details-area .career-details-list li span i {
  top: 8px;
}
.project-details-area .career-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), 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 .career-details-list li p {
    font-size: 15px;
  }
}
.project-details-area.style-2 .career-details-list li span {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-details-area.style-2 .career-details-list li span {
    font-size: 15px;
  }
}
.project-details-area.style-2 .career-details-list li span svg, .project-details-area.style-2 .career-details-list li span i {
  top: 0;
}
.project-details-area.style-2 .sd-funfact-card {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}
@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.style-2 .sd-funfact-card.card-1 {
    min-height: 200px;
  }
}
.project-details-area.style-2 .sd-funfact-card span {
  text-align: start;
}
.project-details-thumb img {
  border-radius: 10px;
}
.project-details-subtitle {
  display: block;
  margin-bottom: 55px;
}
.project-details-author-list ul li {
  display: flex;
  padding: 26px 0;
  align-items: center;
  list-style-type: none;
  justify-content: space-between;
  border-bottom: 1px solid var(--oit-grey-2);
}
.project-details-author-list ul li:first-child {
  border-top: 1px solid var(--oit-grey-2);
}
.project-details-author-list ul li span {
  font-weight: 500;
  font-size: 30px;
  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) {
  .project-details-author-list ul li span {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .project-details-author-list ul li span {
    font-size: 15px;
  }
}

.project-slide-active {
  margin: 0 -480px;
}
@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) {
  .project-slide-active {
    margin: 0;
  }
}
.project-slide-style .oit-project-title {
  font-weight: 600;
  font-size: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-category span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-slide-style .oit-project-category span:first-child::after {
    top: 7px;
    height: 5px;
    width: 5px;
  }
}
.project-slide-style .oit-project-content {
  background-color: var(--oit-clr-white);
}
.project-slide-style .oit-project-item {
  background-color: var(--oit-clr-white);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .oit-project-area.p-relative.mt-50.pt-150.pb-150 {
    padding: 70px 0 !important;
  }
}

/*----------------------------------------*/
/*  5.4 service details css
/*----------------------------------------*/
.service-package-compare {
  overflow: visible;
  padding: 46px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 30px;
  background: #f5f5f5;
}
.service-package-compare-top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 36px;
}
.service-package-compare-note {
  max-width: 560px;
  margin-left: auto;
}
.service-package-compare-note p {
  margin: 0;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--oit-text-body);
}
.service-package-compare-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 24px;
  background: var(--oit-clr-white);
  box-shadow: 0 24px 55px rgba(13, 13, 13, 0.05);
  scrollbar-color: rgba(13, 13, 13, 0.28) rgba(13, 13, 13, 0.06);
  scrollbar-width: thin;
}
.service-package-compare-table-track {
  display: block;
  min-width: max-content;
}
.service-package-compare-table-wrap::-webkit-scrollbar {
  height: 10px;
}
.service-package-compare-table-wrap::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.06);
}
.service-package-compare-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.32);
}
.service-package-compare-table-wrap:focus-visible {
  outline: 2px solid var(--oit-clr-black);
  outline-offset: 4px;
}
.service-package-compare-table-wrap.is-dragging,
.service-detail-feature-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.service-package-compare-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.service-package-compare-table th,
.service-package-compare-table td {
  width: 260px;
  min-width: 260px;
  padding: 24px 26px;
  border: 0;
  border-right: 1px solid rgba(13, 13, 13, 0.08);
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  vertical-align: top;
}
.service-package-compare-table thead th:first-child,
.service-package-compare-table tbody th {
  width: 230px;
  min-width: 230px;
}
.service-package-compare-table th:last-child,
.service-package-compare-table td:last-child {
  border-right: 0;
}
.service-package-compare-table tbody tr:last-child th,
.service-package-compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.service-package-compare-table thead th {
  background: #101216;
  color: var(--oit-clr-white);
}
.service-package-compare-table thead th:first-child {
  border-top-left-radius: 24px;
}
.service-package-compare-table thead th:last-child {
  border-top-right-radius: 24px;
}
.service-package-compare-table tbody tr {
  transition: background-color 0.25s ease;
}
.service-package-compare-table tbody tr:hover {
  background-color: #fafafa;
}
.service-package-compare-table tbody th {
  background: #fbfbfb;
}
.service-package-compare-label,
.service-package-compare-table tbody th span {
  display: block;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--oit-clr-black);
}
.service-package-compare-table thead .service-package-compare-label {
  color: rgba(255, 255, 255, 0.72);
}
.service-package-compare-table td span {
  display: block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--oit-text-body);
}
.service-package-compare-plan {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.service-package-compare-plan small {
  display: inline-flex;
  width: fit-content;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.service-package-compare-plan strong {
  display: block;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: var(--oit-clr-white);
}
.service-package-compare-plan em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}
.service-package-compare-plan.is-featured small {
  border-color: var(--oit-clr-white);
  background: var(--oit-clr-white);
  color: var(--oit-clr-black);
}
.service-package-compare-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  padding: 0 4px;
}
.service-package-compare-footer span {
  font-weight: 500;
  font-size: 16px;
  color: var(--oit-text-body);
}
.service-package-compare-footer a {
  font-weight: 600;
  color: var(--oit-clr-black);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-package-compare {
    padding: 38px;
  }
  .service-package-compare-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-package-compare-note {
    max-width: 100%;
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-package-compare {
    padding: 28px;
    border-radius: 22px;
  }
  .service-package-compare-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-package-compare-note {
    max-width: 100%;
    margin-left: 0;
  }
  .service-package-compare-note p {
    font-size: 15px;
  }
  .service-package-compare-table-wrap {
    margin-right: -1px;
    cursor: grab;
  }
  .service-package-compare-table {
    min-width: max-content;
  }
  .service-package-compare-table th,
  .service-package-compare-table td {
    width: 235px;
    min-width: 235px;
    padding: 20px;
  }
  .service-package-compare-table thead th:first-child,
  .service-package-compare-table tbody th {
    width: 190px;
    min-width: 190px;
  }
  .service-package-compare-plan {
    min-height: 118px;
  }
  .service-package-compare-plan strong {
    font-size: 21px;
  }
  .service-package-compare-label,
  .service-package-compare-table tbody th span {
    font-size: 16px;
  }
  .service-package-compare-table td span {
    font-size: 14px;
  }
  .service-package-compare-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.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-area .postbox-dsc p:last-child {
  margin-bottom: 0;
}

.service-details-content {
  overflow: visible;
}

.service-details-content .row {
  overflow: visible;
  align-items: stretch;
}

.service-details-content .col-lg-4 {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.service-detail-story {
  padding: 55px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 28px;
  background: var(--oit-clr-white);
  box-shadow: 0 28px 70px rgba(13, 13, 13, 0.06);
}
.service-detail-card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.58);
}
.service-detail-card-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.service-detail-snapshot {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 24px;
  background: #101216;
  color: var(--oit-clr-white);
}
.service-detail-snapshot::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -55px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}
.service-detail-snapshot .service-detail-card-label {
  color: rgba(255, 255, 255, 0.64);
}
.service-detail-snapshot h3 {
  position: relative;
  margin-bottom: 26px;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.04em;
  color: var(--oit-clr-white);
}
.service-detail-snapshot ul,
.service-detail-fit-card ul {
  margin: 0;
  padding: 0;
}
.service-detail-snapshot li {
  position: relative;
  list-style: none;
  padding-left: 22px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.service-detail-snapshot li:not(:last-child) {
  margin-bottom: 14px;
}
.service-detail-snapshot li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oit-clr-white);
}
.service-detail-panel {
  position: relative;
  overflow: hidden;
  padding: 44px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 26px;
  background: var(--oit-clr-white);
}
.service-detail-panel h3 {
  max-width: 520px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: var(--oit-clr-black);
}
.service-detail-panel .postbox-dsc p {
  font-size: 17px;
  line-height: 1.65;
}
.service-detail-panel-dark {
  background: #0d0d0d;
}
.service-detail-panel-dark h3,
.service-detail-panel-dark .service-detail-index {
  color: var(--oit-clr-white);
}
.service-detail-panel-dark .service-detail-card-label,
.service-detail-panel-dark .postbox-dsc p {
  color: rgba(255, 255, 255, 0.68);
}
.service-detail-index {
  position: absolute;
  top: 30px;
  right: 34px;
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgba(13, 13, 13, 0.08);
}
.service-detail-feature-wall {
  padding: 48px;
  border-radius: 30px;
  background: #ededed;
}
.service-detail-feature-wall .postbox-dsc p {
  font-size: 17px;
  line-height: 1.62;
}
.service-detail-feature-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-detail-feature-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.service-detail-feature-scroll:focus-visible {
  outline: 2px solid var(--oit-clr-black);
  outline-offset: 6px;
}
.service-detail-feature-item {
  min-height: 118px;
  padding: 24px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 20px;
  background: var(--oit-clr-white);
  transition: all 0.35s ease;
}
.service-detail-feature-item:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 13, 13, 0.18);
  box-shadow: 0 18px 44px rgba(13, 13, 13, 0.08);
}
.service-detail-feature-item span {
  display: inline-block;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 13px;
  color: rgba(13, 13, 13, 0.42);
}
.service-detail-feature-item h3 {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.04em;
  color: var(--oit-clr-black);
}
.service-detail-fit-card {
  padding: 36px 32px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 24px;
  background: var(--oit-clr-white);
}
.service-detail-fit-card-muted {
  background: #fafafa;
}
.service-detail-fit-card h2 {
  margin-bottom: 28px;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -0.05em;
  color: var(--oit-clr-black);
}
.service-detail-fit-card li {
  position: relative;
  list-style: none;
  padding-left: 26px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.56;
  color: var(--oit-text-body);
}
.service-detail-fit-card li:not(:last-child) {
  margin-bottom: 16px;
}
.service-detail-fit-card li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--oit-clr-black);
  border-radius: 50%;
}
.service-detail-editorial-row {
  position: relative;
  padding: 42px 0;
  border-top: 1px solid rgba(13, 13, 13, 0.1);
}
.service-detail-editorial-row:last-child {
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}
.service-detail-editorial-row.is-reversed .row {
  flex-direction: row-reverse;
}
.service-detail-editorial-row.is-reversed .postbox-title {
  padding-left: 40px;
}
.service-detail-editorial-number {
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.42);
}
.service-detail-editorial-row .postbox-title {
  margin-bottom: 0;
}
.service-detail-editorial-row .postbox-dsc p {
  font-size: 17px;
  line-height: 1.68;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-detail-story,
  .service-detail-feature-wall {
    padding: 42px;
  }
  .service-detail-panel {
    padding: 38px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-detail-story,
  .service-detail-feature-wall,
  .service-detail-panel,
  .service-detail-fit-card,
  .service-detail-snapshot {
    padding: 28px;
    border-radius: 20px;
  }
  .service-detail-snapshot {
    margin-top: 30px;
  }
  .service-detail-panel h3,
  .service-detail-fit-card h2,
  .service-detail-snapshot h3 {
    font-size: 24px;
  }
  .service-detail-index {
    top: 24px;
    right: 24px;
    font-size: 46px;
  }
  .service-detail-feature-scroll {
    display: block;
    max-width: 100%;
    margin-right: -28px;
    margin-left: -28px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 28px;
    padding-bottom: 12px;
    padding-left: 28px;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-color: rgba(13, 13, 13, 0.28) rgba(13, 13, 13, 0.06);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .service-detail-feature-scroll::-webkit-scrollbar {
    height: 10px;
  }
  .service-detail-feature-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(13, 13, 13, 0.06);
  }
  .service-detail-feature-scroll::-webkit-scrollbar-thumb {
    border: 2px solid rgba(237, 237, 237, 0.95);
    border-radius: 999px;
    background: rgba(13, 13, 13, 0.32);
  }
  .service-detail-feature-track {
    display: flex;
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .service-detail-feature-pane {
    flex: 0 0 min(82vw, 360px);
    width: min(82vw, 360px);
    max-width: min(82vw, 360px);
  }
  .service-detail-feature-item {
    min-height: 118px;
  }
  .service-detail-editorial-row.is-reversed .row {
    flex-direction: column;
  }
  .service-detail-editorial-row.is-reversed .postbox-title {
    padding-left: 0;
  }
  .service-detail-editorial-row .postbox-title {
    margin-bottom: 20px;
  }
}

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

/*----------------------------------------*/
/*  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-style .oit-price-item {
  border: none;
  width: 555px;
  min-height: auto;
  background-color: var(--oit-clr-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact-style .oit-price-item {
    width: auto;
  }
}
@media (max-width: 767px) {
  .contact-style .oit-price-item {
    width: auto;
  }
}
.contact-style .oit-price-title {
  color: var(--oit-clr-black);
}
.contact-style .oit-price-avater-box img {
  height: 50px;
}
.contact-style .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
}
.contact-style .shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contact-style .dg-contact-info a {
  font-weight: 400;
  font-size: 30px;
  display: block;
  color: var(--oit-clr-white);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .contact-style .dg-contact-info a {
    font-size: 18px;
  }
}

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

/*----------------------------------------*/
/* brand details css
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .brand-area {
    padding-bottom: 0;
  }
}
.brand-area.brand-style-2 .brand-item {
  background-color: #101216;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.brand-item {
  height: 125px;
  line-height: 125px;
  padding: 10px 49px;
  border-radius: 10px;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  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) {
  .brand-item {
    height: 90px;
    padding: 10px 15px;
  }
}
.brand-item img {
  height: 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) {
  .brand-item img {
    width: 120px;
    height: 30px;
  }
}

/*----------------------------------------*/
/*  5.4 team-details details css
/*----------------------------------------*/
.team-details-area .row ~ .col {
  height: 100%;
}

.profile-card {
  border-radius: 30px;
}
.profile-thumb {
  margin-right: 35px;
  height: 100%;
}
@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-right: 0;
  }
}
.profile-thumb img {
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.profile-content {
  padding: 30px 70px 30px 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) {
  .profile-content {
    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-left: 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-grey-2);
  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);
}

/*----------------------------------------*/
/*  5.4 testimonial details css
/*----------------------------------------*/
.dg-testimonial-area.service-style .dg-testimonial-item {
  min-height: auto;
  transition: 0.3s;
}
.dg-testimonial-area.service-style .dg-testimonial-item:hover {
  background-color: #EEEEEE;
}
.dg-testimonial-area.service-style .text-large {
  margin-top: 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) {
  .dg-testimonial-area.service-style .text-large {
    margin-top: 20px;
  }
}

/*----------------------------------------*/
/*  5.4 docodex-dark css start here
/*----------------------------------------*/
.docodex-dark .oit-about-content p {
  color: #999999;
}
.docodex-dark .oit-award-area p {
  color: #999999;
}
.docodex-dark .oit-project-content {
  background-color: #101216;
}
.docodex-dark .oit-team-item {
  background-color: #101216;
}
.docodex-dark .oit-btn-line {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-project-category span:first-child::after {
  background-color: #999999;
}
.docodex-dark .oit-about-text p {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-about-text span {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-team-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-team-content span {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-team-social span {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-faq-accordion-wrap .accordion-body p {
  color: #999999;
}
.docodex-dark .oit-section-subtitle {
  color: #999999;
}
.docodex-dark .oit-section-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-funfact-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-funfact-item span {
  color: #999999;
}
.docodex-dark .oit-funfact-area .row > [class^=col]:not(:last-child) .oit-funfact-item {
  border-inline-end: 1px solid #303030;
}
.docodex-dark .oit-funfact-bdr {
  border-top: 1px solid #303030;
  border-bottom: 1px solid #303030;
}
.docodex-dark .oit-award-content p, .docodex-dark .oit-award-content span {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-award-icon img {
  opacity: 0.7;
}
.docodex-dark .oit-blog-content span {
  color: #999999;
}
.docodex-dark .oit-blog-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-step-item {
  background-color: #101216 !important;
}
.docodex-dark .dg-step-item span {
  color: #999999;
}
.docodex-dark .dg-step-item p {
  color: #999999;
}
.docodex-dark .dg-step-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-step-big-text {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.05);
}
.docodex-dark .oit-project-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-project-category span {
  color: #999999;
}
.docodex-dark .dg-team-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-team-author-info span {
  color: rgba(255, 255, 255, 0.6);
}
.docodex-dark .dg-team-author-wrap {
  background-color: #101216;
}
.docodex-dark .oit-text-slider-item span {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-bin-to-card-area .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.docodex-dark .oit-bin-to-card-item .ratting-text > span:first-child {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-funfact-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-funfact-item p {
  color: #999999;
}
.docodex-dark .oit-section-title-box p {
  color: #999999;
}
.docodex-dark .dg-testimonial-item {
  background-color: #101216;
}
.docodex-dark .dg-testimonial-item p.text-large {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-testimonial-item p.text-small {
  color: #999999;
}
.docodex-dark .dg-testimonial-item p span {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-testimonial-item .quote svg {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-testimonial-authour-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-testimonial-authour-info span {
  color: #999999;
}
.docodex-dark .oit-faq-accordion-wrap .accordion-item {
  background-color: var(--oit-clr-black);
}
.docodex-dark .accordion-header {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-footer-widget {
  background-color: #0D0D0D;
}
.docodex-dark .sd-about-mission-wrap {
  background: #101216;
}
.docodex-dark .sd-about-mission-wrap .nav-tab li button.active {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-about-mission-wrap .nav-tab li button {
  color: rgba(255, 255, 255, 0.5);
}
.docodex-dark .sd-about-mission-wrap .tab-content p {
  color: rgba(255, 255, 255, 0.5);
}
.docodex-dark .st-service-style .oit-service-item {
  background-color: #0D0D0D;
}
.docodex-dark .st-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-service-style .oit-service-title {
  color: var(--oit-clr-white);
}
.docodex-dark .st-service-style .oit-service-content p {
  color: #999999;
}
.docodex-dark .st-service-cat span {
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.docodex-dark .dg-team-social a {
  background-color: #0D0D0D;
  color: var(--oit-clr-white);
}
.docodex-dark .dg-team-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.docodex-dark .st-testimonial-info {
  background-color: #101216;
}
.docodex-dark .st-testimonial-ratting {
  color: var(--oit-clr-white);
}
.docodex-dark .docodex-dark p {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-form-box {
  background: #0D0D0D;
}
.docodex-dark .st-price-value {
  color: var(--oit-clr-white);
}
.docodex-dark .st-price-list ul li {
  color: var(--oit-clr-white);
}
.docodex-dark .st-price-item {
  background-color: #0D0D0D;
}
.docodex-dark .st-price-btn .oit-btn-border {
  color: var(--oit-clr-white);
  border: 1px solid #999999;
}
.docodex-dark .st-price-head {
  background-color: #101216;
}
.docodex-dark .st-price-item.active .st-price-btn .oit-btn-border {
  color: var(--oit-clr-black);
  border: 1px solid var(--oit-clr-white);
  background-color: var(--oit-clr-white);
}
.docodex-dark .sd-service-style .oit-service-title {
  color: var(--oit-clr-black);
}
.docodex-dark .sd-service-style .oit-service-content p {
  color: var(--oit-clr-black);
}
.docodex-dark .sd-funfact-card span {
  color: #999999;
}
.docodex-dark .sd-funfact-card.card-1 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.docodex-dark .sd-funfact-card.card-3 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.docodex-dark .sd-funfact-card.card-2 {
  background-color: #101216 !important;
}
.docodex-dark .sd-funfact-card.card-4 {
  background-color: #101216 !important;
}
.docodex-dark .sd-funfact-title {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-choose-card-title {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-choose-card {
  background-color: #0D0D0D;
}
.docodex-dark .sd-choose-card-inner {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .sd-choose-card-icon svg {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-choose-card-body p {
  color: #999999;
}
.docodex-dark .sd-team-title {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-team-content span {
  color: #999999;
}
.docodex-dark .docodex-dark .sd-team-social a {
  background-color: rgba(255, 255, 255, 0.4);
}
.docodex-dark .docodex-dark .sd-team-social a:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.docodex-dark .sd-team-row-item .row [class*=col]:not(:last-child) .sd-team-item {
  border-right: 1px solid #D9D9D9;
}
.docodex-dark .sd-team-row-item {
  border-bottom: 1px solid #D9D9D9;
}
.docodex-dark .oit-bin-to-card-item.grey-bg.card-1 {
  background-color: #101216 !important;
}
.docodex-dark .oit-bin-to-card-item.grey-bg.card-3 {
  background-color: #101216 !important;
}
.docodex-dark .oit-bin-to-card-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-bin-to-card-item span {
  color: #999999;
}
.docodex-dark .st-testimonial-info p {
  color: var(--oit-clr-white);
}
.docodex-dark .st-testimonial-info span {
  color: var(--oit-clr-white);
}
.docodex-dark .sd-team-social a {
  background-color: var(--oit-clr-white);
}
.docodex-dark .sd-team-social a:hover {
  background-color: #101216;
}
.docodex-dark .ba-about-vision-title {
  color: var(--oit-clr-white);
}
.docodex-dark .ba-about-vision-item p {
  color: #999999;
}
.docodex-dark .ba-about-vision-item p span {
  color: var(--oit-clr-white);
}
.docodex-dark .ba-about-vision-item ul li span {
  color: #999999;
}
.docodex-dark .ba-about-vision-item ul li span::before {
  background-color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-info span {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-info a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-social a {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-form-box {
  background: rgba(0, 0, 0, 0.8);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-form-box label {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-input-box input {
  color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-input-box input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-input-box select,
.docodex-dark .dg-contact-area.faq-style .dg-contact-select select {
  color: rgba(255, 255, 255, 0.8);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 6.25L11 1.25' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-input-box select:focus,
.docodex-dark .dg-contact-area.faq-style .dg-contact-select select:focus {
  color: var(--oit-clr-white);
  border-color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-input-box select option,
.docodex-dark .dg-contact-area.faq-style .dg-contact-select select option {
  color: var(--oit-clr-white);
  background-color: #101216;
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-select .nice-select {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-textarea-box textarea {
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-select .nice-select span.current {
  color: rgba(255, 255, 255, 0.8);
}
.docodex-dark .blog-details-breadcrumb-big-title {
  color: var(--oit-clr-white);
}
.docodex-dark .dg-contact-area.faq-style .dg-contact-select .nice-select::after {
  border-bottom: 2px solid var(--oit-clr-white);
  border-right: 2px solid var(--oit-clr-white);
}
.docodex-dark .career-item {
  background-color: #101216;
}
.docodex-dark .career-item p {
  color: #999999;
}
.docodex-dark .career-item .title {
  color: var(--oit-clr-white);
}
.docodex-dark .career-meta span {
  color: #999999;
}
.docodex-dark .career-meta span:not(:last-child) {
  border-right: 1px solid #999999;
}
.docodex-dark .oit-btn-border.btn-small:hover {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.docodex-dark .blog-details-breadcrumb-title {
  color: var(--oit-clr-white);
}
.docodex-dark .blog-details-breadcrumb-badges.badges-style-2 {
  border-bottom: 1px solid #999999;
}
.docodex-dark .sidebar-widget-title {
  color: var(--oit-clr-white);
  border-bottom: 1px solid rgba(73, 73, 73, 0.6);
}
.docodex-dark .sidebar-search-box input {
  color: var(--oit-clr-white);
  background: #0D0D0D;
}
.docodex-dark .sidebar-search-button button {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.docodex-dark .sidebar-widget {
  background-color: #101216;
}
.docodex-dark .sidebar-widget-list span {
  color: #999999;
}
.docodex-dark .sidebar-widget-list:hover {
  color: var(--oit-clr-white);
}
.docodex-dark .sidebar-widget-post .rc-post-title {
  color: var(--oit-clr-white);
}
.docodex-dark .sidebar-widget-post .rc-meta span {
  color: #999999;
}
.docodex-dark .sidebar-widget-list {
  color: #999999;
}
.docodex-dark .sidebar-widget-list.active {
  color: #999999;
}
.docodex-dark .sidebar-widget-list:hover svg {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-title {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-dsc p {
  color: #999999;
}
.docodex-dark .postbox-left {
  background-color: #101216;
}
.docodex-dark .postbox-tag-title {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-tag-content a {
  color: var(--oit-clr-white);
  border: 1px solid rgba(93, 93, 93, 0.7);
}
.docodex-dark .postbox-share-content a {
  color: var(--oit-clr-white);
  border: 1px solid rgba(93, 93, 93, 0.7);
  background-color: rgba(13, 13, 13, 0.08);
}
.docodex-dark .postbox-share-content a:hover {
  color: var(--oit-clr-white);
  background-color: #000;
}
.docodex-dark .postbox-share-content a svg {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-user-info .user-title {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-user-info p {
  color: #999999;
}
.docodex-dark .postbox-form-input-box input {
  color: var(--oit-clr-white);
  border: 1px solid rgba(73, 73, 73, 0.8);
}
.docodex-dark .postbox-form-input-box input::placeholder {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-form-textarea-box textarea {
  color: var(--oit-clr-white);
  border: 1px solid rgba(73, 73, 73, 0.8);
}
.docodex-dark .postbox-form-textarea-box textarea::placeholder {
  color: var(--oit-clr-white);
}
.docodex-dark .blog-details-breadcrumb-author-info .title-sm {
  color: var(--oit-clr-white);
}
.docodex-dark .blog-details-breadcrumb-author-info span {
  color: #999999;
}
.docodex-dark .blog-details-date-box span {
  color: #999999;
}
.docodex-dark .blog-details-date-box strong {
  color: var(--oit-clr-white);
}
.docodex-dark .postbox-comment ul li {
  background: linear-gradient(209deg, oklab(18.184% -0.00087 -0.00879/0.9) 0%, rgba(16, 18, 22, 0.9) 100%);
}
.docodex-dark .postbox-content .postbox-form-input-box input {
  background-color: #101216;
}
.docodex-dark .postbox-content .postbox-form-textarea-box textarea {
  background-color: #101216;
}
.docodex-dark .postbox-form-input-box input:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.docodex-dark .postbox-form-textarea-box textarea:focus {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.docodex-dark .postbox-area.blog-standard-style .blog-details-breadcrumb-badges .badge {
  background-color: #434343;
  color: #999999;
}
.docodex-dark .blog-details-breadcrumb-badges.badges-style-2 > div {
  background-color: #434343;
}
.docodex-dark .blog-details-breadcrumb-badges .badge {
  color: #999999;
}
.docodex-dark .oit-btn-border.btn-small {
  color: #999999;
  background-color: #434343;
}
.docodex-dark .oit-btn-border.btn-black-bg:hover i {
  color: var(--oit-clr-white);
  background-color: var(--oit-clr-black);
}
.docodex-dark .career-details-meta strong {
  color: var(--oit-clr-white);
}
.docodex-dark .career-details-meta span {
  color: #999999;
}
.docodex-dark .career-details-list li span {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--oit-clr-white);
}
.docodex-dark .career-details-list li span svg, .docodex-dark .career-details-list li span i {
  color: var(--oit-clr-white);
}
.docodex-dark .career-details-deadline strong {
  color: var(--oit-clr-white);
}
.docodex-dark .career-details-deadline span {
  color: #999999;
}
.docodex-dark .contact-style .oit-price-item {
  border: none;
  width: 555px;
  min-height: auto;
  background-color: var(--oit-clr-black);
}
.docodex-dark .contact-style .oit-price-title {
  color: var(--oit-clr-white);
}
.docodex-dark .contact-details-big-title {
  color: var(--oit-clr-white);
}
.docodex-dark .contact-details-info-wrap {
  border-top: 1px solid #434343;
}
.docodex-dark .contact-details-info-top-box {
  border-bottom: 1px solid #434343;
}
.docodex-dark .contact-details-info-top span {
  color: var(--oit-clr-white);
}
.docodex-dark .contact-details-info-top a {
  color: #999999;
}
.docodex-dark .contact-details-info-bottom a {
  color: #999999;
}
.docodex-dark .contact-details-time strong {
  color: var(--oit-clr-white);
}
.docodex-dark .contact-details-time svg {
  color: var(--oit-clr-white);
}
.docodex-dark .contact-details-info-wrap .oit-btn-border {
  border-color: #101216;
  background-color: #101216;
}
.docodex-dark .project-slide-style .oit-project-item {
  background-color: var(--oit-clr-black);
}
.docodex-dark .project-details-author-list ul li span {
  color: var(--oit-clr-white);
}
.docodex-dark .project-details-subtitle {
  color: #999999;
}
.docodex-dark .profile-content .title {
  color: var(--oit-clr-white);
}
.docodex-dark .profile-content > span {
  font-weight: 600;
  font-size: 20px;
  display: block;
  margin-bottom: 45px;
  color: rgba(255, 255, 255, 0.6);
}
.docodex-dark .profile-content > p {
  color: #999999;
}
.docodex-dark .profile-content .contact-info > a {
  font-weight: 600;
  font-size: 20px;
  color: var(--oit-clr-white);
}
.docodex-dark .profile-content .contact-info span {
  color: #999999;
}
.docodex-dark .profile-content .contact-social a {
  color: #999999;
  background: #0D0D0D;
}
.docodex-dark .profile-content .contact-social a:hover {
  color: var(--oit-clr-white);
}
.docodex-dark .error-title {
  color: var(--oit-clr-white);
}
.docodex-dark .error-thumb img {
  filter: invert(1);
}
.docodex-dark .header-dark .oit-header-logo img {
  filter: invert(1);
}
.docodex-dark .header-dark.oit-header-bdr {
  border-bottom: 1px dashed var(--oit-clr-white);
}
.docodex-dark .header-dark .oit-header-menu nav > ul > li > a {
  color: var(--oit-clr-white);
}
.docodex-dark .oit-award-icon img {
  opacity: 0.7;
  filter: invert(1);
}
.docodex-dark .blog-details-breadcrumb-badges .badge {
  background-color: #434343;
}
.docodex-dark .blog-details-breadcrumb-area .blog-details-breadcrumb-author-wrap {
  background-color: #434343;
}
.docodex-dark .dg-testimonial-area.service-style .dg-testimonial-item:hover {
  background-color: #0D0D0D;
}
.docodex-dark .oitoffcanvas__logo img {
  filter: invert(1);
}
.docodex-dark .oitoffcanvas__text p {
  color: rgba(153, 153, 153, 0.6);
}
.docodex-dark .oit-menu-mobile ul li:not(:last-child) > a, .docodex-dark .oit-category-mobile-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .oit-menu-mobile ul li > a, .docodex-dark .oit-category-mobile-menu ul li > a {
  color: var(--oit-clr-white);
}
.docodex-dark .oitoffcanvas__info .offcanva-title {
  color: var(--oit-clr-white);
}
.docodex-dark .oitoffcanvas__info-icon a {
  color: var(--oit-clr-black);
  background-color: var(--oit-clr-white);
}
.docodex-dark .oitoffcanvas__info-address a {
  color: var(--oit-clr-white);
}
.docodex-dark .oitoffcanvas__info-address span {
  color: rgba(153, 153, 153, 0.6);
}
.docodex-dark .oitoffcanvas {
  background: var(--oit-clr-black) none repeat scroll 0 0;
}
.docodex-dark .oitoffcanvas__text {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.docodex-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn {
  color: var(--oit-clr-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.docodex-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--oit-clr-white);
}
.docodex-dark .oit-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--oit-clr-black);
}
.docodex-dark .oit-menu-mobile ul li:hover > a .dropdown-toggle-btn i, .docodex-dark .oit-category-mobile-menu ul li:hover > a .dropdown-toggle-btn i {
  color: var(--oit-clr-white);
}
.docodex-dark .oitoffcanvas__close-btn button {
  color: var(--oit-clr-white);
  -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
  -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
  transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.5);
}

/* Affiliate program public page */
.affiliate-program-hero-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(13, 13, 13, 0.08), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 42px;
  box-shadow: 0 30px 90px rgba(13, 13, 13, 0.06);
  overflow: hidden;
  padding: 54px;
  position: relative;
}

.affiliate-program-hero-card::before {
  background: #101216;
  border-radius: 999px;
  content: "";
  height: 220px;
  opacity: 0.04;
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
}

.affiliate-program-title,
.affiliate-program-section-title {
  color: #0d0d0d;
  font-size: clamp(42px, 5vw, 76px);
  letter-spacing: -0.065em;
  line-height: 0.96;
  margin: 0;
}

.affiliate-program-section-title {
  font-size: clamp(36px, 4vw, 64px);
}

.affiliate-program-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.affiliate-program-link {
  color: #0d0d0d;
  font-size: 16px;
  font-weight: 800;
}

.affiliate-program-side-panel {
  background: #101216;
  border-radius: 34px;
  color: #fff;
  padding: 34px;
  position: relative;
  z-index: 1;
}

.affiliate-program-eyebrow,
.affiliate-program-feature-card > span,
.affiliate-program-steps article > span {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.affiliate-program-eyebrow {
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 24px;
}

.affiliate-program-metric {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}

.affiliate-program-metric:last-child {
  padding-bottom: 0;
}

.affiliate-program-metric strong {
  color: #fff;
  display: block;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 10px;
}

.affiliate-program-metric p,
.affiliate-program-dark-copy p {
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.affiliate-program-feature-card {
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 30px;
  box-shadow: 0 22px 60px rgba(13, 13, 13, 0.045);
  margin-bottom: 30px;
  min-height: 280px;
  padding: 34px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.affiliate-program-feature-card:hover {
  box-shadow: 0 30px 80px rgba(13, 13, 13, 0.08);
  transform: translateY(-6px);
}

.affiliate-program-feature-card > span {
  align-items: center;
  background: #101216;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 34px;
  width: 44px;
}

.affiliate-program-feature-card h3 {
  color: #0d0d0d;
  font-size: 28px;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 18px;
}

.affiliate-program-feature-card p {
  color: #686868;
  line-height: 1.65;
  margin: 0;
}

.affiliate-program-steps {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.affiliate-program-steps article {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 30px;
  position: relative;
}

.affiliate-program-steps article:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.24);
  content: "";
  height: 1px;
  position: absolute;
  right: -18px;
  top: 54px;
  width: 18px;
}

.affiliate-program-steps article > span {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 36px;
}

.affiliate-program-steps h3 {
  color: #fff;
  font-size: 26px;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 16px;
}

.affiliate-program-steps p {
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.55;
  margin: 0;
}

.affiliate-program-check-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affiliate-program-check-grid div {
  align-items: flex-start;
  background: #f7f7f7;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 22px;
  color: #0d0d0d;
  display: flex;
  font-size: 17px;
  font-weight: 700;
  gap: 14px;
  line-height: 1.35;
  padding: 22px;
}

.affiliate-program-check-grid div::before {
  align-items: center;
  background: #101216;
  border-radius: 999px;
  color: #fff;
  content: "✓";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  margin-top: 1px;
  width: 26px;
}

.affiliate-program-terms-card {
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.12), transparent 24%),
    #101216;
  border-radius: 38px;
  overflow: hidden;
  padding: 48px;
}

.affiliate-program-rule-list {
  display: grid;
  gap: 14px;
}

.affiliate-program-rule-list p {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.62;
  margin: 0;
  padding: 20px;
}

.affiliate-program-faq .accordion-item {
  border-radius: 22px;
}

.affiliate-program-form-intro,
.affiliate-program-form-box {
  border-radius: 34px;
}

.affiliate-program-form-intro {
  background:
    radial-gradient(circle at 90% 12%, rgba(13, 13, 13, 0.08), transparent 22%),
    #fff;
  border: 1px solid rgba(13, 13, 13, 0.08);
  padding: 42px;
  position: sticky;
  top: 34px;
}

.affiliate-program-form-box {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 247, 0.92));
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 24px 70px rgba(13, 13, 13, 0.055);
  padding: 46px;
}

.affiliate-program-application-note {
  background: #101216;
  border-radius: 24px;
  color: #fff;
  padding: 24px;
}

.affiliate-program-application-note strong {
  color: #fff;
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}

.affiliate-program-application-note p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
  margin: 0;
}

.affiliate-program-form-box .dg-contact-input-box input,
.affiliate-program-form-box .dg-contact-textarea-box textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.22);
  border-radius: 0;
  color: #0d0d0d;
  padding-left: 0;
  padding-right: 0;
}

.affiliate-program-form-box .dg-contact-textarea-box textarea {
  min-height: 150px;
  padding-top: 12px;
}

.affiliate-program-form-box .dg-contact-input-box input:focus,
.affiliate-program-form-box .dg-contact-textarea-box textarea:focus {
  border-color: #0d0d0d;
}

.affiliate-program-gdpr label {
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 22px;
  color: #494949;
  display: flex;
  gap: 14px;
  line-height: 1.5;
  padding: 20px 22px;
  text-transform: none;
}

.affiliate-program-gdpr input {
  accent-color: #0d0d0d;
  flex: 0 0 auto;
  height: 20px;
  margin-top: 2px;
  width: 20px;
}

.affiliate-program-gdpr span {
  color: #494949;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.affiliate-program-gdpr a {
  color: #0d0d0d;
  font-weight: 800;
}

@media (max-width: 1199px) {
  .affiliate-program-side-panel,
  .affiliate-program-form-intro {
    margin-top: 30px;
    position: static;
  }

  .affiliate-program-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .affiliate-program-steps article::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .affiliate-program-hero-area,
  .affiliate-program-process-area,
  .affiliate-program-fit-area,
  .affiliate-program-application {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  .affiliate-program-value-area {
    padding-bottom: 55px !important;
  }

  .affiliate-program-hero-card,
  .affiliate-program-side-panel,
  .affiliate-program-feature-card,
  .affiliate-program-terms-card,
  .affiliate-program-form-intro,
  .affiliate-program-form-box {
    border-radius: 24px;
    padding: 24px;
  }

  .affiliate-program-actions,
  .affiliate-program-actions .oit-btn-border,
  .affiliate-program-link {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .affiliate-program-steps,
  .affiliate-program-check-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-program-feature-card {
    min-height: auto;
  }
}

/* Public accessibility polish */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(255, 184, 76, 0.95);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(255, 184, 76, 0.22);
  border-radius: 10px;
}

:where(input, select, textarea):focus-visible {
  border-color: #0d0d0d !important;
}

.docodex-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-bg-color="#0D0D0D"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-bg-color="#101216"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[data-bg-color="#1c1c1c"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22);
}

.docodex-dark :where(input, select, textarea):focus-visible,
[data-bg-color="#0D0D0D"] :where(input, select, textarea):focus-visible,
[data-bg-color="#101216"] :where(input, select, textarea):focus-visible,
[data-bg-color="#1c1c1c"] :where(input, select, textarea):focus-visible {
  border-color: #ffffff !important;
}

.dg-contact-select select {
  min-height: 50px;
  width: 100%;
}

.dg-contact-input-box .errorlist,
.dg-contact-textarea-box .errorlist {
  list-style: none;
  margin-top: 10px;
  color: #b42318;
  font-weight: 600;
}

@media (max-width: 767px) {
  .blog-details-breadcrumb-area.career-style {
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .dg-contact-area.faq-style {
    margin-top: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 90px !important;
  }

  .dg-contact-left {
    padding-top: 0 !important;
    margin-bottom: 45px;
  }

  .dg-contact-info-wrap {
    flex-direction: column;
    gap: 24px;
  }

  .dg-contact-info-wrap .mr-55 {
    margin-right: 0;
  }

  .dg-contact-input-box.mb-65,
  .dg-contact-textarea-box.mb-70 {
    margin-bottom: 34px;
  }

  .map-area iframe {
    min-height: 320px;
  }
}