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

    Theme Name: XOFT - Creative Agency HTML Template
    Author: Ordianit
    Support:ordianit@gmail.com
    Description: XOFT - Creative Agency HTML Template
    Version: 1.0

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

/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
	02. MEANMENU CSS START
	03. header css start
	04. about css start
	05. award css start
    06. blog css start
	07. brand css start 
	08. choose css start
	09. contact css start
	10. error css start 
	11. funfact css start 
	12. gallery css start 
	13. hero css start 
	14. instagram css start 
	15. map css start
	16. menu css start
	17. project css start 
	18. service css start
	19. shop css start 
	20. team css start
	21. testimonial css start
	22. text slider css start
	23. value css start
	24. video css start
	25. footer css start

    **********************************************/
/*----------------------------------------*/
/* 01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet');
:root {
  /**
  @font family declaration
  */
  --it-ff-body: 'DM Sans', sans-serif;
  --it-ff-heading:  'Arimo', sans-serif;
  --it-ff-fontawesome: Font Awesome 6 Pro;
  /**
  @color declaration
  */
  --it-common-white: #ffffff;
  --it-common-black: #0e0e0e;
  --it-common-black-2: #1f1f1f;
  --it-heading-primary: #ffffff;
  --it-text-body: #888888;
  --it-theme-1: #F400A1;
  --it-theme-2: #353535;
  --it-theme-3: #181818;
  --it-border-1: #3a3a3a;
  --it-border-2: #373737;
  --it-border-3: #353535;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
  }
}
/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--it-ff-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--it-text-body);
  line-height: 1.3;
  overflow-x: hidden;
}

body, html {
  overflow-x: hidden;
}

body.monserat {
  font-family: var(--it-ff-monserat);
}

a {
  text-decoration: none;
  transition: 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--it-ff-heading);
  color: var(--it-heading-primary);
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

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

p {
  color: var(--it-text-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.z-index {
  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;
}

a,
.btn,
button,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input {
  height: 60px;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 30px;
  line-height: 60px;
  color: var(--it-common-black);
}
input::-webkit-input-placeholder {
  color: #757a7b;
}
input:-moz-placeholder {
  color: #757a7b;
}
input::-moz-placeholder {
  color: #757a7b;
}
input:-ms-input-placeholder {
  color: #757a7b;
}

textarea {
  outline: none;
  color: var(--it-common-black);
  width: 100%;
  padding: 0 30px;
  border: none;
}
textarea::-webkit-input-placeholder {
  color: #757a7b;
}
textarea:-moz-placeholder {
  color: #757a7b;
}
textarea::-moz-placeholder {
  color: #757a7b;
}
textarea:-ms-input-placeholder {
  color: #757a7b;
}

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(--it-theme-1);
  color: var(--it-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--it-theme-1);
  color: var(--it-common-white);
  text-shadow: none;
}

::selection {
  background: var(--it-theme-1);
  color: var(--it-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--it-common-black);
  font-size: var(--it-fz-body);
  opacity: 1;
}

*::placeholder {
  color: var(--it-common-black);
  font-size: var(--it-fz-body);
  opacity: 1;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
}

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

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

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

/*--
    - Spacing
-----------------------------------------*/
.it-btn-main {
  display: inline-block;
  background-color: var(--it-theme-2);
  font-weight: 700;
  font-size: 14px;
  color: var(--it-common-white);
  padding: 0 50px;
  height: 60px;
  line-height: 60px;
  position: relative;
  transition: 0.4s;
  text-transform: uppercase;
}
.it-btn-main.color::before {
  background-color: #d42c05;
}
.it-btn-main::before {
  content: "";
  height: 100%;
  width: 4px;
  background-color: var(--it-theme-1);
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.4s;
}
.it-btn-main span {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .it-btn-main {
    font-size: 12px;
  }
}
.it-btn-main:hover {
  color: var(--it-common-white);
}
.it-btn-main:hover::before {
  width: 100%;
}

.it-btn-red {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 0 50px;
  height: 60px;
  line-height: 60px;
  position: relative;
  transition: 0.4s;
  text-transform: uppercase;
  color: var(--it-common-white);
  background-color: var(--it-theme-1);
}
.it-btn-red:hover {
  background-color: var(--it-common-white);
  color: var(--it-common-black);
}
.it-btn-red.black:hover {
  background-color: var(--it-common-black);
  color: var(--it-common-white);
}

.it-btn-black {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 0 50px;
  height: 60px;
  line-height: 60px;
  position: relative;
  transition: 0.4s;
  text-transform: uppercase;
  color: var(--it-common-white);
  background-color: var(--it-common-black);
}
.it-btn-black:hover {
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
}

.it-btn-white {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 0 50px;
  height: 60px;
  line-height: 60px;
  position: relative;
  transition: 0.4s;
  text-transform: uppercase;
  color: var(--it-common-black);
  background-color: var(--it-common-white);
}
.it-btn-white:hover {
  background-color: var(--it-common-black);
  color: var(--it-common-white);
}

.it-btn-white-sm {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  position: relative;
  transition: 0.3s;
  text-transform: uppercase;
  color: var(--it-common-white);
  background-color: var(--it-theme-1);
}
.it-btn-white-sm:hover {
  background-color: var(--it-common-white);
  color: var(--it-common-black);
}

/* pulse effect animation */
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@-moz-keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@-ms-keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@-webkit-keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes headerSlideDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes section-animation {
  0% {
    width: 0;
  }
  15% {
    width: 100%;
  }
  85% {
    opacity: 1;
  }
  90% {
    width: 100%;
    opacity: 0;
  }
  to {
    width: 0;
    opacity: 0;
  }
}
@keyframes about-sm {
  100% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(50px);
  }
}
@keyframes hero-thumb-animation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes itleftright {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
@keyframes itrotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes ittranslateY2 {
  0% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes RL_smooth {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide_up_down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes ittranslateX2 {
  0% {
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translatXY(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes scale_up_down {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0px;
    stroke-dasharray: 3000;
  }
}
@keyframes itupdown {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@keyframes itswing {
  0% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
}
@keyframes borderanimate2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes about-circle {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    -o-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    -o-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
@keyframes hero-3-dot-2 {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes tfLeftToRight {
  49% {
    transform: translateX(60%);
  }
  50% {
    opacity: 0;
    transform: translateX(-60%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-50px);
  }
  50% {
    transform: translatey(-40px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes leftright {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes movinglight {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-70px);
  }
  50% {
    transform: translatey(-70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes movinglight2 {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(70px);
  }
  50% {
    transform: translatey(70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes movingtop {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translatey(70px);
  }
  50% {
    transform: translatey(-70px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes circle-animation {
  0% {
    right: 0;
  }
  50% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}
@keyframes circle-animation-2 {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes animationglob {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes zoom2 {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
@keyframes wobble-vertical {
  10% {
    transform: translateY(-10px);
  }
  50% {
    transform: skew(15deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes section-highlight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes widthcalc {
  0% {
    width: 20%;
  }
  50% {
    width: 50%;
  }
  75% {
    width: 90%;
  }
  90% {
    opacity: 75%;
  }
  90% {
    opacity: 100%;
  }
}
/* right bounce */
@keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -ms-transform: translateY(-35px);
    transform: translateY(-35px);
  }
  60% {
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
/* /right bounce */
@keyframes icon-bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes light-one {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.6;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
/*--- preloader ---*/
.dark #preloader {
  background-color: var(--it-theme-1);
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: 999999;
}

.preloader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: var(--it-theme-1);
  -webkit-animation: preloader 1.3s linear infinite;
  animation: preloader 1.3s linear infinite;
}

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

@keyframes preloader {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
@-webkit-keyframes preloader {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    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(--it-common-white);
  cursor: pointer;
  background: var(--it-theme-1);
  transition: 1s ease;
  border: none;
}

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

/*---------------------------------------*/
/*Background color
/*-----------------------------------------*/
.black-bg {
  background: var(--it-common-black);
}

.theme-bg {
  background: var(--it-theme-3);
}

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

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

.itoffcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  right: -100%;
  width: 480px;
  bottom: 0;
  box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
  background-color: var(--it-theme-2);
  z-index: 9999;
  padding: 50px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
}
.itoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .itoffcanvas {
    width: 300px;
    padding: 40px 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .itoffcanvas {
    width: 400px;
    padding: 40px;
  }
}
.itoffcanvas.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;
}
.itoffcanvas__logo {
  margin-bottom: 60px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .itoffcanvas__logo {
    padding-top: 0;
  }
}
.itoffcanvas__logo img {
  width: 157px;
  height: 100%;
}
.itoffcanvas__close-btn button {
  font-size: 35px;
  color: white;
  position: absolute;
  right: 50px;
  top: 42px;
  transition: 1s;
  font-weight: 300;
  opacity: 0.2;
  -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) {
  .itoffcanvas__close-btn button {
    font-size: 28px;
    right: 48px;
    top: 52px;
  }
}
@media (max-width: 767px) {
  .itoffcanvas__close-btn button {
    font-size: 28px;
    right: 39px;
    top: 38px;
  }
}
.itoffcanvas__close-btn button:hover {
  color: #fff;
  opacity: 1;
}
.itoffcanvas__content {
  margin-bottom: 30px;
}
.itoffcanvas__content p {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 25px;
}
.itoffcanvas__content span {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
  display: inline-block;
}
.itoffcanvas__content a {
  font-size: 30px;
  line-height: 51px;
  font-weight: 700;
  color: var(--it-common-white);
  display: inline-block;
}
@media (max-width: 767px) {
  .itoffcanvas__content a {
    font-size: 27px;
  }
}
.itoffcanvas__social {
  margin-top: 50px;
}
.itoffcanvas__social .social-icon a {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
  margin-right: 15px;
  transition: 0.3s;
  display: inline-block;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .itoffcanvas__social .social-icon a {
    margin-right: 3px;
  }
}
.itoffcanvas__social .social-icon a:hover {
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.itoffcanvas__text {
  border-bottom: 1px solid #3b3838;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .itoffcanvas__text {
    display: none;
  }
}
.itoffcanvas__text p {
  color: #ddd;
  font-size: 18px;
}
.itoffcanvas__info {
  border-bottom: 1px solid #3b3838;
  padding-bottom: 30px;
  margin-bottom: 20px;
}
.itoffcanvas__info .offcanva-title {
  color: var(--it-common-white);
  margin: 30px 0 40px 0;
  font-size: 20px;
  font-weight: 600;
}
.itoffcanvas__info-icon a {
  height: 50px;
  width: 50px;
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  font-weight: 400;
  font-size: 21px;
  margin-right: 20px;
}
.itoffcanvas__info-address span {
  display: block;
  color: rgba(255, 255, 255, 0.6392156863);
  font-size: 16px;
  font-weight: 400;
}
.itoffcanvas__info-address a {
  display: block;
  color: var(--it-common-white);
  font-size: 18px;
  font-weight: 600;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .itoffcanvas__info-address a {
    font-size: 16px;
  }
}
.itoffcanvas__info-address a:hover {
  color: var(--it-theme-1);
}

.it-offcanva-bottom-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}
.it-offcanva-bottom-shape img {
  width: 100%;
}

.it-breadcrumb-bg {
  padding-top: 315px;
  padding-bottom: 115px;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-breadcrumb-bg {
    padding-top: 250px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-breadcrumb-bg {
    padding-top: 220px;
    padding-bottom: 100px;
    background-position: center;
  }
}
@media (max-width: 767px) {
  .it-breadcrumb-bg {
    padding-top: 200px;
    padding-bottom: 100px;
    background-position: center;
  }
}
.it-breadcrumb-bg::after {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgb(24, 24, 24);
  opacity: 0.702;
}

.it-breadcrumb-title {
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-breadcrumb-title {
    font-size: 38px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-breadcrumb-title {
    font-size: 43px;
  }
}
@media (max-width: 767px) {
  .it-breadcrumb-title {
    font-size: 37px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-breadcrumb-title {
    font-size: 30px;
  }
}
.it-breadcrumb-subtitle {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: var(--it-common-white);
  text-transform: uppercase;
  display: block;
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-breadcrumb-subtitle {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-breadcrumb-content {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-breadcrumb-content {
    margin-bottom: 0px;
  }
}
.it-breadcrumb-list {
  display: inline-block;
  border-radius: 30px;
}
.it-breadcrumb-list span {
  color: var(--it-common-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  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) {
  .it-breadcrumb-list span {
    font-size: 14px;
  }
}
.it-breadcrumb-list span.dvdr i {
  color: var(--it-common-white);
  font-weight: 400;
  font-size: 13px;
}
.it-breadcrumb-list span b {
  color: var(--it-theme-1);
}

.it-customs-accordion .accordion-items {
  margin-bottom: 0;
}
.it-customs-accordion .accordion-buttons {
  position: relative;
  width: 100%;
  padding: 12px 30px;
  font-weight: 700;
  font-size: 18px;
  color: var(--it-common-white);
  text-align: left;
  padding-left: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-customs-accordion .accordion-buttons {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .it-customs-accordion .accordion-buttons {
    font-size: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-customs-accordion .accordion-buttons {
    font-size: 17px;
  }
}
.it-customs-accordion .accordion-buttons::after {
  position: absolute;
  content: "\f068";
  font-family: "Font Awesome 5 Pro";
  top: 11px;
  left: 0px;
  font-weight: 700;
  font-size: 16px;
  opacity: 1;
  color: var(--it-theme-1);
}
.it-customs-accordion .accordion-buttons.collapsed::after {
  content: "\f067";
}
.it-customs-accordion .collapsed {
  position: relative;
  z-index: 99;
}
.it-customs-accordion .accordion-body {
  padding-top: 0;
  padding-left: 30px;
  padding-bottom: 7px;
  position: relative;
  z-index: 1;
  border-radius: 0 0px 16px 16px;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-customs-accordion .accordion-body {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-customs-accordion .accordion-body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-customs-accordion .accordion-body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-customs-accordion .accordion-body {
    font-size: 15px;
  }
}

.it-customs-accordion-2 .accordion-items {
  margin-bottom: 10px;
}
.it-customs-accordion-2 .accordion-buttons {
  position: relative;
  width: 100%;
  padding: 12px 30px;
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  padding: 21px 30px;
  padding-left: 75px;
  color: var(--it-common-white);
  background-color: var(--it-common-black);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-customs-accordion-2 .accordion-buttons {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .it-customs-accordion-2 .accordion-buttons {
    font-size: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-customs-accordion-2 .accordion-buttons {
    font-size: 17px;
  }
}
.it-customs-accordion-2 .accordion-buttons::after {
  position: absolute;
  content: "\f068";
  font-family: "Font Awesome 5 Pro";
  top: 19px;
  left: 30px;
  font-weight: 700;
  font-size: 12px;
  opacity: 1;
  height: 26px;
  line-height: 26px;
  text-align: center;
  width: 26px;
  border-radius: 50%;
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.it-customs-accordion-2 .accordion-buttons.collapsed::after {
  content: "\f067";
}
.it-customs-accordion-2 .collapsed {
  position: relative;
  z-index: 99;
}
.it-customs-accordion-2 .accordion-body {
  padding: 15px 30px;
  padding-bottom: 30px;
  padding-right: 50px;
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  background-color: var(--it-common-black);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-customs-accordion-2 .accordion-body {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-customs-accordion-2 .accordion-body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-customs-accordion-2 .accordion-body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-customs-accordion-2 .accordion-body {
    font-size: 15px;
  }
}

/*----------------------------------------*/
/*  SEARCH CSS START
/*----------------------------------------*/
.search__popup {
  padding-top: 70px;
  padding-bottom: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 40%;
  z-index: 9999999;
  background-color: var(--it-theme-2);
  -webkit-transform: translateY(calc(-100% - 80px));
  -moz-transform: translateY(calc(-100% - 80px));
  -ms-transform: translateY(calc(-100% - 80px));
  -o-transform: translateY(calc(-100% - 80px));
  transform: translateY(calc(-100% - 80px));
  -webkit-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  -moz-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition-delay: 0.7s;
}
.search__popup.search-opened {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%);
  transition-delay: 0s;
}
.search__popup.search-opened .search__input {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition-delay: 0.3s;
}
.search__popup.search-opened .search__input::after {
  width: 100%;
  transition-delay: 0.5s;
}
.search__popup-2 {
  background-color: var(--it-common-black-13);
}
.search__popup-2 .search__input .search-input-field ~ .search-focus-border {
  background-color: var(--it-theme-8);
}
.search__popup-3 .search__input .search-input-field ~ .search-focus-border {
  background-color: var(--it-theme-10);
}
.search__top {
  margin-bottom: 80px;
}
.search__input {
  position: relative;
  height: 80px;
  transition-delay: 0.5s;
  opacity: 0;
}
.search__input::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transition-delay: 0.3s;
}
.search__input input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: 24px;
  color: var(--it-common-white);
  border-bottom: 1px solid transparent;
  padding: 0;
  padding-right: 30px;
}
.search__input input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}
.search__input input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}
.search__input input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}
.search__input input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
}
.search__input button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--it-common-white);
}
.search__input .search-input-field ~ .search-focus-border {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 1px;
  background-color: var(--it-common-orange);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}
.search__input .search-input-field:focus ~ .search-focus-border {
  width: 100%;
  left: 0;
  right: auto;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.search__close-btn {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.3);
}
.search__close-btn:hover {
  color: var(--it-common-white);
}
.search__result-title {
  font-size: 50px;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .search__result-title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .search__result-title {
    font-size: 35px;
  }
}
.search__result-title span {
  color: var(--it-theme-1);
  display: inline-block;
}
.search__result-content p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--it-text-1);
}
.search__result-input {
  position: relative;
}
.search__result-input-box {
  position: relative;
  margin-bottom: 20px;
}
.search__result-input-box button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 22px 43px;
}
@media (max-width: 767px) {
  .search__result-input-box button {
    position: relative;
    margin-top: 15px;
  }
}
.search__result-input-box button:hover {
  background-color: var(--it-common-black);
}
.search__result-input input {
  width: 100%;
  height: 70px;
  padding-left: 60px;
  padding-right: 177px;
  background-color: var(--it-common-white);
  border: 1px solid var(--it-common-white);
  box-shadow: -3px 0px 0px var(--it-theme-1), 0px 1px 2px rgba(3, 4, 28, 0.14);
}
@media (max-width: 767px) {
  .search__result-input input {
    padding-right: 25px;
  }
}
.search__result-input span {
  position: absolute;
  top: 50%;
  left: 30px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  color: #A0A0B5;
}
.search__result-input span svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.search__result-tags a {
  display: inline-block;
  font-family: var(--it-ff-space);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #D5D5DD;
  padding: 5px 18px;
  line-height: 1;
  margin-right: 2px;
  margin-bottom: 7px;
}
.search__result-tags a:hover {
  background-color: var(--it-theme-1);
  border-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.search__blog-item {
  padding: 50px 50px;
  border: 1px solid #EAEAEF;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .search__blog-item {
    padding: 30px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search__blog-item {
    padding: 25px;
  }
}
@media (max-width: 767px) {
  .search__blog-item {
    padding: 20px;
  }
}
.search__blog-title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 13px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .search__blog-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search__blog-title {
    font-size: 21px;
  }
  .search__blog-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .search__blog-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .search__blog-title {
    font-size: 25px;
  }
}
.search__blog-title a:hover {
  color: var(--it-theme-1);
}
.search__blog-tag {
  margin-bottom: 10px;
}
.search__blog-tag a {
  display: inline-block;
  background-color: rgba(99, 100, 219, 0.06);
  font-family: var(--it-ff-space);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--it-common-purple);
  padding: 4px 12px;
}
.search__blog-tag a:hover {
  background-color: var(--it-common-purple);
  color: var(--it-common-white);
}
.search__blog-meta span {
  color: var(--it-text-1);
  margin-right: 15px;
  margin-bottom: 10px;
  display: inline-block;
}
.search__blog-meta span i, .search__blog-meta span svg {
  margin-right: 2px;
}
.search__blog-meta span svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
.search__blog-meta span svg path {
  stroke: #7A7E83;
}
.search__blog-meta-author {
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search__blog-meta-author {
    margin-right: 20px;
  }
}
.search__blog-meta-author-thumb img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}
.search__blog-meta-author-content span {
  display: inline-block;
  font-family: var(--it-ff-inter);
  font-size: 14px;
  color: #7A7E83;
}
.search__blog-meta-author-content span a {
  color: var(--it-common-black-11);
  font-weight: 500;
}
.search__blog-meta-author-content span a:hover {
  color: var(--it-theme-1);
}
.search__blog-content p {
  font-size: 15px;
  line-height: 1.47;
  color: var(--it-text-1);
  margin-bottom: 20px;
}
.search__blog-btn .it-btn-border {
  padding: 8px 29px;
}
.search__blog-btn .it-btn-border svg, .search__blog-btn .it-btn-border i {
  margin-left: 5px;
}
.search__blog-btn .it-btn-border svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
.search__blog-btn .it-btn-border:hover {
  background-color: var(--it-theme-1);
  border-color: var(--it-theme-1);
  color: var(--it-common-white);
}

body.it-magic-cursor #magic-cursor {
  display: block;
}

#magic-cursor {
  position: absolute;
  display: none;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

#ball {
  position: fixed;
  display: flex;
  align-items: center;
  pointer-events: none;
  border-style: solid;
  border-radius: 50%;
  justify-content: center;
  mix-blend-mode: difference;
  color: var(--it-theme-1);
}

/* Ball view 
============= */
#ball .ball-view {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
  text-align: center;
  transform: scale(0);
}

#ball .ball-view i {
  font-size: 19px;
}

/* Ball drag 
============= */
#ball .ball-drag {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: #FFF;
  line-height: 1.2;
  text-align: center;
  transition: all 0.3s;
}

#ball .ball-drag::before,
#ball .ball-drag::after {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  font-size: 19px;
  color: #FFF;
  height: 10px;
  line-height: 10px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

#ball .ball-drag::before {
  content: "\f104"; /* Font Awesome */
  left: 0;
  transform: translate3d(-30px, 0, 0);
  transition: all 0.25s;
}

#ball .ball-drag::after {
  content: "\f105"; /* Font Awesome */
  right: 0;
  transform: translate3d(30px, 0, 0);
  transition: all 0.25s;
}

/* Ball close 
============== */
#ball.ball-close-enabled {
  opacity: 1 !important;
}

#ball .ball-close {
  position: absolute;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  line-height: 1;
  text-align: center;
}

.it-toggle-btn-box {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.it-magnetic-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.it-section-title-1 {
  display: inline-block;
  font-weight: 700;
  font-size: 48px;
  color: var(--it-common-white);
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-section-title-1 {
    font-size: 46px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-section-title-1 {
    font-size: 42px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-section-title-1 {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-section-title-1 {
    font-size: 37px;
  }
  .it-section-title-1 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-section-title-1 {
    font-size: 26px;
  }
  .it-section-title-1 br {
    display: none;
  }
}

.it-section-subtitle-1 {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--it-theme-1);
  text-transform: uppercase;
  padding-bottom: 15px;
}
.services-section-subtitle-1 {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--it-common-white);
  text-transform: uppercase;
  padding-bottom: 15px;
  padding-top: 10px;
}

/** slider title goes here **/
.it-hero-title {
  font-weight: 700;
  font-size: 120px;
  color: var(--it-common-white);
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-hero-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-title {
    font-size: 105px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-title {
    font-size: 74px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-title {
    font-size: 73px;
  }
  .it-hero-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-hero-title {
    font-size: 55px;
  }
  .it-hero-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-hero-title {
    font-size: 56px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .it-hero-title {
    font-size: 49px;
  }
}

.it-hero-2-title {
  font-weight: 700;
  font-size: 100px;
  color: var(--it-common-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-2-title {
    font-size: 93px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-2-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-2-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-2-title {
    font-size: 73px;
  }
  .it-hero-2-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-hero-2-title {
    font-size: 52px;
  }
  .it-hero-2-title br {
    display: none;
  }
}

/*----------------------------------------*/
/*  03. MEANMENU CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  03. header css start
/*----------------------------------------*/
.it-header-4-space {
  padding-top: 0;
}
.it-header-4-border {
  border-bottom: 1px solid #3c4141;
}
.it-header-4-border .it-header-main-menu {
  margin-left: 40px;
}
.it-header-4-border .it-header-main-menu nav > ul > li > a {
  padding: 47px 0;
}

.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  width: 100%;
  background-color: var(--tp-common-white);
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -khtml-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -moz-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -ms-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -o-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  background-color: var(--it-theme-2);
  z-index: 999;
}
.header-sticky .it-header-4-border {
  border-bottom: none;
}
.header-sticky .it-header-main-menu nav > ul > li > a {
  padding: 30px 0;
}

.it-header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.it-header-right-box {
  line-height: 0;
  transform: translateY(2px);
}
.it-header-right-box a {
  font-size: 18px;
  color: var(--it-common-white);
  margin-left: 25px;
  line-height: 0;
}
.it-header-right-box button {
  font-size: 18px;
  color: var(--it-common-white);
  margin-left: 25px;
}
.it-header-main-menu {
  margin-left: 50px;
}
.it-header-main-menu nav > ul > li {
  display: inline-block;
  padding: 0 24px;
  position: relative;
}
.it-header-main-menu nav > ul > li.p-static {
  position: static;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-main-menu nav > ul > li {
    padding: 0 18px;
  }
}
.it-header-main-menu nav > ul > li > .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  text-align: left;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  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);
  border-top: 4px solid var(--it-theme-1);
  background-color: var(--it-theme-2);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  z-index: 9999;
}
.it-header-main-menu nav > ul > li > .submenu > li {
  padding: 0;
  display: block;
  margin-bottom: 15px;
}
.it-header-main-menu nav > ul > li > .submenu > li:last-child {
  margin-bottom: 0;
}
.it-header-main-menu nav > ul > li > .submenu > li > a {
  display: inline-block;
  padding: 0;
  font-weight: 700;
  color: var(--it-common-white);
  transition: 0.3s;
  text-transform: uppercase;
  position: relative;
}
.it-header-main-menu nav > ul > li > .submenu > li > a::before {
  position: absolute;
  top: 10px;
  left: 0;
  content: "";
  height: 1px;
  width: 0px;
  background-color: var(--it-theme-1);
  display: inline-block;
  transition: all 0.3s ease-out 0s;
  opacity: 0;
  visibility: hidden;
}
.it-header-main-menu nav > ul > li > .submenu > li > a:hover {
  padding-left: 25px;
}
.it-header-main-menu nav > ul > li > .submenu > li > a:hover::before {
  width: 20px;
  visibility: visible;
  opacity: 1;
}
.it-header-main-menu nav > ul > li:hover > a {
  color: var(--it-theme-1);
}
.it-header-main-menu nav > ul > li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transition-duration: 0.2s;
  -webkit-transform: perspective(300px) rotateX(0deg);
  -moz-transform: perspective(300px) rotateX(0deg);
  -ms-transform: perspective(300px) rotateX(0deg);
  -o-transform: perspective(300px) rotateX(0deg);
  transform: perspective(300px) rotateX(0deg);
}
.it-header-main-menu nav > ul > li > a {
  font-weight: 700;
  font-size: 16px;
  color: var(--it-common-white);
  padding: 45px 0;
  display: inline-block;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-main-menu nav > ul > li > a {
    font-size: 14px;
  }
}
.it-header-main-menu nav > ul > li > a:hover {
  color: var(--it-theme-1);
}
.it-header-main-menu.menu-space {
  margin-left: 215px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-header-main-menu.menu-space {
    margin-left: 95px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-header-main-menu.menu-space {
    margin-left: 85px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-main-menu.menu-space {
    margin-left: 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-header-main-menu.menu-space nav > ul > li {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-header-main-menu.menu-space nav > ul > li > a {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-main-menu.menu-space nav > ul > li > a {
    font-size: 14px;
  }
}
.it-header-bar button {
  color: var(--it-common-black);
  height: 40px;
  width: 40px;
  border-radius: 0px;
  background-color: var(--it-common-white);
  line-height: 39px;
  font-size: 18px;
  margin: 15px 0;
  margin-left: 0px;
  margin-left: 30px;
}
.it-header-plr {
  padding: 0 105px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-plr {
    padding: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-header-plr {
    padding: 0px 15px;
  }
}
.it-header-sticky.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  width: 100%;
  -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -khtml-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -moz-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -ms-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  -o-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
  background-color: var(--it-theme-2);
  z-index: 999;
}
.it-header-sticky.header-sticky .it-header-4-border {
  border-bottom: none;
}
.it-header-sticky.header-sticky .it-header-main-menu > ul > li > a {
  padding: 30px 0;
}

/*----------------------------------------*/
/*  13. hero css start
/*----------------------------------------*/
.it-hero-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 365px;
  padding-bottom: 265px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-bg {
    padding-top: 320px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-bg {
    padding-top: 320px;
    padding-bottom: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-bg {
    padding: 200px 0;
  }
}
@media (max-width: 767px) {
  .it-hero-bg {
    padding: 180px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-bg {
    padding: 210px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-content {
    flex-wrap: wrap;
  }
}
.it-hero-content p {
  font-weight: 500;
  font-size: 20px;
  color: var(--it-common-white);
  line-height: 36px;
  margin-right: 80px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-content p {
    font-size: 16px;
    margin-bottom: 40px;
  }
  .it-hero-content p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-hero-content p {
    font-size: 15px;
    margin-bottom: 40px;
    line-height: 30px;
    margin-right: 0;
  }
  .it-hero-content p br {
    display: none;
  }
}
.it-hero-thumb {
  position: absolute;
  top: 210px;
  right: 225px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-thumb {
    right: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-thumb {
    top: 150px;
    right: 40px;
  }
}
.it-hero-social {
  position: absolute;
  left: 35px;
  bottom: 49%;
  z-index: 99;
  transform: rotate(-90deg);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-social {
    left: -5%;
  }
}
.it-hero-social a {
  color: var(--it-common-white);
  font-weight: 500;
  font-size: 16px;
  transition: 0.3s;
  margin: 0 13px;
}
.it-hero-social a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-social a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-social a {
    font-size: 12px;
  }
}
.it-hero-mouse-scroll {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}
.it-hero-mouse-scroll a svg {
  animation: scroll 1s infinite ease-in-out alternate;
}
.it-hero-shape-1 {
  position: absolute;
  top: 17%;
  left: 13%;
  animation: rotate2 15s linear infinite;
}
.it-hero-shape-2 {
  position: absolute;
  top: 25%;
  right: 40%;
  animation: rotate2 4s linear infinite;
}

.it-hero-2-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 335px;
  padding-bottom: 245px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-2-bg {
    padding-top: 280px;
    padding-bottom: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-2-bg {
    padding: 220px 0;
  }
}
@media (max-width: 767px) {
  .it-hero-2-bg {
    padding-top: 180px;
    padding-bottom: 190px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-2-bg {
    padding-top: 210px;
    padding-bottom: 230px;
  }
}
.it-hero-2-thumb {
  position: absolute;
  top: 158px;
  right: 240px;
  z-index: 2;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-2-thumb {
    right: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-2-thumb {
    right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-2-thumb {
    right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-2-thumb img {
    transform: scale(0.9);
  }
}
.it-hero-2-shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.it-hero-2-shape-2 {
  position: absolute;
  top: 38%;
  right: 46%;
  animation: moving 9s linear infinite;
}
.it-hero-2-shape-3 {
  position: absolute;
  top: 23%;
  right: 7%;
  animation: tpupdown 0.8s infinite alternate;
}
.it-hero-2-shape-4 {
  position: absolute;
  bottom: 9%;
  left: 14%;
  animation: moving 9s linear infinite;
}
.it-hero-2-social {
  position: absolute;
  left: 20px;
  bottom: 42%;
  z-index: 99;
  transform: rotate(-90deg);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-2-social {
    left: -5%;
  }
}
.it-hero-2-social a {
  color: var(--it-common-white);
  font-weight: 500;
  font-size: 16px;
  transition: 0.3s;
  margin: 0 13px;
}
.it-hero-2-social a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-2-social a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-2-social a {
    font-size: 12px;
  }
}

.it-slider-3-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right;
  background-position: right center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  transition: transform 7000ms ease, opacity 2500ms ease-in;
  transition: transform 7000ms ease, opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}
.it-slider-3-overlay::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgb(14, 14, 14);
  opacity: 0.6;
}
.it-slider-3-height {
  height: 880px;
  justify-content: center;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-3-height {
    height: 850px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-3-height {
    height: 830px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-3-height {
    height: 800px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-3-height {
    height: 750px;
  }
}
@media (max-width: 767px) {
  .it-slider-3-height {
    height: 700px;
  }
}
.it-slider-3-title {
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  font-family: "DM Sans", sans-serif;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-3-title {
    font-size: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-3-title {
    font-size: 85px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-3-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-3-title {
    font-size: 67px;
  }
  .it-slider-3-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-slider-3-title {
    font-size: 55px;
  }
  .it-slider-3-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-slider-3-title {
    font-size: 56px;
  }
}
.it-slider-3-title span {
  padding-left: 215px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-3-title span {
    padding-left: 0;
  }
}
.it-slider-3-title-box {
  transform: translateY(-150px);
  opacity: 0;
  margin-top: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-3-title-box {
    margin-top: 0;
  }
}
.it-slider-3-text {
  transform: translateX(150px);
  opacity: 0;
}
.it-slider-3-text p {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: var(--it-common-white);
  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) {
  .it-slider-3-text p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-3-text p {
    font-size: 14px;
  }
  .it-slider-3-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-slider-3-text p {
    font-size: 14px;
  }
  .it-slider-3-text p br {
    display: none;
  }
}
.it-slider-3-social {
  position: absolute;
  left: 110px;
  bottom: 46%;
  z-index: 99;
  transform: rotate(-90deg);
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-slider-3-social {
    left: -3%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-3-social {
    left: -5%;
  }
}
.it-slider-3-social a {
  color: var(--it-common-white);
  font-weight: 500;
  font-size: 16px;
  transition: 0.3s;
  margin: 0 13px;
}
.it-slider-3-social a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-3-social a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-3-social a {
    font-size: 12px;
  }
}
.it-slider-3-button {
  opacity: 0;
  transform: translateY(150px);
}
.it-slider-3-active .swiper-slide.swiper-slide-active .it-slider-3-bg {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  opacity: 0.6;
  visibility: visible;
}
.it-slider-3-active .swiper-slide.swiper-slide-active .it-slider-3-title-box {
  opacity: 1;
  transform: translateY(0px);
  transition: all 3000ms ease;
}
.it-slider-3-active .swiper-slide.swiper-slide-active .it-slider-3-text {
  opacity: 1;
  transform: translateX(0px);
  transition: all 3000ms ease;
}
.it-slider-3-active .swiper-slide.swiper-slide-active .it-slider-3-button {
  opacity: 1;
  transform: translateY(0px);
  transition: all 3000ms ease;
}

.it-slider-4-space {
  padding-top: 368px;
  padding-bottom: 250px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-4-space {
    padding-top: 290px;
    padding-bottom: 260px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-space {
    padding-top: 280px;
    padding-bottom: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-4-space {
    padding: 250px 0;
  }
}
@media (max-width: 767px) {
  .it-slider-4-space {
    padding-top: 220px;
    padding-bottom: 180px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-slider-4-space {
    padding-top: 220px;
    padding-bottom: 200px;
  }
}
.it-slider-4-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: left;
  background-position: right center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  transition: opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  transition: transform 9000ms ease, opacity 2500ms ease-in;
  transition: transform 9000ms ease, opacity 2500ms ease-in, -webkit-transform 7000ms ease;
  z-index: 1;
  opacity: 0.5;
  visibility: hidden;
}
.it-slider-4-overlay {
  position: relative;
}
.it-slider-4-overlay::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(14, 14, 14);
  opacity: 0.5;
  z-index: 2;
}
.it-slider-4-active .swiper-slide.swiper-slide-active .it-slider-4-bg {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 1;
  visibility: visible;
}
.it-slider-4-active .swiper-slide.swiper-slide-active .it-slider-4-section-title {
  opacity: 1;
  transform: translateY(0px);
  transition: all 3000ms ease;
}
.it-slider-4-active .swiper-slide.swiper-slide-active .it-slider-4-btn-box {
  opacity: 1;
  transform: translateY(0px);
  transition: all 3000ms ease;
}
.it-slider-4-active .swiper-slide.swiper-slide-active .it-slider-4-shape-1 {
  opacity: 1;
  transform: translateX(0px);
  transition: all 2000ms ease;
}
.it-slider-4-section-title {
  transform: translateY(-150px);
  opacity: 0;
}
.it-slider-4-btn-box {
  transform: translateY(150px);
  opacity: 0;
}
.it-slider-4-title {
  font-size: 100px;
  line-height: 1.1;
  font-family: "DM Sans", sans-serif;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-4-title {
    font-size: 95px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-4-title {
    font-size: 82px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-4-title {
    font-size: 61px;
  }
  .it-slider-4-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-slider-4-title {
    font-size: 52px;
  }
  .it-slider-4-title br {
    display: none;
  }
}
.it-slider-4-subtitle {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "DM Sans", sans-serif;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-4-subtitle {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-4-subtitle {
    font-size: 15px;
  }
}
.it-slider-4-social {
  position: absolute;
  right: 2%;
  bottom: 49%;
  z-index: 99;
  transform: rotate(-90deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-4-social {
    right: -3%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-social {
    right: -4%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-4-social {
    right: -6%;
  }
}
@media (max-width: 767px) {
  .it-slider-4-social {
    display: none;
  }
}
.it-slider-4-social a {
  color: var(--it-common-white);
  font-weight: 500;
  font-size: 16px;
  transition: 0.3s;
  margin: 0 13px;
}
.it-slider-4-social a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-social a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-4-social a {
    font-size: 12px;
  }
}
.it-slider-4-circle {
  position: absolute;
  bottom: -225px;
  left: 0;
  right: 0;
  z-index: 99;
  text-align: center;
}
@media (max-width: 767px) {
  .it-slider-4-circle {
    display: none;
  }
}
.it-slider-4-circle span {
  display: inline-block;
  height: 450px;
  width: 450px;
  border-radius: 50%;
  background-color: #F400A1;
  opacity: 0.602;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-4-circle span {
    height: 400px;
    width: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-circle span {
    height: 380px;
    width: 380px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-4-circle span {
    height: 350px;
    width: 350px;
  }
}
.it-slider-4-arrow-box {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 99;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-arrow-box {
    top: 27%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-slider-4-arrow-box {
    top: 23%;
  }
}
.it-slider-4-arrow-box::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  background-color: #bc766d;
  height: 50px;
  width: 1px;
}
.it-slider-4-arrow-box button {
  font-size: 16px;
  color: #bb776d;
  transition: 0.3s;
  margin: 0 10px;
}
.it-slider-4-arrow-box button.active {
  color: var(--it-common-white);
}
.it-slider-4-arrow-box button:hover {
  color: var(--it-common-white);
}
.it-slider-4-content {
  position: relative;
  z-index: 999;
}
.it-slider-4-shape-1 {
  opacity: 0;
  transform: translateX(-300px);
  position: absolute;
  bottom: 145px;
  left: 265px;
  z-index: 99;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-slider-4-shape-1 {
    left: 160px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-slider-4-shape-1 {
    left: 70px;
  }
}
.it-slider-4-shape-2 {
  position: absolute;
  top: 250px;
  right: 475px;
  z-index: 99;
  animation: rotate2 15s linear infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-slider-4-shape-2 {
    right: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-slider-4-shape-2 {
    right: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-slider-4-shape-2 {
    display: none;
  }
}

.it-hero-5-bg {
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 380px;
  padding-bottom: 260px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-5-bg {
    padding-top: 340px;
    padding-bottom: 250px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-5-bg {
    padding-top: 300px;
    padding-bottom: 250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-5-bg {
    padding-top: 250px;
    padding-bottom: 250px;
  }
}
@media (max-width: 767px) {
  .it-hero-5-bg {
    padding-top: 220px;
    padding-bottom: 200px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-5-bg {
    padding-top: 250px;
    padding-bottom: 220px;
  }
}
.it-hero-5-thumb {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-5-thumb {
    width: 50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .it-hero-5-thumb {
    display: none;
  }
}
.it-hero-5-thumb::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgb(0, 0, 0);
  opacity: 0.502;
}
.it-hero-5-title {
  font-size: 170px;
  line-height: 0.9;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-hero-5-title {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-5-title {
    font-size: 126px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-5-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-5-title {
    font-size: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-hero-5-title {
    font-size: 105px;
  }
}
@media (max-width: 767px) {
  .it-hero-5-title {
    font-size: 51px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-5-title {
    font-size: 80px;
  }
}
.it-hero-5-title span.text-space {
  padding-left: 480px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-5-title span.text-space {
    padding-left: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-hero-5-title span.text-space {
    padding-left: 250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-hero-5-title span.text-space {
    padding-left: 0px;
  }
}
.it-hero-5-shape-1 {
  position: absolute;
  top: 205px;
  left: 295px;
}
@media (max-width: 767px) {
  .it-hero-5-shape-1 {
    top: 115px;
    left: 235px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-hero-5-shape-1 {
    top: 115px;
    left: 335px;
  }
}
.it-hero-5-video-box {
  position: absolute;
  bottom: 285px;
  left: 605px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-hero-5-video-box {
    bottom: 255px;
    left: 470px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-hero-5-video-box {
    bottom: 255px;
    left: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-hero-5-video-box {
    bottom: 235px;
    left: 350px;
  }
}
.it-hero-5-video-text {
  animation: rotate2 15s linear infinite;
}
.it-hero-5-video-icon {
  top: 50%;
  left: 50%;
  z-index: 9;
  position: absolute;
  transform: translate(-50%, -50%);
}
.it-hero-5-video-icon a {
  color: var(--it-theme-1);
}

.it-scroll-bottom {
  position: absolute;
  bottom: 8%;
  right: 2%;
  transform: rotate(-90deg);
  z-index: 99;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-scroll-bottom {
    right: -3%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-scroll-bottom {
    right: -4%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-scroll-bottom {
    right: -5%;
  }
}
@media (max-width: 767px) {
  .it-scroll-bottom {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-scroll-bottom {
    right: -6%;
  }
}
.it-scroll-bottom::before {
  content: "";
  display: inline-block;
  background-color: var(--it-common-white);
  width: 61px;
  height: 1px;
  margin-right: 5px;
  transform: translateY(-4px);
}
.it-scroll-bottom a {
  font-weight: 500;
  font-size: 16px;
  color: var(--it-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-scroll-bottom a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-scroll-bottom a {
    font-size: 12px;
  }
}

.it-mouse-scroll {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}
.it-mouse-scroll a svg {
  animation: scroll 1s infinite ease-in-out alternate;
}
.it-mouse-scroll-space {
  left: 375px;
  bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-mouse-scroll-space {
    left: 135px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-mouse-scroll-space {
    left: 100px;
  }
}
@media (max-width: 767px) {
  .it-mouse-scroll-space {
    left: 50px;
  }
}

/*----------------------------------------*/
/*  18. service css start
/*----------------------------------------*/
.it-service-item {
  overflow: hidden;
  transition: 0.5s;
}
.it-service-item:hover {
  transform: translateY(-20px);
}
.it-service-item:hover .it-service-thumb-icon {
  opacity: 1;
  visibility: visible;
  top: 145px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-service-item:hover .it-service-thumb-icon {
    top: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-service-item:hover .it-service-thumb-icon {
    top: 130px;
  }
}
@media (max-width: 767px) {
  .it-service-item:hover .it-service-thumb-icon {
    top: 120px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-service-item:hover .it-service-thumb-icon {
    top: 40%;
  }
}
.it-service-item:hover .it-service-thumb-box {
  top: 56%;
}
.it-service-item:hover .it-service-thumb img {
  filter: grayscale(100%);
  opacity: 0.7;
  transform: scale(1.2);
}
@media (max-width: 767px) {
  .it-service-section-box {
    margin-bottom: 20px;
  }
}
.it-service-thumb {
  position: relative;
  overflow: hidden;
}
.it-service-thumb img {
  transition: 0.7s;
}
.it-service-thumb::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgb(14, 14, 14);
  opacity: 0.4;
  top: 0;
  left: 0;
  position: absolute;
}
.it-service-thumb-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: var(--it-theme-1);
  border-radius: 50%;
  line-height: 60px;
  color: var(--it-common-white);
  font-size: 22px;
  transition: 0.5s;
  top: 45px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .it-service-thumb-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-service-thumb-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    top: 20%;
  }
}
.it-service-thumb-icon:hover {
  background-color: var(--it-common-white);
  color: var(--it-theme-1);
}
.it-service-thumb-title {
  font-size: 22px;
  margin-bottom: 0;
  transition: 0.3s;
}
.it-service-thumb-title:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-thumb-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-service-thumb-title {
    font-size: 22px;
  }
}
.it-service-thumb-box {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  transition: 0.5s;
}
.it-service-active {
  padding: 20px 0;
  margin: -20px 0;
  margin-right: -390px;
}

.it-service-2-item {
  padding: 60px;
  position: relative;
  z-index: 11;
  transition: all 0.3s linear;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-service-2-item {
    padding: 60px 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-service-2-item {
    padding: 40px 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-2-item {
    padding: 40px 30px;
  }
}
.it-service-2-item::after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  content: "";
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transform: scale(0.8) translate(-50%, -50%);
  transition: 0.5s;
  background-color: var(--it-common-black-2);
}
.it-service-2-item span {
  font-weight: 700;
  font-size: 18px;
  color: var(--it-theme-1);
  display: block;
  margin-bottom: 20px;
}
.it-service-2-item p {
  line-height: 30px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-2-item p {
    font-size: 14px;
  }
}
.it-service-2-item > a {
  font-weight: 700;
  font-size: 14px;
  color: var(--it-common-white);
  display: block;
  text-transform: uppercase;
  transition: 0.3s;
}
.it-service-2-item > a i {
  display: inline-block;
  margin-left: 10px;
  transform: translateY(1px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  color: var(--it-theme-1);
}
.it-service-2-item.active::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(-50%, -50%);
}
.it-service-2-item.active > a {
  color: var(--it-theme-1);
}
.it-service-2-item.active > a i {
  opacity: 1;
  visibility: visible;
}
.it-service-2-item.active.color-none span {
  color: var(--it-theme-1);
}
.it-service-2-item.color-none::after {
  display: none;
}
.it-service-2-item.color-none span {
  line-height: 0;
  margin-bottom: 30px;
  font-size: 75px;
  color: var(--it-common-white);
  transition: 0.3s;
}
.it-service-2-title {
  font-weight: 700;
  font-size: 24px;
  color: var(--it-common-white);
  margin-bottom: 29px;
  transition: 0.3s;
}
.it-service-2-title:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-service-2-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-service-2-title {
    font-size: 21px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-2-title {
    font-size: 20px;
  }
}
.it-service-2-shape {
  position: absolute;
  top: -150px;
  right: 1%;
  animation: tpupdown 0.8s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-service-2-shape {
    top: -100px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-service-2-shape img {
    max-width: 50%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-4__section-box {
    margin-bottom: 30px;
  }
}
.it-service-4__section-mb {
  margin-bottom: 80px;
}
.it-service-4__item {
  padding: 40px 15px;
  background-color: #181818;
  box-shadow: 2px 3.464px 20px 0px rgba(16, 23, 40, 0.06);
  position: relative;
  z-index: 11;
  transition: 0.3s;
}
.it-service-4__item::after {
  position: absolute;
  content: "";
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  z-index: -1;
  background-color: #1f1f1f;
  transition: 0.5s;
}
.it-service-4__item:hover::after {
  background-color: #d7421f;
  top: 23px;
}
.it-service-4__item:hover span {
  color: var(--it-common-white);
}
.it-service-4__item:hover .it-service-4__link a {
  color: #FFF;
}
.it-service-4__item:hover .it-service-4__title {
  color: #FFF;
}
.it-service-4__item:hover .it-service-4__overly {
  opacity: 1;
  visibility: visible;
  background-color: #F400A1;
}
.it-service-4__item span {
  font-size: 54px;
  color: var(--it-theme-1);
  margin-bottom: 15px;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.it-service-4__overly {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--it-theme-3);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  z-index: -1;
}
.it-service-4__shape-1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.it-service-4__title {
  font-size: 20px;
  padding-bottom: 15px;
  transition: 0.5s;
}
.it-service-4__link a {
  color: #6a6a6a;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.5s;
}
.it-service-4__top-text p {
  margin-bottom: 0;
  padding-left: 85px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-service-4__top-text p {
    font-size: 14px;
  }
  .it-service-4__top-text p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-4__top-text p {
    font-size: 14px;
    padding-left: 0;
  }
  .it-service-4__top-text p br {
    display: none;
  }
}
.it-service-4__bottom-text p {
  margin-bottom: 0;
}
.it-service-4__bottom-text p a {
  font-weight: 500;
  font-size: 16px;
  color: var(--it-theme-1);
}
.it-service-4__shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  animation: ittranslateX2 3s infinite alternate;
}
.it-service-4__shape-3 {
  position: absolute;
  left: 0;
  top: 0;
}

.it-service-item-box:hover {
  transform: translateY(0);
}
.it-service-item-box:hover .it-service-thumb-icon-2 {
  top: 34%;
  opacity: 1;
  visibility: visible;
}
.it-service-item-box .it-service-thumb-icon-2 {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  text-align: center;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-item-box .it-service-thumb-icon-2 svg {
    width: 40px;
  }
}

/*--- service details goes here ---*/
.it-service-details__wrap {
  margin-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) {
  .it-service-details__wrap {
    margin-left: 0;
  }
}
.it-service-details__list {
  padding-bottom: 60px;
}
.it-service-details__list ul li {
  font-weight: 500;
  list-style-type: none;
  padding-left: 28px;
  padding-bottom: 15px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-service-details__list ul li {
    font-size: 14px;
  }
}
.it-service-details__list ul li:last-child {
  padding-bottom: 0;
}
.it-service-details__list ul li i {
  position: absolute;
  top: 3px;
  left: 0;
  font-size: 18px;
  color: var(--it-theme-1);
}
.it-service-details__title {
  font-size: 30px;
  padding-bottom: 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) {
  .it-service-details__title {
    font-size: 24px;
  }
}
.it-service-details__content-box p {
  padding-right: 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) {
  .it-service-details__content-box p {
    padding-right: 0;
    font-size: 14px;
  }
}
.it-service-details__thumb-box {
  padding: 40px 35px;
  position: relative;
  z-index: 1;
}
.it-service-details__thumb-box::before {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../img/service/Details-1-1.png);
  opacity: 10%;
  position: absolute;
  z-index: 1;
}
.it-service-details__thumb-box::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--it-theme-1);
  position: absolute;
  z-index: -1;
}
.it-service-details__thumb-shape {
  position: absolute;
  bottom: 0;
  left: 0;
}
.it-service-details__main-thumb {
  position: absolute;
  top: 0;
  right: 0;
}
.it-service-details__thumb-box {
  height: 395px;
}
.it-service-details__icon-2 {
  margin-right: 15px;
}
.it-service-details__icon-2 span {
  font-size: 35px;
  color: var(--it-common-black);
  display: inline-block;
  transform: translateY(4px);
  position: relative;
}
.it-service-details__icon-2 span::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--it-theme-1);
  border-radius: 50%;
  z-index: -1;
}

/*----------------------------------------*/
/*  04. about css start
/*----------------------------------------*/
.it-about-2-button-text span {
  font-weight: 700;
  display: inline-block;
  line-height: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-2-button-text span {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-about-2-button-text span {
    line-height: 1;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-about-2-button-text span {
    line-height: 0;
    margin-top: 0px;
  }
}
.it-about-2-button-text span b {
  font-family: var(--it-ff-heading);
  font-size: 80px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  color: transparent;
  margin-right: 10px;
  margin-left: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-2-button-text span b {
    font-size: 50px;
    margin-right: 10px;
    margin-left: 20px;
  }
}
@media (max-width: 767px) {
  .it-about-2-button-text span b {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-about-2-button-text span b {
    margin-left: 30px;
  }
}
.it-about-2-section-box p {
  line-height: 30px;
  margin-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-2-section-box p {
    font-size: 14px;
  }
}
.it-about-2-section-box span {
  color: var(--it-theme-1);
  display: block;
  padding-bottom: 20px;
}
.it-about-2-thumb-box {
  margin-left: -95px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-2-thumb-box {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-2-thumb-box {
    margin-left: 0;
    text-align: center;
    margin-bottom: 50px;
  }
}
.it-about-2-thumb-box img {
  max-width: inherit;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-2-thumb-box img {
    max-width: 100%;
  }
}
.it-about-2-right-box {
  margin-left: 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) {
  .it-about-2-right-box {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .it-about-2-button {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-left-box {
    margin-bottom: 50px;
  }
}
.it-about-3-left-box .it-section-title-1 {
  margin-right: -160px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-left-box .it-section-title-1 {
    margin-right: 0;
  }
}
.it-about-3-text p {
  line-height: 30px;
  margin-bottom: 44px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-text p {
    font-size: 14px;
  }
}
.it-about-3-icon-box {
  margin-bottom: 48px;
}
.it-about-3-icon span {
  margin-right: 20px;
  font-size: 40px;
  color: var(--it-theme-1);
  display: inline-block;
}
.it-about-3-icon-text p {
  line-height: 30px;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-about-3-icon-text p {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-about-3-icon-text p {
    font-size: 14px;
    line-height: 24px;
  }
}
.it-about-3-title-sm {
  font-size: 22px;
}
@media (max-width: 767px) {
  .it-about-3-title-sm {
    font-size: 18px;
  }
}
.it-about-3-content {
  margin-right: 75px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-3-content {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-content {
    margin-right: 0px;
  }
}
.it-about-3-main-thumb {
  margin-bottom: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-main-thumb img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.it-about-3-thumb-box {
  margin-right: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-thumb-box {
    margin-right: 0;
  }
}
.it-about-3-thumb-sm-1 {
  position: absolute;
  top: 30px;
  left: 36px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-3-thumb-sm-1 {
    left: 7px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-3-thumb-sm-1 {
    left: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-thumb-sm-1 {
    position: static;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-thumb-sm-1 img {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-3-thumb-sm-2 img {
    width: 100%;
  }
}
.it-about-3-shape-1 {
  position: absolute;
  right: -85px;
  top: 95px;
  animation: tpupdown 0.8s infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-3-shape-1 {
    right: -60px;
  }
}
.it-about-3-shape-2 {
  position: absolute;
  left: 90px;
  bottom: 75px;
  animation: tpupdown 0.6s infinite alternate;
}
.it-about-3-shape-3 {
  position: absolute;
  left: -160px;
  bottom: 0px;
  animation: rotate2 15s linear infinite;
}

.it-about-5-space {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-space {
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-left-box {
    margin-bottom: 50px;
  }
}
.it-about-5-content p {
  line-height: 30px;
  margin-bottom: 40px;
  padding-right: 105px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-about-5-content p {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-about-5-content p {
    font-size: 14px;
    padding-right: 0;
  }
}
.it-about-5-content-icon-box span {
  margin-right: 28px;
}
.it-about-5-content-icon-box h5 {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-content-icon-box h5 {
    font-size: 17px;
    line-height: 26px;
  }
}
.it-about-5-content-list ul li {
  font-weight: 500;
  font-size: 18px;
  list-style-type: none;
  position: relative;
  padding-left: 40px;
  color: var(--it-common-white);
  font-family: var(--it-ff-heading);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-about-5-content-list ul li {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .it-about-5-content-list ul li {
    font-size: 15px;
  }
}
.it-about-5-content-list ul li:not(:last-child) {
  margin-bottom: 10px;
}
.it-about-5-content-list ul li span {
  position: absolute;
  top: -1px;
  left: 0;
}
.it-about-5-thumb-2 {
  position: absolute;
  bottom: -195px;
  left: -190px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-about-5-thumb-2 {
    left: -130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-thumb-2 {
    position: static;
  }
}
.it-about-5-thumb-2 img {
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-main-thumb {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-about-5-main-thumb img {
    width: 100%;
  }
}
.it-about-5-shape-1 {
  position: absolute;
  top: 90px;
  left: 20px;
  animation: rotate2 15s linear infinite;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-about-5-shape-1 {
    left: 5%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-about-5-shape-1 {
    left: 1%;
  }
}
.it-about-5-shape-2 {
  position: absolute;
  bottom: -90px;
  right: 25px;
}

/*----------------------------------------*/
/*  22. text slider css start
/*----------------------------------------*/
.it-text-slider-space {
  padding-top: 100px;
  padding-bottom: 145px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-text-slider-space {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}
.it-text-slider-item {
  animation: scrollText-2 20s infinite linear;
}
.it-text-slider-item span {
  font-weight: 700;
  font-size: 170px;
  font-family: var(--it-ff-heading);
  color: var(--it-common-white);
  line-height: 1;
  white-space: nowrap;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-text-slider-item span {
    font-size: 110px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-text-slider-item span {
    font-size: 90px;
  }
}
.it-text-slider-item span i {
  height: 20px;
  width: 20px;
  border-radius: 20px;
  background-color: var(--it-theme-1);
  display: inline-block;
  transform: translateY(-48px);
}
.it-text-slider-shape-1 {
  position: absolute;
  top: 32px;
  left: 330px;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-text-slider-shape-1 {
    left: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-shape-1 {
    left: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-text-slider-shape-1 {
    left: 40px;
  }
}
.it-text-slider-shape-2 {
  position: absolute;
  bottom: 30%;
  left: 39%;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-text-slider-shape-2 {
    left: 32%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-shape-2 {
    left: 32%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-text-slider-shape-2 {
    left: 35%;
    bottom: 22%;
  }
}
.it-text-slider-shape-3 {
  position: absolute;
  top: 1%;
  right: 33%;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-shape-3 {
    right: 30%;
  }
}
.it-text-slider-shape-4 {
  position: absolute;
  bottom: 30%;
  right: 150px;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-shape-4 {
    right: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-text-slider-shape-4 {
    right: 40px;
  }
}

.it-text-slider-5-item {
  animation: scrollText-2 20s infinite linear;
}
.it-text-slider-5-item > span {
  font-weight: 700;
  font-size: 70px;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--it-ff-heading);
  color: var(--it-common-white);
}
.it-text-slider-5-item > span > i {
  font-size: 40px;
  color: var(--it-theme-1);
  display: inline-block;
  transform: translateY(-12px);
}
.it-text-slider-5-item.item-text > span {
  font-size: 170px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-text-slider-5-item.item-text > span {
    font-size: 130px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-5-item.item-text > span {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-text-slider-5-item.item-text > span {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .it-text-slider-5-item.item-text > span {
    font-size: 95px;
  }
}
.it-text-slider-5-item.item-text > span > i {
  font-style: normal;
  -webkit-text-stroke: 1px #fff;
  font-weight: 600;
  color: transparent;
  transform: translateY(-3px);
  font-size: 170px;
  position: relative;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-text-slider-5-item.item-text > span > i {
    font-size: 130px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-text-slider-5-item.item-text > span > i {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-text-slider-5-item.item-text > span > i {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .it-text-slider-5-item.item-text > span > i {
    font-size: 95px;
  }
}
.it-text-slider-5-item.item-text > span > i::after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: var(--it-theme-1);
  top: 50%;
  right: -2%;
  transform: translateY(-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) {
  .it-text-slider-5-item.item-text > span > i::after {
    height: 10px;
    width: 10px;
  }
}

/*----------------------------------------*/
/*  17. project css start
/*----------------------------------------*/
.col-custom {
  flex: 1;
  width: 290px;
  height: 600px;
  margin: 0px 5px 20px 5px;
  transition: 0.4s;
  cursor: pointer;
}
@media (max-width: 767px) {
  .col-custom.active {
    width: 100%;
  }
}

.row-custom {
  display: flex;
  margin: 0 -15px;
}
@media (max-width: 767px) {
  .row-custom {
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
}

.it-panel-content {
  height: 100%;
}
.it-panel-content img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
.it-panel-title {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-panel-title {
    font-size: 20px;
    margin-right: 20px;
  }
  .it-panel-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-panel-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .it-panel-title br {
    display: none;
  }
}
.it-panel-icon > a {
  font-size: 24px;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 67px;
  border-radius: 50%;
  text-align: center;
  color: var(--it-common-white);
  background-color: rgba(255, 255, 255, 0.2);
  transition: 0.3s;
}
.it-panel-icon > a:hover {
  color: var(--it-theme-1);
}
.it-panel-icon.black-color a {
  background-color: var(--it-common-black);
}
.it-panel-item-box.text-color {
  position: relative;
}
.it-panel-item-box.text-color::after {
  content: "";
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  background-image: -moz-linear-gradient(90deg, rgb(255, 56, 56) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-linear-gradient(90deg, rgb(255, 56, 56) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -ms-linear-gradient(90deg, rgb(255, 56, 56) 0%, rgba(0, 0, 0, 0) 100%);
}
.it-panel-title-2 {
  font-size: 24px;
  font-weight: 700;
  padding: 12px 30px;
  background-color: var(--it-common-black);
  color: var(--it-common-white);
  text-transform: uppercase;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-panel-title-2 {
    font-size: 17px;
  }
}
.it-panel-item-2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0;
  opacity: 0;
  margin: 40px;
  z-index: 1;
  visibility: hidden;
  transition-delay: 0.4s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-panel-text {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-panel-item-2 {
    margin: 30px 15px;
  }
}

.col-custom.active {
  flex: 2;
  height: 360px;
}
.col-custom.active .it-panel-content img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
.col-custom.active .it-panel-item-2 {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.3s;
}
.col-custom.active .it-panel-item-box.text-color::after {
  opacity: 1;
  visibility: visible;
}

.it-project-list-box ul li {
  border-top: 1px solid var(--it-border-1);
  list-style-type: none;
  padding: 52px 0;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-list-box ul li {
    padding: 35px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-project-list-box ul li {
    padding: 25px 0;
  }
}
.it-project-list-box ul li:last-child {
  border-bottom: 1px solid var(--it-border-1);
}
.it-project-list-box ul li:hover .it-project-content-thumb {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.it-project-list-box ul li:hover .it-project-content {
  padding-left: 90px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-list-box ul li:hover .it-project-content {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-list-box ul li:hover .it-project-content {
    padding-left: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-list-box ul li:hover .it-project-content {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-list-box ul li:hover .it-project-content {
    padding-left: 40px;
  }
}
@media (max-width: 767px) {
  .it-project-list-box ul li:hover .it-project-content {
    padding-left: 0;
  }
}
.it-project-list-box ul li:hover .it-project-content-arrow {
  left: 0;
}
@media (max-width: 767px) {
  .it-project-list-box ul li:hover .it-project-content-arrow {
    display: none;
  }
}
.it-project-content {
  transition: 0.5s;
  overflow: hidden;
}
.it-project-content-thumb {
  position: absolute;
  z-index: 1;
  top: -101%;
  left: 31%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transform: scale(0.7);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-content-thumb {
    top: -63%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-content-thumb {
    top: -62%;
  }
}
@media (max-width: 767px) {
  .it-project-content-thumb {
    display: none;
  }
}
.it-project-content-arrow {
  position: absolute;
  top: -5px;
  left: -80px;
  transition: 0.5s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-content-arrow {
    top: -10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-project-content-arrow {
    top: -12px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-content-arrow span svg {
    width: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-content-arrow span svg {
    width: 38px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-content-arrow span svg {
    width: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-project-content-arrow span svg {
    width: 25px;
  }
}
.it-project-content-title {
  font-size: 36px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-content-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-content-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-content-title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-content-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .it-project-content-title {
    font-size: 22px;
  }
}
.it-project-content-text {
  margin-left: -30px;
}
@media (max-width: 767px) {
  .it-project-content-text {
    margin-left: 0;
  }
}
.it-project-content-text p {
  font-size: 16px;
  line-height: 30px;
  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) {
  .it-project-content-text p {
    font-size: 15px;
  }
}
.it-project-shape-1 {
  position: absolute;
  top: 95px;
  right: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-shape-1 {
    top: -30px;
    right: -20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-shape-1 {
    top: -30px;
    right: -30px;
  }
}

@media (max-width: 767px) {
  .it-project-2-section-box {
    margin-bottom: 30px;
  }
}
.it-project-2-plr {
  padding: 0 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) {
  .it-project-2-plr {
    padding: 0 15px;
  }
}
@media (max-width: 767px) {
  .it-project-2-plr {
    padding-right: 0px;
    padding-left: 15px;
  }
}

.it-project-3-item-content {
  margin-right: 45px;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-3-item-content {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-content {
    margin-right: 0;
    flex-wrap: wrap;
  }
}
.it-project-3-item-bg {
  padding: 180px 365px;
  margin-right: 45px;
  position: relative;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-project-3-item-bg {
    padding: 130px 280px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-3-item-bg {
    padding: 120px 250px;
    margin-right: 20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-3-item-bg {
    padding: 100px 150px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-3-item-bg {
    padding: 85px 30px;
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-3-item-bg {
    padding: 85px 30px;
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-bg {
    padding: 65px 30px;
    margin-right: 0;
  }
}
.it-project-3-item-bg::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-image: url(../img/project/project-3-1.jpg);
  height: 100%;
  width: 0%;
  opacity: 0;
  visibility: hidden;
  transition: 0.9s;
}
.it-project-3-item-bg::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: rgba(24, 24, 24, 0.541);
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}
.it-project-3-item-arrow a {
  font-size: 50px;
  display: inline-block;
  height: 150px;
  width: 150px;
  line-height: 150px;
  text-align: center;
  border-radius: 50%;
  color: var(--it-common-white);
  background-color: transparent;
  transition: 0.4s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-3-item-arrow a {
    font-size: 40px;
    height: 100px;
    width: 100px;
    line-height: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-3-item-arrow a {
    font-size: 40px;
    height: 70px;
    width: 70px;
    line-height: 70px;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-arrow a {
    font-size: 22px;
    height: 50px;
    width: 50px;
    line-height: 54px;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-text {
    margin-bottom: 20px;
  }
}
.it-project-3-item-text span {
  font-weight: 600;
  font-size: 18px;
  color: var(--it-common-white);
  display: inline-block;
  margin-bottom: 16px;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-3-item-text span {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-3-item-text span {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-3-item-text span {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-text span {
    font-size: 13px;
  }
}
.it-project-3-item-text span i {
  font-style: normal;
  margin-left: 30px;
}
.it-project-3-item-title {
  font-size: 48px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-project-3-item-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-project-3-item-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-project-3-item-title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-project-3-item-title {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .it-project-3-item-title {
    font-size: 30px;
  }
}

.it-project-3-item-bg.active::after {
  width: 100%;
  opacity: 1;
  visibility: visible;
}
.it-project-3-item-bg.active::before {
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-portfolio-details-left-wrap {
    margin-bottom: 50px;
  }
}
.it-portfolio-details-left-item {
  margin-bottom: 25px;
}
.it-portfolio-details-left-item span {
  font-size: 18px;
  font-weight: 400;
  color: #888888;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-portfolio-details-left-item span {
    font-size: 16px;
  }
}
.it-portfolio-details-left-social a {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 43px;
  color: var(--it-common-white);
  display: inline-block;
  margin-right: 15px;
}
.it-portfolio-details-left-social a.facebook {
  background-color: #4661c5;
}
.it-portfolio-details-left-social a.twitter {
  background-color: #1da1f2;
}
.it-portfolio-details-left-social a.instagram {
  background-color: #ff2e2e;
}
.it-portfolio-details-left-social a.linkedin {
  background-color: #0073b0;
}
.it-portfolio-details-left-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--it-common-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) {
  .it-portfolio-details-left-title {
    font-size: 20px;
  }
}
.it-portfolio-details-right-top-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--it-common-white);
  line-height: 1.1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-portfolio-details-right-top-title {
    font-size: 32px;
  }
}
.it-portfolio-details-right-top-wrap p {
  font-size: 22px;
  font-weight: 400;
  color: var(--it-theme-1);
  line-height: 1.3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-portfolio-details-right-top-wrap p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .it-portfolio-details-right-top-wrap p {
    font-size: 16px;
  }
  .it-portfolio-details-right-top-wrap p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-portfolio-details-right-content p {
    font-size: 14px;
  }
}
.it-portfolio-details-right-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--it-common-white);
  margin-bottom: 15px;
}

/*----------------------------------------*/
/*  20. team css start
/*----------------------------------------*/
.it-team-item:hover .it-team-content {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}
.it-team-item:hover .it-team-thumb img {
  transform: scale(1.1) rotate(-2deg);
}
.it-team-thumb {
  overflow: hidden;
}
.it-team-thumb img {
  transition: 0.5s;
}
.it-team-content {
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  background-color: var(--it-common-white);
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 100%;
  padding-top: 35px;
  padding-bottom: 40px;
}
.it-team-content span {
  color: var(--it-common-black);
  display: inline-block;
  padding-bottom: 10px;
}
.it-team-content-title {
  color: var(--it-common-black);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 30px;
  transition: 0.3s;
}
.it-team-content-title:hover {
  color: var(--it-theme-1);
}
.it-team-content-social a {
  font-size: 16px;
  display: inline-block;
  height: 36px;
  width: 36px;
  border: 1px solid var(--it-common-black);
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  color: var(--it-common-black);
  margin: 0 5px;
  transition: 0.3s;
}
.it-team-content-social a:hover {
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
  border: 1px solid var(--it-theme-1);
}
.it-team-shape-1 {
  position: absolute;
  top: 80px;
  right: -3%;
  animation: rotate2 15s linear infinite;
}
.it-team-shape-2 {
  position: absolute;
  bottom: 16%;
  left: 7%;
  animation: moving 9s linear infinite;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-team-shape-2 {
    bottom: 5%;
    left: 5%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-team-shape-2 {
    bottom: 5%;
    left: 5%;
  }
}
.it-team-active {
  margin-right: -395px;
}
@media (max-width: 767px) {
  .it-team-active {
    margin-right: 0;
  }
}

.team-slider-dots {
  text-align: center;
  margin-top: 60px;
}
.team-slider-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 8px;
  display: inline-block;
  background-color: var(--it-common-white);
  opacity: 1;
  transition: 0.3s;
}
.team-slider-dots .swiper-pagination-bullet-active {
  background-color: var(--it-theme-1);
}
.team-slider-dots .swiper-pagination-bullet-active.swiper-pagination-bullet::after {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .team-slider-dots {
    display: none;
  }
}

.it-team-4-item:hover .it-team-4-thumb img {
  transform: scale(1.2) rotate(-2deg);
}
.it-team-4-thumb {
  overflow: hidden;
}
.it-team-4-thumb img {
  transition: 0.9s;
  width: 100%;
}
.it-team-4-content {
  padding: 30px;
}
.it-team-4-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 25px;
  transition: 0.3s;
}
.it-team-4-title:hover {
  color: var(--it-theme-1);
}
.it-team-4-info span {
  display: block;
  margin-bottom: 7px;
}
.it-team-4-social a {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 0 5px;
  color: var(--it-common-white);
  background-color: #212121;
  transition: 0.3s;
}
.it-team-4-social a:hover {
  background-color: var(--it-common-black);
  color: var(--it-theme-1);
}

.it-team-box .it-team-shape-1 {
  right: 30px;
  animation: rotate2 15s linear infinite;
}

.it-team-details__item {
  margin-right: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__item {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__thumb {
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__thumb img {
    width: 100%;
  }
}
.it-team-details__big-text {
  position: absolute;
  top: 31%;
  left: 8%;
  font-size: 120px;
  transform: rotate(-90deg);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-team-details__big-text {
    left: 3%;
  }
}
.it-team-details__bg {
  position: relative;
  padding-top: 60px;
  padding-bottom: 55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-team-details__bg {
    padding: 50px;
  }
}
@media (max-width: 767px) {
  .it-team-details__bg {
    padding: 30px 15px;
  }
}
.it-team-details__bg::after {
  position: absolute;
  background-color: var(--it-grey-1);
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  content: "";
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__bg::after {
    display: none;
  }
}
.it-team-details__title {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-team-details__title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__title {
    font-size: 24px;
  }
}
.it-team-details__content {
  padding-bottom: 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__content {
    padding-bottom: 20px;
  }
}
.it-team-details__content > span {
  display: block;
  padding-bottom: 15px;
  text-transform: capitalize;
}
.it-team-details__content > span > strong {
  color: var(--it-common-white);
  font-size: 16px;
}
.it-team-details__content > span a {
  transition: 0.3s;
}
.it-team-details__content > span a:hover {
  color: var(--it-theme-1);
}
.it-team-details__social a i {
  height: 38px;
  display: inline-block;
  width: 38px;
  line-height: 38px;
  border-radius: 50%;
  background-color: #4661c5;
  color: var(--it-common-white);
  text-align: center;
  margin-left: 5px;
}
.it-team-details__social a i.instagram {
  background-color: #1da1f2;
}
.it-team-details__social a i.linkedin {
  background-color: #c935a0;
}
.it-team-details__social a i.twitter {
  background-color: #0073b0;
}
.it-team-details__section-box span {
  display: inline-block;
  padding-bottom: 35px;
}
.it-team-details__text-box p {
  padding-right: 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) {
  .it-team-details__text-box p {
    font-size: 14px;
    padding-right: 0;
  }
}
.it-team-details__title-sm {
  font-size: 23px;
  padding-bottom: 3px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__title-sm {
    font-size: 20px;
  }
}
.it-team-details__progress {
  width: 100%;
}
.it-team-details__progress-item {
  position: relative;
}
@media (max-width: 767px) {
  .it-team-details__progress-item {
    padding-bottom: 30px;
  }
}
.it-team-details__progress-item.progress-pb {
  padding-bottom: 30px;
}
.it-team-details__progress-item h4 {
  font-weight: 800;
  font-size: 18px;
  padding-bottom: 4px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-team-details__progress-item h4 {
    font-size: 15px;
  }
}
.it-team-details__progress-item .progress-count {
  position: absolute;
  top: 3px;
  right: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--it-theme-1);
}
.it-team-details__progress-item .progress {
  height: 4px;
  background-color: #f5f3ee;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 30px;
}
.it-team-details__progress-item .progress .progress-bar {
  background-color: var(--it-theme-1);
  overflow: visible;
}
.it-team-details__progress-item .progress-goals {
  display: flex;
  justify-content: space-between;
}
.it-team-details__progress-item .progress-goals span {
  font-size: 14px;
  font-weight: 400;
}
.it-team-details__progress-item .progress-goals span b {
  font-weight: 800;
  color: var(--it-theme-1);
}

.details-cols-2 {
  padding-left: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .details-cols-2 {
    padding-left: 0;
  }
}

.details-cols-3 {
  padding-left: 75px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .details-cols-3 {
    padding-left: 0;
  }
}

/*----------------------------------------*/
/*  08. choose css start
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-choose-5-left-box {
    margin-bottom: 50px;
  }
}
.it-choose-5-text p {
  line-height: 30px;
}
@media (max-width: 767px) {
  .it-choose-5-icon-wrap {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-choose-5-icon-wrap {
    flex-wrap: nowrap;
  }
}
.it-choose-5-icon span {
  font-size: 60px;
  height: 85px;
  line-height: 105px;
  text-align: center;
  width: 85px;
  background-color: var(--it-common-black);
  color: var(--it-theme-1);
  display: inline-block;
  margin-right: 25px;
}
@media (max-width: 767px) {
  .it-choose-5-icon span {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-choose-5-icon span {
    margin-bottom: 0px;
  }
}
.it-choose-5-icon-text h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.it-choose-5-icon-text p {
  line-height: 30px;
}
.it-choose-5-thumb {
  position: relative;
}
.it-choose-5-thumb::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 35.2%;
  width: 10px;
  height: 208px;
  background-color: var(--it-theme-1);
  animation: tpupdown 0.8s infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-choose-5-thumb::after {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-choose-5-thumb img {
    width: 100%;
  }
}
.it-choose-5-thumb-sm {
  position: absolute;
  left: 30px;
  bottom: -130px;
  border: 12px solid var(--it-common-black-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-choose-5-thumb-sm {
    position: static;
    margin-top: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-choose-5-thumb-sm img {
    width: 100%;
  }
}

/*----------------------------------------*/
/*  05. award css start
/*----------------------------------------*/
.it-award-thumb img {
  max-width: inherit;
  margin-top: -75px;
  margin-bottom: 75px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-award-thumb img {
    max-width: 1005;
    margin-top: 0px;
    margin-bottom: 30px;
  }
}
.it-award-left-box {
  padding: 60px 0 55px 60px;
  height: 100%;
  padding-right: 375px;
  margin-left: 120px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-award-left-box {
    padding-right: 175px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-award-left-box {
    padding-right: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-award-left-box {
    padding: 60px 0 55px 30px;
    padding-right: 30px;
    margin-left: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-award-left-box {
    padding: 60px 0 55px 30px;
    padding-right: 30px;
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-award-left-box {
    padding: 60px 20px;
    margin-left: 0px;
    margin-bottom: 50px;
  }
}
.it-award-list-box {
  margin-left: 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-award-list-box {
    margin-left: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-award-list-box {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-award-list-box {
    margin-left: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-award-list-box {
    margin-left: 0px;
  }
}
.it-award-list-box ul li {
  padding: 30px 0;
  list-style-type: none;
  border-bottom: 1px solid #323235;
}
.it-award-wrap {
  padding: 20px 0;
}
@media (max-width: 767px) {
  .it-award-wrap {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .it-award-number {
    flex-wrap: wrap;
  }
}
.it-award-number i {
  font-size: 16px;
  color: #888888;
  font-style: normal;
  margin-right: 80px;
  margin-left: 30px;
}
@media (max-width: 767px) {
  .it-award-number i {
    margin-bottom: 20px;
  }
}
.it-award-content span {
  color: var(--it-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-award-content span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-award-content span {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-award-content span {
    font-size: 14px;
  }
}
.it-award-title {
  font-size: 32px;
  font-weight: 700;
  width: 200px;
  margin-right: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-award-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-award-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-award-title {
    font-size: 25px;
    margin-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-award-title {
    font-size: 25px;
    margin-right: 40px;
  }
}
@media (max-width: 767px) {
  .it-award-title {
    font-size: 25px;
    margin-right: 40px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-award-title {
    margin-right: 20px;
  }
}

/*----------------------------------------*/
/*  15. map css start
/*----------------------------------------*/
.it-map-box {
  line-height: 0;
}
.it-map-box iframe {
  width: 100%;
  height: 480px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-map-box iframe {
    height: 350px;
  }
}

/*----------------------------------------*/
/*  09. contact css start
/*----------------------------------------*/
.it-contact-4-left-box {
  background-color: #F400A1;
  padding: 60px 80px;
  padding-left: 375px;
  margin-right: 85px;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-contact-4-left-box {
    padding-left: 220px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-contact-4-left-box {
    padding-left: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-contact-4-left-box {
    padding-left: 90px;
    margin-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-contact-4-left-box {
    padding-left: 50px;
    padding-right: 50px;
    margin-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-contact-4-left-box {
    padding: 60px 20px;
    margin-right: 0px;
    margin-bottom: 50px;
  }
}
.it-contact-4-form-box {
  margin-bottom: 50px;
}
.it-contact-4-form-box form input {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 30px;
  padding: 0;
  height: 40px;
  line-height: 40px;
  color: var(--it-common-white);
  background-color: transparent;
  border-bottom: 1px solid #e0a1a1;
}
.it-contact-4-form-box form input::-webkit-input-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form input:-moz-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form input::-moz-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form input:-ms-input-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form input:focus {
  border-color: #fff;
}
.it-contact-4-form-box form textarea {
  resize: none;
  font-size: 16px;
  font-weight: 400;
  padding-top: 5px;
  padding-left: 0;
  height: 115px;
  border-bottom: 1px solid #e0a1a1;
  color: var(--it-common-white);
  background-color: transparent;
}
.it-contact-4-form-box form textarea::-webkit-input-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form textarea:-moz-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form textarea::-moz-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form textarea:-ms-input-placeholder {
  color: var(--it-common-white);
}
.it-contact-4-form-box form textarea:focus {
  border-color: #fff;
}
.it-contact-4-thumb {
  margin-left: -165px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-contact-4-thumb {
    margin-left: 0;
  }
}
.it-contact-4-thumb img {
  max-width: inherit;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-contact-4-thumb img {
    max-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-contact__location {
    margin-top: 50px;
  }
}
.it-contact__location iframe {
  width: 100%;
  height: 480px;
  line-height: 0;
}
.it-contact__content h5 {
  font-size: 24px;
  font-weight: 700;
  color: var(--it-theme-1);
  padding-bottom: 15px;
}
.it-contact__content ul {
  margin-bottom: 15px;
}
.it-contact__content ul li {
  display: block;
  list-style-type: none;
  padding-bottom: 20px;
}
.it-contact__content > a {
  font-size: 18px;
  font-weight: 700;
  color: var(--it-common-white);
  letter-spacing: 5px;
  transition: 0.3s;
}
.it-contact__content > a:hover {
  color: var(--it-theme-1);
}
.it-contact__list span {
  font-size: 18px;
  color: var(--it-common-white);
  font-weight: 700;
  display: block;
  padding-bottom: 5px;
}
.it-contact__list > a {
  transition: 0.3s;
}
.it-contact__list > a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-contact__section-box p {
    font-size: 14px;
  }
}

.it-contact-wrap {
  padding: 75px;
}
@media (max-width: 767px) {
  .it-contact-wrap {
    padding: 75px 15px;
  }
}
.it-contact-title {
  font-weight: 700;
  font-size: 36px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-contact-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .it-contact-title {
    font-size: 27px;
  }
}
.it-contact-input-box input {
  height: 60px;
  line-height: 60px;
  padding: 0 25px;
  background-color: #353535;
  color: var(--it-common-white);
  border: 1px solid transparent;
}
.it-contact-input-box input:focus {
  border: 1px solid var(--it-theme-1);
}
.it-contact-input-box textarea {
  height: 150px;
  padding: 25px;
  resize: none;
  background-color: #353535;
  color: var(--it-common-white);
  border: 1px solid transparent;
}
.it-contact-input-box textarea:focus {
  border: 1px solid var(--it-theme-1);
}

/*----------------------------------------*/
/*  07. brand css start
/*----------------------------------------*/
.it-brand-2-border {
  border-top: 1px solid #333333;
}
.it-brand-2-item span svg {
  color: var(--it-theme-1);
}

/*----------------------------------------*/
/*  12. gallery css start
/*----------------------------------------*/
.it-gallery-item:hover .it-gallery-title {
  top: 44%;
}
.it-gallery-item:hover > .it-gallery-text {
  opacity: 1;
  bottom: 39.2%;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 36%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 35%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 37%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 35%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 37%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-gallery-item:hover > .it-gallery-text {
    bottom: 33.2%;
  }
}
.it-gallery-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30%;
  text-align: center;
  transition: 0.5s;
  opacity: 0;
}
.it-gallery-text p {
  line-height: 26px;
  color: var(--it-common-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) {
  .it-gallery-text p {
    font-size: 14px;
  }
}
.it-gallery-title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: capitalize;
  transform: translateY(-50%);
  transition: 0.5s;
}
.it-gallery-title h5 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-gallery-title h5 {
    font-size: 27px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-gallery-title h5 {
    font-size: 25px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-gallery-title h5 {
    font-size: 23px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-gallery-title h5 {
    font-size: 22px;
  }
}
.it-gallery-thumb {
  overflow: hidden;
  position: relative;
  transition: 0.5s;
}
.it-gallery-thumb img {
  width: 100%;
}
.it-gallery-thumb::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: rgb(14, 14, 14);
  opacity: 0.302;
  top: 0;
  left: 0;
  position: absolute;
}
.it-gallery-number {
  padding-top: 70px;
}
.it-gallery-number > span {
  color: var(--it-common-white);
  font-weight: 700;
  font-family: var(--it-ff-heading);
  position: relative;
}
.it-gallery-number > span::after {
  content: "";
  height: 40px;
  width: 1px;
  top: -50px;
  left: 50%;
  right: 0;
  text-align: center;
  position: absolute;
  background-color: #747272;
}
.it-gallery-active {
  margin: -30px -215px;
  padding: 30px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .it-gallery-active {
    margin: -30px -20px;
    padding: 30px 0;
  }
}

.it-gallery-active .swiper-slide {
  transform: scale(0.9);
  transition: 0.5s;
}
.it-gallery-active .swiper-slide.swiper-slide-active {
  transform: scale(1.1);
}

/*----------------------------------------*/
/*  23. value css start
/*----------------------------------------*/
.it-value-2-item {
  padding: 40px;
  padding-bottom: 30px;
  background-color: var(--it-theme-3);
}
.it-value-2-item p {
  line-height: 30px;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-value-2-item p {
    font-size: 15px;
  }
}
.it-value-2-item:hover .it-value-2-icon span img {
  transform: scale(0.8);
}
.it-value-2-icon span {
  display: inline-block;
  padding-bottom: 25px;
}
.it-value-2-icon span img {
  transition: 0.4s;
}
.it-value-2-title {
  margin-bottom: 28px;
  font-size: 24px;
}

/*----------------------------------------*/
/*  24. video css start
/*----------------------------------------*/
.it-video-2-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-video-2-bg {
    height: 580px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-video-2-bg {
    height: 350px;
  }
}
.it-video-2-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgb(14, 14, 14);
  opacity: 0.4;
}
.it-video-2-icon a {
  color: var(--it-theme-1);
  display: inline-block;
  height: 140px;
  width: 140px;
  border-radius: 50%;
  line-height: 140px;
  border: 1px solid var(--it-common-white);
  text-align: center;
  margin-bottom: 10px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-video-2-icon a {
    height: 90px;
    width: 90px;
    line-height: 90px;
  }
}
.it-video-2-icon a::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.285);
  animation: borderanimate2 3s linear infinite;
  z-index: -2;
  border-radius: 50%;
}
.it-video-2-icon a::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.285);
  animation: borderanimate2 2.3s linear infinite;
  z-index: -2;
  border-radius: 50%;
}
.it-video-2-shape {
  position: absolute;
  bottom: 60px;
  right: 90px;
  z-index: 1;
  animation: rotate2 15s linear infinite;
}
.it-video-2-content-wrap {
  position: absolute;
  top: 400px;
  right: 300px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-video-2-content-wrap {
    right: 130px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-video-2-content-wrap {
    right: 100px;
    top: 340px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-video-2-content-wrap {
    top: 340px;
    right: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-video-2-content-wrap {
    top: 340px;
    right: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-video-2-content-wrap {
    top: 421px;
    right: 350px;
  }
}

.it-video-4-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-video-4-bg {
    height: 570px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-video-4-bg {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-video-4-bg {
    height: 470px;
  }
}
.it-video-4-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #0e0e0e;
  opacity: 0.78;
}
.it-video-4-icon {
  position: relative;
}
@media (max-width: 767px) {
  .it-video-4-icon {
    display: none;
  }
}
.it-video-4-icon::before {
  content: "";
  position: absolute;
  top: 264px;
  left: 50%;
  height: 250px;
  width: 1px;
  transform: translateY(-50%);
  background-color: var(--it-common-white);
}
.it-video-4-icon::after {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 50%;
  height: 250px;
  width: 1px;
  transform: translateY(-50%);
  background-color: var(--it-common-white);
}
.it-video-4-icon a {
  color: var(--it-theme-1);
  display: inline-block;
  height: 140px;
  width: 140px;
  border-radius: 50%;
  line-height: 140px;
  border: 1px solid var(--it-common-white);
  text-align: center;
  position: relative;
}
.it-video-4-icon a::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.285);
  animation: borderanimate2 3s linear infinite;
  z-index: -2;
  border-radius: 50%;
}
.it-video-4-icon a::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.285);
  animation: borderanimate2 2.7s linear infinite;
  z-index: -2;
  border-radius: 50%;
}
.it-video-4-title {
  font-size: 48px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-video-4-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-video-4-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-video-4-title {
    font-size: 39px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-video-4-title {
    font-size: 33px;
  }
}
@media (max-width: 767px) {
  .it-video-4-title {
    font-size: 30px;
  }
  .it-video-4-title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-video-4-title {
    font-size: 35px;
  }
  .it-video-4-title br {
    display: none;
  }
}

/*----------------------------------------*/
/*  11. funfact css start
/*----------------------------------------*/
.it-funtact-space {
  padding-top: 175px;
  padding-bottom: 165px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funtact-space {
    padding: 100px 0;
  }
}
.it-funtact-mumber {
  color: var(--it-common-white);
  font-weight: 700;
  font-size: 80px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funtact-mumber {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funtact-mumber {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-funtact-mumber {
    font-size: 70px;
  }
}
@media (max-width: 767px) {
  .it-funtact-mumber {
    font-size: 60px;
  }
}
.it-funtact-item {
  padding: 77px 18px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funtact-item {
    padding: 20px 18px;
  }
}
.it-funtact-item.active::after {
  background-color: var(--it-common-white);
}
.it-funtact-item.active .it-funtact-mumber {
  color: var(--it-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funtact-item.active .it-funtact-mumber {
    color: var(--it-common-white);
  }
}
.it-funtact-item.active span {
  color: var(--it-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funtact-item.active span {
    color: var(--it-common-white);
  }
}
.it-funtact-item::after {
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--it-common-white);
  transform: rotate(112deg);
  transition: 0.3s;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-funtact-item::after {
    transform: rotate(112deg);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funtact-item::after {
    height: 95%;
    width: 95%;
    transform: rotate(117deg);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funtact-item::after {
    display: none;
  }
}
.it-funtact-item span {
  font-weight: 700;
  font-size: 18px;
  color: #888888;
  position: relative;
  z-index: 1;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funtact-item span {
    font-size: 16px;
  }
}
.it-funtact-shape-1 {
  position: absolute;
  right: 6%;
  top: 26%;
  animation: tpupdown 0.8s infinite alternate;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-funtact-shape-1 {
    right: 2%;
    top: 20%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-funtact-shape-1 {
    right: 2%;
    top: 20%;
  }
}
.it-funtact-shape-2 {
  position: absolute;
  left: 6%;
  bottom: 11%;
  animation: tpupdown 0.8s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-funtact-shape-2 {
    left: 2%;
    bottom: 8%;
  }
}

.it-funfact-3-number-sm > span {
  font-weight: 700;
  font-size: 18px;
  color: var(--it-common-white);
  display: block;
  margin-bottom: 85px;
  transition: 0.3s;
}
.it-funfact-3-text {
  text-align: end;
}
.it-funfact-3-text span {
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  display: block;
  margin-bottom: 20px;
  transition: 0.3s;
  text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funfact-3-text span {
    font-size: 15px;
    line-height: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-3-text span {
    font-size: 14px;
    line-height: 28px;
  }
}
.it-funfact-3-number {
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 0;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funfact-3-number {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funfact-3-number {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-3-number {
    font-size: 40px;
  }
}
.it-funfact-3-number i {
  font-style: normal;
}
.it-funfact-3-border {
  border: 1px solid #393838;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-3-border {
    border: none;
  }
}
.it-funfact-3-item-box {
  position: relative;
  border-right: 1px solid #393838;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-3-item-box {
    border-right: none;
  }
}
.it-funfact-3-item-box.item-border {
  border-right: none;
}
.it-funfact-3-item-box::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 110%;
  width: 110%;
  background-color: var(--it-common-white);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.it-funfact-3-item-box.active::after {
  opacity: 1;
  visibility: visible;
}
.it-funfact-3-item-box.active .it-funfact-3-number-sm span {
  color: var(--it-common-black);
}
.it-funfact-3-item-box.active .it-funfact-3-text span {
  color: var(--it-common-black);
}
.it-funfact-3-item-box.active .it-funfact-3-number {
  color: var(--it-common-black);
}
.it-funfact-3-item {
  padding: 40px;
  padding-top: 35px;
  padding-bottom: 30px;
  padding-right: 30px;
  transition: 0.5s;
  position: relative;
  z-index: 2;
}

.it-funfact-4-ml {
  margin-left: -85px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-funfact-4-ml {
    margin-left: -20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funfact-4-ml {
    margin-left: -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) {
  .it-funfact-4-ml {
    margin-left: 0;
  }
}
.it-funfact-4-item {
  padding-top: 80px;
  padding-bottom: 90px;
  height: 358px;
  width: 358px;
  border-radius: 50%;
  border: 1px solid var(--it-border-3);
  transition: 0.3s;
  z-index: -1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-funfact-4-item {
    height: 330px;
    width: 330px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funfact-4-item {
    height: 300px;
    width: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funfact-4-item {
    border: none;
    width: auto;
    height: auto;
    padding: 50px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-4-item {
    border: none;
    width: auto;
    height: auto;
    padding: 20px 15px;
  }
}
.it-funfact-4-item:hover {
  border-color: var(--it-theme-1);
}
.it-funfact-4-icon > span {
  display: block;
  margin-bottom: 20px;
}
.it-funfact-4-text span {
  font-weight: 700;
  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) {
  .it-funfact-4-text span {
    font-size: 15px;
  }
}
.it-funfact-4-number {
  font-weight: 700;
  font-size: 60px;
  margin-bottom: 5px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-funfact-4-number {
    font-size: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-funfact-4-number {
    font-size: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-funfact-4-number {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-funfact-4-number {
    font-size: 48px;
  }
}
.it-funfact-4-number i {
  font-style: normal;
}

/*----------------------------------------*/
/*  21. testimonial css start
/*----------------------------------------*/
.it-testimonial-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.it-testimonial-bg::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgb(14, 14, 14);
  opacity: 0.78;
}
.it-testimonial-item {
  padding-top: 135px;
  padding-bottom: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-testimonial-item {
    padding: 100px 0;
  }
}
.it-testimonial-text p {
  color: var(--it-common-white);
  line-height: 42px;
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-testimonial-text p {
    font-size: 28px;
  }
  .it-testimonial-text p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-testimonial-text p {
    font-size: 25px;
  }
  .it-testimonial-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .it-testimonial-text p {
    font-size: 19px;
  }
  .it-testimonial-text p br {
    display: none;
  }
}
.it-testimonial-author-thumb {
  margin-right: 30px;
  position: relative;
}
.it-testimonial-author-thumb::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid var(--it-common-white);
  border-radius: 50%;
  transform: scale(1.2);
}
.it-testimonial-author-thumb img {
  height: 76px;
  width: 76px;
  border-radius: 50%;
}
.it-testimonial-author-box h5 {
  font-weight: 600;
  font-family: var(--it-ff-heading);
  margin-bottom: 5px;
}
.it-testimonial-author-box span {
  color: var(--it-common-white);
}
.it-testimonial-arrow-box {
  height: 60px;
  line-height: 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) {
  .it-testimonial-arrow-box {
    display: none;
  }
}
.it-testimonial-arrow-box .slider-prev {
  position: absolute;
  left: 0%;
  bottom: 0%;
  z-index: 2;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.102);
  padding-left: 465px;
  transition: 0.3s;
}
.it-testimonial-arrow-box .slider-prev button {
  font-size: 22px;
  color: var(--it-common-white);
  transition: 0.3s;
}
.it-testimonial-arrow-box .slider-prev:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.it-testimonial-arrow-box .slider-prev:hover button {
  color: var(--it-theme-1);
}
.it-testimonial-arrow-box .slider-next {
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.102);
  padding-right: 465px;
  text-align: end;
  transition: 0.3s;
}
.it-testimonial-arrow-box .slider-next button {
  font-size: 22px;
  color: var(--it-common-white);
  transition: 0.3s;
}
.it-testimonial-arrow-box .slider-next:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.it-testimonial-arrow-box .slider-next:hover button {
  color: var(--it-theme-1);
}
.it-testimonial-arrow-box .slider-next.active {
  background-color: rgba(255, 255, 255, 0.2);
}
.it-testimonial-arrow-box .slider-next.active button {
  color: var(--it-theme-1);
}

.it-testimonial-2-top-slider-item {
  padding: 10px 20px;
  border: 1px solid #373737;
  cursor: pointer;
}
.it-testimonial-2-bg {
  position: absolute;
  bottom: 0;
  left: 0;
}
.it-testimonial-2-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--it-common-white);
}
.it-testimonial-2-avatar img {
  margin-right: 20px;
}
.it-testimonial-2-content p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
}
.it-testimonial-2-bottom-slider-item {
  text-align: center;
}
.it-testimonial-2-bottom-slider-item p {
  font-size: 32px;
  color: var(--it-common-white);
  line-height: 42px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-testimonial-2-bottom-slider-item p {
    font-size: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-testimonial-2-bottom-slider-item p {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .it-testimonial-2-bottom-slider-item p {
    font-size: 20px;
  }
}
.it-testimonial-2-top-wrap {
  margin: 0px 80px;
  margin-bottom: -40px;
  border-right: 1px solid #373737;
  border-left: 1px solid #373737;
  background-color: var(--it-common-black);
  position: relative;
  z-index: 55;
}
@media (max-width: 767px) {
  .it-testimonial-2-top-wrap {
    margin: 0 20px;
    margin-bottom: -40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-testimonial-2-top-wrap {
    margin: 0 50px;
    margin-bottom: -40px;
  }
}
.it-testimonial-2-bottom-wrap {
  border: 1px solid #373737;
  padding: 130px 120px;
}
@media (max-width: 767px) {
  .it-testimonial-2-bottom-wrap {
    padding: 100px 15px;
  }
}
.it-testimonial-2-bottom-wrap .slick-dots {
  text-align: center;
  margin-top: 50px;
}
.it-testimonial-2-bottom-wrap .slick-dots li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  margin: 0px 5px;
}
.it-testimonial-2-bottom-wrap .slick-dots li.slick-active button {
  background-color: var(--it-theme-1);
}
.it-testimonial-2-bottom-wrap .slick-dots li button {
  font-size: 0;
  height: 10px;
  width: 10px;
  background-color: var(--it-common-white);
  display: inline-block;
  border-radius: 50%;
}
.it-testimonial-2-shape-1 {
  position: absolute;
  bottom: 10%;
  right: 260px;
  z-index: 1;
  animation: tptranslateX2 2s infinite alternate;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .it-testimonial-2-shape-1 {
    right: 160px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-testimonial-2-shape-1 {
    right: 60px;
  }
}

.it-testimonial-main-wrap.slick-current .it-testimonial-2-top-slider-item {
  border-color: var(--it-theme-1);
}

.it-testimonial-5-item {
  margin-left: 70px;
  padding: 50px 40px 50px 95px;
  border: 1px solid #454343;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .it-testimonial-5-item {
    margin-left: 0;
    padding: 50px 20px 50px;
  }
}
.it-testimonial-5-item:hover {
  border-color: #fff;
}
.it-testimonial-5-thumb {
  position: absolute;
  top: 50%;
  left: -65px;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .it-testimonial-5-thumb {
    position: static;
    margin-bottom: 30px;
    transform: translateY(0%);
  }
}
.it-testimonial-5-thumb img {
  border-radius: 50%;
  height: 130px;
  width: 130px;
}
.it-testimonial-5-star i {
  color: var(--it-theme-1);
}
.it-testimonial-5-author-info h5 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .it-testimonial-5-author-info h5 {
    font-size: 20px;
  }
}
.it-testimonial-5-text p {
  line-height: 30px;
  margin-bottom: 35px;
}
.it-testimonial-5-active {
  margin: -30px;
  padding: 30px;
}

/*----------------------------------------*/
/*  06. blog css start
/*----------------------------------------*/
.it-blog-section-title-box {
  height: 100%;
}
.it-blog-section-title {
  border-right: 1px solid var(--it-border-1);
  height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-blog-section-title {
    margin-bottom: 50px;
    border-right: none;
  }
}
.it-blog-section-title p {
  line-height: 30px;
  margin-bottom: 40px;
  padding-right: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-section-title p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-blog-section-title p {
    font-size: 14px;
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .it-blog-section-title p {
    font-size: 14px;
    padding-right: 0;
  }
}
.it-blog-item {
  position: relative;
}
.it-blog-item-box {
  margin-left: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-item-box {
    margin-left: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-blog-item-box {
    margin-left: 0;
  }
}
.it-blog-item-box ul li {
  list-style-type: none;
  padding-bottom: 35px;
  margin-bottom: 55px;
  border-bottom: 1px solid var(--it-border-1);
}
.it-blog-item-box ul li:last-child {
  margin-bottom: 0;
}
.it-blog-item:hover .it-blog-thumb img {
  transform: scale(1.2) rotate(-2deg);
}
.it-blog-thumb {
  position: absolute;
  top: 120px;
  right: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .it-blog-thumb {
    position: static;
  }
}
.it-blog-thumb img {
  opacity: 80%;
  transition: 0.7s;
  width: 100%;
}
.it-blog-meta span {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  padding-bottom: 25px;
}
.it-blog-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 36px;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  z-index: 1;
  transform: 0.3s;
}
.it-blog-title:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1600px) and (max-width: 1800px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-blog-title {
    font-size: 34px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-blog-title {
    font-size: 27px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .it-blog-title {
    font-size: 30px;
  }
  .it-blog-title br {
    display: none;
  }
}
.it-blog-content p {
  padding-right: 250px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-blog-content p {
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-content p {
    padding-right: 200px;
    position: relative;
    z-index: 9;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-blog-content p {
    font-size: 14px;
    padding-right: 0;
    padding-bottom: 10px;
  }
  .it-blog-content p br {
    display: none;
  }
}
.it-blog-shape {
  bottom: 0;
  left: 0;
  position: absolute;
}

.it-blog-2-thumb-box {
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.it-blog-2-thumb-box img {
  transition: 0.7s;
}
.it-blog-2-thumb-box::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 20%;
  width: 100%;
  background-color: rgba(24, 24, 24, 0.702);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.it-blog-2-item:hover .it-blog-2-thumb-box img {
  transform: scale(1.2);
}
.it-blog-2-item:hover .it-blog-2-thumb-box::after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.it-blog-2-item:hover .it-blog-2-icon {
  opacity: 1;
  visibility: visible;
}
.it-blog-2-item:hover .it-blog-2-content-link > a {
  color: var(--it-theme-1);
}
.it-blog-2-icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.it-blog-2-content {
  padding: 30px;
  padding-right: 40px;
  border: 1px solid var(--it-border-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) {
  .it-blog-2-content {
    padding: 30px 15px;
  }
}
.it-blog-2-content p {
  line-height: 26px;
  padding-bottom: 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) {
  .it-blog-2-content p {
    font-size: 15px;
  }
}
.it-blog-2-content-link > a {
  font-weight: 700;
  font-size: 14px;
  color: var(--it-common-white);
  text-transform: uppercase;
  transition: 0.3s;
  display: inline-block;
}
.it-blog-2-content-link > a i {
  margin-left: 10px;
  transition: 0.3s;
}
.it-blog-2-title {
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 10px;
  transition: 0.3s;
  text-transform: capitalize;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-blog-2-title br {
    display: none;
  }
}
.it-blog-2-title:hover {
  color: var(--it-theme-1);
}

.it-blog-3-section-title {
  margin-left: 75px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-blog-3-section-title {
    margin-left: 0;
  }
}
.it-blog-3-thumb {
  margin-bottom: 25px;
  position: relative;
  overflow: hidden;
}
.it-blog-3-thumb img {
  transition: 0.9s;
  width: 100%;
}
.it-blog-3-thumb:hover img {
  transform: scale(1.2);
}
.it-blog-3-thumb:hover::after {
  opacity: 1;
  visibility: visible;
  right: auto;
  width: 100%;
}
.it-blog-3-thumb:hover .it-blog-3-thumb-text {
  opacity: 1;
  visibility: visible;
}
.it-blog-3-thumb::after {
  position: absolute;
  content: "";
  top: 0;
  left: auto;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 76, 36, 0.902);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}
.it-blog-3-thumb-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}
.it-blog-3-thumb-text a {
  color: var(--it-common-white);
  text-decoration: underline;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
}
.it-blog-3-meta {
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
  padding-bottom: 25px;
}
.it-blog-3-title {
  font-size: 24px;
  line-height: 36px;
  transition: 0.3s;
  margin-bottom: 0;
  padding-right: 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) {
  .it-blog-3-title {
    font-size: 21px;
    padding-right: 0;
  }
}
.it-blog-3-title:hover {
  color: var(--it-theme-1);
}

.it-blog-4-item:hover .it-blog-4-content {
  top: 59.8%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-blog-4-item:hover .it-blog-4-content {
    top: 58.8%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-4-item:hover .it-blog-4-content {
    top: 50.8%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-blog-4-item:hover .it-blog-4-content {
    top: 55.8%;
  }
}
@media (max-width: 767px) {
  .it-blog-4-item:hover .it-blog-4-content {
    top: 53.8%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-blog-4-item:hover .it-blog-4-content {
    top: 71.8%;
  }
}
.it-blog-4-item:hover .it-blog-4-thumb img {
  transform: scale(1.2) rotate(-2deg);
}
.it-blog-4-thumb {
  position: relative;
}
.it-blog-4-thumb img {
  transition: 0.9s;
  width: 100%;
}
.it-blog-4-thumb::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-image: -moz-linear-gradient(90deg, rgba(33, 33, 37, 0.902) 40%, rgba(0, 0, 0, 0) 100%);
  background-image: -webkit-linear-gradient(90deg, rgba(33, 33, 37, 0.902) 40%, rgba(0, 0, 0, 0) 100%);
  background-image: -ms-linear-gradient(90deg, rgba(33, 33, 37, 0.902) 40%, rgba(0, 0, 0, 0) 100%);
}
.it-blog-4-content {
  position: absolute;
  bottom: 30px;
  left: 40px;
  top: 67%;
  overflow: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-4-content {
    bottom: 33px;
    left: 20px;
    top: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-blog-4-content {
    top: 64%;
  }
}
@media (max-width: 767px) {
  .it-blog-4-content {
    top: 62%;
    left: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-blog-4-content {
    top: 77%;
    left: 40px;
  }
}
.it-blog-4-content > a {
  font-weight: 700;
  font-size: 14px;
  color: var(--it-theme-1);
  font-family: "Poppins", sans-serif;
}
.it-blog-4-meta {
  margin-bottom: 25px;
}
.it-blog-4-meta span {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  padding: 0 20px;
  font-family: "Poppins", sans-serif;
  color: var(--it-common-white);
  color: var(--it-common-white);
  background-color: rgba(255, 255, 255, 0.2);
}
.it-blog-4-meta span:not(:last-child) {
  margin-right: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-4-meta span {
    font-size: 13px;
    padding: 0 15px;
  }
}
.it-blog-4-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  margin-bottom: 15px;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-blog-4-title {
    font-size: 21px;
  }
}
.it-blog-4-title:hover {
  color: var(--it-theme-1);
}

.postbox__details-wrapper {
  padding-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__details-wrapper {
    padding-right: 0;
    margin-bottom: 70px;
  }
}
.postbox__details-checkmark {
  padding-bottom: 40px;
}
.postbox__details-checkmark ul li {
  list-style-type: none;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: #202124;
}
@media (max-width: 767px) {
  .postbox__details-checkmark ul li {
    font-size: 14px;
  }
}
.postbox__details-checkmark ul li:last-child {
  margin-bottom: 0;
}
.postbox__details-checkmark ul li i {
  height: 20px;
  width: 20px;
  background-color: var(--it-common-black);
  color: var(--it-common-white);
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  transform: translateX(2px);
  position: absolute;
  top: -2px;
  left: 0;
}
.postbox__details-title {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: var(--it-common-white);
  padding-bottom: 10px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .postbox__details-title {
    font-size: 33px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .postbox__details-title {
    font-size: 33px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__details-title {
    font-size: 32px;
  }
  .postbox__details-title br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__details-title {
    font-size: 25px;
  }
  .postbox__details-title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__details-title {
    font-size: 30px;
  }
  .postbox__details-title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .postbox__details-title {
    font-size: 20px;
  }
  .postbox__details-title br {
    display: none;
  }
}
.postbox__details-title-box span {
  font-weight: 700;
  font-size: 14px;
  color: #888888;
  display: inline-block;
  margin-bottom: 30px;
}
.postbox__details-title-box p {
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 0;
  padding-bottom: 10px;
  padding-right: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__details-title-box p {
    font-size: 15px;
  }
  .postbox__details-title-box p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__details-title-box p {
    font-size: 15px;
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .postbox__details-title-box p {
    font-size: 13px;
    padding-right: 0;
  }
  .postbox__details-title-box p br {
    display: none;
  }
}
.postbox__details-img-box {
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .postbox__details-img-box {
    flex-wrap: wrap;
  }
}
.postbox__details-img-box span img {
  border-radius: 20px;
  margin-bottom: 20px;
}
.postbox__details-img-box span img.img-mr {
  margin-right: 20px;
}
.postbox__details-img-caption {
  font-weight: 400;
  font-size: 13px;
  line-height: 10px;
  color: #87888A;
}
.postbox__details-img-caption i {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 10px;
  color: #5F6168;
}

.postbox__content-wrap .it-contact-wrap {
  padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__content-wrap .it-contact-wrap {
    margin-bottom: 60px;
  }
}
.postbox__p-right {
  margin-right: 20px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__p-right {
    margin-right: 0px;
  }
}
.postbox__thumb .play-btn {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 90px;
  width: 90px;
  background-color: var(--it-common-white);
  text-align: center;
  line-height: 90px;
  color: var(--it-common-black);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@media (max-width: 767px) {
  .postbox__thumb .play-btn {
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  .postbox__thumb .play-btn i {
    padding-left: 4px;
  }
}
.postbox__thumb .play-btn:hover {
  background-color: var(--it-common-blue-4);
  color: var(--it-common-white);
}
.postbox__audio {
  height: 100%;
  width: 100%;
}
.postbox__audio iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.postbox__item-single:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.postbox__content p img {
  margin-bottom: 30px;
  max-width: 100%;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__content p img {
    width: 100%;
  }
}
.postbox__content-single {
  padding-left: 0;
  padding-right: 0;
  border: none;
}
.postbox__title {
  color: var(--it-common-black);
  line-height: 1.3;
  font-weight: 600;
  font-size: 25px;
  color: #202124;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__title {
    font-size: 19px;
  }
  .postbox__title br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__title {
    font-size: 19px;
  }
  .postbox__title br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__title {
    font-size: 19px;
  }
  .postbox__title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .postbox__title {
    font-size: 18px;
  }
  .postbox__title br {
    display: none;
  }
}
.postbox__title a:hover {
  color: var(--it-theme-1);
}
.postbox__meta {
  margin-bottom: 20px;
}
.postbox__meta a {
  font-weight: 400;
  font-size: 17px;
  line-height: 12px;
  color: #888888;
  display: inline-block;
}
.postbox__meta a:hover {
  color: var(--it-theme-1);
}
.postbox__meta-2 {
  padding-bottom: 13px;
}
.postbox__meta-2 a {
  font-weight: 400;
  font-size: 17px;
  line-height: 12px;
  color: #888888;
  display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__meta-2 a {
    font-size: 13px;
  }
}
.postbox__meta-2 a:hover {
  color: var(--it-theme-1);
}
.postbox__text img {
  max-width: 100%;
}
.postbox__text p {
  font-size: 17px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__text p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__text p {
    font-size: 14px;
  }
}
.postbox__text-single p {
  margin-bottom: 15px;
}
.postbox__slider button {
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  font-size: 30px;
  color: var(--it-common-white);
}
.postbox__slider button.slick-next {
  left: auto;
  right: 50px;
}
@media (max-width: 767px) {
  .postbox__slider button.slick-next {
    right: 10px;
  }
}
@media (max-width: 767px) {
  .postbox__slider button {
    left: 10px;
  }
}
.postbox__comment ul li {
  margin-bottom: 45px;
  padding-bottom: 30px;
  list-style: none;
  padding: 25px;
  padding-right: 40px;
  border: 1px solid #414141;
}
@media (max-width: 767px) {
  .postbox__comment ul li {
    padding-right: 25px;
  }
}
.postbox__comment ul-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--it-common-black);
  margin-bottom: 40px;
  margin-right: 20px;
}
.postbox__comment-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: var(--it-common-white);
  margin-bottom: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment-title {
    font-size: 22px;
  }
}
@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-title {
    font-size: 20px;
  }
}
.postbox__comment-avater img {
  width: 154px;
  height: 154px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .postbox__comment-avater img {
    width: 65px;
    height: 65px;
  }
}
.postbox__comment-name {
  margin-bottom: 5px;
}
.postbox__comment-name h5 {
  font-weight: 700;
  font-size: 22px;
  line-height: 20px;
  color: var(--it-common-white);
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .postbox__comment-name h5 {
    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) {
  .postbox__comment-name h5 {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .postbox__comment-text {
    margin-left: 0;
    margin-top: 15px;
  }
}
.postbox__comment-text p {
  font-size: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__comment-text p {
    font-size: 15px;
  }
  .postbox__comment-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .postbox__comment-text p {
    font-size: 14px;
  }
  .postbox__comment-text p br {
    display: none;
  }
}
.postbox__comment-reply {
  margin-top: 10px;
  padding-bottom: 17px;
}
.postbox__comment-reply span {
  margin-right: 40px;
  display: inline-block;
}
@media (max-width: 767px) {
  .postbox__comment-reply span {
    font-size: 12px;
  }
}
.postbox__comment-reply a {
  display: inline-block;
  font-weight: 500;
  font-size: 17px;
  color: var(--it-common-black);
}
@media (max-width: 767px) {
  .postbox__comment-reply a {
    font-size: 14px;
  }
}
.postbox__comment-agree {
  margin-bottom: 30px;
}
.postbox__comment-agree .form-check-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: #87888A;
}
.postbox__comment-agree .form-check-input:checked {
  background-color: var(--it-common-blue-4);
  border-color: transparent;
}
.postbox__comment-agree .form-check-input:focus {
  box-shadow: none;
}
.postbox__comment-agree .form-check-input.form-check-input[type=checkbox] {
  border-radius: 2px;
  margin-top: 4px;
}
.postbox__comment-input {
  position: relative;
  margin-bottom: 20px;
}
.postbox__comment-input span {
  font-weight: 600;
  color: var(--it-common-black);
  margin-bottom: 12px;
  display: block;
}
.postbox__comment-input input, .postbox__comment-input textarea {
  height: 55px;
  padding: 0 20px;
  width: 100%;
  font-size: 14px;
  outline: none;
  border: 1px solid #f7f7f7;
  box-shadow: 0px 16px 24px rgba(189, 196, 205, 0.13);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  color: var(--tp-common-black);
}
.postbox__comment-input input::placeholder, .postbox__comment-input textarea::placeholder {
  color: rgba(116, 116, 116, 0.5);
}
.postbox__comment-input input:focus, .postbox__comment-input textarea:focus {
  border-color: var(--tp-common-pink);
  color: var(--tp-common-black);
}
.postbox__comment-input textarea {
  height: 175px;
  resize: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
.postbox__tag span {
  font-size: 20px;
  margin-bottom: 17px;
  color: var(--it-common-black);
  margin-right: 30px;
  font-weight: 500;
}
@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__social {
    margin-top: 40px;
  }
}
.postbox__social span {
  font-size: 20px;
  color: var(--it-common-black);
  font-weight: 500;
}
.postbox__social a {
  font-size: 15px;
  padding-left: 30px;
}
.postbox__social a .it-linkedin {
  color: #0E6BA1;
}
.postbox__social a .it-pinterest {
  color: #D70220;
}
.postbox__social a .it-facebook {
  color: #0E6BA1;
}
.postbox__social a .it-twitter {
  color: #36B6ED;
}
@media (max-width: 767px) {
  .postbox__navigation-more {
    flex-wrap: wrap;
  }
}
.postbox__navigation-img {
  margin-right: 15px;
}
.postbox__navigation-img img {
  border-radius: 12px;
}
@media (max-width: 767px) {
  .postbox__navigation-left {
    margin-bottom: 30px;
  }
}
.postbox__navigation-content a:hover span {
  color: var(--it-common-blue-4);
}
.postbox__navigation-content span {
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5F6168;
  padding-bottom: 15px;
  display: inline-block;
  transition: 0.3s;
}
.postbox__navigation-content span i {
  margin-right: 10px;
}
.postbox__navigation-content h5 {
  font-weight: 700;
  font-size: 18px;
  line-height: 16px;
  color: #202124;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .postbox__navigation-content h5 {
    font-size: 16px;
  }
}
.postbox__navigation-content h5:hover {
  color: var(--it-common-blue-4);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .postbox__navigation-content h5 {
    font-size: 15px;
  }
}
.postbox__navigation-right .postbox__navigation-img {
  margin-right: 0;
  margin-left: 15px;
}
.postbox__navigation-right .postbox__navigation-content span i {
  margin-right: 0;
  margin-left: 10px;
}
.postbox__item {
  padding-top: 10px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.postbox__item i {
  font-size: 48px;
  color: var(--it-theme-1);
  margin-bottom: 20px;
}
.postbox__item p {
  font-size: 20px;
  line-height: 35px;
  font-weight: 700;
  color: var(--it-common-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) {
  .postbox__item p {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .postbox__details-tag {
    margin-bottom: 20px;
  }
}
.postbox__details-tag span {
  font-size: 22px;
  color: var(--it-common-white);
  font-weight: 700;
  display: inline-block;
  padding-right: 5px;
}
@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__details-tag span {
    font-size: 17px;
  }
}
.postbox__details-tag a {
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  background-color: #353535;
  color: var(--it-common-white);
  transition: 0.3s;
  margin-left: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .postbox__details-tag a {
    padding: 0 10px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .postbox__details-tag a {
    padding: 0 10px;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.postbox__details-tag a:hover {
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.postbox__details-share span {
  color: var(--it-common-black);
  font-weight: 700;
  display: inline-block;
  padding-right: 15px;
}
.postbox__details-share a {
  font-size: 16px;
  color: var(--it-common-white);
  display: inline-block;
  padding: 0 5px;
  transition: 0.3s;
}
@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__details-share a {
    font-size: 14px;
  }
}
.postbox__details-share a:hover {
  color: var(--it-theme-1);
}
.postbox__details-share-wrapper {
  padding-top: 20px;
  padding-bottom: 65px;
}
.postbox__comment-info {
  flex: 0 0 auto;
}
.postbox__meta span {
  display: inline-block;
  padding-bottom: 5px;
  margin-right: 15px;
  position: relative;
  padding-left: 20px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .postbox__meta span {
    font-size: 13px;
  }
}
.postbox__meta span i {
  position: absolute;
  top: 2px;
  left: 0;
  display: inline-block;
  font-size: 14px;
  color: var(--it-common-white);
}
.postbox__main-thumb img {
  width: 100%;
}
.postbox__content-img img {
  width: 100%;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .postbox__content-img img {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .postbox__content-img {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .postbox__slider-arrow-wrap {
    display: none;
  }
}
.postbox__slider-arrow-wrap .postbox-arrow-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  z-index: 9;
}
.postbox__slider-arrow-wrap .postbox-arrow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  z-index: 9;
}
.postbox__slider-arrow-wrap button {
  height: 60px;
  width: 60px;
  line-height: 64px;
  background-color: var(--it-common-white);
  color: var(--it-common-black);
  text-align: center;
  font-size: 18px;
}

.rc__post {
  padding: 10px;
  border: 1px solid transparent;
  transition: 0.3s;
}
.rc__post ul li:not(:last-child) {
  margin-bottom: 15px;
}
.rc__post:hover {
  border: 1px solid var(--it-common-black);
}
.rc__post-thumb {
  flex: 0 0 auto;
}
.rc__post-thumb img {
  width: 75px;
  height: 75px;
  flex: 0 0 auto;
  object-fit: cover;
}
.rc__post-title {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 16px;
  margin-right: 30px;
  color: var(--it-common-white);
  line-height: 23px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .rc__post-title {
    font-size: 14px;
    margin-right: 0;
  }
}
.rc__post-title a:hover {
  color: var(--it-theme-1);
}
.rc__meta span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  color: #6A6A74;
}

.sidebar__wrapper {
  padding-left: 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) {
  .sidebar__wrapper {
    padding-left: 0;
  }
}
.sidebar__widget-content ul > li {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  list-style-type: none;
  position: relative;
  margin-bottom: 10px;
  transition: 0.3s;
  background-color: #353535;
}
.sidebar__widget-content ul > li:hover {
  background-color: var(--it-theme-1);
}
.sidebar__widget-content ul > li:hover a {
  color: var(--it-common-white);
}
.sidebar__widget-content ul > li:hover::after {
  color: var(--it-common-white);
}
.sidebar__widget-content ul > li::after {
  content: "\f178";
  right: 30px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Pro";
  color: var(--it-common-white);
  font-size: 18px;
}
.sidebar__widget-content ul > li > a {
  font-weight: 500;
  font-size: 16px;
  color: var(--it-common-white);
  transition: 0.3s;
}
.sidebar__widget-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 16px;
  color: var(--it-common-white);
  margin-bottom: 30px;
  display: inline-block;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar__widget-title {
    font-size: 20px;
  }
  .sidebar__widget-title br {
    display: none;
  }
}
.sidebar__widget.color-box {
  padding: 40px 35px;
  background-color: var(--it-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .sidebar__widget.color-box {
    padding: 40px 20px;
  }
}
.sidebar__widget:last-child-title {
  border-bottom: 0;
}
.sidebar__widget > ul > li {
  list-style: none;
  margin-bottom: 15px;
}
.sidebar__widget > ul > li:last-child {
  margin-bottom: 0;
}
.sidebar__widget > ul > li a {
  font-weight: 500;
  font-size: 14px;
  line-height: 12px;
  color: #5F6168;
  display: flex;
  justify-content: space-between;
}
.sidebar__widget > ul > li a:hover {
  color: var(--it-theme-1);
}
.sidebar__widget > ul > li a i {
  font-size: 18px;
  transform: translateY(2px);
  margin-right: 10px;
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-left: 30px;
  text-transform: capitalize;
  background-color: #353535;
  border: none;
  padding-right: 60px;
  color: var(--it-common-white);
  outline: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sidebar__search input {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .sidebar__search input {
    padding-right: 40px;
    padding-left: 15px;
    font-size: 14px;
  }
}
.sidebar__search input:focus {
  border-color: var(--it-theme-1);
}
.sidebar__search input::placeholder {
  color: #777777;
}
.sidebar__search button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  border-radius: 50%;
  display: inline-block;
  color: var(--it-common-white);
  font-size: 18px;
}
.sidebar__banner-content {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: var(--tp-theme-1);
}
.sidebar__banner-content h4 {
  padding: 15px 20px;
  font-size: 24px;
  color: var(--tp-common-white);
  text-transform: uppercase;
  margin-bottom: 0;
}

.tagcloud.space a {
  padding: 0px 15px;
}
.tagcloud a {
  color: var(--it-common-white);
  background-color: #353535;
  display: inline-block;
  line-height: 1;
  padding: 0px 20px;
  height: 30px;
  line-height: 30px;
  margin-bottom: 15px;
  margin-right: 10px;
  transition: 0.3s;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tagcloud a {
    font-size: 13px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tagcloud a {
    font-size: 13px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tagcloud a {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .tagcloud a {
    font-size: 13px;
  }
}
.tagcloud a:hover {
  background: var(--it-theme-1);
  color: var(--it-common-white);
}
.tagcloud span {
  font-weight: 600;
  font-size: 16px;
  line-height: 12px;
  color: #202124;
  margin-right: 8px;
}

/*----------------------------------------*/
/*  16. menu css start
/*----------------------------------------*/
.it-header-main-menu nav ul li .has-home-img {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  padding: 30px 30px 10px 30px;
  background-color: var(--it-theme-2);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.it-header-main-menu nav ul li .has-home-img .home-img {
  padding: 0px 10px;
  position: relative;
  margin-bottom: 20px;
}

.it-header-main-menu nav ul li .has-home-img-2 {
  width: 1180px;
  opacity: 0;
  visibility: hidden;
  padding: 30px 30px 10px 30px;
  background-color: var(--it-theme-2);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: absolute;
  left: -260px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-header-main-menu nav ul li .has-home-img-2 {
    width: 1000px;
    left: -200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-header-main-menu nav ul li .has-home-img-2 {
    width: 900px;
    left: -200px;
  }
}
.it-header-main-menu nav ul li .has-home-img-2 .home-img {
  padding: 0px 10px;
  position: relative;
  margin-bottom: 20px;
}

.home-img-btn {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

.home-img-title {
  font-size: 18px;
  margin-bottom: 0;
  display: inline-block;
  font-weight: 700;
  color: var(--it-common-white);
}
.home-img-title:hover {
  color: var(--it-theme-1);
}

.home-img-thumb {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.home-img-thumb:hover .home-img-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}

.it-header-wrap {
  position: relative;
}

.it-menu-mobile .it-submenu {
  display: none;
}
.it-menu-mobile .it-menu-content {
  margin-bottom: 70px;
}
.it-menu-mobile .home-img {
  margin-bottom: 40px;
}
.it-menu-mobile ul {
  position: static;
  display: block;
  box-shadow: none;
}
.it-menu-mobile ul li {
  list-style: none;
  position: relative;
  width: 100%;
  padding: 0;
}
.it-menu-mobile ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.it-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn {
  position: absolute;
  right: 0;
  top: 25%;
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  font-size: 18px;
  color: #7F8387;
  font-family: "Font Awesome 5 Pro";
  transition: all 0.3s ease-in-out;
  z-index: 1;
  width: 25px;
  height: 25px;
  line-height: 22px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.it-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn i {
  transition: all 0.3s ease-in-out;
  margin-left: 2px;
}
.it-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn.dropdown-opened i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.it-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover {
  background-color: var(--it-theme-1);
  border-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.it-menu-mobile ul li.has-dropdown > a .dropdown-toggle-btn:hover i {
  color: var(--it-common-white);
}
.it-menu-mobile ul li.has-dropdown > a.expanded {
  color: var(--it-theme-1);
}
.it-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened {
  background-color: var(--it-theme-1);
  border-color: var(--it-theme-1);
  color: var(--it-common-white);
}
.it-menu-mobile ul li.has-dropdown > a.expanded .dropdown-toggle-btn.dropdown-opened i {
  color: var(--it-common-white);
}
.it-menu-mobile ul li.has-dropdown:hover > a::after {
  color: var(--it-theme-green);
}
.it-menu-mobile ul li:last-child a span {
  border-bottom: 0;
}
.it-menu-mobile ul li > a {
  display: block;
  font-size: 16px;
  color: var(--it-common-white);
  position: relative;
  padding: 10px 0;
  padding-right: 20px;
}
.it-menu-mobile ul li > a svg {
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
}
.it-menu-mobile ul li > a > i {
  display: inline-block;
  width: 11%;
  margin-right: 13px;
  -webkit-transform: translateY(4px);
  -moz-transform: translateY(4px);
  -ms-transform: translateY(4px);
  -o-transform: translateY(4px);
  transform: translateY(4px);
  font-size: 21px;
  line-height: 1;
}
.it-menu-mobile 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;
}
.it-menu-mobile ul li img {
  width: 100%;
}
.it-menu-mobile ul li ul {
  padding: 0;
}
.it-menu-mobile ul li ul li {
  padding: 0;
}
.it-menu-mobile 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;
}
.it-menu-mobile ul li ul li li a {
  width: 88%;
  padding: 10px 7%;
  padding-left: 0;
  padding-right: 20px;
}
.it-menu-mobile ul li ul li li li a {
  width: 83%;
  padding: 10px 9%;
  padding-left: 0;
  padding-right: 20px;
}
.it-menu-mobile ul li ul li li li li a {
  width: 68%;
  padding: 10px 11%;
  padding-left: 0;
  padding-right: 20px;
}
.it-menu-mobile ul li:hover > a {
  color: var(--it-theme-1);
}
.it-menu-mobile ul li:hover > a::after {
  color: var(--it-theme-1);
}
.it-menu-mobile ul li:hover > a .dropdown-toggle-btn i {
  color: var(--it-theme-1);
}
.it-menu-mobile ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
  top: 0;
}
.it-menu-mobile ul li .mega-menu, .it-menu-mobile ul li .submenu {
  position: static;
  min-width: 100%;
  padding: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  display: none;
}
.it-menu-mobile ul li .mega-menu li, .it-menu-mobile ul li .submenu li {
  float: none;
  display: block;
  width: 100%;
  padding: 0;
}
.it-menu-mobile ul li .mega-menu li:hover a .dropdown-toggle-btn, .it-menu-mobile ul li .submenu li:hover a .dropdown-toggle-btn {
  color: var(--it-theme-1);
}
.it-menu-mobile .it-menu-content ul li:not(:last-child) .home-img-title a {
  border-bottom: none;
}
.it-menu-mobile * ul, .it-menu-mobile * li {
  transition: none !important;
}

/*----------------------------------------*/
/*  19. shop css start
/*----------------------------------------*/
.it-shop-top-wrap {
  margin-bottom: 30px;
}
.it-shop__filter .nice-select {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0px 30px;
  padding-right: 80px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border: 1px solid #494748;
  font-size: 14px;
}
.it-shop__filter .nice-select.open::after {
  transform: translateY(-45%) rotate(-180deg);
}
.it-shop__filter .nice-select .option.selected {
  font-weight: 400;
  color: var(--it-common-white);
}
.it-shop__filter .nice-select::after {
  border: none;
  background-color: transparent;
  transform: translateY(-50%);
  margin-top: 0;
  right: 30px;
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  transform-origin: center;
  height: auto;
  width: auto;
  font-size: 20px;
  font-weight: 400;
  color: #494748;
}
.it-shop__filter .nice-select ul {
  padding: 25px;
  width: 100%;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 0;
}
.it-shop__filter .nice-select ul li {
  color: #77829D;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 16px;
  padding: 0;
}
.it-shop__filter .nice-select ul li:last-child {
  margin-bottom: 0;
}
.it-shop__filter .nice-select .option {
  line-height: 1;
  min-height: 0;
}
.it-shop__filter .nice-select.open ul {
  opacity: 1;
  visibility: visible;
}
.it-shop__input {
  position: relative;
}
.it-shop__input input {
  padding: 0px 30px;
  padding-right: 60px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  transition: 0.3s;
  border: 1px solid #494748;
  background-color: transparent;
}
.it-shop__input input:focus {
  border: 1px solid var(--it-theme-1);
}
.it-shop__input-box {
  border: 1px solid #494748;
  padding: 0px 30px;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
.it-shop__search {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
.it-shop-content-wrap {
  padding: 25px 30px;
}
.it-shop-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--it-common-white);
  margin-bottom: 10px;
  transition: 0.3s;
}
.it-shop-title:hover {
  color: var(--it-theme-1);
}
.it-shop-content span {
  font-size: 16px;
  color: var(--it-theme-1);
}
.it-shop-ratting span {
  color: #888888;
  font-size: 13px;
}
.it-shop-btn-cart {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.it-shop-thumb img {
  width: 100%;
}
.it-shop-item:hover .it-shop-btn-cart {
  opacity: 1;
  visibility: visible;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-shop-details__thumb-box {
    margin-bottom: 50px;
  }
}
.it-shop-details__thumb-box img {
  width: 100%;
}
.it-shop-details-contact-wrap .it-contact-wrap {
  padding: 0;
}
.it-shop-details__top-wrap {
  margin-bottom: 60px;
}
.it-shop-details__title-sm {
  font-size: 36px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-shop-details__title-sm {
    font-size: 31px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-shop-details__title-sm {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-shop-details__title-sm {
    font-size: 19px;
  }
}
.it-shop-details__right-wrap {
  margin-left: 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) {
  .it-shop-details__right-wrap {
    margin-left: 0;
  }
}
.it-shop-details__right-wrap span {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--it-ff-heading);
  color: var(--it-common-white);
  display: inline-block;
  padding-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-shop-details__right-wrap span {
    font-size: 24px;
  }
}
.it-shop-details__ratting span {
  color: var(--it-theme-1);
}
.it-shop-details__ratting span.review-text {
  font-size: 14px;
  color: #757a7b;
  margin-left: 10px;
}
.it-shop-details__quantity {
  border: 1px solid #e6e9e9;
  border-right: 0;
  width: 70px;
  height: 60px;
  position: relative;
}
@media (max-width: 767px) {
  .it-shop-details__quantity {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-shop-details__quantity {
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .it-shop-details__quantity {
    margin-bottom: 0;
  }
}
.it-shop-details__quantity input {
  border: 0;
  background-color: transparent;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--it-theme-1);
  font-weight: 700;
  font-size: 16px;
  padding: 0 10px;
  color: var(--it-theme-1);
}
.it-shop-details__quantity .cart-minus {
  position: absolute;
  top: -1px;
  right: -29px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--it-theme-1);
  border: 1px solid #e6e9e9;
  border-bottom: none;
  font-weight: 600;
  font-size: 12px;
  color: var(--it-theme-1);
}
.it-shop-details__quantity .cart-minus:hover {
  cursor: pointer;
}
.it-shop-details__quantity .cart-plus {
  position: absolute;
  bottom: -1px;
  right: -29px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--it-theme-1);
  font-weight: 600;
  font-size: 12px;
  color: var(--it-theme-1);
  border: 1px solid #e6e9e9;
}
.it-shop-details__quantity .cart-plus:hover {
  cursor: pointer;
}
.it-shop-details__quantity-box {
  padding-bottom: 35px;
}
@media (max-width: 767px) {
  .it-shop-details__quantity-box {
    flex-wrap: wrap;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-shop-details__quantity-box {
    flex-wrap: nowrap;
  }
}
.it-shop-details__quantity-box span {
  margin-right: 20px;
  color: var(--it-common-white);
  font-size: 18px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-shop-details__text p {
    font-size: 14px;
  }
  .it-shop-details__text p br {
    display: none;
  }
}
.it-shop-details__text span {
  font-size: 18px;
  padding-bottom: 5px;
}
.it-shop-details__text-2 span {
  font-size: 16px;
  font-weight: 400;
  display: block;
  color: #757a7b;
}
.it-shop-details__text-2 span strong {
  font-weight: 600;
  color: var(--it-common-white);
}
.it-shop-details__social span {
  font-weight: 700;
  font-size: 16px;
  display: inline-block;
  padding-right: 10px;
}
.it-shop-details__social a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
}
.it-shop-details__social a:hover {
  color: var(--it-theme-1);
}
.it-shop-details__text-box {
  padding: 55px 60px;
  background-color: #252525;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-shop-details__text-box {
    padding: 55px 50px;
  }
}
@media (max-width: 767px) {
  .it-shop-details__text-box {
    padding: 55px 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) {
  .it-shop-details__text-box p {
    font-size: 14px;
  }
}
.it-shop-details__review-thumb {
  flex: 0 0 auto;
  margin-right: 30px;
}
@media (max-width: 767px) {
  .it-shop-details__review-thumb {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  .it-shop-details__review {
    flex-wrap: wrap;
  }
}
.it-shop-details__star {
  padding-bottom: 5px;
}
.it-shop-details__star i {
  color: var(--it-theme-1);
  display: inline-block;
  margin-right: 2px;
}
.it-shop-details__author-info span {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--it-ff-heading);
  display: block;
  padding-bottom: 10px;
}
.it-shop-details__author-info span strong {
  color: var(--it-common-white);
}
.it-shop-details__author-info p {
  padding-right: 40px;
  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) {
  .it-shop-details__author-info p {
    font-size: 14px;
    padding-right: 0;
  }
}
.it-shop-details__btn {
  margin-left: 50px;
}
@media (max-width: 767px) {
  .it-shop-details__btn {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-shop-details__btn {
    margin-left: 50px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .it-shop-details__btn {
    margin-left: 50px;
  }
}

.it-pagination ul li {
  padding-top: 30px;
  display: inline-block;
}
.it-pagination ul li:not(:last-child) {
  margin-right: 10px;
}
.it-pagination ul li a, .it-pagination ul li span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  transition: 0.3s;
  background: var(--it-common-white);
  font-family: var(--it-ff-heading);
  color: var(--it-common-black);
  border-radius: 4px;
  box-shadow: 2px 3.464px 20px 0px rgba(4, 23, 26, 0.08);
}
.it-pagination ul li a.current i, .it-pagination ul li span.current i {
  display: inline-block;
  transform: translateY(2px);
}
.it-pagination ul li a:hover, .it-pagination ul li a.current {
  color: var(--it-theme-1);
}
.it-pagination ul li span:hover, .it-pagination ul li span.current {
  color: var(--it-theme-1);
}
.it-pagination ul li a {
  display: inline-block;
}
.it-pagination ul li a.color {
  background-color: var(--it-theme-1);
  color: var(--it-common-white);
  font-size: 18px;
}

/*----------------------------------------*/
/* 07. cart css start
/*----------------------------------------*/
.table-content .table > :not(:first-child) {
  border-top: 0;
}
.table-content table {
  background: #ffffff;
  border-color: #eaedff;
  border-radius: 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
}

.table-content .table > :not(:last-child) > :last-child > * {
  border-bottom-color: #eaedff;
}

.table-content .product-quantity {
  float: none;
}

.table-content table td.product-name {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.table-content table td.product-name a:hover {
  color: var(--it-theme-1);
}

.table-content table td {
  border-top: medium none;
  padding: 20px 10px;
  vertical-align: middle;
  font-size: 16px;
}

.table-content table th, .table-content table td {
  border-bottom: 1px solid #eaedff;
  border-right: 1px solid #eaedff;
}

.product-quantity > input {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  border: 1px solid #dcdcdc;
  height: 22px;
  line-height: 22px;
  padding: 0;
}

.table td, .table th {
  border-top: 1px solid #eaedff;
}

.product-quantity > input {
  width: 80px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .product-quantity > input {
    width: inherit;
  }
}

.table-content table td.product-subtotal {
  font-size: 16px;
}

.table-content table td .cart-plus-minus {
  float: none;
  margin: 0 auto;
}

.coupon-all {
  margin-top: 50px;
}

.coupon {
  float: left;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .coupon .it-btn-red {
    padding: 0 35px;
  }
}

@media (max-width: 767px) {
  .coupon {
    float: none;
  }
}
#coupon_code {
  height: 58px;
  border: 2px solid #eaedff;
  padding: 0 30px;
  margin-right: 10px;
  width: auto;
}

@media (max-width: 767px) {
  #coupon_code {
    margin-bottom: 15px;
  }
}
.coupon2 {
  float: right;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .coupon2 .it-btn {
    padding: 0 35px;
  }
}

@media (max-width: 767px) {
  .coupon2 {
    float: none;
    margin-top: 15px;
  }
}
.cart-page-total {
  padding-top: 50px;
}

.cart-page-total > h2 {
  font-size: 25px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.cart-page-total > ul {
  border: 1px solid #eaedff;
}

.cart-page-total > ul > li {
  list-style: none;
  font-size: 15px;
  color: #6f7172;
  padding: 10px 30px;
  border-bottom: 1px solid #eaedff;
  font-weight: 400;
}

.cart-page-total ul > li > span {
  float: right;
}

.cart-page-total li:last-child {
  border-bottom: 0;
}

td.product-thumbnail img {
  width: 125px;
}

.cart-plus,
.cart-minus {
  width: 20px;
  height: 20px;
  border: 1px solid #e7e7e7;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

/* 17. Checkout */
.coupon-accordion h3 {
  background-color: #f7f7f7;
  border-top: 3px solid var(--it-theme-1);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 25px;
  padding: 1em 2em 1em 3.5em;
  position: relative;
  width: auto;
}

.coupon-accordion h3::before {
  content: "\f07b";
  left: 15px;
  top: 13px;
  position: absolute;
  color: var(--it-theme-1);
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
}

.form-row > label {
  margin-top: 15px;
  margin-left: 15px;
  color: #6f7172;
}

p.lost-password {
  margin-top: 15px;
}

p.lost-password a {
  color: #6f6f6f;
}

p.checkout-coupon input[type=text] {
  height: 45px;
  padding: 0 15px;
  width: 100%;
  border: 1px solid #eaedff;
  margin-bottom: 15px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
p.checkout-coupon input[type=text]:focus {
  border-color: var(--it-common-black);
}

.coupon-checkout-content {
  display: none;
}

.checkbox-form h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 26px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.country-select {
  margin-bottom: 30px;
  position: relative;
}

.country-select select {
  width: 100%;
  background-color: transparent;
  border: 1px solid #eaedff;
  padding: 0 10px;
  height: 50px;
}

.country-select label, .checkout-form-list label {
  color: #6f7172;
  display: block;
  margin: 0 0 5px;
}

.country-select label span.required, .checkout-form-list label span.required {
  color: var(--it-theme-1);
}

.country-select .nice-select {
  border: 1px solid #eaedff;
  height: 45px;
  padding-left: 10px;
  width: 100%;
  color: #6f7172;
  margin-bottom: 20px;
}

.country-select .nice-select .list {
  width: 100%;
}

.checkout-form-list {
  margin-bottom: 30px;
}

.checkout-form-list label {
  color: #6f7172;
}

.checkout-form-list input[type=text], .checkout-form-list input[type=password], .checkout-form-list input[type=email] {
  background: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  height: 45px;
  padding: 0 0 0 10px;
  width: 100%;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.checkout-form-list input[type=text]:focus, .checkout-form-list input[type=password]:focus, .checkout-form-list input[type=email]:focus {
  border-color: var(--it-common-black);
}

.checkout-form-list input[type=text]::-moz-placeholder,
.checkout-form-list input[type=password]::-moz-placeholder,
.checkout-form-list input[type=email]::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=text]::placeholder,
.checkout-form-list input[type=password]::placeholder,
.checkout-form-list input[type=email]::placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=checkbox] {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 1px;
}

.create-acc label {
  color: #6f7172;
  display: inline-block;
}

.create-account {
  display: none;
}

.ship-different-title h3 label {
  display: inline-block;
  margin-right: 20px;
  color: var(--it-common-black);
}

.order-notes textarea {
  border: 1px solid #eaedff;
  height: 120px;
  padding: 15px;
  width: 100%;
  outline: 0;
  resize: none;
}

.order-notes textarea:focus {
  border-color: var(--it-common-black);
}

.order-notes textarea::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.order-notes textarea::placeholder {
  color: #6f7172;
  opacity: 1;
}

#ship-box-info {
  display: none;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-default > .panel-heading {
  border-radius: 0;
}

.your-order {
  padding: 30px 40px 45px;
  border: 3px solid #f7f7f7;
}

@media (max-width: 767px) {
  .your-order {
    padding: 15px;
  }
}
.your-order h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 30px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.your-order-table table {
  background: none;
  border: 0;
  width: 100%;
}

.your-order-table table th, .your-order-table table td {
  border-bottom: 1px solid #eaedff;
  border-right: medium none;
  color: #6f7172;
  font-size: 14px;
  padding: 15px 0;
  text-align: left;
}
@media (max-width: 767px) {
  .your-order-table table th, .your-order-table table td {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .your-order-table table th, .your-order-table table td {
    padding-right: 10px;
  }
}
.your-order-table table th {
  border-top: medium none;
  color: #6f7172;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  width: 250px;
}

.panel-body > p {
  color: #222;
}

.your-order-table table .shipping ul li {
  list-style: none;
}

.your-order-table table .shipping ul li input {
  position: relative;
  top: 2px;
}

.your-order-table table .shipping ul li label {
  color: #6f7172;
}

.your-order-table table .shipping th {
  vertical-align: top;
}

.your-order-table table .order-total th {
  border-bottom: 0;
  font-size: 14px;
}

.your-order-table table .order-total td {
  border-bottom: medium none;
}

.your-order-table table tr.cart_item:hover {
  background: #F9F9F9;
}

.your-order-table table tr.order-total td span {
  color: var(--it-common-black);
  font-size: 18px;
  font-weight: 500;
}

.payment-method {
  margin-top: 40px;
}
.payment-method .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.payment-method .accordion-item {
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
}
.payment-method .accordion-button {
  font-size: 16px;
  font-weight: 500;
  color: var(--it-common-black);
  padding: 23px 0;
  border: none;
}
.payment-method .accordion-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.payment-method .accordion-button::after {
  position: absolute;
  content: "\f067";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 400;
  margin-left: 0;
  background-image: none;
  color: var(--it-common-black);
  font-family: "Font awesome 5 pro";
}
.payment-method .accordion-button:not(.collapsed) {
  color: var(--it-common-black);
  background-color: var(--it-common-white);
  box-shadow: none;
}
.payment-method .accordion-button:not(.collapsed)::after {
  content: "\f068";
  font-family: "Font awesome 5 pro";
}
.payment-method .accordion-body {
  padding: 8px 0;
  padding-bottom: 40px;
}
.payment-method .accordion-collapse {
  border: none;
}

.panel-title > a {
  display: block;
}

.order-button-payment input {
  background: #232323 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  height: 40px;
  margin: 0px 0 0;
  padding: 0;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.order-button-payment input:hover {
  background: #3e976c none repeat scroll 0 0;
}

.payment-method .card {
  background-color: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  margin-bottom: 10px;
}

.payment-method .accordion .card:first-of-type {
  border: 1px solid #eaedff;
}

.card-header:first-child {
  border-radius: 0;
}

.payment-method .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #eaedff;
}

.order-button-payment button {
  width: 100%;
}

/*----------------------------------------*/
/*  06. checkout css start
/*----------------------------------------*/
.checkout__wrapper span {
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  padding-bottom: 35px;
  display: inline-block;
}
.checkout__input input {
  height: 55px;
  line-height: 55px;
  border: 2px solid #ebebeb;
  outline: none;
  width: 100%;
  border-radius: 5px;
  font-size: 16px;
  padding-left: 40px;
  padding-right: 20px;
  margin-bottom: 30px;
}
.checkout__input input:focus {
  border: 1px solid var(--it-theme-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .checkout__input input {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .checkout__input input {
    font-size: 13px;
    padding-left: 20px;
  }
}
.checkout__summary-wrapper {
  margin-top: 57px;
  padding: 30px 0;
  background-color: #f1f2f9;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .checkout__summary-wrapper {
    margin-bottom: 30px;
  }
}
.checkout__list-item {
  padding: 0 50px;
  padding-bottom: 11px;
  border-bottom: 1px solid #c9c9c9;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .checkout__list-item {
    padding: 0 28px;
  }
}
.checkout__list-item b {
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  color: #333333;
  padding-bottom: 20px;
  display: inline-block;
}
.checkout__summary-list span {
  color: #4a4c59;
  display: inline-block;
  padding-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) {
  .checkout__summary-list span {
    font-size: 14px;
  }
}
.checkout__bottom {
  padding: 0 50px;
  padding-top: 28px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .checkout__bottom {
    padding: 0 30px;
    padding-top: 28px;
  }
}
.checkout__bottom span {
  font-weight: 700;
  color: #333333;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .checkout__bottom span {
    font-size: 14px;
  }
}

.checkout-form-list input {
  display: inline-block;
  margin-right: 20px;
  position: relative;
  top: 1px;
  width: 19px;
  height: 19px;
  border-color: rgb(221, 221, 221);
}
.checkout-form-list label {
  font-size: 16px;
  color: #636363;
}

/*----------------------------------------*/
/*  14. instagram css start
/*----------------------------------------*/
.it-instagram-item {
  position: relative;
}
.it-instagram-item:hover .it-instagram-thumb::after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.it-instagram-item:hover .it-instagram-icon {
  -webkit-transform: scale(1) translate(-50%, -50%);
  transform: scale(1) translate(-50%, -50%);
  transition-delay: 300ms;
}
.it-instagram-thumb {
  position: relative;
}
.it-instagram-thumb::after {
  content: "";
  height: 0%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: rgba(255, 76, 36, 0.902);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.it-instagram-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(0) translate(-50%, -50%);
  transition: 0.3s;
}
.it-instagram-icon a {
  font-size: 50px;
  color: var(--it-common-white);
}

/*----------------------------------------*/
/*  10. error css start
/*----------------------------------------*/
.it-error-shape {
  position: absolute;
  top: -38%;
  left: 0;
}
.it-error-number {
  font-weight: 700;
  font-size: 240px;
  margin-bottom: 0px;
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-error-number {
    font-size: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-error-number {
    font-size: 185px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-error-number {
    font-size: 170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-error-number {
    font-size: 150px;
  }
}
@media (max-width: 767px) {
  .it-error-number {
    font-size: 100px;
  }
}
.it-error-content > span {
  font-size: 48px;
  font-weight: 700;
  display: block;
  padding-bottom: 20px;
  color: var(--it-common-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .it-error-content > span {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-error-content > span {
    font-size: 36px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-error-content > span {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .it-error-content > span {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .it-error-content > span {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .it-error-content > span {
    font-size: 25px;
  }
}
.it-error-content > span b {
  color: var(--it-theme-1);
}
.it-error-content p {
  color: #888888;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .it-error-content p {
    font-size: 15px;
  }
}

/*----------------------------------------*/
/*  25. footer css start
/*----------------------------------------*/
.it-footer-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.it-footer-bg::after {
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgb(14, 14, 14);
  opacity: 0.902;
}
.it-footer-widget {
  position: relative;
  z-index: 1;
}
.it-footer-widget-title {
  font-size: 24px;
  margin-bottom: 31px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-footer-widget-title {
    font-size: 20px;
  }
}
.it-footer-widget-content p {
  font-weight: 500;
  color: var(--it-common-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) {
  .it-footer-widget-content p {
    font-size: 14px;
  }
}
.it-footer-widget-content ul li {
  list-style: none;
}
.it-footer-widget-content ul li:not(:last-child) {
  margin-bottom: 17px;
}
.it-footer-widget-content ul li a {
  color: var(--it-common-white);
  font-weight: 500;
  transition: 0.3s;
}
.it-footer-widget-content ul li a:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-footer-widget-content ul li a {
    font-size: 14px;
  }
}
.it-footer-widget-list ul li {
  list-style-type: none;
  overflow: hidden;
}
.it-footer-widget-list ul li:not(:last-child) {
  margin-bottom: 17px;
}
.it-footer-widget-list ul li a {
  padding-left: 0px;
  font-weight: 500;
  color: var(--it-common-white);
  position: relative;
  display: inline-block;
  transition: 0.3s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-footer-widget-list ul li a {
    font-size: 14px;
  }
}
.it-footer-widget-list ul li a:hover {
  padding-left: 15px;
  color: var(--it-theme-1);
}
.it-footer-widget-list ul li a:hover::after {
  left: 0;
}
.it-footer-widget-list ul li a::after {
  position: absolute;
  content: "";
  left: -20px;
  top: 6px;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  position: absolute;
  background-color: var(--it-theme-1);
  transition: 0.3s;
}
.it-footer-widget-input-box {
  position: relative;
  margin-top: -14px;
  margin-bottom: 30px;
}
.it-footer-widget-input-box input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--it-border-1);
  height: 50px;
  line-height: 50px;
  padding-left: 0;
  padding-right: 60px;
  color: var(--it-common-white);
  font-weight: 500;
  width: 100%;
}
.it-footer-widget-button-box {
  position: absolute;
  right: 0;
  top: 12px;
}
.it-footer-widget-button-box span {
  color: var(--it-theme-1);
  font-size: 18px;
}
.it-footer-widget-text p {
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 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) {
  .it-footer-widget-text p {
    font-size: 14px;
  }
}
.it-footer-widget-social a {
  font-size: 16px;
  color: var(--it-common-white);
  margin-right: 10px;
  transform: 0.3s;
}
.it-footer-widget-social a:hover {
  color: var(--it-theme-1);
}
.it-footer-widget-social-2 a {
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px;
  transform: 0.3s;
  text-transform: uppercase;
  color: var(--it-common-white);
}
.it-footer-widget-social-2 a:hover {
  color: var(--it-theme-1);
  text-decoration: underline;
}

.footer-cols-2 {
  padding-left: 45px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer-cols-2 {
    padding-left: 0;
  }
}

.footer-cols-3 {
  padding-left: 85px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer-cols-3 {
    padding-left: 0;
  }
}

.it-shape-1 {
  position: absolute;
  top: 11px;
  left: 0;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-shape-1 svg {
    max-width: 100%;
  }
}

/*-- copyright css start here--*/
.it-copyright-space {
  border-top: 1px solid var(--it-border-1);
  padding: 27px 0;
}
@media (max-width: 767px) {
  .it-copyright-text {
    flex-wrap: wrap;
    text-align: center;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .it-copyright-text {
    flex-wrap: wrap;
    text-align: center;
  }
}
.it-copyright-text p {
  font-weight: 500;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-copyright-text p {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-copyright-text p {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-copyright-text p {
    margin-bottom: 0px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .it-copyright-text p {
    margin-bottom: 0;
  }
}
.it-copyright-text p b {
  color: var(--it-common-white);
}
.it-copyright-text span {
  font-weight: 500;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-copyright-text span {
    font-size: 14px;
  }
}
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:-20%;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:10;
}
.my-float{
	margin-top:16px;
}
.whatsapp {
  position:fixed;
  width:40px;
  height:40px;
  bottom:80px;
  left:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}

.whatsapp-icon {
  margin:5px;
  
}
/*# sourceMappingURL=style.css.map */