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

Template Name: techno - IT Solutions & Services HTML5 Template
Version: 0.1
 
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. techno	Main Menu Area Css
02. techno Slider Area Css
03. techno Shape Images Css
04. techno Breatcome Area Css
05. techno Feature Area Css
06. techno Service Area Css
07. techno Section TitleNAV
08. techno About  Area  Css
09. techno Counter Area  Css
10. techno Feature Box Area  Css
11. techno Team Area  Css
12. techno Pricing Area  Css
13. techno Portfolio Area  Css
14. techno Testimonial Area  Css
15. techno Call Do Action Area  Css
16. techno Blog Area  Css
17. techno Subscribe Area CSS
18. techno Subscribe Area CSS
19. techno Contact Now Area Css 
20. techno Contact Form Area Css
21. techno GOOGLE MAP AREA CSS
22. techno Middle Footer CSS
23. techno Footer Bottom Area Css 
24. techno BLOG DETAILS AREA CSS
25. techno Team Details Area Css
26. techno Skill Area Css
27. techno Error Page Area Css
25. techno Team Details Area Css

=======================*/
/*logo*/
.sticky img.down {
  display: none;
}
img.main_sticky {
  display: none !important;
}
.sticky img.main_sticky {
  display: inherit !important;
}
/*logo end*/
.menu {
  width: 100%;
}
.menu a.logo {
  width: 22%;
  display: inline-block;
  /* padding: 25px 0 0; */
  padding: 1px 0 0;
  float: left;
  position: relative;
  z-index: 1;
}
/* Estios para imagen de mujer infinity */
.hero-main-thumb.single_slider_shape_image img {
    transform: translateX(-200px) translateY(30px); /* Ajusta el valor según necesites */
    position: relative;
}
  /* Desktop - imagen hacia la izquierda */
  @media (min-width: 992px) and (max-width: 1300px) {
    .hero-main-thumb.single_slider_shape_image img {
      transform: translateX(-30px);
      width: 60%;
      max-width: 60%;
      height: auto;
    }
  }

  /* Tablet */
  @media (min-width: 768px) and (max-width: 991px) {
    .hero-main-thumb.single_slider_shape_image img {
      transform: translateX(60px);
      width: 50%;
      height: auto;
    }
  }

  /* Mobile - imagen centrada y más pequeña */
  @media (max-width: 767px) {
    .hero-main-thumb.single_slider_shape_image img {
      transform: none;
      width: 80%;
      max-width: 80%;
      margin: 0 auto;
      height: auto;
    }
    
    /* Remove top padding in mobile to eliminate white space */
    body {
      padding-top: 0 !important;
    }
  }
/*--------------------------------------------------*/  
.menu img {
  max-width: 100%;
}
.menu-mobile {
  display: none;
  padding: 20px;
}
.menu-mobile:after {
  content: "\f394";
  font-size: 2.5rem;
  padding: 0;
  float: right;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-25%);
  transform: translateY(-25%);
}
.menu-dropdown-icon:before {
  content: "\f489";
  display: none;
  cursor: pointer;
  float: right;
  padding: 1.5em 2em;
  background: #fff;
  color: #333;
}
.menu > ul {
  list-style: none;
  position: relative;
  text-align: right;
}
.menu > ul:before,
.menu > ul:after {
  content: "";
  display: table;
}
.menu > ul:after {
  clear: both;
}
.menu > ul > li {
  display: inline-block;
}
.menu > ul > li a {
  text-decoration: none;
  padding: 30px 20px 32px 0;
  display: block;
  color: #232323;
  font-size: 16px;
  font-weight: 600;
}
.menu > ul > li > ul {
  display: none;
  width: 100%;
  background: #fff;
  box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
  content: "";
  display: table;
}
.menu > ul > li > ul:after {
  clear: both;
}
.menu > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}
.menu > ul > li > ul > li a:hover {
  color: #fff;
}
.menu > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}
.menu > ul > li > ul > li > ul:after {
  clear: both;
}
.menu > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  padding: 2px 0;
  margin: 0;
}
.menu > ul > li > ul > li > ul > li a {
  border: 0;
  display: block;
  padding: 12px 20px;
  margin: 0;
  line-height: 1.3;
  letter-spacing: normal;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  transition: 0.5s;
  color: #333 !important;
  text-align: left;
  position: relative;
  z-index: 1;
}
.menu > ul > li > ul > li > ul > li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  background: #0c5adb;
  z-index: -1;
  transition: 0.5s;
}

.menu > ul > li > ul > li > ul > li a:hover:before {
  height: 100%;
  top: 0;
}

.menu > ul > li > ul.normal-sub {
  width: 265px;
  left: auto;
}
.menu > ul > li > ul.normal-sub > li {
  width: 100%;
}
.menu > ul > li > ul.normal-sub > li a {
  border: 0;
  padding: 10px 20px;
  font-size: 15px;
  text-align: left;
  color: #333 !important;
  position: relative;
  z-index: 1;
}

.menu > ul > li > ul.normal-sub > li a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(48, 113, 180, 1) 0%, rgba(32, 64, 142, 1) 100%);
  z-index: -1;
  transition: 0.5s;
}

.menu > ul > li > ul.normal-sub > li a:hover:before {
  height: 100%;
  top: 0;
}

.menu > ul > li > ul > li > ul > li a span {
  background: #0c5adb;
  font-size: 12px;
  color: #fff;
  padding: 3px 5px 2px;
  border-radius: 5px;
}
.menu > ul > li > ul.normal-sub > li a:hover {
  color: #fff !important;
}
.menu > ul > li > ul > li > ul > li a:hover {
  color: #fff !important;
  background: transparent;
}
/*sticky*/
.sticky .menu > ul > li a {
  color: #fff;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 959px) {
  .menu-mobile {
    display: block;
    float: right;
    padding: 20px 20px 0;
  }
  .menu-dropdown-icon:before {
    display: block;
  }
  .menu > ul {
    display: none;
    width: 100%;
  }
  .menu > ul > li {
    width: 100%;
    float: none;
    display: block;
  }
  .menu > ul > li a {
    padding: 1.5em;
    width: 100%;
    display: block;
  }
  .menu > ul > li > ul {
    position: relative;
    padding: 0 40px;
  }
  .menu > ul > li > ul.normal-sub {
    width: 100%;
  }
  .menu > ul > li > ul > li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }
  .menu > ul > li > ul > li:first-child {
    margin: 0;
  }
  .menu > ul > li > ul > li > ul {
    position: relative;
  }
  .menu > ul > li > ul > li > ul > li {
    float: none;
  }
  .menu .show-on-mobile {
    display: block;
  }
  
  /* Remove top padding in mobile to eliminate white space - High priority rule */
  body {
    padding-top: 0 !important;
  }
}

html {
  scroll-behavior: smooth;
}

/*============================
 techno	Main Menu Area Css
==============================*/
.techno_nav_manu {
  background: #fff;
  transition: 0.5s;
  margin-bottom: 0;
  z-index: 888;
  position: relative;
}

.techno_nav_manu.transparent_menu {
  /* background: transparent; */
  background: #00247e ;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: top;
}

/* Auto-hide functionality with top */
.auto-hide-enabled .techno_nav_manu.transparent_menu.hide-header,
.auto-hide-enabled #sticky-header.hide-header {
  top: -140px !important;
}

.auto-hide-enabled .techno_nav_manu.transparent_menu.show-header,
.auto-hide-enabled #sticky-header.show-header {
  top: 0 !important;
}

/* Asegurar transición suave en todos los casos */
#sticky-header {
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: top;
}
.transparent_menu .menu > ul > li a {
  color: #fff;
}
.transparent_menu.up .menu > ul > li a {
  color: #232323;
}
.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0 !important;
  width: 100%;
  -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
  background: #00247e !important;
  transition: none !important;
  z-index: 999;
  -webkit-animation: none !important;
  animation: none !important;
}
/*style two*/
/*upper*/
.upper.style-two .donate-btn-header a.seo-button:hover {
  color: #fff;
}
/*style three*/
/*style four*/
/*style end*/
a.seo-button:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  background: #00247e;
  transform: scale(0);
  transition: 0.5s;
}
a.seo-button:hover:before {
  transform: scale(1);
}
a.seo-button:hover {
  color: #fff;
}
/* techno Menu Css*/
/* sub menu style */
.techno_menu ul li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 100%;
  z-index: 9;
}
.techno_menu ul .sub-menu li:hover > a,
.techno_menu ul .sub-menu .sub-menu li:hover > a,
.techno_menu ul .sub-menu .sub-menu .sub-menu li:hover > a,
.techno_menu ul .sub-menu .sub-menu .sub-menu .sub-menu li:hover > a {
  background: #0c5adb;
  color: #fff !important;
}
.techno_menu ul .sub-menu li:hover > a span {
  background: #fff;
  color: #0c5adb;
}

/* sub menu 2 */
.techno_menu ul .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

/* sub menu 3 */
.techno_menu ul .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

/* sub menu 4 */
.techno_menu ul .sub-menu .sub-menu .sub-menu li:hover > .sub-menu {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  top: 0%;
}

.donate-btn-header {
  display: inline-block;
  margin-left: 16px;
}
a.dtbtn {
  -moz-user-select: none;
  background: #0c5adb;
  border: medium none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 17px;
  margin-bottom: 0;
  padding: 10px 30px;
  text-align: center;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.5s ease 0s;
  vertical-align: middle;
  border-radius: 5px;
  border: 2px solid #0c5adb;
  font-weight: 600;
}
a.dtbtn:hover {
  border: 2px solid #00247e;
  background: #00247e;
  color: #fff;
}
a.dtbtn.up:hover {
  border: 2px solid #00247e;
  background: linear-gradient(to left, #2475fc, #1129b9 100%);
  color: #fff;
}
.techno_menu li a:hover:before {
  width: 101%;
}
.main_sticky {
  display: none;
}
.techno_nav_manu.sticky .main_sticky {
  display: inherit;
}
.techno_nav_manu.sticky a.dtbtn {
  color: #0c5adb;
  background: #fff;
  border: 2px solid #fff;
}
.techno_nav_manu.sticky a.dtbtn:hover {
  color: #0c5adb;
}
.mobile-menu.mean-container {
  overflow: hidden;
}

/* ====== Style 2 ====== */

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

a.cart:after {
  position: absolute;
  content: "0";
  font-size: 11px;
  right: -6px;
  top: -10px;
  background: #0c5adb;
  color: #fff;
  width: 17px;
  height: 17px;
  line-height: 17px;
  border-radius: 50%;
  transition: 0.5s;
}

/*====================================================
--<	Techno Header Top Menu Area Css -->
======================================================*/
/*====================================================
--<	Techno Slider Area Css -->
======================================================*/
.slider1 {
  background-image: url({% static 'assets/images/slider/slider-1.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}
.slider2 {
  background-image: url({% static 'assets/images/slider/slider-2.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}
.slider3 {
  background-image: url({% static 'assets/images/slider/slider-3.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}
.slider4 {
  background-image: url({% static 'assets/images/slider/slider-5.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}
.slider5 {
  background-image: url({% static 'assets/images/slider/slider-8.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}
.slider6 {
  background-image: url({% static 'assets/images/slider/slider-4.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider7 {
  background-image: url({% static 'assets/images/slider/slider-6.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider8 {
  background-image: url({% static 'assets/images/slider/slider-9.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider9 {
  background-image: url({% static 'assets/images/slider/slider-11.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider9 {
  background-image: url({% static 'assets/images/slider/slider-11.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider10 {
  background-image: url({% static 'assets/images/slider/slider-12.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 1050px;
  position: relative;
}
.slider11 {
  background-image: url({% static 'assets/images/slider/slider13.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 800px;
  position: relative;
}
.slider12 {
  background-image: url({% static 'assets/images/slider/slider14.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 800px;
  position: relative;
}
.slider13 {
  background-image: url({% static 'assets/images/odoo.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}
.slider14 {
  background-image: url({% static 'assets/images/odoo2.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
  position: relative;
}

.slider15 {
  background-image: url({% static 'assets/images/slider/hero-bg.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 950px;
  position: relative;
}
.slider16 {
  background-image: url({% static 'assets/images/slider/seo-bg.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 950px;
  position: relative;
}
.slider17 {
  background: url({% static 'assets/images/slider/innsurance-bg.jpg' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 1050px;
  position: relative;
}
.slider18 {
  background: url({% static 'assets/images/slider/hero-bg1.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}

.slider19 {
  background-image: url({% static 'assets/images/slider/software-hero-bg.png' %});
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 900px;
}

/*hero thumb*/
.hero_section_thumb {
  position: relative;
  z-index: 1;
}
.em-hero-icon-thumb {
  position: absolute;
  top: 122px;
  left: 104px;
}
/*hero thumb style two slider16*/
.slider16 .em-hero-inner-thumb {
  position: absolute;
  top: 115px;
  left: 19px;
}
.slider16 .em-hero-inner-thumb2 {
  position: absolute;
  top: 55px;
  right: -218px;
  animation: moveLeftBounce 3s linear infinite;
}
.slider16 .em-hero-inner-thumb3 {
  position: absolute;
  bottom: -54px;
  top: inherit;
  right: -278px;
}
.slider16 .em-hero-inner-shape {
  position: absolute;
  top: -100px;
  left: inherit;
  right: 190px;
}
.slider16 .em-hero-inner-shape1 {
  position: absolute;
  right: 75px;
  bottom: -210px;
}
.slider16 .em-hero-inner-shape2 {
  position: absolute;
  left: -260px;
  bottom: 105px;
  animation: wooo 3.5s infinite;
}
/*wood animation*/
@keyframes wooo {
  0% {
    transform: rotate3d(0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 359deg);
  }
}
/*slider17*/
.slider17 .em-hero-inner-thumb {
  position: absolute;
  top: 56px;
  left: 411px;
  z-index: -1;
}
.slider17 .em-hero-inner-shape {
  position: absolute;
  top: -272px;
  left: -330px;
  animation: moveLeftBounce 3s linear infinite;
}
/*hero thumb End*/

.slider_text_inner {
  display: inline-block;
}
.slider_text_inner h1 {
  font-size: 65px;
  text-transform: none;
  font-weight: 800;
  color: #fff;
  margin: 0;
  margin: 0;
  line-height: 1.1;
}
.slider_text_inner h1 span {
  color: #0c5adb;
}
.slider_text_inner h5 {
  font-size: 20px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 24px;
  letter-spacing: 1px;
}

.slider_text_inner p {
  width: 70%;
  font-size: 16px;
  padding: 29px 0 22px;
  color: #fff;
}
.slider_text_desc p {
  color: #fff;
  width: 62%;
  font-size: 18px;
}
.text_center .slider_text_desc p {
  margin: auto;
}
/*slider style two*/
.slider15 .single_slider {
  position: relative;
  z-index: 1;
  top: 184px;
}
.slider15 .slider_text_inner {
  display: inline-block;
}
.slider15 .slider_text_inner h1 {
  font-size: 53px;
  text-transform: none;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  padding: 0 0 0 22px;
  border-left: 5px solid #37bbff;
}
.slider15 .slider_text_inner h5 {
  font-size: 20px;
  text-transform: none;
  color: #fff;
  font-weight: 600;
  margin: 0 0 24px 44px;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}
.slider15 .slider_text_inner h5:before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;
  left: -42px;
  background: url({% static 'assets/images/shape/tick-icon.png' %});
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
.slider15 .slider_text_inner p {
  width: 100%;
  font-size: 18px;
  padding: 22px 0 0;
  color: #fff;
}
.slider15 .button a {
  background: #33baff;
  padding: 15px 35px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 44;
  border-radius: 5px;
  color: #fff;
  margin-top: 4px;
}
/*slider 16*/

.slider16 .slider_text_inner h5 {
  font-size: 18px;
  text-transform: uppercase;
  color: #0c59db;
  font-weight: 700;
  margin: 0 0 18px 50px;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}
.slider16 .slider_text_inner h5:before {
  position: absolute;
  content: "";
  left: -48px;
  top: 10px;
  width: 38px;
  height: 1px;
  background: #0c59db;
}
.slider16 .slider_text_inner h1 {
  font-size: 60px;
  font-weight: 700;
  text-transform: none;
  margin: 0;
  line-height: 65px;
  color: #232323;
}
.slider16 .slider_text_inner p {
  width: 100%;
  font-size: 17px;
  padding: 15px 0 20px;
  color: #616161;
}
/*slider17*/

.slider17 .slider_text_inner h5 {
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.slider17 .slider_text_inner h5:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: -2px;
  right: -10px;
  width: 30px;
  height: 27px;
  background: #6989ca;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 65% 100%);
  transition: 0.5s;
}
.slider17 .slider_text_inner h1 {
  font-size: 58px;
  text-transform: none;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.slider17 .slider_text_inner p {
  width: 100%;
  padding: 15px 0 10px;
}
.slider17 .button a {
  background: #fff;
  padding: 13px 42px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 44;
  border-radius: 5px;
  color: #0c5adb;
}
.slider17 .upper.button a {
  background: inherit;
  padding: 12px 42px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 44;
  border-radius: 5px;
  color: #fff;
  margin-right: 15px;
  border: 1px solid #ffffff;
}
.slider17 .slider_button span {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 13px 19px 0;
}
/*slider17 all hover*/
.slider17 .slider_text_inner h5:hover:before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 110%;
}
/* Particles Js Slider */
/*Srart slider18*/

.slider18 .slider_text_inner h5 {
  font-size: 20px;
  text-transform: inherit;
  color: #fff;
  font-weight: 600;
  margin: 0 0 24px;
  letter-spacing: 0;
  padding: 0 0 0 36px;
  position: relative;
  z-index: 1;
}
.slider18 .slider_text_inner h5:before {
  position: absolute;
  content: "";
  top: 6px;
  left: 11px;
  width: 15px;
  height: 15px;
  background: #33baff;
  border-radius: 15px;
}
.slider18 .slider_text_inner h5:after {
  position: absolute;
  content: "";
  top: -2px;
  left: -1px;
  width: 20px;
  height: 20px;
  background: rgba(255, 108, 11, 0.7019607843137254);
  border-radius: 15px;
}
.slider18 .slider_text_inner h1 {
  font-size: 56px;
  text-transform: none;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.slider18 .slider_text_inner p {
  width: 100%;
  font-size: 18px;
  padding: 23px 0 7px;
  color: #fff;
}
/*hero button*/
.slider18 .slider_button {
  display: inline-block !important;
  padding-right: 30px;
}
.slider18 .button a {
  background: #33baff;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 44;
  border-radius: 5px;
  color: #fff;
}
.slider18 .button a i {
  margin-left: 5px;
  position: relative;
  top: 2px;
  font-size: 18px;
}
/*hero icon*/
.slider18 .call-icon {
  float: left;
  margin-right: 20px;
}
.slider18 .call-icon i {
  font-size: 25px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px solid #fff;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
}
/*call title*/
.slider18 .call-title {
  overflow: hidden;
}
.slider18 .call-title p {
  color: #fff;
  margin: 0;
}
.slider18 .call-title h6 {
  color: #fff;
  margin-top: 4px;
}
/*hero thumb section*/
.slider18 .hero_section_thumb {
  position: relative;
  z-index: 1;
  left: 70px;
}
.slider18 .em-hero-inner-thumb4 {
  position: absolute;
  bottom: 282px;
  left: 59px;
}
.slider18 .em-hero-icon-thumb {
  position: absolute;
  top: 180px;
  left: -70px;
  width: 250px;
}
.slider18 .em-hero-inner-thumb3 {
  position: absolute;
  top: 520px;
  right: -151px;
}
.slider18 .em-hero-inner-thumb2 {
  position: absolute;
  top: -140px;
  right: 420px;
}
.slider18 .em-hero-inner-shape1 {
  position: absolute;
  right: -108px;
  top: -54px;
  animation: moveLeftBounce 3s linear infinite;
}
.slider18 .em-hero-inner-shape {
  position: absolute;
  top: inherit;
  bottom: -240px;
  left: inherit;
  right: -74px;
}
/*end slider area*/

/* =================< Slider 19 Style >================= */

.slider19 .slider_text_inner h5 {
  font-size: 16px;
  margin: 0 0 24px 70px;
  position: relative;
  z-index: 1;
}

.slider19 .slider_text_inner h5:before {
  position: absolute;
  content: "";
  left: -60px;
  top: 9px;
  width: 50px;
  height: 1px;
  background: rgb(255, 255, 255);
  z-index: 1;
}

.slider19 .slider_text_inner h1 {
  font-size: 50px;
  line-height: 58px;
}

.slider19 .slider_text_desc p {
  width: 100%;
  padding: 28px 0 25px;
}

/* Color Black */
/* Button Css */
.button a {
  background: #0c5adb;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 500;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 44;
  border-radius: 5px;
  color: #fff;
}
.button.color_two a:before {
  background: #0c5adb;
}
.button.two a {
  padding: 14px 35px;
}
.button.style-four a:before {
  background: #0c5adb;
}
.button .active {
  background: #00247e;
  margin-left: 25px;
}
.button .active:before {
  background: #0c5adb;
}
.button a i {
  margin-left: 5px;
  position: relative;
  top: 2px;
}
.button a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #00247e;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
}
.button a:hover {
  color: #fff;
}
.button a:hover:before {
  width: 180%;
}
.slider12 .button a i {
  font-size: 14px;
}
.slider12 .button a {
  font-size: 17px;
}
.slider12 .button .active {
  background: transparent;
  border: 1px solid #fff;
}
.slider12 .button .active:hover {
  border-color: #0c5adb;
}
.slider13 .slider_text_inner h5,
.slider14 .slider_text_inner h5 {
  font-size: 20px;
  color: #0c5adb;
  margin: 0 0 16px;
}
.slider13 .slider_text_inner h1,
.slider14 .slider_text_inner h1 {
  font-size: 60px;
  color: #232323;
}

.slider13 .slider_text_inner p,
.slider14 .slider_text_inner p {
  width: 67%;
  font-size: 18px;
  padding: 23px 0 11px;
  color: #616161;
  margin: 0;
}
.slider13 .button a,
.slider14 .button a {
  padding: 13px 32px;
  font-size: 18px;
}

/* Video Css */
.slider-video {
  position: relative;
}
.slider-video .video-icon {
  position: absolute;
  right: 0;
  top: -165px;
}
.slider-video.two .video-icon {
  left: 262px;
  top: -74px;
}
.slider10 .video-icon a {
  border-radius: 0;
}
@-webkit-keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

/* Owl Nav Css */
.owl-prev {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: 0.3s;
}
.owl-next {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: 0.3s;
}
/*.owl-carousel:hover .owl-prev{
 left:30px;
}
.owl-carousel:hover .owl-next{
right:30px;
}*/
.owl-next i,
.owl-prev i {
  background-color: transparent;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 60px;
  width: 60px;
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  line-height: 55px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
}
.owl-next i:hover,
.owl-prev i:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Slider20 Home Digital Agency 
============================================*/

.home-title h5::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 15px;
  height: 3px;
  width: 30px;
  background-color: #0c5adb;
}

.home-button a:hover {
  background: linear-gradient(
    265deg,
    rgb(19, 48, 191) 0%,
    rgb(36, 113, 249) 100%
  );
  color: rgb(255, 255, 255);
}

/*====================================================
--<	Techno Banner Area Css -->
======================================================*/
/* Banner Home Two Shape  */
/* Banner Style Two */
/* Banner Style Three */

/*====================================================
--<	Techno Lines Css -->
======================================================*/
.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}

.lines .line {
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  -webkit-animation: moveLeftBounces-one 20s linear infinite;
  animation: moveLeftBounces-one 20s linear infinite;
}

.lines .line:nth-child(1) {
  margin-left: -25%;
}

.lines .line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.lines .line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.lines .line:nth-child(3) {
  margin-left: 25%;
}

.lines .line-two::after {
  content: "";
  display: block;
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #d80650;
  -webkit-animation: moveLeftBounces-two 20s linear infinite;
  animation: moveLeftBounces-two 20s linear infinite;
}

.lines .line-two:nth-child(1)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.lines .line-two:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.lines .line-three::after {
  content: "";
  display: block;
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #d80650;
  -webkit-animation: moveLeftBounces-one 20s linear infinite;
  animation: moveLeftBounces-one 20s linear infinite;
}

.lines .line-three:nth-child(1)::after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.lines .line-three:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

@-webkit-keyframes moveLeftBounces-one {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes moveLeftBounces-one {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/*====================================================
--<	Techno Nivo Slider Area Css -->
======================================================*/
.nivo_slider_area {
  position: relative;
}
.nivo-caption {
  background: rgba(0, 0, 0, 0);
  height: 100%;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* slider title */
.text-center {
  text-align: center;
}
/* slider button */

.em-button-button-area a:hover {
  color: #fff;
  background: #0c5adb;
  border-color: #0c5adb;
}

a.em-active-button:hover {
  background: transparent;
  border-color: #fff;
}

/* directionNav */
.em-nivo-slider-wrapper .nivo-directionNav a:hover {
  background: #0c5adb;
  border-color: #0c5adb;
  color: #fff;
}
.em-nivo-slider-wrapper:hover .nivo-directionNav a {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;
  left: 50px;
}

.em-nivo-slider-wrapper:hover .nivo-directionNav .nivo-nextNav {
  left: auto;
  right: 50px;
}
/* controlNav */

.em-nivo-slider-wrapper .nivo-controlNav a:hover {
  background: #ffa700 none repeat scroll 0 0;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.cd-headline.clip span {
  display: inline-block;
  padding: 0 0 0;
}
.cd-headline.clip span b {
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
}
/* Appointment Css */
.form-control {
  height: 54px;
  background-color: #fff;
  border-color: transparent;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  border: 1px solid #e6e6e6;
  padding: 6px 20px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 5px;
}
.form-group .btn {
  background: #0c5adb;
  border: 0;
  display: inline-block;
  text-align: center;
  border-radius: 7px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: #fff;
  width: 100%;
  height: 54px;
}
.slider_bottom_shape_inner {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  z-index: -1;
}

/*
\3c !-- ============================================================== -->
\3c !-- Techno - Breatcome Area Css -->
\3c !-- ============================================================== -->*/
.slider {
  position: relative;
  width: 100%;
}
.tp-caption a {
  font-size: 17px !important;
  color: #fff;
  background: #0c5adb;
  padding: 12px 32px !important;
  margin-right: 16px;
  display: inline-block;
  border-radius: 5px;
  transition: 0.5s;
}
.tp-caption a:hover {
  background: #00247e;
}

/*
\3c !-- ============================================================== -->
\3c !-- Techno - Breatcome Area Css -->
\3c !-- ============================================================== -->*/
.breatcome_area {
  background: url({% static 'assets/images/slider/slider-10.jpg' %});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* height: 650px; - Removido para permitir altura automática */
  position: relative;
}
.breatcome_area:before {
  position: absolute;
  content: "";
  background-image: linear-gradient(
    to right,
    rgba(12, 90, 219, 0.85),
    rgba(12, 90, 219, 0.8),
    rgba(18, 85, 194, 0.7),
    rgba(34, 86, 172, 0.75),
    rgba(38, 85, 163, 0.75)
  );
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.breatcome_title {
  text-align: center;
}
.breatcome_title_inner h2 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
}
.breatcome_content ul li {
  display: inline-block;
}
.breatcome_content ul li a {
  color: #fff;
  opacity: 0.7;
  transition: 0.5s;
}
.breatcome_content ul li i {
  color: #fff;
  opacity: 0.7;
  padding: 0 5px;
}
.breatcome_content ul li span {
  color: #fff;
  opacity: 0.7;
}
.breatcome_content ul li a:hover {
  opacity: 1;
}

/*====================================================
--<	Techno Dark Slider Area Css -->
======================================================*/
/*====================================================
--<	Techno Landing area Css -->
======================================================*/
/*====================================================
--<	Techno Section Title Css -->
======================================================*/
.section_sub_title h6 {
  letter-spacing: 5px;
  color: #0c5adb;
  font-size: 16px;
}
.section_title.text_center {
  text-align: center;
}
.section_main_title h1,
.section_main_title h2 {
  font-weight: 800;
  margin: 0;
}
.text_left .section_main_title h1 {
  margin: 0;
  letter-spacing: -1px;
}
.section_main_title h1 span {
  color: #0c5adb;
}
.section_content_text p {
  font-size: 18px;
}
.text_center .section_content_text p {
  width: 75%;
  margin: auto;
  font-size: 19px;
}
.section_content_text.bold p {
  font-size: 22px;
  font-weight: 600;
}
.section_title.white .section_main_title h1,
.section_title.white .section_main_title h2 {
  color: #fff;
}
.section_title.white .section_sub_title h6 {
  color: #fff;
}
.section_title.white .section_content_text p {
  color: #fff;
}
/*style two*/
.section_sub_title h6 {
  letter-spacing: 0;
  color: #0c5adb;
  font-size: 16px;
}
/*odoo section content*/
/*style two*/
/*section title h5*/
.section_sub_title h5 {
  letter-spacing: 0;
  color: #0c5adb;
  font-size: 16px;
  position: relative;
  z-index: 1;
  font-weight: 600;
  text-transform: capitalize;
  padding: 0 0 18px 20px;
}
.section_sub_title h5:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: -12px;
  filter: drop-shadow(0px 5px 15px rgba(152, 179, 223, 0.2));
  background-color: #ffffff;
  width: 145px;
  height: 42px;
  border-radius: 4px;
}
.upper.section_sub_title h5:before {
  right: 0;
  margin: auto;
  left: 15px;
  top: -12px;
}
.feature-area .section_sub_title h5:before {
  width: 174px;
}
.service-area .section_sub_title h5:before {
  width: 174px;
}
.why-choose-us .section_sub_title h5:before {
  width: 161px;
}
.testimonial-area .section_sub_title h5 {
  color: #fff;
}
.testimonial-area .section_sub_title h5:before {
  filter: drop-shadow(0px 5px 15px rgba(152, 179, 223, 0.2));
  background-color: rgba(255, 255, 255, 0.14901960784313725);
  width: 173px;
}
.blog-area .section_sub_title h5:before {
  width: 123px;
  height: 42px;
}
/*section title style two*/
/*style upper*/
.upper.section_sub_title1 h6:before {
  position: absolute;
  content: "";
  left: -1px;
  top: 11px;
  width: 32px;
  height: 1px;
  background: #0c59db;
}
/*style three*/

.section_sub_title1 h5:before {
  position: absolute;
  content: "";
  z-index: -1;
  right: -10px;
  top: -2px;
  background: #cedef8;
  width: 30px;
  height: 26px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 65% 100%);
  transition: 0.5s;
}
/*section title three hover*/
.section_sub_title1 h5:hover {
  padding-left: 14px;
}
.section_sub_title1 h5:hover:before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 103%;
}
/*section title slider18*/
.style-two .section_sub_title h5:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 7px;
  top: 8px;
  right: inherit;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: #0c5adb;
}
.style-two .section_sub_title h5:after {
  position: absolute;
  content: "";
  left: 1px;
  top: 3px;
  right: inherit;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: rgba(35, 181, 255, 0.7019607843137254);
}
/*section title before center*/
.style-two.up .section_sub_title h5:before {
  left: -104px;
  right: 0;
  margin: auto;
}
.style-two.up .section_sub_title h5:after {
  left: -114px;
  right: 0;
  margin: auto;
}
.section_sub_title span {
  position: relative;
  z-index: 1;
}
.style-two.up .section_sub_title span:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 71px;
  top: 8px;
  right: inherit;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: #0c5adb;
}
.style-two.up .section_sub_title span:after {
  position: absolute;
  content: "";
  left: 74px;
  top: 3px;
  right: inherit;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: rgba(35, 181, 255, 0.7019607843137254);
}

.section_main_title h5 {
  font-size: 18px;
  letter-spacing: 0;
  margin: 0 0 20px;
  position: relative;
  left: 31px;
  text-transform: uppercase;
}

.section_main_title h5:before {
  position: absolute;
  content: "";
  top: -2px;
  left: -31px;
  height: 29px;
  width: 22px;
  background: url({% static 'assets/images/icon2.png' %});
  background-repeat: no-repeat;
}

/*End section title*/

.em_bar {
  background: #9b50db none repeat scroll 0 0;
  height: 2px;
  margin: 0 auto 5px;
  width: 62px;
}
.text_left .em_bar {
  margin: 0;
}
.em_bar_bg {
  height: 5px;
  width: 90px;
  background: #cbbded;
  margin: 20px auto;
  position: relative;
  border-radius: 30px;
}
.em_bar_bg:before {
  content: "";
  position: absolute;
  left: 0;
  top: -2.7px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #0c5adb;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: MOVE-BG;
  animation-name: MOVE-BG;
}
@-webkit-keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(88px);
    transform: translateX(88px);
  }
}

@keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(88px);
    transform: translateX(88px);
  }
}
/*about area style two*/
.about_area {
  position: relative;
}
.up.single_about_thumb {
  position: relative;
  left: -92px;
}
/*about right*/
/*about button*/
.abou-button1 a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #00247e;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
}
.abou-button1 a:hover:before {
  width: 180%;
}
.abou-button1 a:hover {
  color: #fff;
}
/*icons two*/
/*about shape*/
/*about bottom atea */
.happy-client-title p:before {
  position: absolute;
  content: "";
  right: 5px;
  top: 15px;
  width: 60px;
  height: 2px;
  background-color: rgba(12, 90, 219, 0.25098039215686274);
}
/*about area style three*/
.abou-button2 a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #00247e;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
}
.abou-button2 a:hover:before {
  width: 180%;
}
.abou-button2 a:hover {
  color: #fff;
}
/*about area four*/
/*em about counter box*/
/*em dot*/
.em-dot:before {
  position: absolute;
  content: "";
  z-index: 2;
  left: 20px;
  top: 0;
  width: 6px;
  height: 6px;
  background: #0c5adb;
  border-radius: 5px;
}
.em-dot:after {
  position: absolute;
  content: "";
  z-index: 1;
  left: 20px;
  top: 15px;
  width: 6px;
  height: 6px;
  background: #0c5adb;
  border-radius: 5px;
}
.em-dot span:before {
  position: absolute;
  content: "";
  left: 4px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #0c5adb;
}
.em-dot span:after {
  position: absolute;
  content: "";
  z-index: -1;
  top: -4px;
  right: -32px;
  width: 32px;
  height: 30px;
  background: #dbe5f6;
  clip-path: polygon(55% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: 0.5s;
}
/*about counter title*/

/*em about service*/
.em-dot span:hover:after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/*em shape*/
/*about area style four*/
/*about right*/
.style-five .em-about-icon-box:before {
  top: 0;
  left: 0;
  right: 0;
  width: 0%;
  content: "";
  z-index: -3;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  transition: 500ms all ease;
  background: linear-gradient(10deg, #1129b9, #2474fb) border-box;
  border-radius: 8px;
}
.style-five .em-about-icon-box:after {
  top: 2px;
  left: 2px;
  content: "";
  z-index: -3;
  width: 98.5%;
  height: 96.5%;
  position: absolute;
  background-color: #f6f7ff;
  border-radius: 5px;
}
.style-five .em-about-icon-box:hover:before {
  width: 100%;
}
.style-five .em-about-icon-box1:before {
  top: 0;
  left: 0;
  right: 0;
  width: 0%;
  content: "";
  z-index: -3;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  transition: 500ms all ease;
  background: linear-gradient(10deg, #1129b9, #2474fb) border-box;
  border-radius: 8px;
}
.style-five .em-about-icon-box1:after {
  top: 2px;
  left: 2px;
  content: "";
  z-index: -3;
  width: 98.5%;
  height: 96.5%;
  position: absolute;
  background-color: #fff3ec;
  border-radius: 5px;
}
.style-five .em-about-icon-box1:hover:before {
  width: 100%;
}

/*about shape*/
/*about-area style five upper*/
/*about right*/
/*about special button */
.about_area.style-five.upper .about-button-text p:before {
  position: absolute;
  content: "";
  left: 2px;
  top: 14px;
  background: #0c5adb;
  width: 40px;
  height: 2px;
}
/*about shape*/

/* about style upper */

/* seo Info */

/**
======================================================
           <--  start-about Section -->
======================================================**/
.about-section {
  background-image: url({% static 'assets/images/about-bg.png' %});
  background-repeat: no-repeat;
  padding: 92px 0px 100px;
}

.about-button a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  transform: scale(1);
  background: #00247e;
  border-radius: 30px;
  transition: 0.5s;
  z-index: -1;
}

.about-button a:hover::before {
  width: 100%;
  left: 0;
  filter: hue-rotate(360deg);
}

/**
======================================================
       <-- end-about Section -->
======================================================**/

/*====================================================
--<	Techno brand Area Css -->
======================================================*/
.brand-img img:hover {
  filter: invert(15%) sepia(32%) saturate(77%) hue-rotate(6deg) brightness(11%)
    contrast(60%);
}

/* ==== Brnad Style Two ==== */

.brand-area {
  padding: 90px 0 90px;
  background: #eff2f7;
}

.brand-thumb:hover img {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
}

/*====================================================
--< Techno Counter Area Css -->
======================================================*/
.counter-area {
  background: url({% static 'assets/images/counter-bg.png' %});
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 70px 0 45px;
}
.row.counter-shap {
  position: relative;
  z-index: 1;
}
/*counter title*/
.counter-title h1 {
  font-size: 48px;
  color: #ffffff;
  font-weight: 800;
  display: inline-block;
}
.counter-title h6 {
  color: #fff;
  font-weight: 600;
}
.counter-title span {
  font-size: 48px;
  color: #fff;
  font-weight: 800;
  display: inline-block;
}
/*em border*/
.ems-border {
  width: 36px;
  height: 36px;
  border: 2px solid #33dbff;
  border-radius: 30px;
  position: relative;
  z-index: -1;
  top: -66px;
  left: -7px;
}
.em-border1 {
  width: 36px;
  height: 36px;
  border: 2px solid #ffcd33;
  border-radius: 30px;
  position: relative;
  z-index: -1;
  top: -66px;
  left: -7px;
}
.em-border2 {
  width: 36px;
  height: 36px;
  border: 2px solid #ff6a33;
  border-radius: 30px;
  position: relative;
  z-index: -1;
  top: -66px;
  left: -7px;
}
/*countner shape images*/
.counter-shape-thumb {
  position: absolute;
  left: -178px;
  top: -108px;
  animation: moveLeftBounce 3s linear infinite;
}
.counter-shape-thumb1 {
  position: absolute;
  right: -77px;
  bottom: -69px;
}

/*====================================================
--< Techno Flipbox Top Feature Area Css -->
======================================================*/
.top_feature .techno_flipbox .techno_flipbox_back::before {
  display: none;
}
/*feature style two*/
.em-feature-single-box:before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(to left, #2475fc, #1129b9);
  border-radius: 10px;
  transition: 0.5s;
}
.em-feature-single-box:after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/box-bg.png' %});
  border-radius: 10px;
  transition: 0.5s;
}
/*box inner*/
.feature-single-box-inner:before {
  position: absolute;
  content: "";
  z-index: 1;
  right: -117px;
  top: 19px;
  background: url({% static 'assets/images/feature1.png' %});
  width: 80%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: center;
}
.feature-single-box-inner1:before {
  position: absolute;
  content: "";
  z-index: 1;
  right: -117px;
  top: 19px;
  background: url({% static 'assets/images/feature2.png' %});
  width: 80%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: center;
}
/*em-feature-title*/
/*feature hover*/
.em-feature-single-box:hover:before {
  left: 0;
  width: 100%;
}
.em-feature-single-box:hover .em-feature-title h2,
.em-feature-single-box:hover .em-feature-title p {
  color: #fff;
}
.em-feature-single-box:hover .em-feature-button a {
  background: transparent;
  border: 1px solid #fff;
}
/*em feature style two*/
.style-two .feature-extra-single-box:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 104px;
  left: 9px;
  width: 222px;
  height: 236px;
  border-radius: 5px;
  background: #fff;
  transition: 0.5s;
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 92%);
}
.em-feature-single-box:before {
  position: absolute;
  content: "";
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  background: url({% static 'assets/images/bg-feature.png' %});
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  transition: 0.5s;
}
.em-feature-single-box:after {
  position: absolute;
  content: "";
  z-index: -1;
  top: -57px;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: url({% static 'assets/images/feature-shape-2.png' %});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: 0.5s;
}
.style-two .feature-single-box-inner:before {
  position: inherit;
  content: "";
  z-index: -1;
  right: 25px;
  top: -61px;
  background: url({% static 'assets/images/ellipse1.png' %});
  width: 80%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: center;
}
.style-two .feature-single-box-inner2:before {
  position: inherit;
  content: "";
  z-index: -1;
  right: 25px;
  top: -61px;
  background: url({% static 'assets/images/ellipse2.png' %});
  width: 80%;
  height: 78%;
  background-repeat: no-repeat;
  background-position: center;
}
/*feature shape*/
/*all hover*/
.feature-extra-single-box:hover:before {
  background: linear-gradient(to left, #2475fc, #1129b9);
}

/*End feature area*/

/* New Flip Box Style */

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
.flipbox_area.odoo .techno_flipbox .techno_flipbox_back::before {
  background: #0c5adbeb;
}
.flipbox_area.odoo
  .techno_flipbox
  .techno_flipbox_back
  .flipbox_button
  a:hover {
  color: #fff;
  border-color: #1f1c51;
  background: #1f1c51;
}

.section_title.white .section_main_title h2 {
  font-size: 39px;
}

/* Top Feature Style Two */
/* Feature Style Three */
.feature_style_three:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(41, 55, 66, 0.6);
  content: "";
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  border-radius: 10px;
}
.feature_style_three:hover:before {
  background: rgba(12, 90, 219, 0.85);
}
.feature_style_three:hover .feature_style_three_text,
.feature_style_three:hover .feature_style_three_butoon a {
  opacity: 1;
}
.feature_style_three:hover .feature_style_tree_content {
  bottom: 45px;
}

/* Feature Style Four */
.feature_style_four:hover {
  background: #0c5adb;
  transform: translateY(-10px);
}
.feature_style_four:hover .feature_style_four_title h4,
.feature_style_four:hover .feature_style_four_text p,
.feature_style_four:hover .feature_style_four_button a {
  color: #fff;
}
/* Feature Style Five */
.feature_style_five::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url({% static 'assets/images/dot.png' %});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.feature_style_five:hover {
  background: #0c5adb;
  transform: translateY(-10px);
}
.feature_style_five:hover .feature_style_five_title h4,
.feature_style_five:hover .feature_style_five_text p {
  color: #fff;
}
/* Feature Style Six */
.single_feature_six::before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: #0c5adb;
  content: "";
  transition: 0.5s;
  z-index: -1;
}
.single_feature_six:hover::before {
  width: 100%;
}
/* Feature Style Seven */

.single_feature_seven:before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45px;
  height: 45px;
  content: "";
  background: #adc7f1;
  transition: 0.3s;
  z-index: -1;
}
.single_feature_seven:hover:before {
  width: 100%;
  height: 100%;
  background: #0c5adb;
}
.single_feature_seven:hover .single_feature_six_seven_icon .icon,
.single_feature_seven:hover .single_feature_seven_content h4,
.single_feature_seven:hover .single_feature_seven_content p {
  color: #fff;
}
/* Feature Style Eight */
.feature_style_eight:hover {
  box-shadow: 0 10px 30px 3px rgba(99, 119, 238, 0.4);
}
.feature_style_eight:hover .feature_style_eight_icon {
  color: #fff;
}
.feature_style_eight:hover .feature_style_eight_icon {
  box-shadow: 0 10px 30px 3px rgba(99, 119, 238, 0.4);
}
.feature_style_eight_icon:before {
  position: absolute;
  content: "";
  background: rgba(12, 90, 219, 0.1);
  width: 100%;
  height: 100%;
  left: -8px;
  top: -5px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}
.feature_style_eight:hover .feature_style_eight_icon:before {
  background: rgba(12, 90, 219, 0.8);
}
.feature_style_eight:hover .anim-icon {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
/* Feature Style Nine */
/*====================================================
--<	Techno Flipbox Area Css -->
======================================================*/
.techno_flipbox .techno_flipbox_back::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent -80%, #00247e);
}
.icon {
  font-size: 45px;
  line-height: 45px;
}

/* Flipbox Hover Css */
.techno_flipbox:hover .techno_flipbox_font {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.techno_flipbox:hover .techno_flipbox_back {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.techno_flipbox .techno_flipbox_back .flipbox_button a:hover {
  color: #fff;
  border-color: #0c5adb;
  background: #0c5adb;
}
/*====================================================
--<	Techno About Area Css -->
======================================================*/
.single_about_thumb_inner img {
  width: 100%;
}
.about_skill_thumb img {
  width: 100%;
}
.pd_gap {
  background: #fff;
  padding: 18px 0 18px;
  border-radius: 8px;
}
/* Experience Css */
/* Data Science About */
.data_science_about_icon .icon:before {
  position: absolute;
  content: "";
  background: rgba(12, 90, 219, 0.1);
  width: 100%;
  height: 100%;
  left: -8px;
  top: -5px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}
.singel_about_left_inner:hover .data_science_about_icon .icon:before {
  background: rgba(12, 90, 219, 0.9);
}
.singel_about_left_inner:hover .data_science_about_icon .icon {
  color: #fff;
}
/*====================================================
--< Techno subscribe area Css -->
======================================================*/
/*subscribe shape*/
/*====================================================
--< Techno call do action Css -->
======================================================*/
/*call do action title*/

/*call do button*/
.call-button a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #00247e;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
}

/*call do all hover*/
.call-button a:hover:before {
  width: 180%;
}
/*call do shape*/
/*call do area style two*/

/*call do button*/

/*call do shape thumb*/

/*=====Start-call-do Style 3 ======*/

/*=======End-call-do-section=======*/

/*====================================================
--< Techno prossess ber Css -->
======================================================*/
/*prossess ber*/
.barfiller {
  width: 100%;
  height: 8px;
  background: #4b4c59;
  position: relative;
  margin-bottom: 28px;
  margin-top: 11px;
  border-radius: 5px;
  filter: drop-shadow(0px 10px 10px rgba(60, 115, 206, 0.2));
  background-color: rgba(12, 90, 219, 0.2);
}
.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  background: #333;
  z-index: 1;
}
.barfiller .tipWrap {
  display: none;
}
.barfiller .tip {
  font-size: 16px;
  left: 0px;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
  top: -39px;
}
/*span.tip {
    display: none;
}*/
span.fill {
  background: #0cd0b2 !important;
  border-radius: 5px;
}

/*====================================================
--<	Techno Shape Images Css -->
======================================================*/

.single_slider_shape {
  position: relative;
}
.single_slider_shape_image {
  position: absolute;
  right: -250px;
  top: -499px;
  z-index: 1;
}
/* .single_slider_shape_image img {
  width: 70%;
} */

.single_about_shape {
  position: relative;
}
.single_about_shape_thumb {
  position: absolute;
  bottom: -70px;
  z-index: -1;
  left: -94px;
}
.single_about_shape_thumb img {
  width: 70%;
}
.border_ift:after {
  content: "";
  width: 536px;
  height: 475px;
  background: 0 0;
  position: absolute;
  bottom: 12px;
  right: -41px;
  z-index: -1;
  border: 15px solid #00000008;
  animation: bannerimage_translate 3s infinite;
  animation-play-state: running;
  animation-direction: alternate;
}
@keyframes bannerimage_translate {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  0% {
    transform: translateX(-30px) translateY(-12px);
  }
}

/* Home Three About Shape */
/* Data Science Shape Css */
/* Affiliate Intelligent About */
/*====================================================
--<	Techno Service Area Css -->
======================================================*/
.service_style_one_title h4:before {
  position: absolute;
  content: "";
  left: 0;
  top: 37px;
  height: 1px;
  width: 100px;
  background: #d1d1d1;
  margin: auto;
  right: 0;
}
.service_style_one:hover .service_style_one_button a {
  background-color: #0c5adb;
  color: #fff;
  border-color: #0c5adb;
}
.service_style_one:hover .service_style_one_icon i {
  background-color: #0c5adb;
  color: #fff;
}

/* Service Style Two */
.service_style_two_number h5:before {
  position: absolute;
  left: 34px;
  top: 14px;
  height: 2px;
  width: 32px;
  content: "";
  background: #0c5adb;
}
.service_style_two_title h4:hover {
  color: #0c5adb;
}
/* Service Style Three 8*/
.service_style_three:hover {
  border: 2px solid #0c5adb;
}
.service_style_three_title h4:hover {
  color: #0c5adb;
}
.service_style_three:hover .service_style_three_bt_icon a {
  background: #0c5adb;
  color: #fff;
}

/* Service Style Four */
.service_style_four:hover {
  background: #0c5adb;
  transform: translateY(-8px);
}
.service_style_four:hover .service_style_four_icon i,
.service_style_four:hover .service_style_four_title h4,
.service_style_four:hover .service_style_four_text p,
.service_style_four:hover .service_style_four_button a {
  color: #fff;
}
/* Service Style Five */
.service_style_five:hover {
  border: 1px solid #0c5adb;
  background: #0c5adb;
  transform: translateY(-8px);
}
.service_style_five:hover .service_style_five_title h4,
.service_style_five:hover .service_style_five_icon i,
.service_style_five:hover .service_style_five_text p,
.service_style_five:hover .service_style_five_button a {
  color: #fff;
}

/* Service Style Six */
.single_service_inner::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #0c5adb;
  content: "";
  z-index: -1;
  border-radius: 0 30px 30px;
  transition: 0.5s;
  border: 1px transparent;
}
.single_service_inner:hover .single_service_content h4 {
  color: #fff;
}
.single_service_inner:hover {
  background: #0c5adb;
}
.single_service_inner:hover::before {
  background: #fff;
}
.single_service_inner:hover .single_service_icon i {
  color: #0c5adb;
}

/* Service Style Seven */

.service_style_seven {
  box-shadow: 0 0 15px rgba(51, 51, 51, 0.1);
  transition: 0.5s;
}
.service_style_seven_content {
  overflow: hidden;
}
.service_style_seven_title h4 {
  font-weight: 700;
}
.service_style_seven:hover {
  box-shadow: 0 0 40px rgb(51 51 51 / 33%);;
}
/* Service Style Eight */
.service_style_eight::before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  height: 50px;
  width: 50px;
  background: #0c5adb;
  border-radius: 0 0 5px 0;
  z-index: -1;
  transition: 0.5s;
}
.service_style_eight:hover::before {
  height: 100%;
  width: 100%;
}
/* Service Style Nine */
.service_style_nine:hover {
  box-shadow: 0 10px 30px 3px rgba(99, 119, 238, 0.4);
}
.services_style_nine_icon .icon:before {
  position: absolute;
  content: "";
  background: rgba(12, 90, 219, 0.1);
  width: 100%;
  height: 100%;
  left: -8px;
  top: -5px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.2);
  transition: 0.5s;
}
.service_style_nine:hover .services_style_nine_icon .icon {
  color: #fff;
}
.service_style_nine:hover .services_style_nine_icon .icon:before {
  background: rgba(12, 90, 219, 0.8);
}
/* Service Style Ten */
.single_service_style_ten::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  height: 3px;
  width: 20%;
  background: #0c5adb;
  transition: 0.5s;
}
.single_service_style_ten:hover:before {
  width: 100%;
}
.single_service_style_ten:hover {
  transform: translateY(-10px);
}
.single_service_style_ten:hover .service_style_ten_icon .icon {
  background: rgba(12, 90, 219, 0.9);
  color: #fff;
}
/* Service Style Eleven */
.single_service_style_eleven {
  box-shadow: 0 10px 30px 3px rgba(99, 119, 238, 0.4);
  padding: 35px 30px 30px;
  margin-bottom: 30px;
  border-radius: 0 40px;
  position: relative;
  z-index: 1;
}
.single_service_style_eleven::before {
  position: absolute;
  left: 0;
  content: "";
  height: 0%;
  width: 100%;
  background: #0c5adb;
  bottom: 0;
  z-index: -1;
  border-radius: 0 40px;
  transition: 0.5s;
}
/* .service_style_eleven_icon {
  float: left;
  margin-right: 15px;
} */
.service_style_eleven_icon .icon {
  background: rgba(12, 90, 219, 0.1);
  height: 58px;
  width: 58px;
  line-height: 58px;
  font-size: 28px;
  text-align: center;
  border-radius: 50%;
  color: #0c5adb;
  transition: 0.5s;
}
.service_style_eleven_title h4 {
  transition: 0.5s;
  font-size: 21px;
}
.service_style_eleven_text p {
  transition: 0.5s;
}
.single_service_style_eleven:hover .service_style_eleven_title h4,
.single_service_style_eleven:hover .service_style_eleven_text p,
.single_service_style_eleven:hover .servic_style_eleven_button a {
  color: #fff;
}
.single_service_style_eleven:hover .service_style_eleven_icon .icon {
  transform: rotate(360deg);
}
.single_service_style_eleven:hover::before {
  height: 100%;
}
.single_service_style_eleven:hover .service_style_eleven_icon .icon {
  background: #fff;
}
/* Service Style Twelve */

.owl-dots {
  text-align: center;
  position: relative;
  right: 0;
  left: 0;
  cursor: pointer;
  margin-top: 0;
  padding: 30px 0 50px 0;
  background: #ffffff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.owl-dot.active {
  background: linear-gradient(135deg, #0c5adb 0%, #1a73e8 100%);
  width: 16px;
  height: 16px;
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(12, 90, 219, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.owl-dot {
  height: 12px;
  width: 12px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  line-height: 12px;
  display: inline-block;
  margin: 0 8px;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  opacity: 0.7;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.owl-dot:hover {
  opacity: 1;
  transform: scale(1.1);
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

.owl-dot:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.owl-dot.active:before {
  opacity: 1;
  width: 5px;
  height: 5px;
}
/*service style thirteen*/
/*em service box*/
.em-service-single-box:after {
  position: absolute;
  content: "";
  z-index: -1;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: url({% static 'assets/images/box-bg2.png' %});
  transition: 0.5s;
}
/*box inner*/
.em-service-single-box:after {
  position: absolute;
  content: "";
  z-index: -1;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: url({% static 'assets/images/box-bg2.png' %});
  transition: 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/*service content*/
/*em icon*/
/*em service title*/
/*em service button*/
/*service all hover*/
.em-service-single-box:hover:after {
  left: 0;
  width: 100%;
}
.em-service-single-box:hover .em-icon-title h4,
.em-service-single-box:hover .em-service-title h2,
.em-service-single-box:hover .em-service-text p,
.em-service-single-box:hover .em-service-button a {
  color: #fff;
}
.em-service-single-box:hover .em-service-box-inner:before {
  background-color: rgba(255, 255, 255, 0.1019607843137254);
}

/*service area style three*/
.em-service-single-box1:before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #0b59db;
  z-index: -1;
  transition: 0.5s;
}
/*em icon*/
.em-icon1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/t2.png' %});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/*upper*/
.upper1.em-service-single-box1:before {
  background: #01cb99;
}
.upper2.em-service-single-box1:before {
  background: #ea599e;
}
.upper3.em-service-single-box1:before {
  background: #ff6a01;
}
.upper4.em-service-single-box1:before {
  background: #764ae5;
}
/*service active box*/

/*all service hover*/
.em-service-single-box1:hover:before {
  height: 100%;
  top: 0;
}
.em-service-single-box1:hover .em-service-title1 h2,
.em-service-single-box1:hover .em-service-text1 p {
  color: #fff;
}
/*style five service area*/
/*service content*/
/*service icon*/
.style-five .em-icon1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/em.png' %});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.style-five .upper.em-icon1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/em1.png' %});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.style-five .upper1.em-icon1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/em2.png' %});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/*service title*/
/*service five all hover*/
.style-five .upper1.em-service-single-box1:before {
  background-image: linear-gradient(to bottom right, #ff9b07 0%, #fd4f2f 90%);
}
.style-five .upper2.em-service-single-box1:before {
  background-image: linear-gradient(to bottom right, #0b59db 0%, #00237d 90%);
}
.style-five .upper3.em-service-single-box1:before {
  background-image: linear-gradient(to bottom right, #ca30fb 0%, #8c3ffd 90%);
}

/* =======< Service Style 14 > ======= */

/* All Hover  */

.service_title h4:hover {
  color: #2475fcff;
}

.service_single_box:hover .service_button a {
  color: #2475fcff;
}

.service_single_box:hover .service_button a i {
  color: #2475fcff;
  right: 0px;
  opacity: 1;
}

.service_single_box:hover .service_icon img {
  -webkit-filter: grayscale(0);
}

/* Service Style 15 */

/*================start-service-section===================*/

/* Start Upper Class
============================ */

/* End Upper Class 
==========================*/

.service-single-box:hover {
  transform: translate3d(0, -9px, 0);
}

.service-single-box:hover .service-button a i {
  opacity: 1;
  right: -3px;
}

.service-single-box:hover .service-button a span {
  opacity: 1;
  margin-left: 0;
}

/*================end-service- style 15 ===================*/

/*================= Start Service Style 16 ==================*/

.services-icon i:after {
  position: absolute;
  content: "";
  top: -5px;
  left: 40px;
  height: 32px;
  width: 32px;
  border-radius: 100%;
  background: #2466d7;
  z-index: -1;
  opacity: 0.7;
}

.style2.tchn-button a:before {
  background: linear-gradient(to left, #1129b9, #2475fc 100%);
}

.style2.tchn-button a:after {
  background: linear-gradient(to left, #1129b9, #2475fc 100%);
}

.upp .services-icon i:after {
  background: #ff9a62;
}

/* Play Button */

@-webkit-keyframes ripple-red {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(212, 90, 219, 0);
  }
}

.about-ply-button a:hover {
  color: #2875ff;
  background: #333;
}

/* ================= End Service Style 16 ==================== */

/*====================================================
--<	Techno Service Details Area Css -->
======================================================*/
.service-details-pn-list ul li a:hover {
  background: #0c5adb !important;
  color: #fff !important;
}
.service-details-big-button a:hover {
  background: #00247e;
}
.service-details-pn-about::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(12, 90, 219, 0.85);
  z-index: -1;
}
/*-- Main Service Details --*/
.service-details-research-button a:hover {
  background: #00247e;
}

/*====================================================
--<	Techno Team Area Css -->
======================================================*/
.single_team_thumb:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 90, 219, 0.85);
  content: "";
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
/* Team Hover Css */
.single_team:hover {
  transform: translateY(-10px);
}
.single_team:hover .single_team_icon {
  opacity: 1;
  right: -1px;
}
.single_team_content h4:hover {
  color: #0c5adb;
}
.single_team:hover .single_team_thumb:before {
  opacity: 1;
}
/* Team Style Three */
.team_style_three_thumb_inner:before {
  position: absolute;
  left: -70px;
  bottom: -59px;
  height: 120px;
  width: 133%;
  background: #fff;
  content: "";
  -webkit-transform: skew(-30deg);
  -khtml-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -o-transform: skew(-30deg);
  transform: skew(-98deg);
}
.team_style_three-thumb:after {
  position: absolute;
  left: 0;
  bottom: 4px;
  height: 100%;
  width: 100%;
  background: #0c5adb;
  content: "";
  -webkit-transform: skew(1deg);
  -khtml-transform: skew(69deg);
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -o-transform: skew(-30deg);
  opacity: 0;
  transition: 0.5s;
  z-index: -1;
}
.team_style_three_content:before {
  background: #0c5adb;
  transition: 0.5s;
}

.team_style_three_content:before,
.team_style_three_content:after {
  content: "";
  top: 0;
  left: 0;
  right: 50px;
  bottom: 0;
  position: absolute;
  z-index: -2;
  -webkit-transform: skew(-30deg);
  -khtml-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -o-transform: skew(-30deg);
  transform: skew(-30deg);
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  -webkit-transition: all 0.2s linear 0ms;
  -khtml-transition: all 0.2s linear 0ms;
  -moz-transition: all 0.2s linear 0ms;
  -ms-transition: all 0.2s linear 0ms;
  -o-transition: all 0.2s linear 0ms;
  transition: all 0.2s linear 0ms;
}
.team_style_three:hover .team_style_three_icon {
  opacity: 1;
  top: 35px;
}
.team_style_three:hover .team_style_three-thumb:after {
  opacity: 1;
  -webkit-transform: rotate(-10deg);
  -webkit-transform: skew(1deg);
  transform: rotate(-10deg);
}
.team_style_three:hover .team_style_three_sub_title {
  margin-top: -20px;
  opacity: 0;
}
.team_style_three:hover .team_style_three_content:before {
  background: #00247e;
  transition: 0.5s;
}
/* Team Style Three */
.single_team_style_three:hover .single_team_style_three_icon {
  top: 82%;
  opacity: 1;
}
/*team area style four*/
.style-four .single_team:before {
  position: absolute;
  content: "";
  z-index: -1;
  bottom: -21px;
  left: 13px;
  width: 223px;
  height: 95px;
  border-radius: 5px;
  background: #fff;
  clip-path: polygon(4% 18%, 100% 21%, 100% 100%, 0 80%);
  transition: 0.6s;
}
.style-four .single_team_thumb1::before {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  background-image: linear-gradient(109deg, #4152c3 0%, #508df8 100%);
  content: "";
  transition: 0.5s;
  width: 0%;
  opacity: 0.7;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
/*team content*/
/* team all hover*/
.style-four .single_team:hover .single_team_thumb1:before {
  width: 100%;
  left: 0;
}
.style-four .single_team:hover .single_team_icon1 {
  bottom: 25px;
  opacity: 1;
}
.style-four .single_team:hover .single_team:before {
  background-image: linear-gradient(109deg, #4152c3 0%, #508df8 100%);
}
.style-four .single_team:hover:before {
  background: linear-gradient(109deg, #cbd2ea 0%, #d2def6 100%);
  transition: 0.5s;
}
.style-four .single_team:hover .single_team_content h4 {
  color: #0c5adb;
}
/*section title */
.team_area.style-four .style-two.up .section_sub_title span:before {
  left: 84px;
  top: 8px;
}
.team_area.style-four .style-two.up .section_sub_title span:after {
  left: 86px;
  top: 2px;
}
.team_area.style-four .style-two.up .section_sub_title h5:before {
  left: -128px;
  right: 0;
}
.team_area.style-four .style-two.up .section_sub_title h5:after {
  left: -137px;
  right: 0;
}
/*owl carousel*/
.owl-nav3 .owl-dots {
  text-align: center;
  position: relative;
  bottom: -90px;
  right: 0;
  left: 0;
  cursor: pointer;
  height: 2px;
  background-color: rgba(35, 35, 35, 0.10196078431372549);
}
.owl-nav3 .owl-dot {
  height: 2px;
  width: 215px;
  background-color: transparent;
  line-height: 30px;
  display: inline-block;
  margin-right: 12px;
  border-radius: 103px;
  transition: 0.5s;
  position: relative;
  top: -17px;
}
.owl-nav3 .owl-dot.active {
  background: #0c5adb;
  width: 218px;
  height: 6px;
  transition: 0.5s;
}
.owl-nav3 .owl-prev {
  position: absolute;
  left: -60px;
  top: inherit;
  bottom: -36%;
  transform: translateY(-50%);
  opacity: 1;
  transition: 0.3s;
}
.owl-nav3 .owl-next {
  position: absolute;
  right: -60px;
  top: inherit;
  bottom: -36%;
  transform: translateY(-50%);
  opacity: 1;
  transition: 0.3s;
}

.owl-nav3 .owl-next i,
.owl-prev i {
  background-image: linear-gradient(109deg, #1129b9 0%, #2473fb 100%);
  border-radius: 100%;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 53px;
  width: 53px;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.21, 1.1, 0.25, 1) 0s;
  line-height: 53px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  display: inline-block;
  font-size: 18px;
}

/* Team style 1 */

/* Social icon */
/* All hover */

.team_single_box:hover .team_social_icon {
  bottom: 27px;
  opacity: 1;
}

/* ======== Team Style 2 ========= */

.style-2 .single_team_thumb:before {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  background: #0c5adb;
  content: "";
  opacity: 0.8;
  transition: 0.5s;
}

.single_team:hover .single_team_thumb::before {
  opacity: 0.8;
  top: 0;
}

.style-2 .single_team:hover .single_team_icon2 {
  opacity: 1;
  transform: translateY(-70%);
}

.style-2 .single_team:hover .single_team_thumb:before {
  width: 100%;
  left: 0;
}

/*====================================================
--<	Techno Mission & Vission Area Css -->
======================================================*/

/* Mission Tab */

.tabs li a {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  outline: none;
  transition: all 0.5s ease-in-out;
  margin: 10px 10px 30px 0;
  color: #232323;
  padding: 13px 30px;
  border-radius: 30px;
  border: 1px solid#ECECEE;
  background: #fff;
}

ul.tabs li {
  display: inline-block;
}

.tabs_item {
  display: none;
}

.tabs_item:first-child {
  display: block;
}

li.current a {
  background: #0c5adb;
  color: #fff;
}

/*========= Accordion ========  */

.mission-section .accordion a:before {
  top: 36px;
}

.mission-section .accordion a:after {
  top: 41px;
}

.mission-section .accordion li a span:hover {
  color: #0c5adb;
  transition: 0.5s;
}

/* ========= Mission & Vission Style 2 ========== */

/*animation*/

@keyframes kmacb-circle-img-anim {
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}

/*====================================================
--<	Techno Info  Area Css -->
======================================================*/

.info-content h2 {
  font-size: 20px;
  margin: 0 0 5px 0;
}

.info-content span {
  line-height: 25px;
}

/* ===== Info form box ===== */

/*====================================================
--<	Techno Software Area Css -->
======================================================*/
.single_software_box_content::before {
  position: absolute;
  left: 0;
  content: "";
  bottom: 0;
  height: 0%;
  width: 100%;
  background: #0c5adb;
  z-index: -1;
  transition: 0.5s;
  border-radius: 3px;
}
.single_software_box:hover .single_software_box_content::before {
  height: 100%;
}
.single_software_box:hover .single_software_box_content h5 {
  color: #fff;
}

/*====================================================
--<	Techno Case Study Area Css -->
======================================================*/
.single_case_study_thumb::before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: rgba(12, 90, 219, 0.85);
  opacity: 0;
  transition: 0.5s;
  border: 3px solid #fff;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* Portfolio Hover */
.single_case_study:hover .single_case_study_thumb {
  transform: scale(1.03);
}
.single_case_study:hover .single_case_study_content {
  opacity: 1;
  top: 50%;
}
.single_case_study:hover .single_case_study_thumb::before {
  opacity: 1;
}
.single_case_study_content_inner h2 a:hover {
  color: #0c5adb;
}
.single_case_study_icon i:hover {
  background: #0c5adb;
  color: #fff;
}

/* Case Study Style Two */
.case_study_style_two_thumb:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 90, 219, 0.65);
  content: "";
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  border-radius: 10px;
}
.case_study_style_two:hover .case_study_style_two_content {
  top: 70%;
}
/* Style Three */
.three .case_study_style_two:hover .case_study_style_two_content {
  top: 60%;
}
/* Style Four */
.four .single_case_study:hover .single_case_study_content {
  bottom: -100px !important;
  top: inherit;
}
/*====================================================
--<	Techno Case Study Details Area Css -->
======================================================*/
.single-case-study-details {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  padding: 50px;
}
.case-study-details-title h3 {
  font-weight: 800;
}
.case-study-details-content-inner ul li span {
  font-size: 20px;
  margin-right: 10px;
  font-weight: 700;
}
.case-study-details-content-inner ul li {
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  font-weight: 300;
  padding: 13px 0;
  text-transform: capitalize;
  list-style: none;
}
.case-study-details-content-inner ul li:last-child {
  border-bottom: none;
}
.case-study-details-thumb img {
  width: 100%;
}
/*====================================================
--<	Techno Portfolio Area Css -->
======================================================*/

/* Portfolio Nav */
.portfolio_menu ul li a:before {
  position: absolute;
  content: "";
  left: 0;
  top: 24px;
  height: 2px;
  width: 0%;
  background: #fff;
  transition: 0.5s;
}
.portfolio_nav ul li:hover {
  color: #fff;
  background: #0c5adb;
}

/* Single Portfolio */
.single_portfolio {
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
  transition: 0.5s;
}
.single_portfolio_thumb {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  transition: 0.5s;
}
.single_portfolio_thumb img {
  width: 100%;
}
/* Portfolio Hover */
.single_portfolio:hover .single_portfolio_thumb {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.portfolio_menu ul li a:hover:before {
  width: 100%;
}
.single_portfolio:hover .single_portfolio_content {
  opacity: 1;
  bottom: 0px;
}
.single_portfolio_icon i:hover {
  background: #fff;
  color: #135ef3;
}
/* Portfolio Style Two */
.style_two .single_portfolio_thumb:after {
  content: "";
  background: rgba(12, 90, 219, 0.85);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  transform-origin: top;
  -moz-transition: all 0.5s ease-out 0s;
  -webkit-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;
  -moz-transform: perspective(15em) rotateX(-90deg);
  -o-transform: perspective(15em) rotateX(-90deg);
  -ms-transform: perspective(15em) rotateX(-90deg);
  -webkit-transform: perspective(15em) rotateX(-90deg);
  transform: perspective(15em) rotateX(-90deg);
  z-index: 1;
  left: 0;
}
.style_two .single_portfolio:hover .single_portfolio_thumb:after {
  -moz-transform: perspective(0) rotateX(0);
  -o-transform: perspective(0) rotateX(0);
  -ms-transform: perspective(0) rotateX(0);
  -webkit-transform: perspective(0) rotateX(0);
  transform: perspective(0) rotateX(0);
}
/* Portfolio Style Three */

.style_three .single_portfolio_thumb {
  position: relative;
}
.style_three .single_portfolio_thumb::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 0%;
  width: 100%;
  background: rgba(12, 90, 219, 0.75);
  transition: 0.5s;
}
.style_three .single_portfolio:hover .single_portfolio_thumb::before {
  height: 100%;
}
/*fortfolio style four*/
/*portfolio nav*/
.style-four .portfolio_nav ul li:hover {
  color: #fff;
  background: linear-gradient(to left, #2475fc, #1129b9);
}
/*portfolio box*/
/*portfolio thumb*/
.single_portfolio_thumb1:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  border-radius: 10px;
  background-color: rgba(4, 96, 248, 0.6);
  transition: 0.8s;
}
/*portfolio content*/
/*portfolio icon*/
/*portfolio title*/
/*port icon thumb*/
/* portfolio hover */

.style-four .single_portfolio:hover .single_portfolio_content_inner h2 a {
  color: #0c5adb;
  text-decoration: underline;
}
.style-four .single_portfolio:hover .single_portfolio_thumb1:before {
  height: 100%;
  top: 0;
}
.style-four .single_portfolio:hover .single_portfolio_icon {
  opacity: 1;
  top: 39%;
}

/* Portfoli Sytle 2 */

/* All hover */

.single_portfolio:hover .portfolio_content {
  opacity: 1;
  bottom: 45px;
}

/*=====================Start portfolio Style 5 section==================*/

.portfolio-thumb::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 92%;
  background: rgba(12, 90, 219, 0.85);
  content: "";
  right: 0;
  margin: auto;
  bottom: 0;
  z-index: 22;
  opacity: 0;
  transition: 0.5s;
  border-radius: 5px;
}

.portfolio-content h2 a:hover {
  color: #0c5adb;
}

.portfolio-single-box:hover:before {
  opacity: 0;
  transition: 0.5s;
}

.portfolio-single-box:hover .portfolio-thumb::after,
.portfolio-single-box:hover .portfolio-content {
  opacity: 1;
  top: 50%;
  bottom: inherit;
  transform: translateY(-50%);
}

/* ==== Portfolio Counter ====  */

.single-counter-box {
  position: relative;
  margin-bottom: 30px;
}

.single-counter-box:before {
  position: absolute;
  content: "";
  top: 10px;
  right: 72px;
  height: 90%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.upper3.single-counter-box:before {
  background: inherit;
}

.counter-icon i {
  font-size: 50px;
  display: inline-block;
  height: 86px;
  width: 78px;
  line-height: 80px;
  background: #ff9a62;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  clip-path: polygon(0% 0%, 100% 7%, 100% 100%, 0% 100%);
}

/*=====================start-portfolio-section==================*/

/*====================================================
--<	Techno  How It Work Area Css -->
======================================================*/
.single_it_work_content_list::before {
  position: absolute;
  right: -75px;
  top: 26px;
  height: 1px;
  width: 130px;
  content: "";
  background: #ddd;
}
.single_it_work_content_list.three::before {
  display: none;
}
.single_it_work_content_list span:after {
  position: absolute;
  left: -10px;
  top: -10px;
  height: 65px;
  width: 65px;
  content: "";
  background: #0c5adb;
  z-index: -1;
  border-radius: 50%;
  right: 0;
  margin: auto;
  opacity: 0.4;
  transition: 0.3s;
}
.single_it_work_content_list span:before {
  position: absolute;
  left: -20px;
  top: -20px;
  height: 85px;
  width: 85px;
  content: "";
  background: #0c5adb;
  z-index: -1;
  border-radius: 50%;
  right: 0;
  margin: auto;
  opacity: 0.2;
  transition: 0.3s;
}
.single_it_work:hover .single_it_work_content_list span,
.single_it_work:hover .single_it_work_content_list span:before,
.single_it_work:hover .single_it_work_content_list span:after {
  transform: scale(1.1);
}
/*odoo work process*/
.how_it_work.odoo .work_progress_icon::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border: 2px solid #ddd;
  border-radius: 100%;
  bottom: -32px;
}
.how_it_work.odoo .work_progress_icon::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: auto;
  width: 2px;
  height: 40px;
  border-left: 2px dashed #ddd;
  border-radius: 100%;
  bottom: -74px;
}
.how_it_work.odoo .single_it_work_content_list span:before,
.how_it_work.odoo .single_it_work_content_list span:after {
  display: none;
}
.how_it_work.odoo .single_it_work::after {
  position: absolute;
  right: 0;
  top: 10px;
  content: "";
  background-image: url({% static 'assets/images/direction-sign.png' %});
  height: 40px;
  width: 200px;
  background-repeat: no-repeat;
  margin-right: -119px;
  background-size: contain;
}
.how_it_work.odoo .single_it_work_content_list::before {
  display: none;
}
.how_it_work.odoo .single_it_work.last:after {
  display: none;
}

.section_main_title h2 {
  font-size: 39px;
}
/* How It Work Style Tow */
.it_work_style_two .techno_flipbox .techno_flipbox_back::before {
  background: inherit;
}
/* How IT Work Style Three */
.style_three .single_how_it_work:hover .how_it_work_bg_thumb_inner_hv {
  top: -48px;
  opacity: 1;
}
.style_three .single_how_it_work:hover .how_it_work_icon .icon {
  color: #fff;
}
/*odoo contact section*/
/*odoo contact right side*/


.form-control {
  height: 54px;
  background-color: #fff;
  border-color: transparent;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  border: 1px solid #e6e6e6;
  padding: 6px 20px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 5px;
  width: 100%;
}
.odoo_contact_section .button:hover {
  background: #00247e;
  color: #fff;
}

.odoo_contact_section .form_box input:focus,
.odoo_contact_section .form_box textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/*process area style four*/
.process-contant:before {
  position: absolute;
  content: "";
  z-index: -1;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-image: linear-gradient(-45deg, #00237d 0%, #0b59db 100%);
  transition: 0.5s;
  border-radius: 5px;
}
.upper1.process-contant:before {
  background-image: linear-gradient(-45deg, #fe542d 0%, #ff950b 100%);
}
.upper2.process-contant:before {
  background-image: linear-gradient(-45deg, #8b3ffe 0%, #d02ffb 100%);
}
.upper3.process-contant:before {
  background-image: linear-gradient(-45deg, #ff4f2b 0%, #ff47a6 100%);
}
/*process icon*/
.proces-icon:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: -5px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url({% static 'assets/images/proces1.png' %});
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.upper1.proces-icon:before {
  background-image: url({% static 'assets/images/proces2.png' %});
}
.upper2.proces-icon:before {
  background-image: url({% static 'assets/images/proces3.png' %});
}
.upper3.proces-icon:before {
  background-image: url({% static 'assets/images/proces4.png' %});
}
/*process title*/
/*process shape*/
/*process all hover*/
.process-single-box:hover .process-contant:before {
  width: 100%;
  left: 0;
}
.process-single-box:hover .process-title h3,
.process-single-box:hover .process-text p {
  color: #fff;
}
/*process area style two*/
.process-contant1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  background: url({% static 'assets/images/process-bg2.png' %});
  border-radius: 5px;
  transition: 0.5s;
}
.style-two .process-number-inner:before {
  position: absolute;
  content: "";
  left: -9px;
  top: -12px;
  width: 46px;
  height: 47px;
  background: #1c53de;
  border-radius: 30px;
  z-index: -1;
  transition: 0.5s;
}
/*process title*/
/*upper box content*/
.style-two .upper .process-contant1:before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  background: url({% static 'assets/images/process-bg1.png' %});
  border-radius: 5px;
  transition: 0.6s;
}
.style-two .upper .process-number-inner:before {
  left: 37px;
  top: -9px;
  background: #23b5ff;
}
/*process all hover*/
.style-two .process-contant1:hover:before {
  transform: scale(1);
}
.style-two .process-contant1:hover .process-title h3 {
  color: #232323;
}
.style-two .process-contant1:hover .process-text p {
  color: #616161;
}
.style-two .upper .process-contant1:hover:before {
  transform: scale(1);
}
.style-two .upper .process-contant1:hover .process-title h3 {
  color: #fff;
}
.style-two .upper .process-contant1:hover .process-text p {
  color: #fff;
}
.style-two .process-contant1:hover .process-number-inner span {
  background-color: #1c53de;
}
.style-two .process-contant1:hover .process-number-inner:before {
  background-color: #23b5ff;
}
.style-two .upper .process-contant1:hover .process-number-inner span {
  background-color: #23b5ff;
}
.style-two .upper .process-contant1:hover .process-number-inner:before {
  background-color: #1c53de;
}
/*process shape*/

/* Process Style 1 */

/* all hover */

.single_process_work:hover {
  background: linear-gradient(-90deg, #2375fb 0%, #1129b9 100%);
}

/* ======Start Skill Ber Section ======== */

/*==================start-skills-section===============*/

.section_main_title p {
  padding: 22px 0 0;
}

.style2 .upp.barfiller:before {
  background: #0c5adb;
}

.style2 .upp2.barfiller:before {
  background: #ff6a33;
}

.style2 .barfiller:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #0cd0b2;
  top: 9px;
}

.style2 .barfiller:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  background: #0cd0b2;
  top: 9px;
}

/* Thumb img */

/*====================================================
--<	Techno  Pricing Area Css -->
======================================================*/
.single_pricing:hover {
  border: 1px solid #0c5adb;
}
.single_pricing:hover .pricing_body {
  border: 1px solid #0c5adb;
}
.single_pricing:hover .order_now a {
  background: #0c5adb;
  color: #fff;
  border: 1px solid #0c5adb;
}

/* Pricing Style Two */
.order_style2_now a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #0762f8;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
  transition: 0.5s;
}
.pricing_style2:hover {
  transform: translateY(-10px);
}
.pricing_style2:hover .order_style2_now a:before {
  width: 180%;
}
.pricing_style2:hover .order_style2_now a {
  color: #fff;
}
/* Pricing Style Three */
.pricing_head_three:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: url({% static 'assets/images/new/pricing-bg1.png' %});
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto;
  z-index: -1;
}
.single_pricing_three:hover .order_now a {
  background: #0c5adb;
  color: #fff;
}
/* Pricing Style Four */
.pricing_style_four_button a:before {
  position: absolute;
  left: 0;
  content: "";
  width: 10%;
  height: 100%;
  background: #0c5adb;
  top: 0;
  transition: 0.5s;
  z-index: -1;
}
.pricing_style_four:hover .pricing_style_four_button a:before {
  width: 100%;
}

/* Pricing Style 2 */

.pricing_single-box:before {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%);
  transition: 0.5s;
  z-index: -1;
}

.featur_itmes ul li:before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  top: 21px;
  left: 0;
  border-radius: 100%;
  background-image: linear-gradient(-90deg, #1129b9 0%, #2375fb 100%);
}

.pricing_button a:before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #0762f8;
  border-radius: 30px;
  transform: scale(0);
  transition: 0.5s;
}

/* All hover */

.pricing_single-box:hover .pricing_button a:before {
  transform: scale(1);
}

.pricing_single-box:hover:before {
  width: 100%;
  left: 0;
}

.pricing_single-box:hover .pricing_button a {
  color: #fff;
}

.style-1 .pricing_single-box:hover .pricing-head {
  border-bottom: 1px solid #fff;
}

.style-1 .pricing_single-box:hover .pricing_title h4,
.style-1 .pricing_single-box:hover .pricing_tk h2,
.style-1 .pricing_single-box:hover .featur_itmes ul li {
  color: #fff;
  opacity: 1;
}

/*====================================================
--<	Techno Process Area Css -->
======================================================*/

.single_process {
  text-align: center;
  position: relative;
  transition: 0.5s;
  margin-bottom: 30px;
}
.single_process_thumb {
  display: inline-block;
  border-radius: 100%;
  animation: checkAnim 2s infinite;
  height: 230px;
  width: 230px;
  line-height: 230px;
}
.single_process_thumb img {
  border-radius: 100%;
  border: 10px solid #fff;
  width: 100%;
}
.single_process_number {
  position: relative;
}
.single_process_number_inner {
  position: absolute;
  left: 0;
  bottom: -25px;
  margin: auto;
  transition: 0.5s;
  content: "";
  right: 0;
}
.single_process_number span {
  height: 50px;
  width: 50px;
  background: #0c5adb;
  display: inline-block;
  line-height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}
.single_process_content {
  padding-top: 30px;
}
.single_process_content h2 {
  font-size: 22px;
  font-weight: 700;
}
.single_process:hover .single_process_number_inner {
  bottom: 50px;
}
/* Process Style Two */

/*====================================================
--<	Techno Counter Area Css -->
======================================================*/
.border_bottom_lin::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 90px;
  width: 3px;
  background: #0c5adb;
  content: "";
  margin: auto;
}
/* Counter Style Three */
.counter_style_three.color2:hover {
  border-color: #fd8424;
}
.counter_style_three.color3:hover {
  border-color: #d83030;
}
.counter_style_three:hover {
  border: 2px solid #0c5adb;
}
/* Counter Style Four */
.counter_style_four_icon .icon:before {
  content: "";
  position: absolute;
  left: -23px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -8px;
  width: 85px;
  height: 85px;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  background-image: url({% static 'assets/images/shape/cn-shape.png' %});
  transform: rotate(-70deg);
  background-repeat: no-repeat;
  background-size: cover;
}
.counter_style_four:hover .counter_style_four_icon .icon:before {
  transform: rotate(-130deg);
}
/*odoo counter section*/
/*erpsection*/
/*odoo section*/

/*====================================================
--<	Techno Testimonial Area Css -->
======================================================*/
.single_testimonial_content_text:before {
  content: "";
  bottom: -20px;
  top: auto;
  border-color: #fff transparent transparent #fff;
  display: block;
  position: absolute;
  left: 0;
  margin-left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px;
}
/*odoo */
.testimonial_area.odoo .single_testimonial_content_text {
  position: relative;
  padding: 52px 30px 35px;
  -webkit-box-shadow: 0 25px 40px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 0 7px 0 rgb(0 0 0 / 10%);
  background: #fff;
  border-radius: 5px;
  text-align: left;
  margin-bottom: 40px;
}
.testimonial_area.odoo .single_testimonial_content_title h4 {
  font-size: 20px;
  margin-top: 0;
  font-weight: 700;
}
.testimonial_area.odoo .testi-star i.active {
  color: #0c5adb;
  font-size: 21px;
  margin: 0 1px;
}
.testimonial_area.odoo .single_Testimonial_inner_content {
  position: relative;
  top: 8px;
}
/* Testimonial Style Two */
@keyframes checkAnim {
  0%,
  100% {
    box-shadow: 0 0 0 5px rgba(12, 90, 219, 0.8);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(12, 90, 219, 0.8);
  }
}

/* Tesimonial Style Two */
#section-quote {
  width: 100%;
  /* height: 425px!important; */
  position: relative;
  overflow: hidden;
  text-align: center;
}
#section-quote > h2 {
  color: #0e1c2a;
  font-family:"Montserrat", sans-serif !important;
  font-size: 36px;
  font-weight: normal;
}
#section-quote > p {
  color: #767676;
  font-family:"Montserrat", sans-serif !important;
  font-size: 18px;
  text-align: center;
  margin-top: 10px;
}
#section-quote .container-quote {
  position: relative;
  width: 100%;
  height: 320px;
  margin: 30px 0 0;
  overflow: hidden;
  text-align: center;
}
#section-quote .container-quote .quote {
  max-width: 520px;
  width: 90%;
  position: absolute;
  top: 0px;
  left: 50%;
  cursor: pointer;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
#section-quote .container-quote .quote.hide-top {
  opacity: 0;
  transform: translateX(-50%) translateY(-40px);
  pointer-events: none;
}
#section-quote .container-quote .quote.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#section-quote .container-quote .quote.hide-bottom {
  opacity: 0;
  transform: translateX(-50%) translateY(40px);
  pointer-events: none;
}
#section-quote .container-quote .quote p {
  line-height: 28px;
  display: block;
}
#section-quote .container-quote .quote .container-info {
  display: inline-block;
  padding-left: 40px;
  position: relative;
  margin-top: 20px;
  text-align: left;
}
#section-quote .container-quote .quote .container-info .pp {
  height: 30px;
  width: 30px;
  border-radius: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 120%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* Quote info images now loaded via <img> tags in HTML template */
#section-quote .container-quote .quote .container-info .name {
  color: #444;
  font-size: 22px;
  font-weight: 600;
}
#section-quote .container-quote .quote .container-info .job {
  color: #666;
  font-size: 16px;
}
#section-quote .container-pe-quote {
  position: absolute;
  height: 100%;
  top: 0px;
  z-index: 1;
}
#section-quote .container-pe-quote.left {
  left: 110px;
}
#section-quote .container-pe-quote.right {
  right: 80px;
}
#section-quote .container-pe-quote .pp-quote {
  cursor: pointer;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation-name: floating;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
  will-change: transform;
  transform-origin: 50% 50%;
  transition: box-shadow 0.3s ease;
}
#container-general
  .anim-section-quote
  #section-quote
  .container-pe-quote
  .pp-quote {
  opacity: 1;
}
#section-quote .container-pe-quote .pp-quote .img {
  overflow: hidden;
  border-radius: 100%;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* Bubble images now loaded via <img> tags in HTML template */
#section-quote .container-pe-quote .pp-quote:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% + 5px);
  width: calc(100% + 5px);
  border-radius: 100%;
  background-color: #fff;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#section-quote .container-pe-quote .pp-quote:hover:after,
#section-quote .container-pe-quote .pp-quote.active:after {
  background: #0c5adb;
  -webkit-transform: translate(-50%, -50%) scale(1.05);
  -moz-transform: translate(-50%, -50%) scale(1.05);
  -ms-transform: translate(-50%, -50%) scale(1.05);
  -o-transform: translate(-50%, -50%) scale(1.05);
  transform: translate(-50%, -50%) scale(1.05);
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Testimonial Style Three */
.testimonial_style_three_content {
  position: relative;
  z-index: 1;
  padding: 50px 50px 50px 50px;
}
.testimonial_style_three_content::before {
  position: absolute;
  content: "";
  left: -100px;
  top: 0;
  height: 100%;
  width: 123%;
  background: #0c5adb;
  z-index: -1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 17% 0%);
}

.testimonial_style_three_title {
  border-left: 2px solid #fff;
  padding-left: 25px;
}
.testimonial_style_three_title h4 {
  color: #fff;
  font-weight: 800;
}
.testimonial_style_three_title span {
  color: #fff;
  font-weight: 600;
}
.testimonial_style_three_text p {
  color: #fff;
  font-size: 20px;
  font-style: italic;
}
.testimonial_style_three_reviwer_star i {
  color: #fff;
  font-size: 20px;
  display: inline-block;
  margin-right: 2px;
}
.testimonial_style_three_quote i {
  font-size: 50px;
  color: #fff;
}
/*testimonial area style two*/
.testimonial-area {
  background: url({% static 'assets/images/testi/testi-bg1.png' %});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/*testi counter box*/
.testimonial-single-box1 {
  position: relative;
  z-index: 1;
}
/*testi counter title*/
/*testimonial right box*/
/*testimonial owl carousel*/
.testimonial_list3 .owl-dots {
  text-align: center;
  position: absolute;
  right: -460px;
  bottom: 22px;
  left: 0;
  cursor: pointer;
  animation: 1.5s fadeInRight;
}
.testimonial_list3 .owl-dot {
  height: 12px;
  width: 12px;
  background: #548df7;
  line-height: 30px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 103px;
  transition: 0.5s;
}

.testimonial_list3 .owl-dot.active {
  background: #ff6933;
  width: 12px;
  height: 12px;
  transition: 0.5s;
}

/*testimonial style three*/
.testimonial-area.style-two {
  background: #f7f9fd;
  padding: 290px 0 170px;
}
/*testimonial all hover*/
.testimonial-content:hover {
  border-bottom: 12px solid #0b59db;
  border-right: 12px solid #0b59db;
}

/*owl carsousel*/
.testimonial-area.style-two .owl-dots {
  text-align: center;
  position: relative;
  right: 0;
  left: 0;
  cursor: pointer;
  top: 65px;
}
/*testimonial area style three*/
/*testimonial content*/
.style-three .testimonial-content1::before {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  filter: drop-shadow(0px 10px 20px rgba(35, 50, 83, 0.07));
  background-image: linear-gradient(-45deg, #00237d 0%, #0b59db 100%);
  content: "";
  transition: 0.5s;
  width: 0%;
  border-radius: 5px;
  z-index: -1;
}
.style-three .testimonial-content1:after {
  position: absolute;
  content: "";
  left: -15px;
  top: 18px;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/testi/testi-sp.png' %});
  background-repeat: no-repeat;
  background-position: center;
  animation: moveLeftBounce 3s linear infinite;
}
/*quote icon*/
.style-three .quote-icon:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/testi/testi-2.png' %});
  transition: 0.4s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
  opacity: 0;
}
.style-three .quote-icon:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url({% static 'assets/images/testi/testi-1.png' %});
  transition: 0.4s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
/*testi icon*/
/*testimonial active box*/
.style-three .active.testimonial-content1::before {
  left: 0;
  width: 100%;
}
.style-three .active.quote-icon:before {
  opacity: 1;
}
.style-three .active.quote-icon:after {
  opacity: 0;
}

/*testimonial hover*/
.style-three .testimonial-content1:hover:before {
  width: 100%;
  left: 0;
}
.style-three .testimonial-content1:hover .quote-icon:after {
  opacity: 0;
}
.style-three .testimonial-content1:hover .quote-icon:before {
  opacity: 1;
}
.style-three .testimonial-content1:hover .em-testimonial-title h6,
.style-three .testimonial-content1:hover .em-testimonial-text p,
.style-three .testimonial-content1:hover .quote-icon i {
  color: #fff;
}
/*testi5 owl nav*/
.owl-nav1 .owl-carousel .owl-nav.disabled {
  display: inline-block;
  position: absolute;
  bottom: -70px;
  left: 50%;
}
.owl-nav1 .owl-next i {
  background-color: transparent;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 40px;
  width: 40px;
  z-index: 1;
  transition: all 0.3s ease 0s;
  line-height: 40px;
  color: #0c5adb;
  border: 2px solid #0c5adb;
  text-align: center;
  margin-right: 25px;
  display: inline-block;
  font-size: 18px;
}
.owl-nav1 .owl-prev i {
  background-color: #0c5adb;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 40px;
  width: 40px;
  z-index: 1;
  transition: all 0.3s ease 0s;
  line-height: 40px;
  color: #fff;
  border: 2px solid #0c5adb;
  text-align: center;
  display: inline-block;
  font-size: 18px;
}

/* Testimonial Style two 2 */

.testimonial_content {
  overflow: hidden;
}

.testimonial_title h4 {
  font-size: 18px;
  font-weight: 700;
}

/*==================start-testimonial-section===================*/

.testimonial-section {
  background-image: url({% static 'assets/images/testi-bg.png' %});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 0px 0px;
}

.owl-carousel .owl-item img {
  display: inline-block;
}

.testimonial-thumb {
  position: relative;
  float: left;
  margin: -10px 20px 0px 0px;
}

.testimonial-thumb:before {
  content: "\f10d";
  font-family:"Montserrat", sans-serif !important;
  font-size: 14px;
  position: absolute;
  line-height: 35px;
  bottom: 0px;
  left: -9px;
  width: 36px;
  height: 36px;
  border: 2px solid#fff;
  top: -15px;
  border-radius: 100%;
  text-align: center;
  background: #0c5adb;
  color: #fff;
}

.testimonial-content2 h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.testimonial-content2 span {
  color: #fff;
  padding-top: 4px;
}

.testimonial-disc p {
  font-size: 16px;
  font-style: normal;
  width: 100%;
  color: #fff;
  line-height: 29px;
  padding: 38px 0 5px;
}

/* === Testi Counter Css ===*/

.upper.counter-box:before {
  position: absolute;
  content: "";
  top: 20px;
  left: -5px;
  height: 74%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.testimonial-section .counter-title h1 {
  font-size: 40px;
  color: #2676ff;
}

/* === Start Dots Css === */

.testimonial-list6 .owl-dots {
  text-align: right;
  position: absolute;
  right: 30px;
  bottom: 40px;
  cursor: pointer;
}

.testimonial-list6 .owl-dot {
  height: 15px;
  width: 15px;
  background: #548df7;
  line-height: 30px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 103px;
  transition: 0.5s;
  border: 1px dotted #548df7;
}

.testimonial-list6 .owl-dot.active {
  background: #ff6933;
  width: 15px;
  height: 15px;
  transition: 0.5s;
}

/* === End Dots Css === */

/*====================================================
--<	Techno Tab Area Css -->
======================================================*/
.nav-tabs .nav-item {
  margin: 0 5px;
}
.nav-tabs .nav-link {
  border: 1px solid #0c5adb !important;
  background: linear-gradient(180deg, rgba(48, 113, 180, 1) 0%, rgba(32, 64, 142, 1) 100%);
  padding: 22px 50px;
  font-size: 20px;
  color: #fff;
}
.nav-tabs .nav-item.active .nav-link {
  border: 1px solid #fff !important;
  background: #fff;
  color: #0c5adb;
}
.nav-tabs {
  border-bottom: inherit !important;
}
.nav-tabs .nav-link i {
  font-size: 30px;
  display: block;
  text-align: center;
  padding-bottom: 5px;
}
.tab_content_sub_text ul {
  display: block;
}
.tab_content_sub_text ul li {
  list-style: none;
  margin-bottom: 5px;
}
/*====================================================
--<	Techno Choose Us Area Css -->
======================================================*/
.choose_us .techno_flipbox .techno_flipbox_font::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    black 0%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* Style Two */
.choose_icon_lft {
  float: left;
}
.choose_icon_lft i {
  color: #0c5adb;
  height: 70px;
  width: 70px;
  line-height: 68px;
  border: 1px solid #307cff;
  border-radius: 4px 4px 4px 4px;
  font-size: 30px;
  text-align: center;
  background: transparent;
  transition: 0.5s;
}
.choose_content_title_lft h5 {
  font-weight: 700;
}
.choose_us_content:hover .choose_icon_lft i {
  background: #0c5adb;
  color: #fff;
}
/* New Choose Us */
.single_choose_us_content:hover .single_choose_us_icon .icon {
  background: transparent;
  color: #0c5adb;
}
/*style three*/
/*why choose us right thumb*/
/*why choose area style four*/
/*choose shape*/
/*why choose area style five*/
.style-five .choose-us-number:before {
  position: absolute;
  content: "";
  left: -7px;
  top: 4px;
  width: 34px;
  height: 34px;
  background-image: linear-gradient(131deg, #1129b9 0%, #2473fb 100%);
  border-radius: 30px;
  z-index: -1;
}
/*upper*/
.style-five .upper .choose-us-number:before {
  background: #23b5ff;
}
/*choose us right*/

/*choose us thumb*/

/*====================================================
--<	Techno Fun Faq Area Css -->
======================================================*/
/*====================================================
--<	Techno Accordion Area Css -->
======================================================*/
.main-accordion-lt {
  background: #2d2d2d;
}
.acd-items.acd-arrow {
  margin-left: 160px;
}
.panel-heading .panel-title a {
  background: #393939;
  display: block;
  font-weight: 600;
  padding: 10px 15px;
  position: relative;
  color: #fff;
  font-size: 18px;
}
.faq .panel-heading .panel-title a:hover {
  color: #0c5adb;
}
.acd-items .panel-heading {
  padding: 0;
}

.panel.panel-default {
  border-color: #e7e7e7;
  border-radius: inherit;
  box-shadow: inherit;
}
.panel-body p {
  color: #cccccc;
}
.default .panel-body p {
  color: #666;
}
.accordion-area .absod {
  padding: 0;
}
.panel-heading.mb-3 a i {
  font-size: 15px;
  margin-right: 10px;
}
.panel-group.symb .panel-heading a::after {
  content: "-";
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 7px;
  font-family:"Montserrat", sans-serif !important;
  font-weight: 900;
}
.panel-group.symb .panel-heading a.collapsed:after {
  content: "+";
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  font-family:"Montserrat", sans-serif !important;
  font-weight: 900;
}

/*style two*/

.style-two .panel-group.symb .panel-heading a.collapsed:after {
  top: 19px;
}

.style-two .panel-group.symb .panel-heading a::after {
  top: 17px;
}

/*====================================================
--<	Techno Contact Area Css -->
======================================================*/
.form_box input {
  width: 100%;
  height: 50px;
  padding-left: 15px;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  transition: 0.5s;
}

.form_box textarea {
  width: 100%;
  background: transparent;
  padding-left: 15px;
  padding-top: 20px;
  height: 250px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  transition: 0.5s;
}
.quote_btn button {
  background: #fff;
  border: 0;
  display: inline-block;
  text-align: center;
  padding: 14px 39px;
  border-radius: 7px;
  transition: 0.3s;
}
.quote_btn button:hover {
  background: #00247e;
  color: #fff;
}
.appointment_form .form_box input:focus,
.appointment_form .form_box textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.main_contact_area .form_box input {
  border: 1px solid #e6e6e6;
  color: #495057;
  background-color: #fff;
}
.main_contact_area .form_box textarea {
  border: 1px solid #e6e6e6;
  color: #495057;
  background-color: #fff;
}
.main_contact_area .quote_btn button {
  background: #0c5adb;
  color: #fff;
}
.main_contact_area .form_box input:focus,
.main_contact_area .form_box textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.map {
  width: 100%;
  margin: 0;
  height: 410px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
/* Contact Style Three */
.style_three .contact_address_company ul li {
  list-style: none;
  display: block;
  margin-bottom: 12px;
}
.style_three .contact_address_company ul li i {
  font-size: 25px;
  color: #fff;
  margin-right: 15px;
  height: 55px;
  width: 55px;
  line-height: 55px;
  background: #0c5adb;
  text-align: center;
  border-radius: 50%;
}
.style_three .contact_address_company ul li a {
  color: #616161;
}
.style_three .contact_from_box {
  box-shadow: 0 10px 30px 3px rgba(99, 119, 238, 0.4);
  background: #fff;
  padding: 35px 50px 40px;
  border-top: 8px solid #0c5adb;
  border-radius: 5px;
}
.style_three .form_box textarea {
  height: 180px;
}
.style_three .footer-bottom-content-copy p {
  color: #232323;
}
.style_three .footer-bottom-right-text a {
  color: #232323;
}
/*contact seo area */
/*seo thumb*/
/*right text*/
/*====================================================
--<	Techno Contact Address Area Css -->
======================================================*/
.contact_address_icon i {
  font-size: 40px;
  color: #0c5adb;
}
.single_contact_address_two {
  background: #fff;
  box-shadow: 0px 0px 37px 0px rgba(0, 0, 0, 0.2);
  padding: 30px 22px 37px;
  margin-bottom: 30px;
}
.single_contact_address_two_content h4 {
  font-size: 22px;
}
.single_contact_address_two_icon .icon {
  height: 70px;
  width: 70px;
  line-height: 70px;
  font-size: 35px;
  display: inline-block;
  background: #0c5adb;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  float: left;
  margin-right: 15px;
}
.single_contact_address_two_content span {
  color: #0c5adb;
  text-transform: uppercase;
}
.single_contact_rt_thumb img {
  width: 100%;
}
.cnt_box {
  background: #fff;
  box-shadow: 0px 0px 37px 0px rgba(0, 0, 0, 0.2);
}
.contact_sm_area .form_box input {
  border: 1px solid #ddd;
}
.contact_sm_area .form_box textarea {
  border: 1px solid #ddd;
  height: 180px;
}
.contact_sm_area .quote_btn button {
  background: #0c5adb;
  color: #fff;
}
.contact_sm_area .form_box input:focus,
.contact_sm_area .form_box textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.app .form_box textarea {
  height: 170px;
}
/* Contact Address Style Two */
.single_contact_now:hover .single_contact_now_inner {
  border-color: #0c5adb;
}
/*style three*/

/*====================================================
--<	Techno Blog Area Css -->
======================================================*/
.single_blog:hover {
  border-color: transparent;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.blog_page_button a:hover {
  color: #0c5adb;
}
.blog_page_title a:hover {
  color: #0c5adb;
}
.techno_blog_meta a:before {
  position: absolute;
  right: -6px;
  height: 14px;
  width: 1px;
  background: #666;
  content: "";
  top: 5px;
}
.techno_blog_meta a:hover {
  color: #0c5adb;
}

/*odoo blog*/

/* Style Blog All */
.single_blog:hover .single_blog_thumb.el_thumb img {
  transform: scale(1.2);
}
/*blog area style two*/
/*blog thumb*/
/*blog content*/

/*meta blog text*/
.meta-blog-text p:before {
  position: absolute;
  content: "";
  left: 0;
  top: 7px;
  width: 55%;
  height: 55%;
  background: url({% static 'assets/images/date.png' %});
  background-repeat: no-repeat;
  background-size: contain;
}
/*em blog title*/
/*em blog icon*/
/*blog button*/
/*blog all hover*/
.single-blog-box:hover .em-blog-title h2 a {
  color: #0c5adb;
  text-decoration: underline;
}
.single-blog-box:hover .blog-button a {
  color: #0c5adb;
}
.single-blog-box:hover .single-blog-thumb img {
  transform: scale(1.1);
}
.single-blog-box:hover {
  filter: drop-shadow(0 0 13px rgba(125, 149, 188, 0.2));
}
/*blog owl carousel*/
.blog-area.blog-new .owl-carousel:hover .owl-prev {
  left: inherit;
}
/*blog area style two*/
.blog-area .form_box input::placeholder {
  color: #fff;
}
/*contact title*/
.blog-area .contact-form-icon i:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: url({% static 'assets/images/contact.png' %});
  width: 100%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
}
/*contact form shape*/
/*blog box*/

/*blog post*/
.style-two .single-blog-box:hover .em-blog-title h2 a {
  color: #0c5adb;
  text-decoration: inherit;
}
/*blog area style three */

/* Blog Style 2 */

.style-2 .techno_blog_meta a:before {
  position: inherit;
}

/* user Info */

/* All hover */

.style-2 .single_blog:hover {
  box-shadow: inherit;
}

.style-2 .techno_blog_meta a:hover {
  background: #2475fc;
  color: #fff;
}

.user-btn a:hover {
  color: #2475fc;
}

.style-2 .single_blog:hover .tchno-button a {
  color: #2475fc;
}

.owl-nav .owl-next i,
.owl-prev i {
  background-image: linear-gradient(109deg, #1129b9 0%, #2473fb 100%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  opacity: 0;
  animation: zoomIn ease 3s;
  transition: 0.7s;
}

.blog-list2:hover .owl-nav .owl-next i,
.blog-list2:hover .owl-nav .owl-prev i {
  opacity: 1;
}

/* Blog New Button */

.tchn-button a:before {
  content: "";
  background: #2f6eff;
  height: 50%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  transition: 0.5s;
  z-index: -1;
}

.tchn-button a:after {
  content: "";
  background: #2f6eff;
  height: 50%;
  width: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  transition: 0.5s;
  z-index: -1;
}

.tchn-button a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}

.tchn-button a:hover:before {
  width: 100%;
  right: 0;
  left: auto;
}

/*================ Start-blog-section===================*/

.blog-meta p:hover {
  color: #0c5adb;
}

.blog-name a::before {
  content: "";
  background: #616161;
  width: 1px;
  height: 11px;
  position: absolute;
  right: -15px;
  top: 8px;
}

.blog-name a:hover {
  color: #0c5adb;
}

.blog-info h2 a:hover {
  color: #0c5adb;
}

.blog-button a:hover {
  color: #0c5adb;
}

/* === Owl Nav === */

/*================end-blog-section===================*/

/*====================================================
--<	Techno Footer Subscribe Area Css -->
======================================================*/
.subscribe_form_send button:hover {
  color: #fff;
}
/* Style Two*/
.style_two .subscribe_form_send button:hover {
  color: #fff;
}
/*subsctibe style three*/
/*content title*/
/*animation*/
@keyframes moveLeftBounce {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/*style four*/

/*====================================================
--< Techno Footer Middle Area Css -->
======================================================*/
.menu-quick-link-container ul li a {
  color: #fff;
  position: relative;
  transition: 0.5s;
}
.menu-quick-link-container ul li a:before {
  position: absolute;
  content: "";
  left: -24px;
  top: 10px;
  height: 1px;
  width: 13px;
  background: #fff;
}
.menu-quick-link-container ul li {
  padding-bottom: 10px;
  list-style: none;
}
.follow-company-icon a {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  display: inline-block;
  transition: 0.5s;
  background: transparent!important;
}
.follow-company-icon a:hover {
  color: #0c5adb;
}
.follow-company-text a p:hover {
  color: #0c5adb;
}
.menu-quick-link-container ul li a:hover {
  color: #0c5adb;
}
.recent-post-text a:hover {
  color: #0c5adb;
}
/* Footer Style Two */

.footer_middle_social_icon a:hover {
  background: #0c5adb;
}
.footer_bottom_menu_inner ul li a:hover {
  color: #0c5adb;
}
.footer_bg_shape:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 80%;
  width: 50%;
  background: url({% static 'assets/images/new/footer-bgdt.png' %});
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.6;
}
/* Footer Style Three */
.style_three .menu-quick-link-container ul li a {
  color: #232323;
}
.style_three .menu-quick-link-container ul li a:hover {
  color: #0c5adb;
}
.style_three .follow-company-icon a {
  color: #0c5adb;
}
.style_three .menu-quick-link-container ul li a:before {
  background: #0c5adb;
}
/*footer style four*/
a.social-icon-color {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #187dff;
  border-radius: 5px;
}
a.social-icon-color1 {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #229ff9;
  border-radius: 5px;
}
a.social-icon-color2 {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: linear-gradient(to top left, #e94d5a, #c327a2);
  border-radius: 5px;
}
a.social-icon-color3 {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #f70102;
  border-radius: 5px;
}
.style-four .follow-company-icon a:hover {
  color: #fff;
}
/*quick links*/
.style-four .menu-quick-link-container ul li a:hover {
  color: #fff;
}
/*popular post*/
/*contact info*/

/* footer style upper*/

/* Footer Style 2 */

.follow-company-icon {
  display: inline-block;
}

.style-2 .follow-company-icon a:hover {
  background: #fff;
  color: #1129b9;
}

.style-2 .company-contact a:hover i {
  background: #fff;
  color: #1129b9;
}

.style-2 .menu-quick-link-container ul li a:hover {
  color: #fff;
}

/* footer bottom */

/*====================================================
--<	Techno Footer Bottom Area Css -->
======================================================*/
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.23);
}
.footer-bottom-content-copy p {
  color: #fff;
}
.footer-bottom-right-text {
  text-align: right;
}
.footer-bottom-right-text a {
  color: #fff;
  display: inline-block;
}
.footer-bottom-right-text .absod {
  margin-right: 30px;
  position: relative;
}
.footer-bottom-right-text .absod::before {
  position: absolute;
  content: "";
  right: -17px;
  top: 6px;
  height: 14px;
  width: 1px;
  background: #fff;
  transform: skew(-20deg);
  display: none!important;
}

/*====================================================
--<	Techno Blog Details Area Css -->
======================================================*/
.techno-single-blog.admin:hover .techno-blog-thumb img {
  transform: scale(1.2);
}
/* Blog Details  Content CSS */
.blog_details_dtn_icon a i:hover {
  background: #0c5adb;
  border-color: #0c5adb;
  color: #fff;
}
/* POST REPLY CSS */
.blog_comments_section .post_meta span:hover {
  color: #03a9f4;
}
.blog_comments_section .post_meta span:last-child:before {
  display: none;
}
.commentst_meta_reply:hover {
  color: #03a9f4;
}

/* COMMENT FORM CSS */
.blog_reply .contact_bnt button:hover {
  background: #0d2352;
  color: #fff;
}
/* contact title css */

/* techno Form Css */
.blog_reply_coment_dtl .form_box input:focus,
.blog_reply_coment_dtl .form_box textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.paginations {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 28px;
}
.paginations a {
  width: 35px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  margin: auto 5px;
  border: 1px solid #ddd;
  color: #888;
}
.paginations a:hover,
.paginations a.current {
  background: #0c5adb;
  border-color: #0c5adb;
  color: #fff;
}

/*=============================
   techno Team Details Area Css
 =============================*/

/* Team Style Two */
.team_style_two:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(12, 90, 219, 0.85);
  content: "";
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 100%;
}
.team_style_two:hover .team_style_two_content {
  top: 50%;
  opacity: 1;
}
.team_style_two:hover:before {
  opacity: 1;
}

/*team style three*/

/*team thumb*/
.single_team_thumb1::before {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  background-image: -webkit-linear-gradient(-9deg, #533eff 0%, #740fd7 97%);
  content: "";
  transition: 0.5s;
  width: 0%;
  opacity: 0.6;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.single_team_thumb1:hover:before {
  width: 100%;
  left: 0;
}
/*team content*/

/*==========================
    techno vedio Area Css
 ===========================*/

/*==========================
    techno faq Area Css
 ===========================*/
/*faq section*/

/*accordion*/
ul.accordion {
  height: 510px;
}
.accordion li {
  position: relative;
  list-style: none;
  padding: 2px 0px 15px;
}
.accordion li a {
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 700;
  font-size: 20px;
  color: #232323;
}
.accordion li p {
  display: none;
  font-size: 16px;
  color: #828fa0;
  padding-top: 20px;
  margin: 0;
}
.accordion a:before {
  width: 2px;
  height: 12px;
  background: #232323;
  position: absolute;
  right: 43px;
  content: " ";
  top: 12px;
  transform: rotate(0deg);
  transition: all 0.2s ease-in-out;
}
.accordion a:after {
  width: 12px;
  height: 2px;
  background: #232323;
  position: absolute;
  right: 38px;
  content: " ";
  top: 17px;
  transition: all 0.2s ease-in-out;
}
.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: #1e54e7 !important;
}
.accordion a.active:before {
  display: none;
}
.accordion a.active {
  color: #1e54e7 !important;
}
/* faq area style two*/

/*faq thumb*/
/*accordion start*/
.upper.accordion li:before {
  position: absolute;
  content: "";
  z-index: -1;
  right: 27px;
  top: 0px;
  width: 33px;
  height: 33px;
  line-height: 33px;
  border-radius: 50%;
  filter: drop-shadow(0px 3px 10.5px rgba(254, 94, 40, 0.35));
  background-image: linear-gradient(0deg, #fd4f2f 0%, #ff9b07 100%);
}
.upper.accordion a:before {
  background: #fff;
}
.upper.accordion a:after {
  height: 2px;
  background: #fff;
}
.upper a.active:after {
  transform: rotate(0deg);
  transition: all 0.2s ease-in-out;
  background: #fff !important;
}
/*tab shape*/
.tab-shape {
  position: absolute;
  top: 0;
  right: -185px;
  animation: moveLeftBounce 3s linear infinite;
}
/*==========================
    techno Skill Area Css
 ===========================*/

/*=========================
   techno New Update Css
 =========================*/

/*images box*/

/*list item*/

/*=========================
   techno Error Page Area Css
 =========================*/
.error_page_area {
  padding: 65px 0 98px;
}
.single_error_inner {
  text-align: center;
}
.single_error_inner h1 {
  font-size: 150px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 30px;
}
.single_error_inner h1 span {
  color: #0c5adb;
}
.single_error_inner h2 {
  padding-bottom: 16px;
  font-size: 28px;
}
.single_error_button {
  margin-top: 30px;
}
.single_error_button a {
  background: #fff;
  color: #0c5adb;
  padding: 11px 26px;
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 5px;
  border: 2px solid #0c5adb;
}
.single_error_button a:before {
  position: absolute;
  content: "";
  top: 0px;
  height: 100%;
  left: -25%;
  width: 0%;
  background: #0c5adb;
  transform: skew(50deg);
  transition-duration: 0.6s;
  z-index: -1;
}
.single_error_button a:hover {
  color: #fff;
}
.single_error_button a:hover:before {
  width: 180%;
}
.input-group.error-page input:focus {
  border: 2px solid #0c5adb !important;
  background: transparent;
}
#scrollUp {
  background: linear-gradient(180deg, rgba(48, 113, 180, 1) 0%, rgba(32, 64, 142, 1) 100%);
  bottom: 10px;
  color: #fff;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  right: 10px;
  text-align: center;
  cursor: pointer!important;
  width: 50px;
  border-radius: 50%;
}

/*=============================================
    Search Popup
===============================================
***/
.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #000000;
}
.flaticon-multiply:before {
  content: inherit;
}
button.close-search i {
  font-size: 25px;
  color: #fff;
  display: inline-block;
}

/*===== bounce-animate ======*/
.bounce-animate {
  animation-name: float-bob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate3 {
  animation-name: float-bob3;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob3;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob3;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob3;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
.bounce-animate4 {
  animation-name: float-bob4;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -moz-animation-name: float-bob4;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob4;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob4;
  -o-animation-duration: 5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}
@-webkit-keyframes float-bob {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@-webkit-keyframes float-bob2 {
  0% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
  50% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
  }
}
@-webkit-keyframes float-bob3 {
  0% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  50% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
  }
  100% {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes float-bob4 {
  0% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px);
  }
  100% {
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}
@-webkit-keyframes float-bob5 {
  0% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px);
  }
  50% {
    -webkit-transform: translateY(-35px);
    transform: translateY(-35px);
  }
  100% {
    -webkit-transform: translateY(-75px);
    transform: translateY(-75px);
  }
}
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes moveleftbounce {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.rotateme {
  -webkit-animation-name: rotateme;
  animation-name: rotateme;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes rotate3d {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
}

/*Banner video animation*/

#spinnerbtn:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: none;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: -1;
  border-radius: 115px;
  border: 15px solid #0c5adb;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;

  -webkit-animation: spin2 5s infinite alternate linear,
    glow 3s infinite alternate linear;
  -moz-animation: spin2 5s infinite alternate linear,
    glow 3s infinite alternate linear;
  -ms-animation: spin2 5s infinite alternate linear,
    glow 3s infinite alternate linear;
  -o-animation: spin2 5s infinite alternate linear,
    glow 3s infinite alternate linear;
  animation: spin2 5s infinite alternate linear,
    glow 3s infinite alternate linear;
}

.white-color #spinnerbtn:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: none;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: -1;
  border-radius: 115px;
  border: 15px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

@keyframes "spin" {
  0% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes "spin" {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-ms-keyframes "spin" {
  0% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@-o-keyframes "spin" {
  0% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes "spin2" {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin2 {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes "spin2" {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes "spin2" {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes "spin2" {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes "glow" {
  0% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  50% {
    -webkit-box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb;
    box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb;
  }
  100% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@-moz-keyframes glow {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb,
      inset 10px -10px 30px #0c5adb, inset -10px 10px 30px #0c5adb;
  }
  100% {
    box-shadow: none;
  }
}
@-webkit-keyframes "glow" {
  0% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  50% {
    -webkit-box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb,
      inset 10px -10px 30px #0c5adb, inset -10px 10px 30px #0c5adb;
    box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb,
      inset 10px -10px 30px #0c5adb, inset -10px 10px 30px #0c5adb;
  }
  100% {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@-ms-keyframes "glow" {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb,
      inset 10px -10px 30px #0c5adb, inset -10px 10px 30px #0c5adb;
  }
  100% {
    box-shadow: none;
  }
}
@-o-keyframes "glow" {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 10px -10px 30px #0c5adb, -10px 10px 30px #0c5adb,
      inset 10px -10px 30px #0c5adb, inset -10px 10px 30px #0c5adb;
  }
  100% {
    box-shadow: none;
  }
}
.white-color1 #spinnerbtn:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: none;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: -1;
  border-radius: 115px;
  border: 15px solid #fff;
  border-top: 15px solid #00247e;
  border-bottom: 15px solid #00247f;
}

/* LOADER COMENTADO PARA OPTIMIZAR PAGESPEED - Eliminar spinning dots y efecto persiana que afecta tiempo de carga
/******Loader*****/

.loader-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.8s 1s ease;
  z-index: 999;
}

.loader {
  position: relative;
  display: block;
  z-index: 201;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  transition: all 1s 1s ease;
  background: #0c5adb;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: #fff;
  transform: rotate(0deg) translate(30px);
  animation: rotate 1.1s ease infinite;
}
.loader:after {
  animation-delay: 0.5s;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg) translate(30px);
  }
}

.loader-wrapper .loder-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #111;
  z-index: 2;
}
.loader-wrapper .loder-section.left-section {
  left: 0;
  transition: 1s 1.4s ease;
}
.loader-wrapper .loder-section.right-section {
  right: 0;
  transition: 1s 1.4s ease;
}

/** When page loaded **/
.loaded .loder-section.left-section {
  left: -100%;
}
.loaded .loder-section.right-section {
  right: -100%;
}
.loaded .loader-wrapper {
  visibility: hidden;
}
.loaded .loader {
  top: -100%;
  opacity: 0;
}
/* FIN LOADER COMENTADO — linea huerfana neutralizada 2026-07-19.
   El error de sintaxis hacia que el navegador descartara tambien la regla
   div#particles { position: relative; } — se conserva descartada para no
   cambiar el comportamiento actual. */

#webcoderskull {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 20px;
  width: 100%;
}
div#particles .slider16 {
  background: inherit;
}
div#particles .slider18 {
  background: inherit;
}

/* contact */
:root {
  --primary-color: #4a90e2;
  --whatsapp-color: #25d366;
  --telegram-color: #0088cc;
  --phone-color: #e74c3c;
}

body {
  font-family:"Montserrat", sans-serif !important;
  padding-top: 140px !important; /* Space for fixed header */
}

.main-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.whatsapp:hover {
  background-color: var(--whatsapp-color);
}

.telegram:hover {
  background-color: var(--telegram-color);
}

.phone:hover {
  background-color: var(--phone-color);
}

/* .show {
  display: block;
  animation: fadeInUp 0.4s ease;
} */

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Custom styles for homepage carousel */
#home-carousel {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#home-carousel .owl-carousel {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#home-carousel .owl-stage-outer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Eliminar espacio entre carousel y especialidades */
.main-container.mb-5.pt-5.p-5 {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* Asegurar que el carousel ocupe todo el espacio vertical disponible */
.slider18 .item {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.slider18 .slider_area {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

/* Eliminar margin-top del owl-nav */
.owl-theme .owl-nav {
  margin-top: 0 !important;
}

/* ==================================================== */
/* HEADER AUTO-HIDE & SCROLL OPTIMIZATION */
/* ==================================================== */

/* Header auto-hide functionality */
.header-area {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 999;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* HIGHEST PRIORITY: Mobile padding fix - Must be at end to override all other body rules */
@media only screen and (max-width: 959px) {
  body.body,
  body {
    padding-top: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  body.body,
  body {
    padding-top: 0 !important;
  }
}

@media only screen and (max-width: 480px) {
  body.body,
  body {
    padding-top: 0 !important;
  }
}

/* Override Bootstrap spacing classes for academic offer pages */
@media (min-width: 992px) {
  .mt-lg-5 {
    margin-top: 0 !important;
  }
}

/* Override theme padding classes */
.pt-80 {
  padding-top: 0 !important;
}