@charset "UTF-8";
/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
	02. MEANMENU CSS START
	03. banner css start
    04. blog css start
	05. contact css start
	06. footer css start
	07. header css startT
	08. hero css start
	09. project css start
	10. service css start
	11. team css start
	12. testimonial css start
	13. service css start
	14. work css start
	15. brand css start

**********************************************/
/*----------------------------------------*/
/* 01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Teko:wght@300;400;500;600;700&display=swap" rel="stylesheet');
:root {
  /**
  @font family declaration
  */
  --it-ff-body: 'Rubik', sans-serif;
  --it-ff-heading: 'Teko', sans-serif;;
  --it-ff-fontawesome: Font Awesome 5 Pro;
  /**
  @color declaration
  */
  --it-common-white: #ffffff;
  --it-common-black: #040825;
  --it-common-blue: #090e38;
  --it-heading-primary: #FFF;
  --it-grey-1: #A7A3B9;
  --it-text-body: #fff;
  --it-border-1: #262c5c;
  --it-theme-1: #f31e5e;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
  }
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 30px;
}

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

/*---------------------------------
	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.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: 24px;
}

.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,
textarea {
  outline: none;
  color: var(--it-common-black);
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #70737D;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #70737D;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #70737D;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #70737D;
}

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

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

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

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

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

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

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

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

.gx-60 {
  --bs-gutter-x: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gx-60 {
    --bs-gutter-x: 40px;
  }
}

/*--
    - Spacing
-----------------------------------------*/
.main-btn {
  display: inline-block;
  background-color: var(--it-theme-1);
  height: 58px;
  line-height: 63px;
  padding: 0px 57px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-transform: capitalize;
  font-family: "Teko", sans-serif;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: uppercase;
  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) {
  .main-btn {
    height: 48px;
    line-height: 48px;
    padding: 0 28px;
  }
}
.main-btn span {
  color: var(--it-common-white);
  transition: 0.3s;
}
.main-btn:hover {
  background-color: var(--it-common-white);
}
.main-btn:hover span {
  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);
  }
}
@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 tpleftright {
  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 tprotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes tptranslateY2 {
  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 tptranslateX2 {
  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 tpupdown {
  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 tpswing {
  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(0.8);
  }
  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 circle-animation-ff {
  0% {
    transform: scale(-1, 1) rotate(360deg);
  }
  100% {
    transform: scale(-1, 1) rotate(0deg);
  }
}
@keyframes circle-animation-jj {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@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: 50px;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: -10%;
  right: 50px;
  font-size: 16px;
  border-radius: 6px;
  z-index: 9;
  color: var(--it-common-white);
  text-align: center;
  cursor: pointer;
  background: var(--it-theme-1);
  transition: 1s ease;
  border: none;
}

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

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

.black-bg {
  background: var(--it-common-black);
}

.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(24, 24, 24, 0.6);
  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;
}

.itoffcanvas {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  padding: 0 30px;
  bottom: 0;
  background-color: var(--it-common-black);
  z-index: 9999;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.45s ease-in-out;
  overflow-y: scroll;
  padding-bottom: 40px;
}
.itoffcanvas .header__img-content {
  padding-top: 50px;
  padding-bottom: 85px;
}
.itoffcanvas.opened {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .itoffcanvas {
    width: 300px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .itoffcanvas {
    width: 300px;
  }
}
.itoffcanvas.opened {
  left: 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__instagram-img {
  margin-bottom: 40px;
}
.itoffcanvas__instagram-img a img {
  width: 75px;
  margin-right: 2px;
  margin-bottom: 6px;
}
.itoffcanvas__contact {
  margin-bottom: 70px;
}
.itoffcanvas__contact a {
  margin-bottom: 10px;
  display: inline-block;
}
.itoffcanvas__contact a:hover {
  color: var(--it-theme-1);
}
.itoffcanvas__social a {
  font-size: 20px;
  transition: 0.3s;
  margin-right: 20px;
}
.itoffcanvas__social a:hover {
  color: var(--it-theme-1);
}

.mobile-menu.mean-container {
  margin-bottom: 70px;
}

.breadcrumb__title {
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: var(--it-common-black);
  padding-bottom: 15px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__title {
    font-size: 41px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb__title {
    font-size: 45px;
  }
}
@media (max-width: 767px) {
  .breadcrumb__title {
    font-size: 32px;
    margin-bottom: 0;
  }
}
.breadcrumb__plr {
  padding: 0 200px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .breadcrumb__plr {
    padding: 0 100px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__plr {
    padding: 0 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb__plr {
    padding: 0 30px;
  }
}
@media (max-width: 767px) {
  .breadcrumb__plr {
    padding: 0;
  }
}
.breadcrumb__space {
  padding-top: 200px;
  padding-bottom: 130px;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .breadcrumb__space {
    padding-top: 200px;
    padding-bottom: 80px;
  }
}
.breadcrumb__subtitle {
  font-size: 18px;
  font-weight: 300;
  color: var(--tp-common-black);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .breadcrumb__subtitle {
    font-size: 15px;
  }
}
.breadcrumb__button a {
  font-size: 16px;
  font-weight: 400;
  color: #636363;
  background-color: var(--it-common-white);
  border: 1px solid var(--it-theme-1);
  padding: 11px 28px;
  display: inline-block;
  border-radius: 30px;
}
.breadcrumb__button a i {
  padding: 0px 8px;
  transform: translateY(2px);
}
.breadcrumb__shape-1 {
  position: absolute;
  right: 0;
  top: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .breadcrumb__shape-1 {
    right: -2%;
    top: -2%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__shape-1 {
    right: -2%;
    top: -2%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb__shape-1 {
    right: -5%;
    top: -5%;
  }
}
.breadcrumb__shape-2 {
  position: absolute;
  right: 78%;
  top: 2%;
}
.breadcrumb__shape-3 {
  position: absolute;
  top: 13%;
  left: 2%;
  animation: zoom 5s infinite;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .breadcrumb__shape-3 {
    top: 25%;
    left: 1%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__shape-3 {
    top: 25%;
    left: 1%;
  }
}
.breadcrumb__shape-4 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.breadcrumb__shape-5 {
  position: absolute;
  bottom: 68%;
  right: 6%;
  animation: moving 9s linear infinite;
}
.breadcrumb__shape-6 {
  position: absolute;
  bottom: 12%;
  right: 1%;
  animation: tptranslateX2 4s infinite alternate;
}
.breadcrumb__main-img {
  animation: tpupdown 0.8s infinite alternate;
}
.breadcrumb__big-text {
  position: absolute;
  left: 43%;
  top: 54%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .breadcrumb__big-text {
    left: 40%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__big-text {
    left: 37%;
    top: 51%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb__big-text {
    left: 39%;
    top: 51%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__big-text {
    left: 40%;
    top: 51%;
  }
}
.breadcrumb__big-text h2 {
  font-size: 176px;
  -webkit-text-stroke: 2px #ebebf1;
  color: transparent;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .breadcrumb__big-text h2 {
    font-size: 165px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .breadcrumb__big-text h2 {
    font-size: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .breadcrumb__big-text h2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .breadcrumb__big-text h2 {
    font-size: 76px;
  }
}

@media (max-width: 767px) {
  .breadcrumb__button {
    margin-bottom: 30px;
  }
}

.breadcrumb__bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  object-fit: cover;
}

.it-custom-accordio .accordion-buttons {
  color: var(--it-common-black);
  font-weight: 600;
  font-size: 22px;
  width: 100%;
  text-align: left;
  position: relative;
  padding: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .it-custom-accordio .accordion-buttons {
    font-size: 19px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-custom-accordio .accordion-buttons {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .it-custom-accordio .accordion-buttons {
    font-size: 14px;
    padding: 20px 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-custom-accordio .accordion-buttons {
    font-size: 17px;
    padding: 20px;
  }
}
.it-custom-accordio .accordion-buttons:not(.collapsed) {
  background-color: var(--it-theme-1);
}
.it-custom-accordio .accordion-buttons:not(.collapsed)::after {
  content: "\f068";
}
.it-custom-accordio .accordion-buttons:not(.collapsed) span {
  background-color: var(--it-common-white);
}
.it-custom-accordio .accordion-buttons:not(.collapsed) span i {
  color: var(--it-common-blue-4);
}
.it-custom-accordio .accordion-buttons::after {
  position: absolute;
  content: "\f067";
  font-family: "Font Awesome 5 Pro";
  background-image: none;
  top: 50%;
  right: 3%;
  color: var(--tp-theme-1);
  width: auto;
  height: auto;
  font-weight: 700;
  font-size: 16px;
  opacity: 1;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .it-custom-accordio .accordion-buttons::after {
    right: 5%;
    font-size: 13px;
  }
}
.it-custom-accordio .accordion-buttons span {
  margin-right: 15px;
  height: 30px;
  width: 30px;
  background-color: var(--it-common-blue-4);
  display: inline-block;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .it-custom-accordio .accordion-buttons span {
    margin-right: 6px;
    height: 25px;
    width: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .it-custom-accordio .accordion-buttons span {
    margin-right: 12px;
  }
}
.it-custom-accordio .accordion-buttons span i {
  font-size: 16px;
  color: var(--it-common-white);
  font-weight: 700;
}
@media (max-width: 767px) {
  .it-custom-accordio .accordion-buttons span i {
    font-size: 14px;
  }
}

.it-custom-accordio .accordion-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  padding: 30px 25px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .it-custom-accordio .accordion-body {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .it-custom-accordio .accordion-body {
    font-size: 14px;
  }
}

.it-custom-accordio .accordion-items {
  margin-bottom: 40px;
  border: 1px solid var(--it-border-1);
  border-radius: 20px;
  overflow: hidden;
}

.it-custom-accordio-2 .accordion-items {
  margin-bottom: 20px;
}
.it-custom-accordio-2 .accordion-buttons {
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  padding: 40px 45px;
  background-color: var(--tp-common-white);
  color: #212121;
  border-radius: 10px 10px 0 0;
}
@media (max-width: 767px) {
  .it-custom-accordio-2 .accordion-buttons {
    font-size: 17px;
    padding: 28px 20px;
  }
}
.it-custom-accordio-2 .accordion-buttons::after {
  position: absolute;
  content: "\f063";
  font-family: "Font Awesome 5 Pro";
  background-image: none;
  top: 45px;
  right: 45px;
  color: #B8BCC8;
  width: auto;
  height: auto;
  font-weight: 500;
  font-size: 14px;
}
@media (max-width: 767px) {
  .it-custom-accordio-2 .accordion-buttons::after {
    top: 33px;
    right: 18px;
  }
}
.it-custom-accordio-2 .accordion-buttons.collapsed::after {
  content: "\f062";
}
.it-custom-accordio-2 .collapsed {
  border-radius: 10px 10px 10px 10px;
}
.it-custom-accordio-2 .accordion-body {
  background-color: var(--tp-common-white);
  padding: 20px 45px;
  box-shadow: 0px 25px 32px 0px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  border-radius: 0 0px 10px 10px;
  font-size: 16px;
}
@media (max-width: 767px) {
  .it-custom-accordio-2 .accordion-body {
    padding: 20px 25px;
  }
}
.it-custom-accordio-2 .accordion-body::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--tp-grey-1);
  top: 0;
  left: 45px;
  right: 45px;
}

.faq-accordio-border .accordion-items {
  background-color: var(--tp-common-white);
  border: 1px solid #F5F5F5;
  border-radius: 10px;
}

/*----------------------------------------*/
/*  SEARCH CSS START
/*----------------------------------------*/
.search__popup {
  padding-top: 70px;
  padding-bottom: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99;
  -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);
}

.section-subtitle {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  color: var(--it-common-white);
  padding-bottom: 15px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .section-subtitle {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-subtitle {
    font-size: 19px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-subtitle {
    font-size: 19px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-subtitle {
    font-size: 19px;
  }
}
@media (max-width: 767px) {
  .section-subtitle {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-subtitle {
    font-size: 20px;
  }
}
.section-subtitle::before {
  content: "";
  background-color: var(--it-theme-1);
  width: 2px;
  height: 30px;
  display: inline-block;
  margin-right: 20px;
  transform: translateY(6px);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-subtitle::before {
    transform: translateY(9px);
  }
}
@media (max-width: 767px) {
  .section-subtitle::before {
    transform: translateY(9px);
  }
}

.section-title {
  font-weight: 400;
  font-size: 70px;
  line-height: 0.8;
  color: var(--it-common-white);
  padding-bottom: 25px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .section-title {
    font-size: 65px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .section-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-title {
    font-size: 50px;
  }
}
.section-title span {
  color: var(--it-theme-1);
}

.banner-section-title {
  font-weight: 400;
  font-size: 70px;
  line-height: 0.8;
  color: var(--it-common-white);
  padding-bottom: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-section-title {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .banner-section-title {
    font-size: 55px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner-section-title {
    font-size: 70px;
  }
}
.banner-section-title span {
  color: var(--it-theme-1);
}

.hero-title {
  font-weight: 700;
  font-size: 100px;
  line-height: 0.9;
  color: var(--it-common-white);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .hero-title {
    font-size: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-title {
    font-size: 68px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-title {
    font-size: 70px;
  }
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 43px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-title {
    font-size: 55px;
  }
}

/*----------------------------------------*/
/*  03. MEANMENU CSS START
/*----------------------------------------*/
.mobile-menu.mean-container {
  overflow: hidden;
}
@media (max-width: 767px) {
  .mobile-menu.mean-container {
    margin-bottom: 30px;
  }
}

.mobile-menu .sidebar-list {
  clear: both;
}
.mobile-menu .sidebar-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  color: var(--tp-common-white);
}
.mobile-menu .sidebar-list li::after {
  top: 10px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #c00;
  background-color: transparent;
  content: "";
  display: inline-block;
  position: absolute;
}
.mobile-menu .tp-sidebar-social {
  margin-top: 20px;
}
.mobile-menu .tp-sidebar-social a {
  margin-right: 5px;
  background-color: var(--tp-theme-primary);
  color: #fff;
  display: inline-block;
  width: 35px;
  height: 35px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
}

.sidebar-title h3 {
  color: var(--tp-common-white);
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--it-theme-1);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 10px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: #fff;
  line-height: 30px;
  top: 0;
  font-weight: 400;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  color: var(--it-theme-1);
  border-color: #888888;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--tp-theme-2);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: var(--tp-common-white);
}

/*----------------------------------------*/
/*  07. header CSS START
/*----------------------------------------*/
.container-side-plr {
  padding: 0 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container-side-plr {
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .container-side-plr {
    padding: 0;
  }
}

.header__bg {
  background-color: var(--it-common-black);
  width: 300px;
  height: 100%;
  border-right: 1px solid var(--it-theme-1);
  border-bottom: 1px solid var(--it-theme-1);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}
.header__img {
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}
.header__img span {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: var(--it-common-white);
  display: inline-block;
  position: absolute;
  bottom: 1%;
  right: 17%;
}
.header__img span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #31a24c;
}
.header__img-text span {
  font-size: 18px;
  font-weight: 400;
  font-family: "Teko", sans-serif;
  letter-spacing: 8px;
}
.header__img-content {
  padding-top: 50px;
  padding-bottom: 130px;
}
.header__shape {
  position: absolute;
  top: 0;
  left: 0;
}
.header__menu {
  padding-left: 80px;
}
.header__menu nav ul {
  padding-left: 35px;
}
.header__menu nav ul.menu-left-border {
  position: relative;
}
.header__menu nav ul.menu-left-border::after {
  content: "";
  position: absolute;
  left: 0;
  top: -22px;
  height: 270px;
  width: 1px;
  background-color: var(--it-border-1);
}
.header__menu nav ul li {
  margin-bottom: 20px;
  list-style-type: none;
  display: block;
  position: relative;
  color: var(--it-grey-1);
}
.header__menu nav ul li::before {
  position: absolute;
  content: "";
  top: 6px;
  left: -40px;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: var(--it-theme-1);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  transform: scale(0);
}
.header__menu nav ul li:hover {
  color: var(--it-theme-1);
}
.header__menu nav ul li:hover::before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.header__menu nav ul li:hover .submenu {
  opacity: 1;
  visibility: visible;
  left: 100%;
}
.header__menu nav ul li:hover.has-dropdown::after {
  transform: rotate(-180deg);
  color: var(--it-theme-1);
}
.header__menu nav ul li.active::before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.header__menu nav ul li .submenu {
  position: absolute;
  top: 0;
  left: 120%;
  background-color: var(--it-common-black);
  padding: 30px;
  width: 150px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999;
  border: 1px solid #f31e5e;
}
.header__menu nav ul li .submenu li::before {
  display: none;
}
.header__menu nav ul li .submenu li:hover {
  color: var(--it-theme-1);
}
.header__menu nav ul li.has-dropdown::after {
  content: "\f107";
  font-family: "Font Awesome 5 Pro";
  font-size: 20px;
  margin-left: 7px;
  color: var(--it-grey-1);
  font-weight: 400;
  transition: 0.3s;
  position: absolute;
  top: -4px;
  left: 60px;
}
.header__menu nav ul li:last-child {
  margin-bottom: 0;
}
.header__menu nav ul li a {
  font-weight: 400;
  text-transform: uppercase;
}
.header__contact-info {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.header__contact-info a {
  color: var(--it-common-white);
}

.header-top__layout-right {
  width: calc(100% - 300px);
  margin-left: auto;
  position: relative;
  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) {
  .header-top__layout-right {
    width: calc(100% - 0px);
  }
}
.header-top__space {
  padding-right: 30px;
  padding-left: 160px;
  padding-top: 20px;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .header-top__space {
    padding-left: 10px;
    padding-right: 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: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .header-top__space {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-top__space {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.header-top__right-side button {
  padding: 9px 0;
  padding-left: 28px;
}
.header-top__right-side button .moon {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  background-color: var(--it-common-white);
  line-height: 42px;
  text-align: center;
  color: var(--it-common-black);
}
@media (max-width: 767px) {
  .header-top__right-side button .moon {
    height: 35px;
    width: 35px;
    line-height: 35px;
  }
}
.header-top__right-side button i {
  font-size: 24px;
  color: var(--it-common-white);
}
@media (max-width: 767px) {
  .header-top__right-side button i {
    font-size: 20px;
  }
}
.header-top__social a {
  font-size: 20px;
  color: var(--it-common-white);
  padding: 12px 0;
  transition: 0.3s;
  padding-right: 25px;
}
@media (max-width: 767px) {
  .header-top__social a {
    font-size: 15px;
    padding-right: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-top__social a {
    font-size: 20px;
  }
}
.header-top__social a:hover {
  color: var(--it-theme-1);
}

/*----------------------------------------*/
/*  08. hero css start
/*----------------------------------------*/
.hero__space {
  padding-top: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__left-side {
    margin-bottom: 120px;
  }
}
@media (max-width: 767px) {
  .hero__left-side {
    margin-bottom: 50px;
  }
}
.hero__left-text {
  padding-bottom: 35px;
}
.hero__left-text p {
  line-height: 34px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__left-text p br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__left-text p {
    font-size: 15px;
  }
  .hero__left-text p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__left-text p {
    font-size: 14px;
    padding-right: 56px;
  }
  .hero__left-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .hero__left-text p {
    font-size: 13px;
  }
  .hero__left-text p br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__left-text p {
    font-size: 14px;
  }
  .hero__left-text p br {
    display: none;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .hero__right-side {
    margin-left: -50px;
  }
}
.hero__right-side span.gradiant-circle {
  background-image: -moz-linear-gradient(180deg, rgb(243, 30, 94) 0%, rgb(126, 22, 75) 37%, rgb(9, 14, 56) 99%);
  background-image: -webkit-linear-gradient(180deg, rgb(243, 30, 94) 0%, rgb(126, 22, 75) 37%, rgb(9, 14, 56) 99%);
  background-image: -ms-linear-gradient(180deg, rgb(243, 30, 94) 0%, rgb(126, 22, 75) 37%, rgb(9, 14, 56) 99%);
  opacity: 0.651;
  height: 355px;
  width: 355px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: -56px;
  left: 93px;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .hero__right-side span.gradiant-circle {
    top: -56px;
    left: -20px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__right-side span.gradiant-circle {
    left: -38px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__right-side span.gradiant-circle {
    left: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__right-side span.gradiant-circle {
    left: 195px;
  }
}
.hero__right-img img {
  max-width: inherit;
  transform: translateX(28px);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .hero__right-img img {
    max-width: 100%;
    transform: translateX(-43px);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__right-img img {
    max-width: 100%;
    transform: translateX(-14px);
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__right-img img {
    max-width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__right-img img {
    max-width: inherit;
    transform: translateX(-80px);
    width: 150%;
  }
}
@media (max-width: 767px) {
  .hero__right-img img {
    max-width: 100%;
    transform: translateX(0);
  }
}
.hero__social {
  position: absolute;
  right: -28%;
  top: 29%;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .hero__social {
    right: -15px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .hero__social {
    right: -2px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__social {
    right: -29px;
  }
}
.hero__social::after {
  content: "";
  height: 120px;
  width: 1px;
  background-color: var(--it-common-white);
  display: inline-block;
  transform: translateX(5px);
  margin-top: 10px;
}
.hero__social a {
  font-size: 20px;
  color: var(--it-common-white);
  padding: 12px 0;
  transition: 0.3s;
}
.hero__social a:hover {
  color: var(--it-theme-1);
}

.circle-animation.hero {
  top: 39%;
  left: 54%;
  border: 1px solid #1f244a;
  width: 610px;
  height: 610px;
  position: absolute;
  border-radius: 50%;
}

.circle-animation span.tp-circle-1 {
  display: block;
  position: absolute;
  content: "";
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 1px;
  background: transparent;
  transform-origin: left;
  -webkit-animation: circle-animation 13s linear infinite;
  -moz-animation: circle-animation 13s linear infinite;
  -o-animation: circle-animation 13s linear infinite;
  animation: circle-animation 13s linear infinite;
}
.circle-animation span.tp-circle-1::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  bottom: -25px;
  right: -5px;
  background-color: #30376d;
}

.circle-animation span.tp-circle-2 {
  display: block;
  position: absolute;
  content: "";
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 1px;
  background: transparent;
  transform-origin: left;
  transform: scale(-1, 1);
  -webkit-animation: circle-animation2 13s linear infinite;
  -moz-animation: circle-animation2 13s linear infinite;
  -o-animation: circle-animation2 13s linear infinite;
  animation: circle-animation2 13s linear infinite;
}
.circle-animation span.tp-circle-2::after {
  position: absolute;
  content: "";
  width: 22px;
  height: 22px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  top: -25px;
  right: -12px;
  background-color: var(--it-theme-1);
}

.circle-animation.project {
  top: 39%;
  left: 0;
  border: 1px solid #2b2f47;
  width: 560px;
  height: 530px;
  position: absolute;
  border-radius: 50%;
}

/*----------------------------------------*/
/*  09. project css start
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project__item {
    padding-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .project__item {
    padding-bottom: 70px;
  }
}
.project__number h4 {
  font-size: 72px;
  color: var(--it-theme-1);
  margin-bottom: 0;
  margin-right: 20px;
  width: 144px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project__number h4 {
    font-size: 55px;
    width: 115px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project__number h4 {
    font-size: 55px;
    width: 115px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project__number h4 {
    font-size: 60px;
    width: 111px;
  }
}
@media (max-width: 767px) {
  .project__number h4 {
    font-size: 60px;
    width: 111px;
  }
}
.project__number h4.space {
  width: 72px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project__number h4.space {
    width: 57px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project__number h4.space {
    width: 57px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project__number h4.space {
    width: 62px;
  }
}
.project__fact-space {
  padding-right: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), Slg {
  .project__fact-space {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project__fact-space {
    padding-right: 70px;
  }
}
@media (max-width: 767px) {
  .project__fact-space {
    flex-wrap: wrap;
    padding-bottom: 30px;
  }
}
.project__fact-text h5 {
  font-weight: 400;
  font-family: "Rubik", sans-serif;
  line-height: 26px;
  font-size: 16px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .project__fact-text h5 br {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project__fact-text h5 br {
    display: none;
  }
}
.project__text {
  padding-bottom: 20px;
}
.project__text p {
  color: var(--it-grey-1);
  line-height: 34px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .project__text p {
    font-size: 15px;
  }
  .project__text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .project__text p {
    font-size: 14px;
  }
  .project__text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .project__fact-item {
    flex-wrap: wrap;
  }
}

.project-2__tab-button {
  padding-bottom: 55px;
}
.project-2__tab-button button {
  color: var(--it-common-white);
  padding: 20px 30px;
  margin: 0 5px;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-2__tab-button button {
    padding: 20px 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-2__tab-button button {
    padding: 20px 18px;
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .project-2__tab-button button {
    padding: 15px 26px;
    font-size: 14px;
    margin-bottom: 15px;
  }
}
.project-2__tab-button button:hover {
  background-color: var(--it-common-black);
  color: var(--it-common-white);
}
.project-2__tab-button button.active {
  background-color: var(--it-common-black);
  color: var(--it-common-white);
}
.project-2__item {
  position: relative;
  transition: 0.3s;
}
.project-2__item img {
  width: 100%;
  transition: 0.7s;
}
.project-2__item:hover .project-2__item-content {
  opacity: 1;
  visibility: visible;
}
.project-2__item:hover img {
  transform: scale(1.1) rotate(-3deg);
}
.project-2__item-content {
  width: 310px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 35px 40px;
  background-color: var(--it-common-black);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .project-2__item-content {
    width: 260px;
    padding: 35px 36px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .project-2__item-content {
    width: 190px;
    padding: 21px 20px;
  }
}
.project-2__item-content span {
  font-family: "Rubik", sans-serif;
  display: inline-block;
  padding-bottom: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-2__item-content span {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-2__item-content span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-2__item-content span {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .project-2__item-content span {
    font-size: 13px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project-2__item-content span {
    font-size: 12px;
  }
}
.project-2__item-content span::after {
  content: "";
  width: 30px;
  height: 2px;
  transform: translateY(-4px);
  background-color: var(--it-theme-1);
  display: inline-block;
  margin-left: 10px;
}
.project-2__item-content h4 {
  font-size: 25px;
  margin-bottom: 0;
  transition: 0.3s;
}
.project-2__item-content h4:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .project-2__item-content h4 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-2__item-content h4 {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-2__item-content h4 {
    font-size: 19px;
  }
}
@media (max-width: 767px) {
  .project-2__item-content h4 {
    font-size: 19px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .project-2__item-content h4 {
    font-size: 17px;
  }
}

/*----------------------------------------*/
/*  04. blog css start
/*----------------------------------------*/
.blog__item-content {
  padding: 35px 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__item-content {
    padding: 28px 15px;
  }
}
@media (max-width: 767px) {
  .blog__item-content {
    padding: 28px 0px;
  }
}
.blog__meta {
  background-color: var(--it-theme-1);
  font-weight: 400;
  font-size: 16px;
  color: var(--it-common-white);
  padding: 0 36px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__meta {
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
  }
}
@media (max-width: 767px) {
  .blog__meta {
    font-size: 14px;
    padding: 0 21px;
    height: 35px;
    line-height: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__meta {
    padding: 0 36px;
  }
}
.blog__date {
  background-color: var(--it-common-blue);
  font-weight: 400;
  font-size: 16px;
  color: var(--it-common-white);
  padding: 0 36px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__date {
    padding: 0 22px;
    height: 35px;
    line-height: 35px;
  }
}
@media (max-width: 767px) {
  .blog__date {
    padding: 0 27px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__date {
    padding: 0 42px;
  }
}
.blog__title-sm {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 5px;
  transition: 0.3s;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__title-sm {
    font-size: 30px;
  }
  .blog__title-sm br {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__title-sm {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__title-sm {
    font-size: 27px;
  }
  .blog__title-sm br {
    display: none;
  }
}
@media (max-width: 767px) {
  .blog__title-sm {
    font-size: 27px;
  }
  .blog__title-sm br {
    display: none;
  }
}
.blog__title-sm:hover {
  color: var(--it-theme-1);
}
.blog__content p {
  color: var(--it-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__content p {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__content p {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .blog__content p {
    font-size: 14px;
  }
}

.blog-details__category span {
  font-family: "Teko", sans-serif;
  font-weight: 400;
  padding-right: 60px;
}
.blog-details__category span i {
  padding-right: 15px;
  font-size: 20px;
}
.blog-details__category span:last-child {
  padding-right: 0;
}
.blog-details__title {
  font-weight: 500;
  font-size: 40px;
  padding-bottom: 10px;
  transition: 0.3s;
}
.blog-details__title:hover {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details__title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .blog-details__title {
    font-size: 35px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .blog-details__title {
    font-size: 30px;
  }
}
.blog-details__text p {
  color: var(--it-grey-1);
  padding-right: 90px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .blog-details__text p {
    padding-right: 8px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-details__text p {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .blog-details__text p {
    padding-right: 0;
    font-size: 14px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-details__text p {
    padding-right: 0px;
  }
}
.blog-details__client-review {
  background-color: var(--it-common-blue);
  padding: 40px;
}
@media (max-width: 767px) {
  .blog-details__client-review {
    padding: 30px;
  }
}
.blog-details__icon {
  padding-bottom: 10px;
}
.blog-details__icon span {
  font-size: 50px;
  color: var(--it-theme-1);
}
.blog-details__client-content p {
  line-height: 28px;
  padding-bottom: 20px;
  padding-right: 57px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details__client-content p {
    padding-right: 42px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .blog-details__client-content p {
    font-size: 14px;
    padding-right: 0;
  }
}
.blog-details__client-content span {
  font-size: 24px;
  font-family: "Teko", sans-serif;
}
.blog-details__client-content span::before {
  content: "";
  width: 100px;
  height: 2px;
  background-color: var(--it-theme-1);
  display: inline-block;
  transform: translateY(-6px);
  margin-right: 30px;
}
.blog-details__tag span {
  padding-right: 30px;
  font-family: "Teko", sans-serif;
  font-size: 24px;
}
.blog-details__tag a {
  font-size: 24px;
  padding-right: 30px;
  font-family: "Teko", sans-serif;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details__tag a {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .blog-details__tag a {
    margin-bottom: 20px;
    display: inline-block;
    font-size: 20px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .blog-details__tag a {
    font-size: 18px;
    padding-right: 20px;
  }
}
.blog-details__tag a:last-child {
  padding-right: 0;
}
.blog-details__tag a:hover {
  color: var(--it-theme-1);
}
.blog-details__form-box h4 {
  font-family: "Teko", sans-serif;
  font-size: 40px;
  padding-bottom: 35px;
  display: inline-block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog-details__form-box h4 {
    font-size: 35px;
  }
}
@media (max-width: 767px) {
  .blog-details__form-box h4 {
    font-size: 35px;
  }
}
.blog-details__input input {
  width: 100%;
  height: 56px;
  padding: 0 40px;
  width: 100%;
  font-size: 14px;
  outline: none;
  background-color: var(--it-common-black);
  border: 1px solid #505367;
  margin-bottom: 30px;
  color: var(--it-common-white);
}
@media (max-width: 767px) {
  .blog-details__input input {
    padding: 0 20px;
  }
}
.blog-details__textarea textarea {
  width: 100%;
  height: 145px;
  padding: 30px 40px;
  width: 100%;
  font-size: 14px;
  outline: none;
  background-color: var(--it-common-black);
  border: 1px solid #505367;
  margin-bottom: 30px;
  color: var(--it-common-white);
  resize: none;
}
@media (max-width: 767px) {
  .blog-details__textarea textarea {
    padding: 30px 20px;
  }
}

.blog__item-img a img {
  transition: 0.9s;
}
.blog__item-img:hover a img {
  transform: scale(1.1) rotate(-3deg);
}

.sidebar__wrapper {
  padding-left: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sidebar__wrapper {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sidebar__wrapper {
    padding-left: 0;
    margin-top: 80px;
  }
}
.sidebar__widge-title-box {
  padding: 30px 30px;
  border-radius: 14px 14px 0px 0px;
}
.sidebar__widget-content {
  padding: 40px 30px;
  padding-top: 0;
}
@media (max-width: 767px) {
  .sidebar__widget-content {
    padding: 35px 25px;
  }
}
.sidebar__widget {
  border: 1px solid rgba(229, 229, 229, 0.2509803922);
  border-radius: 14px;
}
.sidebar__widget-title {
  font-weight: 600;
  font-size: 22px;
  line-height: 16px;
  margin-bottom: 0;
}
.sidebar__widget:last-child-title {
  border-bottom: 0;
}
.sidebar__widget ul li {
  list-style: none;
  margin-bottom: 25px;
}
.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-common-blue-4);
}
.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: 0 25px;
  text-transform: capitalize;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -o-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  border: 0;
  outline: none;
  padding-right: 60px;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
}
@media (max-width: 767px) {
  .sidebar__search input {
    padding-right: 40px;
    padding-left: 15px;
  }
}
.sidebar__search input:focus {
  border-color: var(--tp-common-blue-4);
}
.sidebar__search input::placeholder {
  color: #777777;
}
.sidebar__search button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 24px;
  color: #fff;
  line-height: 60px;
  -webkit-border-radius: 0 7px 7px 0;
  -moz-border-radius: 0 7px 7px 0;
  -o-border-radius: 0 7px 7px 0;
  -ms-border-radius: 0 7px 7px 0;
  border-radius: 0 7px 7px 0;
  color: var(--tp-common-black);
}
.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 a {
  border: 1px solid rgba(229, 229, 229, 0.2509803922);
  color: #8A879F;
  display: inline-block;
  line-height: 1;
  padding: 10px 25px;
  margin-bottom: 8px;
  margin-right: 8px;
  border-radius: 30px;
  transition: 0.3s;
  font-weight: 500;
  font-size: 14px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tagcloud a {
    padding: 8px 15px;
    font-size: 13px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tagcloud a {
    padding: 10px 15px;
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .tagcloud a {
    padding: 10px 15px;
    font-size: 13px;
  }
}
.tagcloud a:hover {
  background: var(--it-common-blue-4);
  color: var(--it-common-white);
  border-color: var(--it-common-blue-4);
}
.tagcloud span {
  font-weight: 600;
  font-size: 16px;
  line-height: 12px;
  color: #202124;
  margin-right: 8px;
}

.rc__post ul li:not(:last-child) {
  margin-bottom: 15px;
}
.rc__post-thumb {
  flex: 0 0 auto;
}
.rc__post-thumb img {
  border-radius: 10px;
  width: 75px;
  height: 75px;
  flex: 0 0 auto;
  object-fit: cover;
}
.rc__post-title {
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 20px;
  line-height: 18px;
  color: var(--it-common-whites);
}
.rc__post-title a:hover {
  color: var(--it-theme-1);
}
.rc__meta span {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  color: #6A6A74;
}

/*----------------------------------------*/
/*  06. footer css start
/*----------------------------------------*/
.footer__space {
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 767px) {
  .footer__space {
    padding-left: 0;
    padding-right: 0;
  }
}
.footer__text p {
  color: var(--it-grey-1);
  line-height: 34px;
  padding-bottom: 20px;
}
@media (max-width: 767px) {
  .footer__text p {
    font-size: 13px;
  }
  .footer__text p br {
    display: none;
  }
}
.footer__title .section-title {
  padding-bottom: 5px;
}
.footer__circle {
  position: absolute;
  right: -5%;
  top: -31%;
  height: 500px;
  width: 500px;
  border-radius: 50%;
  border: 1px solid var(--it-border-1);
  z-index: 1;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .footer__circle {
    right: -16%;
    top: -38%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .footer__circle {
    right: -26%;
    top: -41%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__circle {
    right: -40%;
    top: -48%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__circle {
    right: -34%;
    top: -49%;
  }
}
.footer__circle::after {
  content: "";
  position: absolute;
  bottom: 34%;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: var(--it-theme-1);
}

.copyright__text {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--it-border-1);
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .copyright__text p {
    font-size: 15px;
  }
}
.copyright__bottom-logo {
  padding: 39px 0;
}
.copyright__bottom-social a {
  font-size: 13px;
  padding-left: 15px;
  transition: 0.3s;
}
.copyright__bottom-social a:hover {
  color: var(--it-theme-1);
}

/*----------------------------------------*/
/*  11. team css start
/*----------------------------------------*/
.team__skill-inners {
  margin-left: 90px;
}
.team__skill-progress .team__skill-progress-item:last-child {
  padding-bottom: 10px;
}
.team__skill-progress-item {
  position: relative;
  padding-bottom: 35px;
}
.team__skill-progress-item h4 {
  font-weight: 400;
  font-size: 14px;
  color: var(--it-grey-1);
  font-family: "Rubik", sans-serif;
  padding-bottom: 5px;
}
.team__skill-progress-item .progress-count {
  position: absolute;
  top: -4px;
  right: 0;
  font-size: 14px;
  color: var(--it-common-white);
  padding-top: 5px;
}
.team__skill-progress-item .progress {
  height: 4px;
  background-color: var(--it-common-white);
  border-radius: 0;
  overflow: visible;
}
.team__skill-progress-item .progress .progress-bar {
  background-color: var(--it-theme-1);
  overflow: visible;
  position: relative;
}
.team__skill-progress-item .progress .progress-bar::after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  background-color: var(--it-theme-1);
  top: -8px;
  right: -6px;
  border-radius: 50%;
}
.team__title-sm {
  font-size: 22px;
  padding-bottom: 25px;
}

.progress__skill-inners {
  padding-left: 85px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .progress__skill-inners {
    padding-right: 60px;
    padding-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .progress__skill-inners {
    padding-left: 0;
    padding-right: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .progress__skill-inners {
    padding-left: 0;
    padding-bottom: 70px;
  }
}
.progress__icon {
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  background-color: var(--it-common-blue);
  margin-right: 28px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .progress__icon {
    margin-right: 20px;
  }
}
@media (max-width: 767px) {
  .progress__icon {
    margin-right: 20px;
  }
}
.progress h4 {
  font-size: 22px;
  padding-bottom: 5px;
}
.progress span {
  color: var(--it-grey-1);
}
.progress__content-box {
  padding-left: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .progress__content-box {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .progress__content-box {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .progress__content-box {
    padding-left: 0;
  }
}
.progress__content-box .progress__content:last-child {
  margin-bottom: 0;
}
.progress__content {
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .progress__content {
    margin-right: 21px;
  }
}
.progress__text h4 {
  font-size: 25px;
  font-weight: 400;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .progress__text h4 {
    font-size: 17px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .progress__text h4 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .progress__text h4 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .progress__text span {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .progress__text span {
    font-size: 14px;
  }
}

/*----------------------------------------*/
/*  12. testimonial css start
/*----------------------------------------*/
.testimonial__shape {
  position: absolute;
  top: -16%;
  left: -5%;
  z-index: -1;
  animation: zoom2 5s infinite;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .testimonial__shape {
    top: -13%;
    left: -19%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__shape {
    left: -22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__shape {
    left: -17%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__shape {
    left: 6%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__shape {
    left: 3%;
  }
}
.testimonial__main-img {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__main-img img {
    margin-right: -30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__main-img img {
    margin-right: -20px;
  }
}
.testimonial__title-sm {
  text-transform: uppercase;
}
.testimonial__content-bg {
  background-color: var(--it-common-blue);
  padding: 40px 20px;
  border: 1px solid #30366e;
  margin-left: 20px;
  margin-right: 50px;
}
@media (max-width: 767px) {
  .testimonial__content-bg {
    margin-left: 20px;
    margin-right: 26px;
  }
}
.testimonial__text p {
  color: var(--it-grey-1);
  line-height: 34px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .testimonial__text p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .testimonial__text p {
    font-size: 15px;
  }
  .testimonial__text p br {
    display: none;
  }
}
.testimonial__text span {
  color: var(--it-grey-1);
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
}
.testimonial__icon {
  padding-bottom: 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) {
  .testimonial__title-sm {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__wrapper-box {
    padding: 80px 0;
  }
}
@media (max-width: 767px) {
  .testimonial__wrapper-box {
    padding: 60px 0;
  }
}

.testimonial-slider-dots {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.testimonial-slider-dots .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: inline-block;
  border-radius: 50%;
  background-color: #2b347b;
  opacity: 1;
  margin-bottom: 12px;
  transition: 0.3s;
  position: relative;
}
.testimonial-slider-dots .swiper-pagination-bullet::after {
  content: "";
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 1px solid var(--it-theme-1);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.testimonial-slider-dots .swiper-pagination-bullet-active {
  background-color: var(--it-theme-1);
}
.testimonial-slider-dots .swiper-pagination-bullet-active.swiper-pagination-bullet::after {
  opacity: 1;
  visibility: visible;
}

/*----------------------------------------*/
/*  05. contact css start
/*----------------------------------------*/
.contact__form-box {
  background-color: var(--it-common-black);
  padding: 60px;
  padding-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__form-box {
    padding: 50px;
    padding-bottom: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__form-box {
    margin-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .contact__form-box {
    padding: 20px;
    margin-bottom: 30px;
  }
}
.contact__title-sm {
  font-size: 50px;
  font-weight: 400;
  padding-bottom: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__title-sm {
    padding-bottom: 25px;
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .contact__title-sm {
    font-size: 30px;
    padding-bottom: 15px;
    padding-top: 10px;
  }
}
.contact__input input {
  border: none;
  background-color: var(--it-common-black);
  border: 1px solid #363951;
  height: 57px;
  line-height: 57px;
  padding: 0 30px;
  width: 100%;
  margin-bottom: 30px;
  color: var(--it-common-white);
  font-weight: 400;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__input input {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
    margin-bottom: 30px;
    font-size: 14px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__input input {
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    width: 100%;
    margin-bottom: 20px;
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .contact__input input {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
    margin-bottom: 20px;
    font-size: 14px;
  }
}
.contact__input input::-webkit-input-placeholder {
  color: var(--it-grey-1);
}
.contact__input input:-moz-placeholder {
  color: var(--it-grey-1);
}
.contact__input input::-moz-placeholder {
  color: var(--it-grey-1);
}
.contact__input input:-ms-input-placeholder {
  color: var(--it-grey-1);
}
.contact__textarea {
  margin-bottom: 30px;
}
.contact__textarea textarea {
  background-color: var(--it-common-black);
  border: 1px solid #363951;
  resize: none;
  padding: 30px;
  width: 100%;
  height: 140px;
  color: var(--it-common-white);
  font-size: 14px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__textarea textarea {
    padding: 20px;
    height: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__textarea textarea {
    padding: 20px 30px;
    height: 150px;
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .contact__textarea textarea {
    padding: 20px;
    height: 150px;
    font-size: 13px;
  }
}
.contact__textarea textarea::-webkit-input-placeholder {
  color: var(--it-grey-1);
}
.contact__textarea textarea:-moz-placeholder {
  color: var(--it-grey-1);
}
.contact__textarea textarea::-moz-placeholder {
  color: var(--it-grey-1);
}
.contact__textarea textarea:-ms-input-placeholder {
  color: var(--it-grey-1);
}
.contact__main-img {
  background-color: var(--it-theme-1);
  padding: 30px 25px;
  padding-bottom: 0;
  margin-left: 40px;
  height: 702px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .contact__main-img {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__main-img {
    height: 646px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__main-img {
    height: 100%;
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__main-img {
    margin-left: 0;
    height: 100%;
  }
}
@media (max-width: 767px) {
  .contact__main-img {
    height: 100%;
    margin-left: 0;
  }
}
.contact__icon {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
}
.contact__icon span {
  font-size: 20px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background-color: var(--it-common-black);
  display: inline-block;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
}
.contact__icon a {
  font-family: "Teko", sans-serif;
}
.contact__big-text {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.contact__big-text h3 {
  font-weight: 700;
  font-size: 150px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--it-common-black);
  color: transparent;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .contact__big-text h3 {
    font-size: 110px;
  }
}
@media (max-width: 767px) {
  .contact__big-text h3 {
    font-size: 112px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__big-text h3 {
    font-size: 150px;
  }
}

.contact-2__item {
  padding: 40px 20px;
  transition: 0.3s;
  position: relative;
}
.contact-2__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--it-common-blue);
  transform: scale(0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  z-index: -1;
}
.contact-2__item:hover::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.contact-2__item:hover span {
  background-color: var(--it-theme-1);
}
.contact-2__item span {
  font-size: 40px;
  height: 90px;
  width: 90px;
  background-color: var(--it-common-blue);
  border-radius: 50%;
  display: inline-block;
  line-height: 90px;
  text-align: center;
  margin-bottom: 20px;
  transition: 0.4s;
}
.contact-2__item h4 {
  font-weight: 400;
  font-size: 24px;
  padding-bottom: 10px;
}
.contact-2__item h4:hover {
  color: var(--it-theme-1);
}
.contact-2__item a {
  font-size: 14px;
  color: var(--it-grey-1);
  display: block;
}

.location-info__box iframe {
  height: 420px;
  width: 100%;
}

/*----------------------------------------*/
/*  03. banner css start
/*----------------------------------------*/
.banner__space {
  padding-bottom: 130px;
  padding-top: 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) {
  .banner__space {
    padding-bottom: 70px;
  }
}
.banner__text {
  position: absolute;
  top: 20%;
  right: -3%;
  z-index: -1;
}
@media (max-width: 767px) {
  .banner__text {
    top: 27%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__text {
    top: 27%;
    right: 4%;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .banner__text {
    right: 1%;
  }
}
.banner__big-text {
  font-weight: 700;
  font-size: 390px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #5c5f71;
  color: transparent;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
  .banner__big-text {
    font-size: 335px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .banner__big-text {
    font-size: 310px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .banner__big-text {
    font-size: 220px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner__big-text {
    font-size: 256px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner__big-text {
    font-size: 200px;
  }
}
@media (max-width: 767px) {
  .banner__big-text {
    font-size: 136px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .banner__big-text {
    font-size: 215px;
  }
}
@media only screen and (min-width: 440px) and (max-width: 575px) {
  .banner__big-text {
    font-size: 170px;
  }
}
@media (max-width: 767px) {
  .banner__section {
    margin-bottom: 30px;
  }
}

.circle-animation.banner {
  top: 40%;
  left: 53%;
  border: 1px solid #3F3F47;
  width: 611px;
  height: 611px;
  position: absolute;
  border-radius: 50%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .circle-animation.banner {
    top: 40%;
    left: 45%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .circle-animation.banner {
    top: 40%;
    left: 45%;
    width: 511px;
    height: 511px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .circle-animation.banner {
    left: 46%;
    width: 511px;
    height: 511px;
  }
}
.circle-animation.project {
  top: 33%;
  left: 8%;
  border: 1px solid #3F3F47;
  width: 511px;
  height: 511px;
  position: absolute;
  border-radius: 50%;
  transform: skewX(8deg);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .circle-animation.project {
    top: 33%;
    left: -3%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .circle-animation.project {
    top: 44%;
    left: -3%;
    width: 411px;
    height: 411px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .circle-animation.project {
    left: -5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .circle-animation.project {
    top: 62%;
    left: 13%;
  }
}
.circle-animation.footer {
  top: -28%;
  right: -11%;
  border: 1px solid #3F3F47;
  width: 411px;
  height: 411px;
  position: absolute;
  border-radius: 50%;
}

.circle-animation span.it-circle-1 {
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 1px;
  background: transparent;
  transform-origin: left;
  -webkit-animation: circle-animation-jj 17s linear infinite;
  -moz-animation: circle-animation-jj 17s linear infinite;
  -o-animation: circle-animation-jj 17s linear infinite;
  animation: circle-animation-jj 17s linear infinite;
}

.circle-animation span.it-circle-2 {
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 1px;
  background: transparent;
  transform-origin: left;
  transform: scale(-1, 1);
  -webkit-animation: circle-animation-ff 17s linear infinite;
  -moz-animation: circle-animation-ff 17s linear infinite;
  -o-animation: circle-animation-ff 17s linear infinite;
  animation: circle-animation-ff 17s linear infinite;
}

.circle-animation span.it-circle-1 {
  position: relative;
}
.circle-animation span.it-circle-1::before {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  top: -19px;
  right: -7px;
  background-color: var(--it-theme-1);
}

.circle-animation span.it-circle-2 {
  position: relative;
}
.circle-animation span.it-circle-2::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  bottom: -25px;
  right: -7px;
  background-color: #30376d;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .it-mobe-none {
    display: none;
  }
}

/*----------------------------------------*/
/*  14. work css start
/*----------------------------------------*/
.work__author-info h4 {
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 0;
}
.work__author-info span {
  color: var(--it-theme-1);
  font-family: "Teko", sans-serif;
}
.work__author-img {
  padding-right: 25px;
}
.work__main-img img {
  height: 404px;
}
.work__item-text p {
  line-height: 28px;
  padding-bottom: 10px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .work__item-text p br {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .work__item-text p {
    font-size: 15px;
  }
  .work__item-text p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .work__item-text p {
    font-size: 14px;
  }
  .work__item-text p br {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .work__item {
    padding-bottom: 50px;
  }
}

/*----------------------------------------*/
/*  13. service css start
/*----------------------------------------*/
.video__icon a {
  display: block;
  padding-bottom: 25px;
}
.video__icon b {
  font-weight: 400;
  font-family: "Teko", sans-serif;
}
.video__section {
  font-size: 160px;
  font-weight: 700;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  color: transparent;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .video__section {
    font-size: 140px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .video__section {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .video__section {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .video__section {
    font-size: 65px;
  }
}
@media (max-width: 767px) {
  .video__img {
    padding-bottom: 30px;
  }
}
.video__img img {
  height: 235px;
}

/*----------------------------------------*/
/*  15. brand css start
/*----------------------------------------*/
.brand__wrapper-box {
  border-top: 1px solid #363951;
  border-bottom: 1px solid #363951;
}
.brand__item {
  text-align: center;
}

/*----------------------------------------*/
/*  10. service css start
/*----------------------------------------*/
.service__item-title {
  font-size: 22px;
  padding-bottom: 10px;
  transition: 0.3s;
  display: inline-block;
}
.service__item-title:hover {
  color: var(--it-theme-1);
}
.service__item-text p {
  line-height: 30px;
  color: var(--it-grey-1);
  padding-bottom: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-text p {
    padding: 0 20px;
    padding-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-text p {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .service__item-text p {
    font-size: 13px;
  }
}
.service__icon {
  height: 100px;
  width: 100px;
  line-height: 100px;
  border: 1px solid var(--it-border-1);
  display: inline-block;
  margin-bottom: 30px;
  position: relative;
}
.service__icon::after {
  content: "";
  background-color: #30376d;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: 7px;
  transition: 1s;
}
.service__icon::before {
  content: "";
  background-color: #30376d;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: absolute;
  bottom: -4px;
  right: 7px;
  transition: 1s;
}
.service__item {
  background-color: var(--it-common-black);
  padding: 40px 20px;
}
.service__item.sv-item-bg {
  background-color: var(--it-common-blue);
}
.service__item:hover .service__icon::after {
  left: 83px;
}
.service__item:hover .service__icon::before {
  right: 83px;
}
.service__item-link a {
  color: var(--it-theme-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service__item-link a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service__item-link a {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .service__item-link a {
    font-size: 13px;
  }
}
.service__item-link a i {
  margin-left: 12px;
  color: var(--it-common-white);
  transition: 0.3s;
}
.service__item-link a:hover i {
  animation: tfLeftToRight 0.3s forwards;
}
.service__section .section-title {
  padding-bottom: 40px;
}

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