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

    Template Name: Finibus - Software and Digital Agency HTML Template
    Author: Egenslab
    Author URI: https://themeforest.net/user/egenslab/portfolio
    Support: https://www.egenslab.com/support/
    Version: 1.0

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

    CSS INDEX
    ===================

    01.COMMON
    02.HEADER
    03.HERO
    04.SERVICE
    05.ABOUT
    06.PARTNER
    07.PORTFOLIO
    08.WHY CHOOSE
    09.TESTIMONIAL
    10.BLOG
    11.LETSTALK
    12.HOME TWO
    13.ABOUT PAGE
    14.SERVICE PAGE
    15.SERVICE DETAILS PAGE
    16.PROJECT PAGE
    17.PROJECT DETAILS PAGE
    18.CONTACT PAGE
    19.BLOG PAGE
    20.ERROR PAGE
    21.COMMING SOON
    22.FOOTER
    23.HOME 3 CSS

-----------------------------------------------------------------------------------*/
/*===========================
     01.COMMON CSS
===========================*/
@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap");

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

a:focus,
input:focus,
textarea:focus,
button:focus {
  outline: 0 solid;
}

html,
body {
  height: 100%;
}

body {
  /* cursor: none; */
  font-size: 16px;
  font-family: 'Saira', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-bottom: 20px;
}

img {
  max-width: 100%;
}

a,
ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

p {
  color: #787878;
  line-height: 1.6;
}

a,
a:hover {
  text-decoration: none;
}

input,
select,
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

.sec-pad {
  padding: 120px 0;
}

.sec-pad-top {
  padding-top: 120px;
}

.sec-pad-bottom {
  padding-bottom: 120px;
}

.sec-mar {
  margin: 120px 0;
}

.sec-mar-top {
  margin-top: 120px;
}

.sec-mar-bottom {
  margin-bottom: 120px;
}

.cursor {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid #0061ae;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% - 100px), -50%);
  z-index: 9;
}

.cursor2 {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #0061ae;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
  z-index: 9;
}

.hover {
  background-color: #0061ae;
  height: 70px;
  width: 70px;
  border: 1px solid transparent;
  opacity: .3;
  z-index: 9999;
}

.cursorinnerhover {
  width: 2px;
  height: 2px;
  opacity: .5;
}

.mb-15 {
  margin-bottom: 15px !important;
}

/* Preloader css */
.sk-cube-grid {
  width: 80px;
  height: 80px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #0061ae;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {

  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

/* customize preloader */
@keyframes hover {
  0% {
    transform: scale(0.5);
    color: #121212;
    -webkit-text-stroke: 2px gray;
  }

  20% {
    transform: scale(1);
    color: pink;
    -webkit-text-stroke: 3px red;
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black) drop-shadow(0 0 3px red) drop-shadow(0 0 5px red) hue-rotate(10turn);
  }

  50% {
    transform: scale(0.5);
    color: #121212;
    -webkit-text-stroke: 2px gray;
  }
}

.preloader_area_wrap {
  background: #282b34 none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
}

.preloader_area_wrap .sk-cube-grid {
  left: 50%;
  margin: -20px 0 0 -20px;
  position: absolute;
  top: 50%;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 100px;
  width: 100%;
  z-index: 99;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sticky {
    padding: 0px 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .sticky {
    padding: 10px 20px;
  }
}

@media (max-width: 767px) {
  .sticky {
    padding: 20px 0;
  }
}

@media (max-width: 767px) {
  .title {
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .title {
    text-align: inherit;
  }
}

.title span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  color: #0061ae;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.title span:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: #0061ae;
}

.title h2 {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
  text-transform: capitalize;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .title h2 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .title h2 {
    font-size: 30px;
  }
}

.title.black h2 {
  color: #17161A;
}

.title.special h2 {
  text-transform: uppercase;
  margin: 0;
}

.title.special h2 b {
  font-weight: bold;
  font-size: 65px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #0061ae;
  -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .title.special h2 b {
    font-size: 55px;
  }
}

@media (max-width: 767px) {
  .title.special h2 b {
    font-size: 50px;
  }
}

.sec-title-layout3 {
  text-align: center;
  margin-bottom: 70px;
}

.sec-title-layout3 span {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
  color: #0061ae;
  border-bottom: 1px solid #0061ae;
  padding-bottom: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.sec-title-layout3 h2 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 50px;
  text-transform: uppercase;
  color: #17161A;
  margin-bottom: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sec-title-layout3 h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .sec-title-layout3 h2 {
    font-size: 30px;
  }
}

.cmn-btn {
  display: inline-flex;
}

.cmn-btn a {
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 30px;
  padding: 10px 30px;
  color: #fff;
  font-size: 16px;
  text-transform: capitalize;
  background: linear-gradient(90deg, #0061ae 1.05%, #0061ae 100%);
  z-index: 1;
  -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;
}
@media (max-width: 1613px) {
    .cmn-btn a {
        padding: 7px 20px;
      }
}
@media (max-width: 1370px) {
    .cmn-btn a {
        padding: 5px 15px;
      }
}
@media (max-width: 1250px) {
    .cmn-btn a {
        padding: 5px 12px;
        font-size: 12px;
      }
}

.cmn-btn a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  top: 50%;
  left: 50%;
  background-color: #000000;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  -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;
}

.cmn-btn a:hover {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.cmn-btn a:hover:before {
  height: 380%;
}

.cmn-btn-layout3 a {
  position: relative;
  overflow: hidden;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  color: #FFFFFF;
  display: inline-block;
  background-color: #DD0429;
  padding: 15px 30px;
  text-transform: capitalize;
  z-index: 1;
  vertical-align: top;
  -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;
}

.cmn-btn-layout3 a i {
  margin-left: 5px;
  display: inline-block;
}

.cmn-btn-layout3 a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  top: 50%;
  left: 50%;
  background-color: #000000;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  -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;
}

.cmn-btn-layout3 a:hover {
  color: #0061ae;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.cmn-btn-layout3 a:hover:before {
  height: 380%;
}

.breadcrumbs {
  min-height: 500px;
  background-image: url(../img/breadcrumbs-bg.png);
  background-size: cover;
  background-position: center center;
}

@media (max-width: 767px) {
  .breadcrumbs {
    text-align: center;
    min-height: 350px;
  }
}

.breadcrumb-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}

@media (max-width: 767px) {
  .breadcrumb-wrapper {
    text-align: center;
    min-height: 350px;
  }
}

.breadcrumb-wrapper h1 {
  font-weight: bold;
  font-size: 60px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #0061ae;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .breadcrumb-wrapper h1 {
    font-size: 40px;
  }
}

.breadcrumb-wrapper ul {
  list-style: none;
}

.breadcrumb-wrapper ul li {
  display: inline-block;
  font-size: 15px;
  text-transform: capitalize;
  color: #fff;
}

.breadcrumb-wrapper ul li a {
  position: relative;
  font-size: 15px;
  text-transform: capitalize;
  display: inline-block;
  color: #0061ae;
  padding-right: 50px;
}

.breadcrumb-wrapper ul li a:before {
  position: absolute;
  content: "";
  right: 15px;
  top: 50%;
  background-image: url(../img/icons/arrow-right.svg);
  height: 13px;
  width: 18px;
  transform: translateY(-50%);
}

.scroll-top.opacity {
  position: fixed;
  right: 20px;
  bottom: 50px;
  z-index: 9;
  text-align: center;
  display: block;
}

.scroll-top.opacity span {
  height: 40px;
  width: 40px;
  display: block;
  border: 1px solid #0061ae;
  border-radius: 50%;
  color: #0061ae;
  position: relative;
  line-height: 40px;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
}

.scroll-top.opacity span i {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

/*===========================
     02.HEADER CSS
===========================*/
header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  padding: 0px 100px;
  -webkit-transition: all 0.8s ease-out 0s;
  -moz-transition: all 0.8s ease-out 0s;
  -ms-transition: all 0.8s ease-out 0s;
  -o-transition: all 0.8s ease-out 0s;
  transition: all 0.8s ease-out 0s;
  background: rgba(255, 255, 255, 1);
}
@media (max-width: 1703px) {
    header {
        padding: 0 50px;
      }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  header {
    padding: 0 50px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  header {
    padding: 20px 0px;
    background-color: white;
  }
}

.logo a img {
  max-width: 170px;
}


.main-nav {
  display: inline-block;
}

.main-nav .mobile-menu-logo {
  display: none;
}

.main-nav ul {
  list-style: none;
  /* display: flex; */
}

.main-nav ul li {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-nav ul li a {
  font-size: 23px;
  display: block;
  text-transform: capitalize;
  position: relative;
  transition: all 0.3s ease-out 0s;
  font-weight: 500;
  padding-right: 20px;
  padding-left: 20px;
  color: #18242e;
}

.main-nav ul li a.active {
  color: #0061ae;
  scale: 1.05;
}


.main-nav ul li a:hover {
  color: #0061ae;
  scale: 1.05;
}

.main-nav ul li i {
  width: 30px;
  font-size: 14px;
  text-align: center;
  color: #000000;
  font-style: normal;
  position: absolute;
  right: -8px;
  top: 8px;
  z-index: 999;
  cursor: pointer;
}

.main-nav ul li ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  margin: 0;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  min-width: 200px;
  background: #007aff;
  text-align: left;
  border-radius: 5px;
  -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;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.main-nav ul li ul.sub-menu>li {
  padding: 0;
  display: block;
}

.main-nav ul li ul.sub-menu>li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  font-weight: 300;
  text-transform: capitalize;
  font-size: 16px;
  line-height: 1;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}

.main-nav ul li ul.sub-menu>li a.active {
  color: #000000;
  font-weight: 600;
  margin-left: 10px;
}

.main-nav ul li ul.sub-menu>li a:hover {
  margin-left: 10px;
}

.main-nav ul li:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


@media (max-width: 1200px) {
    .get-quate{
        position: absolute;
        top: 0;
        width: 75%;
        text-align: center;
    }
    .mobile-menu-logo{
        padding-top: 75px;
    }
}

/*===========================
     03.HERO CSS
===========================*/
.hero-area {
  position: relative;
  background-image: url(../img/hero-bg.png);
  background-size: cover;
  background-position: center center;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  top: 83px;
}

.swiper.hero-slider .swiper-pagination {
  left: 0% !important;
  bottom: initial !important;
  top: 50%;
  transform: rotate(90deg);
  width: auto !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper.hero-slider .swiper-pagination {
    left: -2% !important;
  }
}

@media (max-width: 767px) {
  .swiper.hero-slider .swiper-pagination {
    display: none;
  }
}

.swiper.hero-slider .swiper-pagination-bullet {
  position: relative;
  height: 15px;
  width: 15px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  opacity: 1;
  margin: 0 12.5px !important;
}

.swiper.hero-slider .swiper-pagination-bullet:before {
  position: absolute;
  content: "";
  height: 7.5px;
  width: 7.5px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.swiper.hero-slider .swiper-pagination-bullet-active {
  position: relative;
  height: 20px;
  width: 20px;
  border: 1px solid #0061ae;
  box-sizing: border-box;
  opacity: 0.6;
}

.swiper.hero-slider .swiper-pagination-bullet-active:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background-color: #0061ae;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.hero-content-wrapper {
  position: relative;
  height: 790px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .hero-content-wrapper {
    display: block;
    height: auto;
    margin-top: 180px;
  }
}

.hero-content-wrap {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .hero-content-wrap {
    display: block;
  }
}

.hero-content-img {
  position: relative;
  max-width: 775px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content-img {
    max-width: 600px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content-img {
    max-width: 500px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-img {
    max-width: 420px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-img {
    max-width: 380px;
  }
}

@media (max-width: 767px) {
  .hero-content-img {
    display: none;
  }
}

.hero-content-img:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: #17161A;
  opacity: 0.5;
  border-radius: 100px 20px 20px 20px;
}

.hero-content-img img {
  border-radius: 100px 20px 20px 20px;
}

.hero-content {

  /* background: linear-gradient(233.77deg,  rgb(0 97 174 , 0.8) 0.94%, rgb(0 97 174 , 0.8) 99.09%); */

  background: linear-gradient(233.77deg, rgba(0, 97, 174, 0.8) 0.94%, rgba(0, 97, 174, 0.8) 99.09%);
  border: 1px solid rgba(173, 173, 173, 0.2);
  box-sizing: border-box;
  border-radius: 20px;
  text-align: center;
  max-width: 670px;
  padding: 80px 50px;
  position: relative;
  margin-left: -100px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content {
    max-width: 570px;
    padding: 50px 30px;
    margin-left: -75px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content {
    max-width: 500px;
    padding: 30px 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content {
    max-width: 400px;
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .hero-content {
    padding: 20px;
    margin-left: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content {
    padding: 30px;
  }
}

.hero-content h2 {
  font-weight: 800;
  font-size: 60px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
  -webkit-text-fill-color: transparent;
  position: absolute;
  right: 0;
  top: -90px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content h2 {
    font-size: 50px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content h2 {
    font-size: 40px;
    margin-top: 35px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content h2 {
    font-size: 40px;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content h2 {
    font-size: 40px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .hero-content h2 {
    font-size: 30px;
    right: 10px;
    top: -40px;
  }
}

@media (max-width: 767px) {
  .hero-content h2 {
    font-size: 40px;
    top: -50px;
  }
}

.hero-content h1 {
  font-weight: 800;
  font-size: 50px;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 20px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content h1 {
    font-size: 45px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content h1 {
    font-size: 40px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content h1 {
    font-size: 35px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content h1 {
    font-size: 30px;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .hero-content h1 {
    font-size: 25px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content h1 {
    font-size: 45px;
  }
}

.hero-content h1 span {
  font-weight: 800;
  font-size: 60px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #ffffff;
  -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content h1 span {
    font-size: 55px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content h1 span {
    font-size: 48px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content h1 span {
    font-size: 42px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content h1 span {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .hero-content h1 span {
    font-size: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content h1 span {
    font-size: 55px;
  }
}

.hero-content p {
  font-size: 16px;
  text-align: center;
  color: #FFFFFF;
  line-height: 35px;
  margin-bottom: 60px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .hero-content p {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-content p {
    line-height: initial;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content p {
    font-size: 14px;
    line-height: initial;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .hero-content p {
    font-size: 13px;
    line-height: initial;
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .hero-content p {
    font-size: 15px;
  }
}

.hero-content a {
  display: inline-block;
  padding: 10px 20px;
  min-width: 200px;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content a {
    font-size: 15px;
    min-width: 160px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content a {
    font-size: 14px;
    min-width: 150px;
  }
}

@media (max-width: 767px) {
  .hero-content a {
    font-size: 13px;
    min-width: 130px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content a {
    font-size: 16px;
    min-width: 150px;
  }
}

.hero-content a.about-btn {
  background-color: #17161A;
  border: 1px solid #17161A;
  margin-right: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content a.about-btn {
    margin-right: 10px;
  }
}

@media (max-width: 767px) {
  .hero-content a.about-btn {
    margin: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content a.about-btn {
    margin-right: 15px;
  }
}

.hero-content a.work-btn {
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  margin-left: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content a.work-btn {
    margin-left: 10px;
  }
}

@media (max-width: 767px) {
  .hero-content a.work-btn {
    margin: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content a.work-btn {
    margin-right: 15px;
  }
}

.hero-content a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  top: 50%;
  left: 50%;
  background-color: #000000;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  -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;
}

.hero-content a:hover:before {
  height: 380%;
}

.hero-content .slider-num {
  position: absolute;
  right: -150px;
  bottom: -20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content .slider-num {
    right: -100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .hero-content .slider-num {
    display: none;
  }
}

.hero-content .slider-num span {
  font-weight: 600;
  font-size: 100px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
  -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content .slider-num span {
    font-size: 80px;
  }
}

.social-media {
  position: absolute;
  right: -250px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .social-media {
    right: -250px;
  }
}

@media (max-width: 767px) {
  .social-media {
    text-align: center;
    position: initial;
    transform: none;
    padding: 30px 10px 80px 10px;
  }
}

.social-media .social-list {
  list-style: none;
  transform: rotate(-90deg);
}

@media (max-width: 767px) {
  .social-media .social-list {
    transform: none;
  }
}

.social-media .social-list li {
  display: inline-block;
}

.social-media .social-list li a {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #FFFFFF;
  display: inline-block;
  line-height: 1;
  padding: 0 15px;
  border-right: 1px solid #0061ae;
  -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;
}

@media (max-width: 767px) {
  .social-media .social-list li a {
    font-size: 14px;
  }
}

.social-media .social-list li a:hover {
  color: #0061ae;
}

.social-media .social-list li:last-child a {
  border: none;
}

/*===========================
     04.SERVICE CSS
===========================*/
.service-area {
  background-color: #111215;
}

@media (max-width: 767px) {
  .service-area {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}

.service-area .title h2 {
  margin-bottom: 45px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .service-area .title {
    margin-bottom: 60px;
  }
}

.single-service {
  border: 1px solid #232323;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 20px 20px;
  position: relative;
  display: flex;
  width: 100%;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single-service {
    padding: 20px 20px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-service {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .single-service {
    display: block;
    padding: 20px;
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-service {
    padding: 10px;
  }
}

.single-service:before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  height: 90px;
  width: 90px;
  background: radial-gradient(105.91% 105.91% at 37.1% 19.35%, rgb(0 97 174, 0.3) 0%, rgb(0 97 174, 0) 83.11%);
  border-radius: 50%;
  opacity: 0.3;
  display: none;
  -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;
}

.single-service:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(152.97deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 10px;
  -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;
}

.single-service span {
  font-size: 35px;
  font-weight: 700;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.07);
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  position: absolute;
  right: 10px;
  top: 10px;
  line-height: 1;
  -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;
}

.single-service:hover:after {
  visibility: visible;
  opacity: 1;
}

.single-service:hover:before {
  display: block;
}

.single-service:hover .service-content a i {
  margin-left: 5px;
}

.single-service:hover span {
  -webkit-text-stroke: 2px #0061ae;
  -webkit-text-fill-color: transparent;
}

.service-icon {
  margin-top: 15px;
  min-width: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-icon {
    min-width: 60px;
  }
}

@media (max-width: 767px) {
  .service-icon {
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-icon {
    margin-bottom: 30px;
  }
}

.service-icon i {
  background-color: #0061ae;
  height: 65px;
  width: 65px;
  display: inline-block;
  line-height: 65px;
  text-align: center;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-icon i {
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
}

.service-icon i:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid rgb(0 97 174, 0.15);
  border-radius: 50%;
  left: -5px;
  top: -10px;
  z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-icon i:before {
    top: -5px;
  }
}

.service-icon i:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border: 1px solid rgb(0 97 174, 0.15);
  border-radius: 50%;
  right: -5px;
  top: -10px;
  z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-icon i:after {
    top: -5px;
  }
}

.service-icon i img {
  max-height: 38px;
  max-width: 38px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-icon i img {
    max-height: 28px;
    max-width: 28px;
  }
}

.service-content {
  margin-left: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-content {
    margin-left: 10px;
  }
}

@media (max-width: 767px) {
  .service-content {
    margin: 0;
  }
}

.service-content h4 {
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-content h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.service-content p {
  color: #E4E4E4;
  font-size: 16px;
  margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .service-content p {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .service-content p {
    font-size: 14px;
  }
}

.service-content a {
  display: inline-block;
  color: #0061ae;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  z-index: 1;
  position: relative;
}

.service-content a i {
  margin-left: -4px;
  z-index: -1;
  position: relative;
  -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;
}

/*===========================
     05.ABOUT CSS
===========================*/
@media (max-width: 767px) {
  .about-area {
    margin: 80px 0;
  }
}

@media (max-width: 767px) {
  .about-left {
    padding: 0px 10px;
    margin-bottom: 50px;
  }
}

.about-left .our-mission {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 55px;
}

@media (max-width: 767px) {
  .about-left .our-mission {
    display: block;
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-left .our-mission {
    display: flex;
    text-align: left;
  }
}

.about-left .our-mission .msn-icon {
  min-width: 100px;
}

.about-left .our-mission .msn-icon i img {
  width: 70px;
}

.about-left .our-mission .cto {
  min-width: 150px;
}

.about-left .our-mission .cto img {
  width: 140px;
}

@media (max-width: 767px) {
  .about-left .our-mission .msn-content {
    margin: 25px 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-left .our-mission .msn-content {
    margin: 0;
  }
}

.about-left .our-mission .msn-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.about-left .our-mission .msn-content p {
  margin: 0;
  color: #272727;
  font-size: 16px;
}

@media (max-width: 767px) {
  .about-left .cmn-btn {
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-left .cmn-btn {
    text-align: left;
  }
}

.about-left .cmn-btn a {
  color: #E4E4E4;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.about-right .group-images {
  position: relative;
  margin-top: 85px;
  margin-right: 85px;
}

@media (max-width: 767px) {
  .about-right .group-images {
    margin: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-right .group-images {
    margin-top: 85px;
    margin-right: 85px;
  }
}

.about-right .group-images>img {
  width: 100%;
  border-radius: 5px;
}

.about-right .group-images .about-top {
  position: absolute;
  top: -85px;
  right: -85px;
}

@media (max-width: 767px) {
  .about-right .group-images .about-top {
    margin-top: 30px;
    position: static;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-right .group-images .about-top {
    margin-top: 0;
    position: absolute;
  }
}

.about-right .group-images .about-top img {
  border-radius: 5px;
}

@media (max-width: 767px) {
  .about-right .group-images .about-top img {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-right .group-images .about-top img {
    width: auto;
  }
}

.about-skills {
  background: #FFFFFF;
  border: 1px solid rgba(0 97 174, 0.1);
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
  border-radius: 10px;
  width: 500px;
  display: flex;
  margin: 0 auto;
  margin-top: -50px;
  position: relative;
  padding: 20px 30px;
  justify-content: space-between;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about-skills {
    padding: 20px;
    width: 425px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-skills {
    padding: 20px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .about-skills {
    display: block;
    width: 90%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-skills {
    display: flex;
    width: 90%;
  }
}

.about-skills .signle-skill {
  display: flex;
  width: 100%;
  align-items: center;
}

@media (max-width: 767px) {
  .about-skills .signle-skill {
    margin-bottom: 10px;
  }

  .about-skills .signle-skill.xsm {
    margin-bottom: 0;
  }
}

.about-skills .signle-skill .skill-content h6 {
  font-size: 15px;
  color: #545454;
  margin-bottom: 0px;
  text-transform: capitalize;
}

.about-skills .signle-skill .skill-content p {
  margin: 0;
  color: #17161A;
}

.signle-skill .progress-bar-circle {
  position: relative;
  height: 70px;
  width: 70px;
  min-width: 80px;
  background-color: transparent;
}

.signle-skill .progress-bar-circle div {
  position: absolute;
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.signle-skill .progress-bar-circle div span {
  color: #0061ae;
  position: absolute;
  font-size: 18px;
  font-weight: 700;
  line-height: 60px;
  height: 60px;
  width: 60px;
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  transform: translate(-50%, -50%);
}

.signle-skill .progress-bar-circle .background {
  background-color: #000 !important;
}

.signle-skill .progress-bar-circle .rotate {
  clip: rect(0 35px 70px 0);
  background-color: #0061ae !important;
}

.signle-skill .progress-bar-circle .left {
  clip: rect(0 35px 70px 0);
  opacity: 1;
  background-color: #0061ae !important;
}

.signle-skill .progress-bar-circle .right {
  clip: rect(0 35px 70px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #0061ae !important;
}

.features-count {
  margin-top: 120px;
  padding: 50px 0;
  background-image: url(../img/counter-bg.png);
  border-radius: 30px;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
}

.features-count:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #18191D;
  border-radius: 30px;
  z-index: -1;
  opacity: 0.9;
}

.single-count {
  text-align: center;
}

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

  .single-count.xsm {
    margin-bottom: 0;
  }
}

.single-count i {
  display: block;
  margin-bottom: 15px;
}

.single-count i img {
  height: 70px;
}

.single-count p {
  text-transform: capitalize;
  color: #BDBDBD;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.single-count .counter span {
  font-size: 35px;
  font-weight: 700;
  color: #fff;
  display: inline-block;
}

.single-count .counter sup {
  font-size: 35px;
  font-weight: 700;
  color: #fff;
  top: -5px;
  display: inline-block;
}

/*===========================
     06.PARTNER CSS
===========================*/
.newsletter {
  background-image: url(../img/subscribe-bg.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  padding: 195px 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .newsletter {
    padding: 192.1px 30px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .newsletter {
    padding: 188px 30px;
  }
}

@media (max-width: 767px) {
  .newsletter {
    padding: 80px 10px;
  }
}

.newsletter:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(256.31deg, #007aff 0.87%, #000000 88.66%);
  opacity: 0.9;
  z-index: -1;
}

.subscribes {
  max-width: 590px;
  margin: 0 auto;
  text-align: center;
}

.subscribes span {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  text-transform: capitalize;
  color: #0061ae;
  display: block;
  margin-bottom: 15px;
}

.subscribes h1 {
  font-weight: 700;
  font-size: 65px;
  text-align: center;
  text-transform: uppercase;
  color: #E4E4E4;
  margin-bottom: 20px;
  line-height: 1;
}

@media (max-width: 767px) {
  .subscribes h1 {
    font-size: 30px;
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribes h1 {
    font-size: 50px;
    margin-bottom: 30px;
  }
}

.subscribes h2 {
  font-weight: 700;
  font-size: 55px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #ffffff;
  -webkit-text-fill-color: transparent;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .subscribes h2 {
    font-size: 40px;
    margin-bottom: 40px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribes h2 {
    font-size: 50px;
  }
}

.subscribe-form {
  position: relative;
}

@media (max-width: 767px) {
  .subscribe-form {
    padding: 0px 10px;
  }
}

.subscribe-form form input {
  width: 100%;
  height: 70px;
  background: #FFFFFF;
  border-radius: 48px;
  border: none;
  color: #4F4F4F;
  font-size: 14px;
}

@media (max-width: 767px) {
  .subscribe-form form input {
    height: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribe-form form input {
    height: 60px;
  }
}

.subscribe-form form input[type="submit"] {
  position: absolute;
  right: 5px;
  height: 60px;
  top: 5px;
  width: 150px;
  border-radius: 48px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  background-color: #0061ae;
  -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;
}

@media (max-width: 767px) {
  .subscribe-form form input[type="submit"] {
    width: 130px;
    font-size: 14px;
    right: 15px;
    height: 40px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribe-form form input[type="submit"] {
    height: 50px;
  }
}

.subscribe-form form input[type="submit"]:hover {
  color: #17161A;
  border: 2px solid #0061ae;
  background: transparent;
  box-shadow: 0 0 20px #0061ae 1.05%, #730000 100%;
}

.subscribe-form form input[type="email"] {
  padding: 0 160px 0 30px;
}

@media (max-width: 767px) {
  .subscribe-form form input[type="email"] {
    padding: 0 140px 0 20px;
  }
}

.our-clients {
  background-color: #111111;
  padding: 149px 30px 55px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .our-clients {
    padding: 119px 30px 55px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .our-clients {
    padding: 165px 30px 55px;
  }
}

.our-clients .title {
  margin-top: -75px;
}

.single-client {
  position: relative;
  background-color: #111111;
  border: 1px solid #191A1C;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 10px;
  padding: 15px;
  height: 150px;
  text-align: center;
  line-height: 45px;
  margin-bottom: 50px;
  overflow: hidden; }
  @media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .single-client {
      padding: 20px 10px; } }
  @media (max-width: 767px) {
    .single-client {
      margin-bottom: 30px; } }
  .single-client img {
    max-height: auto;
    object-fit: contain;

  }
.single-client .client-hover {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  background: linear-gradient(152.97deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  -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;
}

.single-client .client-hover span {
  font-weight: 300;
  font-size: 16px;
  text-align: center;
  color: #E4E4E4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  justify-content: center;
  word-break: break-word;
  line-height: 20px;
}

.single-client:hover .client-hover {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

/* .single-client:hover img {
  visibility: hidden;
} */

/*===========================
     01.PORTFOLIO CSS
===========================*/
@media (max-width: 767px) {
  .portfolio-area {
    margin: 80px 0;
  }
}

.portfolio-area .title {
  margin-bottom: -80px;
}

.portfolio-area .title h2 {
  margin: 0;
}

.swiper.portfolio-slider {
  padding: 140px 0 50px 0;
}

.swiper.portfolio-slider .swiper-pagination {
  bottom: 0 !important;
}

.swiper.portfolio-slider .swiper-pagination-bullet {
  height: 15px;
  width: 15px;
  border: 1px solid #0061ae;
  box-sizing: border-box;
  background: transparent;
  opacity: 1;
}

.swiper.portfolio-slider .swiper-pagination-bullet-active {
  position: relative;
  height: 15px;
  width: 15px;
  border: 1px solid #0061ae;
  box-sizing: border-box;
}

.swiper.portfolio-slider .swiper-pagination-bullet-active:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 5px;
  background-color: #0061ae;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.swiper.portfolio-slider .swiper-button-next,
.swiper.portfolio-slider .swiper-button-prev {
  height: 40px !important;
  width: 40px !important;
  background-color: #2A2A2A;
  border-radius: 50%;
  color: #fff !important;
  top: 22px;
  right: 5% !important;
  -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;
}

@media (max-width: 767px) {

  .swiper.portfolio-slider .swiper-button-next,
  .swiper.portfolio-slider .swiper-button-prev {
    display: none;
  }
}

.swiper.portfolio-slider .swiper-button-next:hover,
.swiper.portfolio-slider .swiper-button-prev:hover {
  background-color: #0061ae;
}

.swiper.portfolio-slider .swiper-button-next::after,
.swiper.portfolio-slider .swiper-button-prev::after {
  font-size: 14px !important;
}

.swiper.portfolio-slider .swiper-button-prev,
.swiper.portfolio-slider .swiper-rtl .swiper-button-next {
  left: auto;
  right: 9% !important;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {

  .swiper.portfolio-slider .swiper-button-prev,
  .swiper.portfolio-slider .swiper-rtl .swiper-button-next {
    right: 9% !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .swiper.portfolio-slider .swiper-button-prev,
  .swiper.portfolio-slider .swiper-rtl .swiper-button-next {
    right: 10% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .swiper.portfolio-slider .swiper-button-prev,
  .swiper.portfolio-slider .swiper-rtl .swiper-button-next {
    right: 12% !important;
  }
}

.single-portfolio {
  position: relative;
  overflow: hidden;
}

.single-portfolio .portfolio-data {
  position: relative;
  z-index: 1;
  border-radius: 10px;
}

.single-portfolio .portfolio-data a img {
  border-radius: 10px;
  width: 100%;
  max-height: 500px;
}

.single-portfolio .portfolio-data:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  right: 0;
  bottom: 0;
  background-image: url(../img/portfolio-hover-bg.png);
  background-size: cover;
  background-position: top bottom;
  border-radius: 10px;
  visibility: hidden;
  opacity: 0;
  -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;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
}

.single-portfolio .portfolio-inner {
  position: absolute;
  z-index: 2;
  width: 90%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  background-color: #0F0F11;
  border-radius: 5px;
  padding: 20px;
}

.single-portfolio .portfolio-inner span {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #E4E4E4;
  display: block;
  margin-bottom: 5px;
}

.single-portfolio .portfolio-inner h4 {
  font-weight: 600;
  font-size: 22px;
  text-transform: capitalize;
  color: #E4E4E4;
  margin: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-portfolio .portfolio-inner h4 {
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-portfolio .portfolio-inner h4 {
    font-size: 18px;
  }
}

.single-portfolio .portfolio-inner .portfolio-hover {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}

.single-portfolio .portfolio-inner .portfolio-hover a.case-btn {
  display: inline-block;
  border: 1px solid #0061ae;
  box-sizing: border-box;
  border-radius: 30px;
  padding: 5px 15px;
  font-weight: 500;
  font-size: 12px;
  text-transform: capitalize;
  color: #FFFFFF;
}

.single-portfolio .portfolio-inner .portfolio-hover i {
  width: 30px;
  height: 30px;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.single-portfolio:hover .portfolio-data:before {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

.single-portfolio:hover .portfolio-inner .portfolio-hover {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  visibility: visible;
  opacity: 1;
  margin-top: 20px;
  height: auto;
}

.single-portfolio:hover .portfolio-inner {
  background: #0F0F11;
  backdrop-filter: blur(42px);
  border-radius: 10px;
}

/*===========================
     01.WHY CHOOSE CSS
===========================*/
@media (max-width: 767px) {
  .why-choose-us {
    margin: 80px 0;
  }
}

@media (max-width: 767px) {
  .why-choose-us .title.black {
    margin-bottom: 50px;
  }
}

.why-choose-us .title.black h2 {
  margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .why-choose-us .title.black h2 {
    font-size: 40px;
  }
}

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

.video-demo img {
  width: 100%;

}

.video-demo:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/play-button-bg.png);
  background-size: cover;
  background-position: center center;
}

.video-demo .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-demo .play-btn a {
  display: inline-block;
  border: 1px solid #FFFFFF;
  box-sizing: border-box;
  height: 128px;
  width: 128px;
  line-height: 128px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  -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;
}

.video-demo .play-btn a i {
  margin-right: 5px;
}

.video-demo .play-btn a:hover {
  color: #fff;
  border: 1px solid #0061ae;
  background-color: #0061ae;
}

.valuable-skills img {
  width: 100%;
  margin-bottom: 50px;
}

.valuable-skills .signle-bar h6 {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #111111;
}

.valuable-skills .signle-bar .barfiller {
  height: 5px !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(0 97 174 0.5) !important;
  border-radius: 30px;
  margin-bottom: 40px !important;
}

.valuable-skills .signle-bar .barfiller#bar4 {
  margin-bottom: 0 !important;
}

.valuable-skills .signle-bar .barfiller .tip {
  margin-top: -35px !important;
  padding: 0 !important;
  position: absolute;
  z-index: 2;
  background: transparent;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #000000 !important;
}

.valuable-skills .signle-bar .barfiller .tip:after {
  display: none;
}

.valuable-skills .signle-bar .barfiller .fill {
  background: #0061ae !important;
  border-radius: 30px;
}

/*===========================
     09.TESTIMONIAL CSS
===========================*/
.testimonial-area {
  position: relative;
  background-image: url(../img/testimonial-bg.png);
  background-size: cover;
  background-position: center center;
}

.testimonial-area:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: #111111;
  z-index: -1;
}

.swiper.testimonial-slider {
  padding: 120px 0;
}

.swiper.testimonial-slider .swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
  bottom: 30px !important;
  left: 0 !important;
  width: auto !important;
  color: #0061ae !important;
}

.swiper.testimonial-slider .swiper-pagination-current {
  font-weight: 600;
  font-size: 37px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: #ffffff;
}

.swiper.testimonial-slider .swiper-pagination-total {
  font-size: 20px;
  color: #0061ae;
}

.swiper.testimonial-slider .swiper-button-next,
.swiper.testimonial-slider .swiper-button-prev {
  top: initial !important;
  display: flex;
  height: 58px !important;
  width: 80px !important;
  background: #2A2A2A !important;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
  bottom: 0;
  color: #ffffff;
  -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;
}

.swiper.testimonial-slider .swiper-button-next:hover,
.swiper.testimonial-slider .swiper-button-prev:hover {
  background-color: #17161A !important;
}

.swiper.testimonial-slider .swiper-button-next,
.swiper.testimonial-slider .swiper-rtl .swiper-button-prev {
  right: 10px !important;
  left: auto !important;
  background: #17161A !important;
}

.swiper.testimonial-slider .swiper-button-prev,
.swiper.testimonial-slider .swiper-rtl .swiper-button-next {
  left: auto !important;
  right: 90px !important;
  background-color: #fff;
}

.swiper.testimonial-slider .swiper-button-next::after,
.swiper.testimonial-slider .swiper-button-prev::after {
  font-size: 20px !important;
}

.testimonial-content {
  position: relative;
  text-align: center;
}

.testimonial-content .quote {
  position: absolute;
  left: 0;
  top: -40px;
}

.testimonial-content .quote i {
  font-size: 100px;
  color: #E4E4E4;
  opacity: 0.05;
}

.testimonial-content p {
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  color: #E4E4E4;
  line-height: 30px;
  max-width: 970px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .testimonial-content p {
    font-size: 14px;
    line-height: 28px;
  }
}

.testimonial-content p i {
  font-size: 14px;
}

.testimonial-content .rating {
  margin-top: 30px;
}

.testimonial-content .rating i {
  color: #FFC107;
  font-size: 20px;
  margin: 0 4px;
}

.testimonial-content .client-info {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .testimonial-content .client-info {
    margin-bottom: 30px;
  }
}

.testimonial-content .client-info .client-pic {
  min-width: 120px;
}

@media (max-width: 767px) {
  .testimonial-content .client-info .client-pic {
    min-width: 100px;
  }
}

.testimonial-content .client-info .client-pic img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .testimonial-content .client-info .client-pic img {
    height: 80px;
    width: 80px;
  }
}

.testimonial-content .client-info .client-details {
  margin-left: 10px;
  text-align: left;
}

.testimonial-content .client-info .client-details h4 {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.03em;
  color: #E4E4E4;
  margin-bottom: 5px;
}

@media (max-width: 767px) {
  .testimonial-content .client-info .client-details h4 {
    font-size: 20px;
  }
}

.testimonial-content .client-info .client-details span {
  font-weight: normal;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0.03em;
  color: #949494;
}

@media (max-width: 767px) {
  .testimonial-content .client-info .client-details span {
    font-size: 16px;
  }
}

/*===========================
     10.BLOG CSS
===========================*/
@media (max-width: 767px) {
  .latest-news {
    margin: 80px 0;
  }
}

.latest-news .title.black h2 {
  margin-bottom: 50px;
}

.signle-news {
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
  position: relative;
  overflow: hidden;
}

.signle-news .tag {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
}

.signle-news .tag a {
  display: inline-block;
  min-width: 140px;
  background: #232226;
  border-radius: 2px;
  padding: 5px 20px;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  text-transform: capitalize;
  color: #FFFFFF;
}

.signle-news .post-img {
  overflow: hidden;
  /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  transition: height 0ms 400ms, opacity 400ms 0ms;
}

.signle-news .post-img a img {
  width: 100%;
  height: 222px;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.signle-news:hover .tag a {
  background-color: #0061ae;
}

.signle-news .news-content .author {
  margin-top: 65px;
}

.signle-news:hover .post-img {
  height: auto;
  opacity: 1;
  transition: height 0ms 1000ms, opacity 1000ms 0ms;
}

.signle-news:hover .author,
.signle-news:hover p {
  display: none;
}

.signle-news:hover .news-content h3 {
  margin: 0;
}

.news-content {
  padding: 20px;
}

.news-content h3 {
  margin: 20px 0 5px 0;
  font-weight: 600;
  font-size: 25px;
}

.news-content h3 a {
  font-size: 25px;
  text-transform: capitalize;
  color: #2E2D31;
  display: inline-block;
  line-height: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .news-content h3 a {
    font-size: 24px;
  }
}

.news-content p {
  font-weight: normal;
  font-size: 16px;
  color: #272727;
  margin: 0;
}

.author {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 70px;
}

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

.author-pic {
  min-width: 70px;
}

.author-pic img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
}

.author-info h5 {
  font-weight: 500;
  font-size: 20px;
  text-transform: capitalize;
  color: #232226;
  margin-bottom: 5px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .author-info h5 {
    font-size: 18px;
  }
}

.author-info span {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: #6A696C;
}

.view-btn {
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 9px;
}

.view-btn a {
  font-weight: 600;
  font-size: 16px;
  color: #232226;
  display: inline-block;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  -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;
}

.view-btn a:before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  background: #0061ae;
  opacity: 0.35;
  border-radius: 50%;
  left: -10px;
  top: 50%;
  z-index: -1;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.view-btn a:hover {
  color: #0061ae;
}

/*===========================
     11.LETS TALK CSS
===========================*/
.lets-talk {
  background-image: url(../img/letstalk-bg.png);
  background-size: cover;
  background-position: center center;
  position: relative;
}

@media (max-width: 767px) {
  .lets-talk {
    padding: 80px 0;
  }
}

.lets-talk:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  background: #111215;
  z-index: -1;
}

@media (max-width: 767px) {
  .lets-talk .title.special {
    text-align: center;
  }
}

.lets-talk .title.special h1 {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .lets-talk .title.special h1 {
    font-size: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .lets-talk .title.special h1 b {
    font-size: 55px;
  }
}

@media (max-width: 767px) {
  .getin-touch {
    text-align: center;
    margin-top: 20px;
  }
}

/*===========================
     12.HOMW TWO CSS
===========================*/
body.dark {
  background-color: #18191D;
}

.about-left.dark p {
  color: #B3B3B3;
}

.about-left.dark .our-mission .msn-content h5 {
  color: #FFFFFF;
}

.about-left.dark .our-mission .msn-content p {
  color: #B3B3B3;
}

.valuable-skills.dark .signle-bar h6 {
  color: #ffffff;
}

.valuable-skills.dark .signle-bar .barfiller .tip {
  color: #ffffff !important;
}

.signle-news.dark {
  background: #111111;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
}

.signle-news.dark .author-info h5 {
  color: #fff;
}

.signle-news.dark .news-content h3 a {
  color: #fff;
}

.signle-news.dark .news-content p {
  color: #b3b3b3;
}

.signle-news.dark .view-btn a {
  color: #0061ae;
}

/*===========================
     13.ABOUT PAGE CSS
===========================*/
.out-story {
  margin-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .out-story {
    margin-bottom: 120px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .out-story {
    margin-bottom: 120px;
  }
}

.office-group-img {
  position: relative;
}

.office-group-img img {
  width: 100%;
  border-radius: 10px;
}

.office-group-img:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: #111111;
  opacity: 0.4;
  border-radius: 10px;
}

.cto-message-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 370px;
  margin-left: auto;
  right: inherit;
}

.cto-message {
  background: #FFFFFF;
  box-shadow: 0px 40px 80px rgba(23, 42, 65, 0.06);
  padding: 25px 20px;
  text-align: left;
  border-radius: 0px 20px 0px 5px;
}

.cto-message h4 {
  font-weight: 600;
  font-size: 20px;
  text-transform: capitalize;
  color: #111111;
}

.cto-message p {
  font-size: 16px;
  text-transform: capitalize;
  color: #272727;
}

.cto-message img {
  margin: 0 auto;
  display: block;
  width: auto;
}

.cto-message h4 span {
  font-weight: normal;
  font-size: 17px;
  text-transform: capitalize;
  color: #111111;
  opacity: 0.5;
}

.about-left p {
  font-weight: normal;
  font-size: 16px;
  color: #272727;
  margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-right .title.black h2 {
    font-size: 48px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-right .title.black h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .story-right {
    margin: 80px 0 50px 0;
  }
}

.story-right p {
  font-weight: normal;
  font-size: 16px;
  color: #272727;
  margin-bottom: 30px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-right p {
    margin-bottom: 40px;
  }
}

.story-skills {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

@media (max-width: 767px) {
  .story-skills {
    display: block;
    justify-content: normal;
    width: auto;
    text-align: center;
  }
}

.story-skill>span {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.03em;
  margin-top: 20px;
  display: block;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill>span {
    font-size: 14px;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill>span {
    font-size: 12px;
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .story-skill>span {
    font-size: 12px;
    margin-top: 10px;
  }
}

.story-skill {
  position: relative;
}

@media (max-width: 767px) {
  .story-skill {
    display: inline-block;
    margin-bottom: 30px;
  }
}

.story-skill .progress-bar-circle {
  position: relative;
  height: 170px;
  width: 170px;
  min-width: 180px;
  background-color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle {
    height: 140px;
    width: 140px;
    min-width: 150px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle {
    height: 120px;
    width: 120px;
    min-width: 130px;
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle {
    height: 110px;
    width: 110px;
    min-width: 120px;
  }
}

.story-skill .progress-bar-circle div {
  position: absolute;
  height: 170px;
  width: 170px;
  border-radius: 50%;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle div {
    height: 140px;
    width: 140px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle div {
    height: 120px;
    width: 120px;
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle div {
    height: 110px;
    width: 110px;
  }
}

.story-skill .progress-bar-circle div span {
  color: #18191D;
  position: absolute;
  font-size: 26px;
  font-weight: 700;
  line-height: 166px;
  height: 166px;
  width: 166px;
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 50%;
  background-color: white;
  transform: translate(-50%, -50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle div span {
    height: 136px;
    width: 136px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle div span {
    height: 116px;
    width: 116px;
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle div span {
    height: 106px;
    width: 106px;
  }
}

.story-skill .progress-bar-circle div span b {
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  font-weight: 600;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle div span b {
    top: -44px;
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle div span b {
    top: -44px;
    font-size: 22px;
  }
}

.story-skill .progress-bar-circle .background {
  background-color: #000 !important;
}

.story-skill .progress-bar-circle .rotate {
  clip: rect(0 85px 170px 0);
  background-color: #D6D6D6 !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle .rotate {
    clip: rect(0 70px 140px 0);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle .rotate {
    clip: rect(0 60px 120px 0);
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle .rotate {
    clip: rect(0 55px 110px 0);
  }
}

.story-skill .progress-bar-circle .left {
  clip: rect(0 85px 170px 0);
  opacity: 1;
  background-color: #D6D6D6 !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle .left {
    clip: rect(0 70px 140px 0);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle .left {
    clip: rect(0 60px 120px 0);
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle .left {
    clip: rect(0 55px 110px 0);
  }
}

.story-skill .progress-bar-circle .right {
  clip: rect(0 85px 170px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #D6D6D6 !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .story-skill .progress-bar-circle .right {
    clip: rect(0 70px 140px 0);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .story-skill .progress-bar-circle .right {
    clip: rect(0 60px 120px 0);
  }
}

@media (max-width: 767px) {
  .story-skill .progress-bar-circle .right {
    clip: rect(0 55px 110px 0);
  }
}

/*===========================
     14.SERVICE PAGE CSS
===========================*/
@media (max-width: 767px) {
  .how-we-work {
    margin-top: 80px;
  }
}

.how-we-work .title.black {
  margin-bottom: -80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .how-we-work .title.black {
    margin-bottom: -50px;
  }
}

@media (max-width: 767px) {
  .how-we-work .title.black {
    margin-bottom: 0;
  }
}

.how-we-work .title.black h2 {
  margin: 0;
}

.swiper.work-process {
  padding-top: 150px;
}

@media (max-width: 767px) {
  .swiper.work-process {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .swiper.work-process {
    padding-top: 110px;
  }
}

.swiper.work-process .swiper-button-next,
.swiper.work-process .swiper-button-prev {
  height: 40px !important;
  width: 40px !important;
  background: #2A2A2A;
  border-radius: 50%;
  color: #fff !important;
  top: 22px;
  right: 0% !important;
  -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;
}

@media (max-width: 767px) {

  .swiper.work-process .swiper-button-next,
  .swiper.work-process .swiper-button-prev {
    display: none;
  }
}

.swiper.work-process .swiper-button-next:hover,
.swiper.work-process .swiper-button-prev:hover {
  background-color: #0061ae;
}

.swiper.work-process .swiper-button-next::after,
.swiper.work-process .swiper-button-prev::after {
  font-size: 14px !important;
}

.swiper.work-process .swiper-button-prev,
.swiper.work-process .swiper-rtl .swiper-button-next {
  left: auto;
  right: 5% !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .swiper.work-process .swiper-button-prev,
  .swiper.work-process .swiper-rtl .swiper-button-next {
    right: 12% !important;
  }
}

@media (max-width: 767px) {

  .swiper.work-process .swiper-button-prev,
  .swiper.work-process .swiper-rtl .swiper-button-next {
    right: 22% !important;
  }
}

.work-process-wrapper {
  position: relative;
}

.work-process-wrapper img {
  width: 100%;
}

.work-process-wrapper .work-process-inner {
  position: absolute;
  min-width: 350px;
  left: 0;
  top: 0;
  background: #17161A;
  text-align: center;
  padding: 40px 60px;
}

@media (max-width: 767px) {
  .work-process-wrapper .work-process-inner {
    padding: 30px 60px;
  }
}

.work-process-wrapper .work-process-inner b {
  font-weight: bold;
  font-size: 65px;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: #FFFFFF;
  opacity: 0.1;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

.work-process-wrapper .work-process-inner h4 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  color: #FFFFFF;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .pricing-plan .or2 {
    order: 2;
  }

  .pricing-plan .or1 {
    order: 1;
  }
}

@media (max-width: 767px) {
  .pricing-plan {
    margin-top: 0;
    margin-bottom: 50px;
  }
}

#pills-tab {
  margin: 0 !important;
}

@media (max-width: 767px) {
  #pills-tab {
    justify-content: center;
  }
}

#pills-tabContent {
  margin-top: 40px;
}

.nav-pills .nav-link {
  background: #191A1C;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 50px;
  min-width: 170px;
  padding: 15px 30px;
  font-weight: 600;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-right: 30px;
  -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;
}

@media (max-width: 767px) {
  .nav-pills .nav-link {
    min-width: 140px;
    font-size: 14px;
    margin-right: 0;
    margin: 0 5px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .nav-pills .nav-link {
    margin-bottom: 30px;
  }
}

.nav-pills .nav-link:hover {
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%) !important;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 50px;
}

.nav-pills .nav-link.active {
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%) !important;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 50px;
}

.single-price-box {
  position: relative;
  background: #111111;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 10px;
  padding: 40px 55px;
  text-align: center;
  z-index: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .single-price-box {
    padding: 40px 30px;
    margin-bottom: 30px;
  }
}

.single-price-box:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(152.97deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 10px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  -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;
}

.single-price-box:hover:before {
  visibility: visible;
  opacity: 1;
}

.single-price-box:hover .pay-btn a {
  background: transparent;
  background-color: #0A0A0A;
}

.single-price-box h3 {
  position: relative;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #FFFFFF;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-price-box h3 {
    font-size: 24px;
  }
}

.single-price-box h3:before {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%);
  width: 150px;
  height: 2px;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}

.single-price-box span {
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  display: block;
  min-height: 60px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
}

.single-price-box h2 {
  font-weight: 700;
  font-size: 50px;
  text-align: center;
  color: #E4E4E4;
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-price-box h2 {
    font-size: 24px;
  }
}

.single-price-box h2 sub {
  font-size: 20px;
  font-weight: 400;
  color: #0061ae;
  text-transform: capitalize;
}

.single-price-box .feature-list {
  text-align: left;
  margin-top: 35px;
  margin-bottom: 40px;
}

.single-price-box .feature-list li {
  font-size: 16px;
  color: #FFFFFF;
  padding: 10px 0;
}

.single-price-box .feature-list li i {
  margin-right: 10px;
}

.single-price-box .pay-btn a {
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  display: inline-block;
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%);
  border-radius: 30px;
  min-width: 200px;
  padding: 15px 30px;
  -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;
}

/*===========================
     15.SERVICE DETAILS PAGE CSS
===========================*/
@media (max-width: 767px) {
  .service-details {
    margin: 80px 0 50px 0;
  }
}

@media (max-width: 767px) {
  .service-details .or2 {
    order: 2;
  }

  .service-details .or1 {
    order: 1;
  }
}

.signle-service-details {
  margin-bottom: 120px;
}

@media (max-width: 767px) {
  .signle-service-details {
    margin-bottom: 50px;
  }

  .signle-service-details .or2 {
    order: 2;
  }

  .signle-service-details .or1 {
    order: 1;
  }
}

.signle-service-details img {
  margin-right: -20px;
  position: relative;
}

.signle-service-details h3 {
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #17161A;
  margin-bottom: 20px;
}

.signle-service-details p {
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  color: #272727;
  margin: 0;
}

.sidebar-widget {
  background: #F6F6F6;
  border-radius: 5px;
  padding: 25px;
  margin-bottom: 40px;
}

.sidebar-widget h4 {
  font-weight: bold;
  font-size: 22px;
  line-height: 35px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2E2D31;
  margin-bottom: 30px;
  position: relative;
}

.sidebar-widget h4:before {
  position: absolute;
  content: "";
  background: #111111;
  opacity: 0.5;
  border: 1px solid #111111;
  width: 70px;
  bottom: -5px;
  left: 0;
}

.service-list {
  list-style: none;
}

.service-list li {
  display: block;
}

.service-list li a {
  font-weight: 500;
  font-size: 16px;
  color: #272727;
  display: block;
  position: relative;
  padding-bottom: 20px;
  -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;
}

.service-list li a i {
  margin-right: 10px;
}

.service-list li a span {
  position: absolute;
  right: 0;
}

.service-list li a:hover {
  color: #0061ae;
}

.service-list li:last-child a {
  padding: 0;
}

.sidebar-search {
  margin-bottom: 40px;
}

.sidebar-search form {
  position: relative;
  overflow: hidden;
}

.sidebar-search form input {
  height: 50px;
  background: #212121;
  border-radius: 3px;
  width: 100%;
  border: none;
  padding: 0 70px 0 10px;
  color: #fff;
}

.sidebar-search form button {
  position: absolute;
  width: 70px;
  height: 50px;
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%);
  border-radius: 0px 3px 3px 0px;
  border: none;
  color: #fff;
  right: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.sidebar-search form button:hover {
  transform: scale(1.1);
}

.single-service-work-process h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
  color: #17161A;
}

.single-service-work-process h4 {
  font-weight: 600;
  font-size: 26px;
  color: #17161A;
  margin-bottom: 10px;
}

.single-service-work-process .single-step {
  margin-bottom: 40px;
}

.single-service-work-process .single-step .step {
  background: #FFFFFF;
  border: 1px solid rgba(0 97 174, 0.2);
  box-sizing: border-box;
  border-radius: 5px;
  padding: 30px 30px;
  position: relative;
}

@media (max-width: 767px) {
  .single-service-work-process .single-step .step {
    padding: 30px 10px;
    margin-bottom: 30px;
  }
}

.single-service-work-process .single-step .step p {
  font-size: 16px;
  line-height: 28px;
  color: #272727;
  margin: 0;
}

.single-service-work-process .single-step .step .step-count {
  position: absolute;
  right: 28px;
  top: 24px;
}

.single-service-work-process .single-step .step .step-count span {
  font-weight: 700;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  opacity: 0.3;
  -webkit-text-stroke: 1px #17161A;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

@media (max-width: 767px) {
  .single-service-work-process .single-step .step-img {
    margin-bottom: 30px;
  }
}

.single-service-work-process .single-step .step-img img {
  width: 100%;
  border-radius: 5px;
}

/*===========================
     16.PROJECT PAGE CSS
===========================*/
@media (max-width: 767px) {
  .project-area {
    margin: 80px 0;
  }
}

.project-tab {
  text-align: center;
  margin-bottom: 70px;
}

.project-filter-tab {
  list-style: none;
}

.project-filter-tab li {
  display: inline-block;
  margin: 0 12.5px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #E4E4E4;
  background-color: #111111;
  box-shadow: inset 0px 0px 10px rgba(6, 6, 6, 0.15);
  border-radius: 10px;
  padding: 15px 30px;
  cursor: pointer;
  @inlude transition(.5s);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .project-filter-tab li {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media (max-width: 767px) {
  .project-filter-tab li {
    margin: 10px;
    font-size: 12px;
    padding: 10px 15px;
  }
}

.project-filter-tab li.active {
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%);
}

.project-filter-tab li:hover {
  background: linear-gradient(90deg, #0061ae 1.05%, #730000 100%);
}

.single-portfolio.masonary {
  margin: 0;
}

.single-portfolio.masonary .portfolio-data {
  border-radius: 0;
}

.single-portfolio.masonary .portfolio-data:before {
  border-radius: 0;
  background-image: url(../img/portfolio2hover.png);
}

.single-portfolio.masonary .portfolio-data a img {
  border-radius: 0;
}

.single-portfolio.masonary .portfolio-inner {
  visibility: hidden;
  opacity: 0;
}

.single-portfolio.masonary:hover .portfolio-inner {
  visibility: visible;
  opacity: 1;
}

/*===========================
     17.PROJECT DETAILS PAGE CSS
===========================*/
@media (max-width: 767px) {
  .project-details-area {
    margin: 80px 0;
  }
}

.project-process {
  margin-bottom: 120px;
}

.process-step {
  text-align: left;
}

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

.process-step h4 {
  font-weight: bold;
  font-size: 25px;
  text-transform: capitalize;
  color: #111111;
  margin-bottom: 5px;
}

@media (max-width: 767px) {
  .process-step h4 {
    font-size: 17px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .process-step h4 {
    font-size: 20px;
  }
}

.process-step span {
  font-weight: 500;
  font-size: 16px;
  color: #6A696C;
}

@media (max-width: 767px) {
  .process-step span {
    font-size: 14px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .process-step span {
    font-size: 16px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .process-step span {
    font-size: 16px;
  }
}

.process-banner {
  margin-top: 60px;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .process-banner {
    margin-top: 20px;
    margin-bottom: 50px;
  }
}

.process-banner img {
  width: 100%;
}

.project-overview {
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .project-overview {
    margin-bottom: 50px;
  }

  .project-overview .or1 {
    order: 1;
  }

  .project-overview .or2 {
    order: 2;
  }

  .project-overview .or3 {
    order: 3;
  }

  .project-overview .or4 {
    order: 4;
  }
}

.project-overview h3 {
  font-weight: bold;
  font-size: 30px;
  color: #2E2D31;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .project-overview h3 {
    text-align: center;
  }
}

.project-overview.right h3 {
  text-align: right;
}

@media (max-width: 767px) {
  .project-overview.right h3 {
    text-align: center;
  }
}

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

.overview-img img {
  width: 100%;
}

.overview-content h2 {
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: #2E2D31;
  margin-bottom: 20px;
}

.overview-content p {
  font-weight: normal;
  font-size: 16px;
  line-height: 26px;
  color: #272727;
  margin: 0;
}

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

.project-single-step h4 {
  font-weight: bold;
  font-size: 20px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #111111;
  display: block;
  padding: 10px;
  -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;
}

.project-single-step p {
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0.03em;
  color: #272727;
  margin: 0;
  border: 1px solid #eee;
  padding: 20px;
  text-align: left;
}

.project-single-step:hover b {
  color: #FFFFFF;
  background: #0061ae;
}

.project-single-step:hover .project-step-img img {
  transform: scale(1.1);
}

.project-step-img {
  overflow: hidden;
}

.project-step-img img {
  width: 100%;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.releted-project h3 {
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  color: #2E2D31;
  margin-bottom: -40px;
}

@media (max-width: 767px) {
  .releted-project h3 {
    text-align: center;
  }
}

.swiper.releted-project-slider {
  padding-top: 110px;
}

@media (max-width: 767px) {
  .swiper.releted-project-slider {
    padding-top: 80px;
  }
}

.swiper.releted-project-slider .swiper-button-next,
.swiper.releted-project-slider .swiper-button-prev {
  height: 40px !important;
  width: 40px !important;
  background-color: #2A2A2A;
  border-radius: 50%;
  color: #fff !important;
  top: 22px;
  right: 0% !important;
  -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;
}

.swiper.releted-project-slider .swiper-button-next:hover,
.swiper.releted-project-slider .swiper-button-prev:hover {
  background-color: #0061ae;
}

@media (max-width: 767px) {

  .swiper.releted-project-slider .swiper-button-next,
  .swiper.releted-project-slider .swiper-button-prev {
    display: none;
  }
}

.swiper.releted-project-slider .swiper-button-next::after,
.swiper.releted-project-slider .swiper-button-prev::after {
  font-size: 14px !important;
}

.swiper.releted-project-slider .swiper-button-prev,
.swiper.releted-project-slider .swiper-rtl .swiper-button-next {
  left: auto;
  right: 5% !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .swiper.releted-project-slider .swiper-button-prev,
  .swiper.releted-project-slider .swiper-rtl .swiper-button-next {
    right: 10% !important;
  }
}

/*===========================
     18.CONTACT PAGE CSS
===========================*/
@media (max-width: 767px) {
  .contact-area {
    margin: 80px 0;
  }
}

.office-info {
  text-align: center;
  border: 1px solid #EEEEEE;
  box-sizing: border-box;
  border-radius: 5px;
  min-height: 250px;
  padding: 30px;
  -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;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .office-info {
    margin-bottom: 30px;
  }
}

.office-info:hover {
  border-radius: 50px 5px 5px 5px;
}

.office-info:hover .icon {
  background-color: #0061ae;
}

.office-info:hover .icon i {
  color: #fff;
}

.office-info .icon {
  width: 80px;
  height: 80px;
  background-color: #0061ae30;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
  margin-bottom: 15px;
  -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;
}

.office-info .icon i {
  color: #0061ae;
  font-size: 45px;
  -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;
}

.office-info h4 {
  font-weight: 600;
  font-size: 25px;
  margin-bottom: 10px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  color: #111111;
}

.office-info p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  color: #272727;
  margin: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .office-info p {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .office-info p {
    margin-bottom: 0;
  }
}

.office-info a {
  font-weight: 500;
  font-size: 16px;
  display: block;
  text-align: center;
  color: #272727;
  padding-bottom: 8px;
  -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;
}

.office-info a:last-child {
  padding-bottom: 0;
}

.office-info a:hover {
  color: #0061ae;
}

.contact-information {
  position: relative;
  margin-top: 120px;
  overflow: hidden; }
  @media (max-width: 767px) {
    .contact-information {
      margin-top: 80px; } }

@media (max-width: 767px) {
  .contact-form {
    text-align: center; } }
.contact-form h3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
  color: #19171B;
  margin-bottom: 40px; }
  @media (max-width: 767px) {
    .contact-form h3 {
      font-size: 24px; } }
      .contact-form form .form-switch{
        background: #FFFFFF;
  box-sizing: border-box;
  margin-top: 40px;
  padding: 0 25px;
      }

.contact-form form input:not([type="checkbox"]),
.contact-form form select,
.contact-form form textarea {
  background: #FFFFFF;
  border: 1px solid #E9E9E9;
  box-sizing: border-box;
  border-radius: 30px;
  width: 100%;
  margin-top: 40px;
  height: 60px;
  padding: 0 25px; }
.contact-form form textarea {
  height: 150px;
  padding: 25px;
  resize: none; }
.contact-form form button[type="submit"] {
  max-width: 180px;
  background-color: #D90A2C;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  color: #FFFFFF;
  border: none;
  border-radius: 45px;
  padding: 12px 25px;
  border: 2px solid transparent;
  -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; }
  .contact-form form button[type="submit"]:hover {
    color: #272727;
    background-color: transparent;
    border: 2px solid #D90A2C; }
.google-map {
  position: absolute;
  right: 0;
  top: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .google-map {
    position: static;
  }
}

.google-map iframe {
  width: 850px;
  height: 570px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px) {
  .google-map iframe {
    width: 650px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .google-map iframe {
    width: 550px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .google-map iframe {
    width: 450px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .google-map iframe {
    width: 100%;
  }
}

/*===========================
     19.BLOG PAGE CSS
===========================*/
@media (max-width: 767px) {
  .blog-news {
    margin: 80px 0;
  }
}

.widget-cnt {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
}

.widget-cnt:last-child {
  margin: 0;
}

.widget-cnt .wi {
  min-width: 115px;
  overflow: hidden;
}

.widget-cnt .wi a img {
  width: 100%;
  background: #C4C4C4;
  border-radius: 3px;
  -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;
}

.widget-cnt .wc {
  margin-left: 20px;
}

.widget-cnt .wc h6 {
  margin-bottom: 10px;
}

.widget-cnt .wc h6 a {
  font-weight: 600;
  font-size: 18px;
  text-transform: capitalize;
  color: #2E2D31;
  -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;
}

.widget-cnt .wc span {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: #6A696C;
}

.widget-cnt:hover .wi a img {
  transform: scale(1.1);
}

.widget-cnt:hover .wc h6 a {
  color: #0061ae;
}

.tag-list {
  list-style: none;
}

.tag-list li {
  display: inline-block;
}

.tag-list li a {
  font-weight: 500;
  font-size: 11px;
  text-align: center;
  color: #A0A0A0;
  border: 1px solid #A0A0A0;
  border-radius: 30px;
  padding: 10px 20px;
  display: inline-block;
  margin: 10px 5px;
  -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;
}

.tag-list li a:hover {
  color: #ffffff;
  border: 1px solid #0061ae;
  background-color: #0061ae;
}

.widget-banner {
  position: relative;
}

.widget-banner img {
  background: #FFFFFF;
  border-radius: 10px;
  width: 100%;
}

.banner-content {
  background: rgba(17, 17, 17, 0.95);
  border-radius: 10px;
  position: absolute;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  text-align: center;
}

.banner-content .banner-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 30px;
}

.banner-content .banner-inner h2 {
  font-weight: 700;
  font-size: 45px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-content .banner-inner h2 {
    font-size: 38px;
    line-height: 55px;
  }
}

@media (max-width: 767px) {
  .banner-content .banner-inner h2 {
    font-size: 30px;
    line-height: 45px;
  }
}

.banner-content .banner-inner .cmn-btn {
  justify-content: center;
}

.pagination {
  display: block;
  list-style: none;
  text-align: center;
  margin-top: 50px;
}

.pagination li {
  display: inline-block;
}

.pagination li a {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border: 1px solid #D3D3D3;
  box-sizing: border-box;
  border-radius: 50%;
  font-weight: 500;
  font-size: 17px;
  text-transform: capitalize;
  color: #D3D3D3;
  text-align: center;
  margin: 0 5px;
  -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;
}

.pagination li a:hover {
  border: 1px solid #0061ae;
  color: #0061ae;
}

.pagination li.active a {
  border: 1px solid #0061ae;
  color: #0061ae;
}

.signle-news-list {
  background: #FFFFFF;
  border: 1px solid #F3F3F3;
  box-sizing: border-box;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
}

.signle-news-list .post-img {
  position: relative;
}

.signle-news-list .post-img img {
  width: 100%;
}

.signle-news-list .news-content {
  padding: 0 20px 30px 20px;
  position: relative;
}

.signle-news-list .news-content .post-author-details {
  background: #FFFFFF;
  box-shadow: 4px 5px 50px rgba(53, 51, 83, 0.1);
  border-radius: 5px;
  display: inline-block;
  padding: 15px;
  margin-top: -30px;
  position: relative;
}

.signle-news-list .news-content .post-author-details .author {
  margin: 0;
}

.signle-news-list .news-content .comment {
  position: absolute;
  right: 20px;
  top: 15px;
}

@media (max-width: 767px) {
  .signle-news-list .news-content .comment {
    position: static;
    margin-top: 20px;
    text-align: center;
  }
}

.signle-news-list .news-content .comment span {
  font-weight: normal;
  font-size: 17px;
  color: #6A696C;
  text-transform: capitalize;
}

.signle-news-list .news-content .comment span i {
  margin-right: 5px;
}

.blog-details {
  padding-bottom: 50px;
}

@media (max-width: 767px) {
  .blog-details {
    margin-right: 0;
  }
}

.post-thumbnail {
  margin-bottom: 20px;
}

.post-thumbnail img {
  width: 100%;
}

.blog-details h3 {
  font-weight: 600;
  font-size: 25px;
  color: #2E2D31;
  line-height: 36px;
  margin-bottom: 20px;
}

.author-comments {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

@media (max-width: 767px) {
  .author-comments {
    display: block;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .author-comments .comments {
    display: none;
  }
}

.author-comments .comments span {
  text-transform: capitalize;
}

.author-comments .comments span i {
  margin-right: 5px;
}

.author-comments .author {
  margin: 0;
}

.author-comments .comments {
  min-width: 240px;
  text-align: right;
}

@media (max-width: 767px) {
  .author-comments .comments {
    min-width: auto;
  }
}

.blog-details p {
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  color: #272727;
}

.blog-details h4 {
  font-weight: 600;
  font-size: 22px;
  text-transform: capitalize;
  color: #2E2D31;
  margin-bottom: 10px;
  margin-top: 20px;
}

.blog-quate {
  margin: 30px 0;
}

.blog-quate blockquote {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.blog-quate blockquote p {
  font-weight: 600;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 0.03em;
  color: #545454;
  display: inline-block;
  margin-bottom: 0;
}

.quote-left,
.quote-right {
  min-width: 70px;
}

@media (max-width: 767px) {

  .quote-left,
  .quote-right {
    display: none !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {

  .quote-left,
  .quote-right {
    display: block !important;
  }
}

.quote-left i {
  font-size: 50px;
  color: #E4E4E4;
}

.quote-left {
  margin-top: -10px;
}

.quote-right {
  display: inline-block;
  transform: rotate(-180deg);
}

.quote-right i {
  font-size: 50px;
  color: #E4E4E4;
}

.blog-quate b {
  position: relative;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #0061ae;
  padding-left: 40px;
}

.blog-quate b:before {
  position: absolute;
  content: "";
  left: 0;
  width: 30px;
  border: 1px solid #0061ae;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.blog-banner-img {
  margin-bottom: 40px;
}

.blog-banner-img img {
  width: 100%;
}

@media (max-width: 767px) {
  .tags {
    text-align: center;
    margin-bottom: 20px;
  }
}

.tags a {
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  color: #A4A4A4;
  display: inline-block;
  padding: 13px 20px;
  border: 1px solid #EEEEEE;
  border-radius: 30px;
  margin-right: 10px;
  -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;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tags a {
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tags a {
    margin-bottom: 10px;
  }
}

.tags a:hover {
  color: #ffffff;
  border: 1px solid #0061ae;
  background-color: #0061ae;
}

.share-now span {
  text-align: center;
  border: 1px solid #000;
  border-radius: 30px;
  display: inline-block;
  min-width: 190px;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.share-now .social-share {
  list-style: none;
  text-align: center;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 30px;
  padding: 10px 20px;
  min-width: 190px;
  display: none;
  -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;
}

.share-now .social-share li {
  display: inline-block;
}

.share-now .social-share li a {
  display: inline-block;
  font-size: 16px;
  color: #fff;
  padding: 0 10px;
  -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;
}

.share-now .social-share li a:hover {
  color: #0061ae;
}

.share-now:hover .social-share {
  display: inline-block;
}

.share-now:hover span {
  display: none;
}

@media (max-width: 767px) {
  .share-now {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 190px;
  }
}

.blog-comments {
  padding-top: 55px;
  border-top: 1px solid #EEEEEE;
}

.blog-comments h3 {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111111;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .blog-comments h3 {
    font-size: 24px;
  }
}

.single-comments {
  display: flex;
  margin-bottom: 40px;
}

.single-comments:last-child {
  margin: 0;
}

.post-author {
  min-width: 90px;
}

.post-author img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.post-author-details {
  position: relative;
}

.post-author-details h4 {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  color: #111111;
  margin-top: 0;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .post-author-details h4 {
    font-size: 18px;
  }
}

.post-author-details span {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  text-transform: uppercase;
  color: #A4A4A4;
  display: block;
  margin-bottom: 0;
}

.reply {
  position: absolute;
  right: 0;
  top: 22px;
}

@media (max-width: 767px) {
  .reply {
    position: static;
    margin-top: 20px;
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .reply {
    position: absolute;
    margin-top: 0;
  }
}

.reply a {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #111111;
  cursor: pointer;
  -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;
}

.reply a:hover {
  color: #0061ae;
}

.reply a img {
  margin-right: 5px;
}

.post-author-details p {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  color: #272727;
  margin: 0;
  margin-top: 10px;
  line-height: 28px;
}

.single-comments:nth-child(odd) {
  margin-left: 90px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .single-comments:nth-child(odd) {
    margin-left: 0;
  }
}

.comment-form {
  margin-top: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .comment-form {
    margin-bottom: 50px;
  }
}

.comment-form h3 {
  font-weight: bold;
  font-size: 25px;
  text-transform: uppercase;
  color: #00152B;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .comment-form h3 {
    font-size: 24px;
  }
}

.comment-form form input,
textarea {
  background: #FFFFFF;
  border: 1px solid #E9E9E9;
  box-sizing: border-box;
  border-radius: 30px;
  height: 60px;
  margin-bottom: 35px;
  padding: 0 20px;
  width: 100%;
  font-size: 15px;
}

.comment-form form textarea {
  height: 250px;
  resize: none;
  padding: 20px;
}

.comment-form form input[type="submit"] {
  max-width: 200px;
  background: #0061ae;
  border: none;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  border: 2px solid transparent;
  -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;
}

.comment-form form input[type="submit"]:hover {
  color: #000;
  border: 2px solid #0061ae;
  background: transparent;
}

/*===========================
     20.ERROR PAGE CSS
===========================*/
.notfound-error {
  min-height: 850px;
  background-color: #18191D;
}

@media (max-width: 767px) {
  .notfound-error .or2 {
    order: 2;
  }

  .notfound-error .or1 {
    order: 1;
  }
}

@media (max-width: 767px) {
  .notfound-error {
    min-height: 550px;
  }
}

.error-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 850px;
}

@media (max-width: 767px) {
  .error-wrapper {
    min-height: 550px;
  }
}

@media (max-width: 767px) {
  .error-wrapper .error-content {
    padding-top: 50px;
  }
}

.error-wrapper .error-content h2 {
  -webkit-text-stroke: 2px #0061ae;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .error-wrapper .error-content h2 {
    font-size: 30px;
  }
}

.error-wrapper .error-content h1 {
  font-weight: bold;
  font-size: 56px;
  text-transform: uppercase;
  color: #FFFFFF;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-wrapper .error-content h1 {
    font-size: 38px;
  }
}

@media (max-width: 767px) {
  .error-wrapper .error-content h1 {
    font-size: 30px;
  }
}

.error-wrapper .error-content p {
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  color: #FFFFFF;
  margin-bottom: 45px;
}

@media (max-width: 767px) {
  .error-wrapper .error-img {
    display: none;
  }
}

.error-wrapper .error-img img {
  width: 100%;
}

/*===========================
     21.COMMING SOON CSS
===========================*/
.comming-soon {
  display: flex;
  width: 100%;
  height: 100%;
  background: #18191D;
  overflow: hidden;
}

@media (max-width: 767px) {
  .comming-soon {
    height: auto;
  }
}

.comming-soon-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 120px;
  min-width: 50%;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .comming-soon-left {
    padding: 0px 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .comming-soon-left {
    min-width: 100%;
    padding: 0px 40px;
  }
}

@media (max-width: 767px) {
  .comming-soon-left {
    padding: 30px;
  }
}

.cngs-content h1 {
  font-weight: bold;
  font-size: 50px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px #fff;
  -webkit-text-fill-color: transparent;
}

.cngs-content p {
  font-size: 15px;
  line-height: 30px;
  color: #FFFFFF;
  margin: 0;
}

#timer {
  margin: 50px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #timer {
    margin: 30px 0;
  }
}

@media (max-width: 767px) {
  #timer {
    margin: 30px 0;
    text-align: center;
  }
}

#timer div {
  display: inline-block;
  min-width: 80px;
  margin: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #timer div {
    margin: 10px;
    min-width: auto;
  }
}

#timer div b {
  font-size: 60px;
  line-height: 60px;
  opacity: 0.3;
  -webkit-text-stroke: 1.5px #fff;
  -webkit-text-fill-color: transparent;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #timer div b {
    font-size: 30px;
  }
}

#timer div span {
  display: block;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FFFFFF;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #timer div span {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .subscribe-mail {
    text-align: center;
  }
}

.subscribe-mail form input {
  background: #26272B;
  border-radius: 5px;
  height: 60px;
  min-width: 350px;
  padding: 0 10px;
  color: #fff;
  border: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .subscribe-mail form input {
    min-width: 280px;
  }
}

@media (max-width: 767px) {
  .subscribe-mail form input {
    min-width: 100%;
    margin-bottom: 20px;
  }
}

.subscribe-mail form input[type="submit"] {
  background-color: #595959;
  border-radius: 5px;
  min-width: 170px;
  padding: 10px 20px;
  margin-left: 10px;
  -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;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .subscribe-mail form input[type="submit"] {
    min-width: 150px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .subscribe-mail form input[type="submit"] {
    min-width: 120px;
  }
}

.subscribe-mail form input[type="submit"]:hover {
  background-color: #0061ae;
}

.social-icons {
  list-style: none;
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .social-icons {
    right: 15px;
  }
}

@media (max-width: 767px) {
  .social-icons {
    position: static;
    transform: none;
    text-align: center;
    margin-top: 30px;
  }
}

.social-icons li {
  display: block;
}

@media (max-width: 767px) {
  .social-icons li {
    display: inline-block;
    padding: 5px 10px;
  }
}

.social-icons li a {
  display: inline-block;
  background: #111111;
  border-radius: 10px;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  margin: 10px 0;
  -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;
}

.social-icons li a:hover {
  background: #0061ae;
}

.comming-soon-right {
  min-width: 50%;
  background-color: #fff;
}

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

/*===========================
     22.FOOTER CSS
===========================*/
footer {
  position: relative;
  background-image: url(../img/footer-bg.png);
  background-size: cover;
  background-position: center center;
  z-index: 1;
  padding-top: 80px;
}

@media (max-width: 767px) {
  .footer-widget {
    margin-bottom: 50px;
  }
}

.footer-widget .footer-logo {
  margin-bottom: 30px;
}

.footer-widget .footer-logo a img {
  width: auto;
}

.footer-widget h4 {
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-widget h4 {
    font-size: 24px;
  }
}

.footer-widget address h4 {
  display: inline-block;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-bottom: 15px;
  position: relative;
}

.footer-widget address h4:before {
  position: absolute;
  content: "";
  width: 100%;
  border: 1.5px solid #0061ae;
  left: 0;
  bottom: -2px;
}

.footer-widget address p {
  font-weight: 500;
  color: #FFFFFF;
  font-size: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-widget address p {
    font-size: 14px;
  }
}

.social-media-icons {
  list-style: none;
}

.social-media-icons li {
  display: inline-block;
  padding-right: 5px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .social-media-icons li {
    padding-right: 25px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .social-media-icons li {
    padding-right: 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .social-media-icons li {
    padding-right: 5px;
  }
}

.social-media-icons li a {
  display: inline-block;
  border: 1px solid #28292B;
  box-sizing: border-box;
  border-radius: 10px;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  -webkit-transition: all 0.8s ease-out 0s;
  -moz-transition: all 0.8s ease-out 0s;
  -ms-transition: all 0.8s ease-out 0s;
  -o-transition: all 0.8s ease-out 0s;
  transition: all 0.8s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .social-media-icons li a {
    height: 30px;
    width: 30px;
    line-height: 30px;
  }
}

.social-media-icons li a:hover {
  background-color: #0061ae;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.footer-menu {
  list-style: none;
}

.footer-menu li {
  display: block;
  padding-bottom: 15px;
}

.footer-menu li:last-child {
  padding-bottom: 0;
}

.footer-menu li a {
  position: relative;
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
  display: inline-block;
  -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;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-menu li a {
    font-size: 15px;
  }
}

.footer-menu li a:before {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -20px;
  height: 10px;
  width: 10px;
  background-color: #0061ae;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  -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;
}

.footer-menu li a:hover {
  color: #0061ae;
  padding-left: 15px;
}

.footer-menu li a:hover:before {
  left: 0;
  visibility: visible;
  opacity: 1;
}

.number,
.office-mail,
.address {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 20px;
}

.number p,
.office-mail p,
.address p {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .number p,
  .office-mail p,
  .address p {
    font-size: 14px;
  }
}

.phone a,
.email a {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  display: block;
  padding-bottom: 5px;
  -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;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .phone a,
  .email a {
    font-size: 13px;
  }
}

.phone a:hover,
.email a:hover {
  color: #0061ae;
}

.num-icon,
.mail-icon,
.address-icon {
  min-width: 35px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .num-icon,
  .mail-icon,
  .address-icon {
    min-width: 30px;
  }
}

.num-icon i,
.mail-icon i,
.address-icon i {
  color: #0061ae;
  font-size: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

  .num-icon i,
  .mail-icon i,
  .address-icon i {
    font-size: 20px;
  }
}

.footer-bottom {
  margin-top: 80px;
  padding: 30px 0;
  border-top: 2px solid #292929;
}

@media (max-width: 767px) {
  .footer-bottom {
    margin-top: 30px !important;
  }
}

@media (max-width: 767px) {
  .footer-bottom .copy-txt {
    text-align: center;
  }
}

.footer-bottom .copy-txt span {
  font-size: 14px;
  color: #FFFFFF;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-bottom .copy-txt span {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .footer-bottom .copy-txt span {
    font-size: 13px;
  }
}

.footer-bottom .copy-txt span a {
  font-weight: 700;
  color: #fff;
  -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;
}

.footer-bottom .copy-txt span a:hover {
  color: #0061ae;
}

.footer-bottom .footer-bottom-menu {
  list-style: none;
  text-align: right;
}

@media (max-width: 767px) {
  .footer-bottom .footer-bottom-menu {
    margin-top: 30px;
    text-align: center;
  }
}

.footer-bottom .footer-bottom-menu li {
  display: inline-block;
}

.footer-bottom .footer-bottom-menu li a {
  position: relative;
  font-size: 14px;
  text-align: right;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  padding: 0 20px;
  line-height: 1;
  -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;
}

@media (max-width: 767px) {
  .footer-bottom .footer-bottom-menu li a {
    padding: 0;
    padding-right: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-bottom .footer-bottom-menu li a {
    padding: 0 20px;
  }
}

.footer-bottom .footer-bottom-menu li a:before {
  border-right: 1px solid #fff;
  position: absolute;
  content: "";
  height: 60%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .footer-bottom .footer-bottom-menu li a:before {
    display: none;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-bottom .footer-bottom-menu li a:before {
    display: block;
  }
}

.footer-bottom .footer-bottom-menu li a:hover {
  color: #0061ae;
}

.footer-bottom .footer-bottom-menu li:last-child a:before {
  display: none;
}

/*===========================
     23.HOME 3 CSS
===========================*/
.header-layout3 {
  background-color: rgba(18, 19, 24, 0.85);
  padding: 0 100px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-layout3 {
    padding: 0 30px;
    padding-top: 5px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-layout3 {
    padding: 0 30px;
    padding-top: 7px;
  }
}

@media (max-width: 767px) {
  .header-layout3 {
    padding: 20px 10px;
  }
}

.main-nav.layout3 {
  text-align: center !important;
  display: block;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-nav.layout3 ul li {
    padding: 0 15px;
  }
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: end;
}

@media (max-width: 767px) {
  .header-right {
    display: none;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-right {
    display: block;
  }
}

.header-right .social-media-layout3 {
  list-style: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-right .social-media-layout3 {
    display: none;
  }
}

.header-right .social-media-layout3 li {
  display: inline-block;
  margin: 0 5px;
}

.header-right .social-media-layout3 li a {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: #FFFFFF;
  -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;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-right .social-media-layout3 li a {
    font-size: 15px;
  }
}

.header-right .social-media-layout3 li a:hover {
  color: #0061ae;
}

.header-right .cmn-btn-layout3 {
  margin-left: 50px;
}

@media only screen and (min-width: 1400px) and (max-width: 1650px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-right .cmn-btn-layout3 {
    margin-left: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-right .cmn-btn-layout3 {
    margin-left: 0;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1650px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-right .cmn-btn-layout3 a {
    font-size: 16px;
    padding: 15px 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-right .cmn-btn-layout3 a {
    font-size: 16px;
  }
}

.hero-area3 {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero-area3 {
    height: 80vh;
  }
}

.circle {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  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) {
  .circle {
    display: none;
  }
}

.circle a {
  position: relative;
  display: inline-block;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 30px;
  height: 55px;
  width: 30px;
}

.circle a:before {
  position: absolute;
  content: "";
  height: 15px;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 30px;
  left: 42%;
  bottom: 10px;
  transform: translateX(-42%);
  animation: up-down 2s alternate infinite;
}

.wave-line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  animation: zooming 5s ease infinite;
}

.wave {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  animation: zooming 5s ease infinite;
}

.swiper.hero-slider-3 {
  position: relative;
}

.swiper.hero-slider-3 .swiper-slide-cover {
  transition: 8.5s ease-out;
  transform: scale(1.2);
}

.swiper.hero-slider-3 .swiper-slide.swiper-slide-active .swiper-slide-cover {
  transform: scale(1);
}

.swiper.hero-slider-3 .slider-navigations {
  position: absolute;
  bottom: 50px;
  left: 25%;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .swiper.hero-slider-3 .slider-navigations {
    display: none;
  }
}

.swiper.hero-slider-3 .swiper-button-next-c {
  position: absolute;
  left: -50px;
}

.swiper.hero-slider-3 .swiper-button-prev-c,
.swiper.hero-slider-3 .swiper-button-next-c {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  background-color: transparent;
  -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;
}

.swiper.hero-slider-3 .swiper-button-prev-c svg path,
.swiper.hero-slider-3 .swiper-button-next-c svg path {
  fill: #fff;
  -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;
}

.swiper.hero-slider-3 .swiper-button-prev-c:hover,
.swiper.hero-slider-3 .swiper-button-next-c:hover {
  background-color: #fff;
}

.swiper.hero-slider-3 .swiper-button-prev-c:hover svg path,
.swiper.hero-slider-3 .swiper-button-next-c:hover svg path {
  fill: #0061ae;
}

.hero-content-layout3 {
  position: relative;
  padding-top: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100vh;
  z-index: 1;
}

@media (max-width: 767px) {
  .hero-content-layout3 {
    height: 80vh;
  }
}

.hero-content-layout3 img.trade-mark {
  max-width: 100px !important;
  position: absolute;
  right: 80px;
  top: 55%;
}

@media (max-width: 767px) {
  .hero-content-layout3 img.trade-mark {
    display: none;
  }
}

.hero-content-layout3 span {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 10px;
  display: block;
}

@media (max-width: 767px) {
  .hero-content-layout3 span {
    font-size: 16px;
  }
}

.hero-content-layout3 h1 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 100px;
  color: #FFFFFF;
  text-transform: uppercase;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content-layout3 h1 {
    font-size: 80px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-layout3 h1 {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .hero-content-layout3 h1 {
    font-size: 30px;
  }
}

.hero-content-layout3 .btn-manager a {
  position: relative;
  overflow: hidden;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 20px;
  display: inline-block;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 2px solid #DD0429;
  box-sizing: border-box;
  padding: 15px 30px;
  -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;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content-layout3 .btn-manager a {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .hero-content-layout3 .btn-manager a {
    font-size: 14px;
    padding: 15px 20px;
  }
}

.hero-content-layout3 .btn-manager a i {
  margin-left: 10px;
}

.hero-content-layout3 .btn-manager a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 0%;
  top: 50%;
  left: 50%;
  background-color: #000000;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: -1;
  -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;
}

.hero-content-layout3 .btn-manager a:hover {
  color: #0061ae;
  border: 2px solid #000000;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.hero-content-layout3 .btn-manager a:hover:before {
  height: 380%;
}

.swiper-slide>.swiper-slide-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

.swiper-slide>.swiper-slide-cover:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #0E0B17;
  opacity: 0.65;
}

.swiper-slide .slide1 {
  background-image: url(../img/home-3/home-3-slider-1.jpg);
  transform-origin: 0 100%;
}

.swiper-slide .slide2 {
  background-image: url(../img/home-3/home-3-slider-2.jpg);
  transform-origin: 100% 0;
}

.swiper-slide.swiper-slide-active .hero-content-layout3 img.trade-mark {
  animation: fadeIn 1s ease-in both;
  animation-delay: 2.5s;
}

.swiper-slide.swiper-slide-active .hero-content-layout3 span {
  animation: fadeIn 1s ease-in both;
  animation-delay: 1s;
}

.swiper-slide.swiper-slide-active .hero-content-layout3 h1 {
  animation: fadeIn 1s ease-in both;
  animation-delay: 1.5s;
}

.swiper-slide.swiper-slide-active .hero-content-layout3 .btn-manager {
  animation: fadeIn 1s ease-in both;
  animation-delay: 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(20px);
    -webkit-transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

@keyframes zooming {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15, 1.15);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .about-area3 {
    padding-top: 80px;
  }
}

.fini-about-imgs {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .fini-about-imgs {
    margin-bottom: 40px;
  }
}

.fini-img-left {
  position: relative;
  margin-right: 10px;
}

.fini-img-left .fini-about-shape-1 {
  position: absolute;
  left: -40px;
  z-index: -1;
  top: 60px;
  animation-name: rotateme;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all 0.2s cubic-bezier(0.98, 0.57, 1, 1) 0s;
}

@media (max-width: 767px) {
  .fini-img-left .fini-about-shape-1 {
    display: none;
  }
}

.fini-img-left .fini-about-1 {
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: right;
  display: block;
  margin-left: auto;
}

.fini-img-left .fini-about-2 {
  border-radius: 10px;
  display: block;
  margin-left: auto;
  text-align: right;
}

.fini-img-right {
  position: relative;
  margin-left: 10px;
}

.fini-img-right .fini-about-shape-2 {
  position: absolute;
  right: -40px;
  top: -50px;
  z-index: -1;
  animation: zoom-in-zoom-out 5s ease infinite;
}

@media (max-width: 767px) {
  .fini-img-right .fini-about-shape-2 {
    display: none;
  }
}

.fini-img-right .fini-about-3 {
  border-radius: 10px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  text-align: right;
}

.fini-img-right .fini-about-4 {
  border-radius: 10px;
  display: block;
  margin-left: auto;
  text-align: right;
}

@keyframes rotateme {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.25, 1.25);
  }

  100% {
    transform: scale(1, 1);
  }
}

.fini-about-content {
  padding-left: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .fini-about-content {
    padding-left: 0;
  }
}

.fini-about-content span {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  display: inline-block;
  text-transform: uppercase;
  color: #DD0429;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #0061ae;
}

.fini-about-content h2 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 50px;
  text-transform: capitalize;
  color: #17161A;
  margin-bottom: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .fini-about-content h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .fini-about-content h2 {
    font-size: 30px;
  }
}

.fini-about-content>p {
  margin: 0;
  font-size: 16px;
  color: #454545;
  text-align: justify;
}

.fini-about-content .our-mission {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 30px 0;
  margin-bottom: 45px;
}

@media (max-width: 767px) {
  .fini-about-content .our-mission {
    display: block;
    text-align: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .fini-about-content .our-mission {
    display: flex;
    text-align: left;
  }
}

.fini-about-content .our-mission .msn-icon {
  min-width: 100px;
}

.fini-about-content .our-mission .msn-icon i img {
  width: 70px;
}

.fini-about-content .our-mission .cto {
  min-width: 150px;
}

.fini-about-content .our-mission .cto img {
  width: 140px;
}

@media (max-width: 767px) {
  .fini-about-content .our-mission .msn-content {
    margin: 25px 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .fini-about-content .our-mission .msn-content {
    margin: 0;
  }
}

.fini-about-content .our-mission .msn-content h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.fini-about-content .our-mission .msn-content p {
  margin: 0;
  color: #272727;
  font-size: 16px;
}

@media (max-width: 767px) {
  .fini-about-content .cmn-btn-layout3 {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .services-area3 {
    margin: 80px 0;
  }
}

.fini-service {
  position: relative;
  padding: 40px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
  z-index: 1;
}

.fini-service:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 0%;
  width: 0%;
  border: 1px solid rgba(221, 4, 41, 0.2);
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
  opacity: 0;
  z-index: -1;
}

.fini-service.border {
  border: 1px solid rgba(221, 4, 41, 0.2) !important;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.fini-service .fini-icon {
  margin-bottom: 30px;
}

.fini-service .fini-icon i img {
  height: 70px;
  filter: grayscale(100%);
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.fini-service span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 60px;
  opacity: 0.5;
  -webkit-text-stroke: 1px #B3B3B3;
  -webkit-text-fill-color: transparent;
  line-height: 60px;
  position: absolute;
  right: 40px;
  top: 30px;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.fini-service h4 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #17161A;
  margin-bottom: 15px;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.fini-service p {
  font-size: 16px;
  color: #454545;
  margin-bottom: 15px;
}

.fini-service a {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  color: #454545;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}

.fini-service a i {
  margin-left: 5px;
}

.fini-service:hover:before {
  height: 100%;
  width: 100%;
  opacity: 1;
}

.fini-service:hover.border {
  border: 1px solid transparent !important;
}

.fini-service:hover.border:before {
  opacity: 0;
}

.fini-service:hover .fini-icon i img {
  filter: grayscale(0);
}

.fini-service:hover span {
  -webkit-text-stroke: 1px #0061ae;
  -webkit-text-fill-color: transparent;
}

.fini-service:hover h4,
.fini-service:hover a {
  color: #0061ae;
}

.count-layout3 {
  text-align: center;
}

.count-layout3 i {
  margin-bottom: 20px;
  display: block;
}

.count-layout3 i img {
  height: 70px;
}

.count-layout3 p {
  font-weight: 500;
  font-size: 20px;
  text-transform: capitalize;
  color: #454545;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .count-layout3 p {
    font-size: 16px;
  }
}

.count-layout3 .counter span {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 40px;
  text-transform: capitalize;
  color: #17161A;
}

.count-layout3 .counter sup {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 40px;
  text-transform: capitalize;
  color: #17161A;
  top: -10px;
}

@media (max-width: 767px) {
  .project-area3 {
    margin-top: 80px;
  }
}

.project-item-menu {
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
}

.project-item-menu li {
  display: inline-block;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  text-transform: capitalize;
  color: #17161A;
  position: relative;
  margin: 0 10px;
  cursor: pointer;
  -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;
}

@media (max-width: 767px) {
  .project-item-menu li {
    font-size: 16px;
  }
}

.project-item-menu li:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background-color: #0061ae;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  -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;
}

.project-item-menu li.active {
  color: #0061ae;
}

.project-item-menu li.active:before {
  visibility: visible;
  opacity: 1;
}

.project-item-menu li:hover {
  color: #0061ae;
}

.project-item-menu li:hover:before {
  visibility: visible;
  opacity: 1;
}

.project-item {
  position: relative;
}

.project-item:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #390B13 76.56%);
  height: 100%;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  -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;
  transform: scale(0.3);
}

.project-item:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background-image: url(../img/home-3/project/project-item-hover.png);
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
  visibility: hidden;
  opacity: 0;
  -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;
  transform: scale(0.3);
}

.project-item img {
  width: 100%;
}

.project-item a {
  position: absolute;
  top: 25px;
  right: 25px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  background-color: #DD0429;
  text-align: center;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -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;
  transform: scale(0.3);
}

.project-item .project-item-inner {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 25px;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  -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;
  transform: scale(0.3);
}

.project-item .project-item-inner h4 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 25px;
  display: block;
  text-transform: capitalize;
  color: #FFFFFF;
  margin: 0;
  z-index: 1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .project-item .project-item-inner h4 {
    font-size: 20px;
  }
}

.project-item:hover a {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

.project-item:hover .project-item-inner {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

.project-item:hover:before, .project-item:hover:after {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

@media (max-width: 767px) {
  .testimonial-area3 {
    margin: 80px 0;
  }
}

.single-slide {
  background: #FFFFFF;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
  padding: 25px;
  text-align: center;
  padding-top: 0;
  border: 1px solid rgba(221, 4, 41, 0.2) !important;
}

.reviewer-thumb {
  text-align: center;
  position: relative;
  top: -40px;
}

.reviewer-thumb img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}

.swiper.testimonial2-slider {
  padding: 50px 5px;
}

.swiper.testimonial2-slider .swiper-pagination {
  bottom: 0px !important;
  position: absolute !important;
}

.swiper.testimonial2-slider .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  height: 8px !important;
  width: 8px !important;
  background-color: #454545 !important;
  opacity: 1 !important;
  margin: 0 10px !important;
}

.swiper.testimonial2-slider .swiper-pagination .swiper-pagination-bullet:before {
  position: absolute;
  left: -4px;
  top: -4px;
  border: 1px solid #454545;
  height: 16px;
  width: 16px;
  content: "";
  border-radius: 50%;
}

.swiper.testimonial2-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0061ae !important;
}

.swiper.testimonial2-slider .swiper-pagination .swiper-pagination-bullet-active:before {
  border: 1px solid #0061ae;
}

.single-slide h4 {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 25px;
  color: #17161A;
  margin-bottom: 5px;
}

.single-slide span {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #454545;
}

.single-slide p {
  font-size: 16px;
  text-align: center;
  color: #454545;
  margin: 15px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-slide p {
    font-size: 14px;
  }
}

.swiper-slide.swiper-slide-active .single-slide {
  border: none !important;
}

.single-articale {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 50px rgba(53, 51, 83, 0.06);
}

@media (max-width: 767px) {
  .single-articale {
    display: block;
  }
}

.single-articale .articale-thumb {
  min-width: 50%;
  overflow: hidden;
}

.single-articale .articale-thumb img {
  width: 100%;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.single-articale .articale-content {
  padding: 20px;
}

.single-articale .articale-content h4 {
  margin-bottom: 15px;
}

.single-articale .articale-content h4 a {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #17161A;
  -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;
}

.single-articale .articale-content p {
  margin: 0;
  font-size: 16px;
  color: #454545;
}

.single-articale .articale-content a {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: block;
  color: #454545;
  margin-top: 15px;
  -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;
}

.single-articale .articale-content a i {
  margin-left: 5px;
}

.single-articale:hover .articale-thumb img {
  transform: scale(1.1);
}

.single-articale:hover .articale-content h4 a {
  color: #0061ae;
}

.single-articale:hover .articale-content a {
  color: #0061ae;
}

@media (max-width: 767px) {
  .clients-area {
    margin: 80px 0;
  }
}

.client-thumbnails {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .client-thumbnails {
    display: block;
    text-align: center;
  }
}

.client-thumbnails .client-thumb {
  margin: 0px 10px;
}

@media (max-width: 767px) {
  .client-thumbnails .client-thumb {
    margin-top: 20px;
  }

  .client-thumbnails .client-thumb:first-child {
    margin: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .client-thumbnails .client-thumb {
    display: inline-block;
  }
}

.client-thumbnails .client-thumb img {
  width: auto;
  filter: grayscale(100%);
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

.client-thumbnails .client-thumb img:hover {
  filter: grayscale(0);
}

.footer-widget.layout3>a {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #E5E5E5;
}

.footer-widget.layout3 p {
  font-weight: 500;
  font-size: 16px;
  color: #E5E5E5;
  margin: 15px 0;
}

.footer-widget.layout3 .social-media-icons li a {
  border-radius: 0;
}

.footer-subscribe {
  margin-bottom: 30px;
}

.footer-subscribe form {
  position: relative;
}

.footer-subscribe form input {
  border: 1.5px solid #454545;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  padding: 0 10px;
}

.footer-subscribe form input[type="submit"] {
  width: auto;
  height: 39px;
  background-color: #DD0429;
  border: 1.5px solid #DD0429;
  position: absolute;
  right: 5px;
  top: 5px;
}

.footer-subscribe form input[type="email"] {
  padding-right: 100px;
}

@media only screen and (max-width: 1795px) {

    header .main-nav ul li a {
        padding-right: 10px;
        font-size: 20px;
      }
}
@media only screen and (max-width: 1550px) {

    header .main-nav ul li a {
        padding-right: 5px;
        font-size: 18px;
      }
}
@media only screen and (max-width: 1300px) {

    header .main-nav ul li a {
        padding-right: 5px;
        font-size: 15px;
      }
}


@media only screen and (max-width: 1199px) {
  header .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    padding: 10px 15px !important;
    z-index: 99999;
    height: 100%;
    overflow: auto;
    background: #242424;
    -webkit-transform: translateX(-260px);
    transform: translateX(-260px);
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: -webkit-transform .3s ease-in;
    transition: transform .3s ease-in;
    transition: transform .3s ease-in, -webkit-transform .3s ease-in;
  }

  header .main-nav .mobile-menu-logo {
    text-align: left;
    padding-top: 75px;
    display: block;
    border-bottom: 1px solid #0061ae;
    padding-bottom: 8px;
  }

  header .main-nav ul {
    float: none;
    display: unset !important;
    text-align: left !important;
    padding: 25px 10px 25px 0;
  }

  header .main-nav ul li {
    display: block;
    position: relative;
    padding: 0 5px;
  }

  header .main-nav ul li a {
    padding: 10px 0;
    display: block;
    color: white !important;
    font-weight: 300;
    font-size: 20px;
  }

  header .main-nav ul li ul.sub-menu {
    position: static;
    min-width: 200px;
    background: 0 0;
    border: none;
    opacity: 0;
    visibility: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
    display: none;
    margin-top: 0 !important;
    transform: translateY(0px);
  }

  header .main-nav.slidenav {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  header .main-nav ul li .bi {
    display: block;
    top: 8px;
    font-size: 16px;
  }

  .mobile-menu {
    position: relative;
    top: 2px;
    padding: 0 5px;
    border-radius: 50%;
    display: inline-block;
  }

  .cross-btn {
    display: inline-block !important;
    position: relative;
    width: 30px !important;
    height: 22px !important;
    cursor: pointer;
    border: 3px solid transparent !important;
  }

  .cross-btn span {
    width: 100%;
    height: 2px;
    background: linear-gradient(233.77deg, rgba(0, 97, 174, 0.8) 0.94%, rgba(0, 97, 174, 0.8) 99.09%) !important;
    display: block;
    position: absolute;
    right: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .cross-btn .cross-top {
    top: 0;
  }

  .cross-btn .cross-middle {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
  }

  .cross-btn .cross-bottom {
    bottom: 0;
    width: 100%;
  }

  .cross-btn.h-active span.cross-top {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1px;
  }

  .cross-btn.h-active span.cross-middle {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0;
  }

  .cross-btn.h-active span.cross-bottom {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1px;
  }
}
.menu_bar{
    text-align: center;
}

@media (max-width: 1200px) {

    .menu_bar{
        text-align: right;
    }

}