/*
    Template Name  : Electrical4U
	  Description	   : Electrical HTML5 Responsive Template
    Version        : 1.0
/*
================================================
/* Table of Content
==================================================

 Fonts - Poppins and Roboto
 Common CSS
 Header CSS
 Slider CSS
 CTA Area
 About Area 
 Our Team Sec 
 Counter Area
 Services Area 
 Testimonials Area 
 Projects Area 
 Blog Area 
 Contact Area 
 Responsive CSS

/*
================================================
 Fonts - Poppins and Roboto
================================================
*/

@import url('https://fonts.googleapis.com/css?family=Poppins:wght@300,400,500,600,700,800|Roboto:300,400,500,700');
:root {
  --clr-primary: #f26b31;
  --clr-primary-2: #e6875f;
  --clr-secondary: #003674;
  --clr-light: #f7f7f7;
  --clr-light-2: #cdcdcd;
  --clr-white: #fff;
  --clr-dark: #333;
  --clr-body: #555;
  --clr-grey: #f8f8f8;
  --clr-light-grey: #999;
 }
/*
================================================
 Common CSS
================================================
*/
html, body {height: auto; width: 100%; margin: 0;padding: 0;overflow-x: hidden; font-size: 62.5%; box-sizing: border-box; }
* { margin: 0;padding: 0;}
body {font-family: 'Roboto', sans-serif;font-size: 15px;line-height: 1.57143;font-weight: 400;color: var(--clr-body);}
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif;margin-top: 0;}
a {color: #2d2e2e;transition: all 0.3s ease 0s;}
a:hover {color: #242c42;text-decoration: none;}
a, a:hover, a:active, a:focus { outline: none;text-decoration: none;}
.btn, .btn * {transition: all 0.3s ease 0s;}
i { transition: all 0.4s ease-in-out 0s;}
.transition3s {	transition: all 0.3s ease-in-out 0s;}
ul, li {list-style: outside none none;}
ul {list-style: outside none none;margin: 0;padding: 0;}
.img, img { max-width: 100%; -webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s; height: auto;}
  section {padding:80px 0;}
  .grey-bg { background: var(--clr-grey);}
/* Sec Title */ 
.sec-title { position: relative; margin-bottom: 50px;}
.sec-title h2 { color: var(--clr-dark); font-weight: 600;line-height: 45px; margin-bottom: 10px; margin-top: 0; font-size: 45px;}
.sec-title p { font-size: 16px; line-height: 22px; margin-bottom: 0;}
/*Theme Button*/
.tm-btn { padding: 1.2rem 2rem; border: 2px solid var(--clr-white); font-weight: 600; font-size: 1.6rem; line-height: 1;
  color: var(--clr-white); position: relative; z-index: 1; display: inline-block; text-transform: capitalize; transition: .5s ease; }
.tm-btn:hover { background-color: var(--clr-white); color: var(--clr-heading); }
.tm-btn-2 {padding: 1rem 2rem;font-weight: 700;font-size: 1.6rem;line-height: 1;color: var(--clr-white);background-color: #4DA6FF;
  position: relative; z-index: 1; text-transform: uppercase; gap: 8px; border-radius: 3rem; overflow: hidden; display: inline-block; display: flex; align-items: center; outline: none; border:none;}
.tm-btn-2 i { height: 4rem; width: 4rem; line-height: 4rem; font-size: 1.8rem; background-color: var(--clr-white); color: var(--clr-dark);
    border-radius: 50%;display: inline-block;text-align: center;transition: all .5s ease-in-out; margin-right: 8px; }
.tm-btn-2::before { position: absolute;content: '';z-index: -1;background-color: var(--clr-primary-2); top: 0; right: 0; height: 100%;
    width: 0%; border-radius: 3rem;transition: all .5s ease-in-out; }
.tm-btn-2:hover { color: var(--clr-white); }
.tm-btn-2:hover::before {width: 100%; }
.tm-btn-2:hover i { background-color: #4DA6FF; color: var(--clr-white); }  
/** Scroll Top **/
#scrollUp { width: 35px;height: 35px;background: #4DA6FF;-webkit-transition: all 0.2s;transition: all 0.2s;font-size: 25px;
	color: var(--clr-white);border-radius: 50%;display: inline-block;text-align: center;line-height: 35px;bottom: 10%;right: 4%;position: fixed;z-index: 999;}
#scrollUp:hover {background: #4DA6FF;color: var(--clr-white);}
#scrollUp i {display: block;padding-top: 5px;}
#scrollUp:after { position: absolute; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 1; z-index: -1; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
  background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.popup {
    display: none; /* Oculta el popup por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    z-index: 9999;
    text-align: center;
    overflow: auto; /* Permite el desplazamiento si la imagen es más grande que la pantalla */
}

.popup-content {
    color: #fff;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.popup-content img {
    max-width: 33%; /* Ajusta el tamaño máximo de la imagen */
    height: auto;
}

.close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
    color: #fff;
    font-size: 35px;
}


/*
================================================
 Header CSS
================================================
*/
.header-area .top-header { background: #4DA6FF; color: var(--clr-white); position: relative; z-index: 2; padding: 15px 0; }
.header-area .top-header:after { position: absolute; right: 0; top: 0; content: ""; width: 65%; height: 100%; background: var(--clr-secondary);z-index: -1; }
.header-area .top-header .openClose-time { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center;
 -ms-flex-align: center;align-items: center;  }
.header-area .top-header .openClose-time i { font-size: 14px; margin-right: 6px; line-height: initial;}
.header-area .top-header .openClose-time p {font-size: 14px; font-weight: 500; margin:0}
.header-area .top-header .contact-information {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
 -webkit-box-pack: end; -webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end; }
.header-area .top-header .contact-information .contact-information-phone { display: -webkit-box; display: -webkit-flex;
  display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
margin-right: 40px;}
.header-area .top-header .contact-information .contact-information-phone i {margin-right: 8px; line-height: initial;}
.header-area .top-header .contact-information .contact-information-phone a {color: var(--clr-white); -webkit-transition: .5s;-o-transition: .5s;
    transition: .5s; font-size: 14px;font-weight: 500;}
.header-area .top-header .contact-information .contact-information-phone a:hover {color: #4DA6FF;}
.header-area .top-header .contact-information .contact-information-social { display: -webkit-box; display: -webkit-flex;display: -ms-flexbox;
    display: flex;-webkit-box-align: center; -webkit-align-items: center;-ms-flex-align: center; align-items: center;}
.header-area .top-header .contact-information .contact-information-social span {font-size: 14px;font-weight: 500;margin-right: 10px;}
.header-area .top-header .contact-information .contact-information-social a {color: var(--clr-white);-webkit-transition: .5s; -o-transition: .5s;
    transition: .5s;font-size: 14px;font-weight: 500;margin-right: 14px;}
.header-area .top-header .contact-information .contact-information-social a:last-child {margin-right: 0px;}
.header-area .top-header .contact-information .contact-information-social a:hover {color: #4DA6FF;}
.header-area .top-header .contact-information .contact-information-social a i {font-size: 14px; font-weight: 500;}
.header-area .main-header { padding: 20px 0 19px;background: var(--clr-white);}
.header-area .main-header nav { text-align: right;}
.header-area .main-header nav ul li {display: inline-block;margin-right: 28px;}
.header-area .main-header nav ul li:last-child { margin-right: 0;}
.header-area .main-header nav ul li:last-child a {color: var(--clr-white); }
.header-area .main-header nav ul li:last-child a:hover { color: var(--clr-white);}.header-area .main-header nav ul li:last-child a:after { display: none;}
.header-area .main-header nav ul li a { color: #08194A; font-size: 16px; font-weight: 500; line-height: 1.31;-webkit-transition: .5s;
  -o-transition: .5s; transition: .5s; padding-bottom: 5px;position: relative; }
.header-area .main-header nav ul li a:after { position: absolute;content: ""; background: #4DA6FF; width: 0%; height: 2px;
   left: 0; bottom: 0px;-webkit-transition: .5s; -o-transition: .5s; transition: .5s;}
.header-area .main-header nav ul li a:hover { color: #4DA6FF;}
.header-area .main-header nav ul li a:hover:after { width: 100%;}
.header-area .main-header nav ul .appionment { font-family: 'Oswald', sans-serif; color:var(--clr-white); font-size: 16px; font-weight: 500;
   line-height: 1.31; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; background: #4DA6FF; padding: 14px 35.5px;
    display: inline-block; }
.header-area .main-header nav ul .appionment:hover { color: var(--clr-white); background: #0B1548;}
@media(min-width: 1200px) {.main-header .logo {margin: 6px 0 0;}}
.logo img {max-height:100px;} 
.slicknav_menu { display: none; }
div#sticky-wrapper {  position: relative; left: 0; right: 0; }
div#sticky-wrapper .main-header {-webkit-transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out;}
.is-sticky { z-index: 5; }
.is-sticky .main-header { -webkit-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
  -webkit-box-shadow: 0px 0px 10px #888888;box-shadow: 0px 0px 10px #888888;}
/*
================================================
 Slider CSS
================================================
*/
.hero-section { background-position: left top !important;background-size: cover !important; background-repeat: no-repeat !important; position: relative; }
.hero-section::before { position: absolute; height: 100%;width: 100%;content: ''; top: 0; left: 0; background-color: rgba(5, 20, 65, 0.8); }
.hero-single { height:800px; display: flex;align-items: center; justify-content: center;position: relative; }
.hero-single .hero-content { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hero-single .hero-content .hero-title { margin-bottom: 3rem; line-height: 1.2; font-size: 5rem; text-transform: uppercase;
 font-weight: 900; color: #fff; }
.hero-single .hero-content .hero-sub-title { margin-bottom: 2rem; }
.hero-single .hero-content p {font-size: 2.2rem; line-height: 38px; margin-bottom: 4rem;color: #fff; }
.hero-single .hero-content .hero-btn { gap: 2rem; line-height: 1;display: flex;margin-top: 1rem; }
.hero-title {font-size: 40px; line-height: 5rem; margin-bottom: 3rem;font-weight: 900; }
.hero-sub-title { font-size: 2rem; font-weight: 700; line-height: 1; }
.hero-shape img {  position: absolute; z-index: -1; } 
.hero-shape img.hero-1 { left: 0; bottom: -2px; }
.hero-shape img.hero-2 { left: 5rem;top: 10rem; }
.hero-shape img.hero-3 { bottom: 0; left: 0; z-index: -2; }
.hero-shape img.hero-4 { top: 26%;right: 10%; }
.hero-shape img.hero-5 { right: 50%; bottom: 20rem; }
.hero-shape img.hero-6 { right: 0; top: 0; }
.hdr-pic { display: flex; justify-content: center; }
.bo { height: 20rem; width: 20rem; clip-path: path("M 102.905 18.268 c 28.412 -37.588 97.208 3.111 97.208 58.371 A 100.057 100.057 0 0 1 0 76.639 C 0 21.379 74.493 55.857 102.905 18.268 Z");
  background-color: var(--clr-dark); display: inline-block; }
.hero-sldr.owl-theme .owl-nav {  margin-top: 0px; }
.hero-sldr.owl-theme .owl-nav [class*=owl-] { font-size: 2rem; margin: 0;  padding: 0;  background: #4DA6FF; color: #fff;
  display: inline-block; cursor: pointer; height: 5rem; width: 5rem; line-height: 5rem;  text-align: center;  border-radius: 50%;
  box-shadow: 0 0 0px 10px #4DA6FF; }
.hero-sldr.owl-theme .owl-nav [class*=owl-]:hover { background: #fff; color: var(--clr-dark); }
.hero-sldr.owl-theme .owl-nav .owl-prev {  left: 5rem; }
.hero-sldr.owl-theme .owl-nav .owl-next { right: 5rem; }
.hero-sldr.owl-theme .owl-nav .owl-prev, .hero-sldr.owl-theme .owl-nav .owl-next {  position: absolute; top: 50%; transform: translate(0, -50%); }
.hero-sldr .owl-item .hero-single .hero-content h2 { opacity: 0; visibility: hidden; transition: all 500ms ease; transform: translateY(-20px); }
.hero-sldr .owl-item .hero-single .hero-content p { opacity: 0; visibility: hidden;  transition: all 500ms ease;  transform: translateX(-50px); }
.hero-sldr .owl-item .hero-single .hero-content .hero-btn {  transform: scaleY(0);  transition: all 500ms ease;  transition-delay: 2000ms;
  transform-origin: bottom; }
.hero-sldr .owl-item .hero-single .hdr-pic { opacity: 0; visibility: hidden; transition: all 500ms ease;  transform: translateY(50px); }
.hero-sldr .owl-item.active .hero-single .hero-content h2 { opacity: 1;  visibility: visible;  transition-delay: 800ms;  transform: translateY(0px); }
.hero-sldr .owl-item.active .hero-single .hero-content p { opacity: 1;  visibility: visible;  transition-delay: 1600ms;
  transform: translateX(0px); }
.hero-sldr .owl-item.active .hero-single .hero-content .hero-btn { transform: scale(1); }
.hero-sldr .owl-item.active .hero-single .hdr-pic {  opacity: 1;  visibility: visible;  transition-delay: 1200ms;  transform: translateY(0px); }
.owl-carousel .owl-item img { display: block; width: inherit;}
.up-move { animation: up-move 5s ease-in-out infinite; }
@keyframes up-move {
  0% {transform: translateY(0); } 50% {transform: translateY(-30px); }
  100% {transform: translateY(0px); } }
.small-big {animation: small-big 5s ease-in-out infinite; }
@keyframes small-big {0% {transform: scale(0.5); }51% {transform: scale(1.1); }100% { transform: scale(0.5); } }
/*
================================================
 CTA Area 
================================================
*/
.tp-cta-area-bg { max-width: 1320px; margin: 0 auto; padding: 50px 50px 20px; background: #f7f7f7; position: relative;
  margin-top: -70px;}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
.tp-cta-area-bg { padding: 30px; padding-bottom: 0px;}}
.tp-cta-sec-icon { height: 80px; line-height: 94px; width: 80px; background: var(--clr-light-2); border-radius: 50%; border: 5px solid var(--clr-white);
  float: left; margin-right: 25px; text-align: center; -webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
@media (max-width: 767px) {.tp-cta-area-bg { padding: 15px; padding-bottom: 0px;}}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-cta-sec-icon { margin-right: 15px; }}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-cta-sec-icon { float: inherit; margin-right: 0px; margin-bottom: 25px; }}
.tp-cta-sec-icon i {font-size: 36px;color: #09150f; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;}
.tp-cta-sec-text-title { font-size: 24px; margin-bottom: 15px; color: var(--clr-white); line-height: 1; -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 .tp-cta-sec-text-title {font-size: 20px; }}
.tp-cta-sec { padding: 60px 30px 50px 30px; margin: 0 0 30px; background: #4DA6FF; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
@media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-cta-sec { padding: 50px 25px 40px 25px; }}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
 .tp-cta-sec { padding: 30px 30px 20px 30px;}}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tp-cta-sec { padding: 30px 20px 20px 20px;}}
.tp-cta-sec p { color: var(--clr-white); margin-bottom: 0px; -webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-size: 16px;
  font-weight: 400; line-height: 27px;}
.tp-cta-sec:hover { background: var(--clr-secondary);}
.tp-cta-sec:hover p { color: var(--clr-white);}
.tp-cta-sec:hover h4 { color: var(--clr-white);}
.tp-cta-sec:hover .tp-cta-sec-icon { background: #4DA6FF;}
.tp-cta-sec:hover .tp-cta-sec-icon i { color:var(--clr-white);transform: rotateY(360deg);}
.fix {overflow: hidden;}
/*
================================================
 About Area 
================================================
*/
.about-two__left { position: relative;display: block;}
.about-two__img { position: relative; display: block; overflow: hidden;}
.about-two__img::before { position: absolute; top: 50%; left: 50%; display: block; content: ''; width: 0; height: 0; background: rgba(255, 255, 255, .2);
  border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; z-index: 1;}
.section-title__title { position: relative; display: inline-block; margin: 0; font-size: 35px; line-height: 45px; font-weight: 700;
  margin-bottom: 40px;}
.about-two__content p {color:#777777; font-size: 17px; line-height: 24px; }
.about-two__img:hover:before {-webkit-animation: circle .75s; animation: circle .75s;}
.about-two__img img { width: 100%;}
.about-two__content { position: relative; display: block;}
@media only screen and (min-width: 1200px) { .about-two__content {margin-right: 130px;} .about-two__left {margin-right: 30px;}}
.about-two__content .section-title { margin-bottom: 22px;}
.about-two__content .section-title__title:before { left: 0; transform: translateX(0);     height: 5px;     position: absolute;
  bottom: -20px; width: 80px; content: ""; background-color: #4DA6FF;}
.about-two__points { position: relative; display: block; margin-bottom: 40px;}
.about-two__points li { position: relative;display: flex; align-items: center;}
.about-two__points li+li {  margin-top: 9px;}
.about-two__points li .icon {  display: flex;  align-items: center;}
.about-two__points li .icon i {  font-size: 14px;  color: #4DA6FF; position: absolute; top: 5%; left: 0%; transform: translateX(-50%);}
.about-two__points li .text {  margin-left: 15px;}
.about-two__points li .text p {  color:var(--clr-dar);  font-weight: 600;  margin: 0;}
.about-two__points li .text p span {  font-weight: normal;}
@-webkit-keyframes circle { 0% { opacity: 1; }40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; }}
@keyframes circle { 0% { opacity: 1;} 40% { opacity: 1;} 100% { width: 200%; height: 200%; opacity: 0; }}

.button-wsp-info {
  text-align: center;
}
.button-wsp-info li {
  margin: 15px 0;
}
.button-wsp-info li a {
  padding: 2% 10%;
  background: #4DA6FF;
  border-radius: 15px;
  color: #fff;
  font-size: 35px;
}
.button-wsp-info li a:hover { 
  background: #08194A;
  color: #fff;
}

/*
================================================
 Our Team Sec 
================================================
*/
/** Single Team Sec **/
.team-wrap { margin-bottom: 24px;}
.team-image { overflow: hidden; position: relative;}
.team-image img { width: 100%; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s;}
.team-social { position: absolute;top: 0;right: 0;padding: 0 25px;z-index: 2; height: 100%; display: -webkit-box; display: -ms-flexbox;
 display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; background: #4DA6FF;-webkit-transform: translateX(79px);
 transform: translateX(80px); visibility: hidden;-webkit-transition: all 1s ease 0s; transition: all 1s ease 0s;}
.team-wrap:hover .team-social { -webkit-transform: translateX(0); transform: translateX(0); visibility: visible;}
.team-social li a { display: block; color: #4DA6FF; background: var(--clr-white); border: 1px solid var(--clr-white);
  margin-bottom: 18px; line-height: 27px; height: 25px; width: 25px; border-radius: 5px; text-align: center; font-size: 14px;}
.team-content { -webkit-box-shadow: 7px 10px 40px rgba(13,52,79,.1); box-shadow: 7px 10px 40px rgba(13,52,79,.1); padding: 18px 30px;}
.team-content h4 { font-size: 23px; color: var(--clr-secondary); margin-bottom: 5px; text-align: center;}
.team-content h5 { font-size: 16px; color: var(--clr-light-grey); font-weight: 400; margin-bottom: 0; text-align: center;}
/*
================================================
 Counter Area
================================================
*/
.counter-area { background-size: cover; background-position: center center; padding:120px 0 90px;}
.counter-area .counter-row>* {width:auto;}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter-11 { padding-top: 120px; }
}
@media (max-width: 767px) {
   .counter-11 { padding-top: 120px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter-row .single-counter { width: 50%; }
}
@media (max-width: 767px) {
  .counter-row .single-counter {width: 100%; }}
.counter-text h2 {color: var(--clr-white); font-size: 100px; line-height: 1;}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter-text h2 { font-size: 70px; }
}
@media (max-width: 767px) {
  .counter-text h2 { font-size: 60px; }
}
.counter-text h2 i { color: #4DA6FF;font-size: 20px; position: relative;top: -87px;}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .counter-text h2 i { top: -60px; }
}
@media (max-width: 767px) {
  .counter-text h2 i {top: -50px;}
}
.mb-45 {  margin-bottom: 45px;}
.counter-text > span { color: var(--clr-white);font-size: 15px;text-transform: uppercase;font-weight: 700;letter-spacing: 1px;position: relative;}
.counter-text > span::before { background: var(--clr-dark); position: absolute; content: ""; left: -28px; height: 3px; width: 16px;
  top: 8px;}
.counter-text > span::after { background: var(--clr-dark); position: absolute; content: ""; right: -28px; height: 3px; width: 16px;  top: 8px;}
.counter-icon i {font-size: 45px; color: #4DA6FF;}
/*
================================================
 Services Area 
================================================
*/
@media only screen and (min-width: 1200px) {.services-area {padding: 80px 0 130px;}}
/** Single Services Sec **/
.services-item { background: #ffffff; box-shadow: 0px 0px 45px 22px #eee; padding: 40px 30px 40px 30px;
  border-radius: 5px 5px 5px 5px; margin: 0px -7px 0 0; transition: all 0.3s ease-in-out 0s;}
.services-item:hover { transform: translateY(-10px); }
.services-item .services-icon {margin-bottom: 17px;font-size: 30px;width: 60px;height: 60px;background: var(--clr-grey);text-align: center;
line-height: 60px;border-radius: 50%; color:#4DA6FF}
.services-item .services-content .title { font-size: 18px; line-height: 1.5; font-weight: 700; margin-bottom: 10px;}
.services-item .services-content p { font-size: 15px;}
.services-item:hover .dance_hover { animation-name: dance_hover; animation-duration: 1s; animation-timing-function: ease-in-out;
  animation-iteration-count: 1;}
 @keyframes dance_hover { 16.65% { transform: translateY(8px); }
  33.3% { transform: translateY(-6px); }
  49.95% {transform: translateY(4px); }
  66.6% {transform: translateY(-2px); }
  83.25% {transform: translateY(1px);}
  100% { transform: translateY(0);}}
/*
================================================
 Testimonials Area 
================================================
*/
.testimonials-sec {position: relative; display: block; padding: 80px 0; z-index: 1;}
.testimonials-sec-inner:before { position: absolute; top: -80px; bottom: -50px;left: 120px; right: -10000000000px; content: "";
  background-color: var(--clr-grey); z-index: -1;}
.testimonials-sec-inner {position: relative;}
.review-box { display: grid; grid-template-columns: 10rem 1fr; grid-gap: 3rem; padding: 5rem 3rem;
  position: relative; z-index: 1; overflow: hidden; background: #fff; box-shadow: 0 0 30px rgba(29, 23, 77, 0.06);margin:25px; }
.review-box .quote { position: absolute; height: 100%; width: 100%;z-index: -1; }
.review-box .quote i {position: absolute; display: inline-block; height: 5rem;width: 5rem; line-height: 5rem; text-align: center;
 background-color: #4DA6FF; color: var(--clr-white);-webkit-border-radius: 50%;border-radius: 50%;-webkit-transition: all .5s ease;
 transition: all .5s ease; }
.review-box .quote i.quote-right {right: 5rem;top: -3rem;}
.review-box .quote i.quote-right::after {position: absolute;z-index: -1; content: ''; height: 5rem; width: 1px; top: -4rem;left: 50%;
transform: translate(-50%, 0); background-color: #4DA6FF; }
.review-box .quote i.quote-left { left: 5rem;bottom: -3rem; }
.review-box .quote i.quote-left::after { position: absolute;z-index: -1; content: ''; height: 5rem;width: 1px;bottom: -4rem;
left: 50%; transform: translate(-50%, 0); background-color: #4DA6FF; }
.review-box .review-content h4 {margin-bottom: 1.5rem;line-height: 1;text-transform: capitalize;font-weight: 700; }
.review-box .review-content span {font-size: 16px;font-weight: 500;color: var(--clr-dark);display: block; margin-bottom: 2rem; line-height: 1; }
.review-box .review-content blockquote {font-size: 16px;font-weight: 500;color: var(--clr-dark);;margin-bottom: 2rem; }
.review-box .review-content .sh-de-rating {margin-bottom: 0; }
.review-box .review-content .sh-de-rating i { font-size: 1.4rem; color: #4DA6FF; }
.review-box:hover .quote i.quote-right {top: 4rem; }
.review-box:hover .quote i.quote-left {bottom: 4rem; }
.testimonials-sec .owl-carousel .owl-item img {display: block;width: inherit; border-radius: 50%; width:80px; height: 80px;}
.rev-sldr.owl-theme .owl-nav.disabled + .owl-dots { margin-top: 30px; }
.rev-sldr.owl-theme .owl-dots,.rev-sldr.owl-theme .owl-nav {text-align: center; }
.testimonials-sec .owl-theme .owl-dots .owl-dot span {width: 20px; height: 5px; margin: 5px 7px; background: var(--clr-light-grey);
  display: block;-webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px; }
.testimonials-sec .owl-theme .owl-dots .owl-dot.active span, .testimonials-sec .owl-theme .owl-dots .owl-dot:hover span {
  width: 20px;height: 5px;background-color: #4DA6FF; }
/*
================================================
 Projects Area 
================================================
*/
.gallery-section .button { text-align: center; margin-top: 70px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
ul.filter { display: -webkit-box;display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: center;
 -ms-flex-pack: center; justify-content: center;margin-bottom: 50px;}
@media (max-width: 767px) { ul.filter {margin-bottom: 30px;}}
ul.filter li { margin: 5px;padding: 10px 20px; border: 1px solid var(--clr-light); color: #1f1f1f;cursor: pointer; border-radius: 3px;}
@media (max-width: 1199px) { ul.filter li { padding: 7px 15px; font-size: 14px;}}
ul.filter li.active { background: #4DA6FF; color: var(--clr-white); border-color: #4DA6FF;}
.gallery-wrapper { margin: -15px;}
@media (max-width: 767px) {.gallery-wrapper { margin: -7.5px; }}
.gallery-item { width: calc(100% / 3);padding: 15px;}
@media (max-width: 767px) { .gallery-item { padding: 7.5px; }}
.gallery-item:hover .hover-content {opacity: 1;-webkit-transform: translateY(0) scale(1);transform: translateY(0) scale(1); visibility: visible;}
@media (max-width: 991px) {.gallery-item {width: calc(100% / 2); }}
.gallery-inner {position: relative;}
.gallery-inner .hover-content {position: absolute; content: "";left: 0;top: 0;height: 100%; width: 100%; background: #4DA6FF;
  -webkit-transform: scale(0.8) translateY(20px);transform: scale(0.8) translateY(20px);opacity: 0;visibility: hidden; display: -webkit-box;
  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;-webkit-box-pack: center;
  -ms-flex-pack: center; justify-content: center;-webkit-transition: all ease .3s;transition: all ease .3s;}
.gallery-inner .hover-content a { font-size: 120px; color: var(--clr-white);}
@media (max-width: 1199px) {.gallery-inner .hover-content a { font-size: 100px; }}
@media (max-width: 575px) { .gallery-inner .hover-content a {font-size: 60px;}}
.gallery-inner img {width: 100%;}
/*
================================================
 Blog Area 
================================================
*/
.blog-area {background: var(--clr-grey);}
/** Single Blog Sec **/
.single-blog-sec:hover:hover .blogContent::before { transform: scale(1, 1);transform-origin: right center; }
.single-blog-sec { position: relative;	background: #fff;-webkit-transition: all .3s ease;-o-transition: all .3s ease;	transition: all .3s ease;}
.single-blog-sec:hover { -webkit-box-shadow: 0 20px 60px 0 rgba(11,22,37,.1);	-moz-box-shadow: 0 20px 60px 0 rgba(11,22,37,.1);
	box-shadow: 0 20px 60px 0 rgba(11,22,37,.1);-webkit-transform: translateY(20px);transform: translateY(20px);}
.blogThumb { position: relative;}
.blogThumb img { width: 100%;height: auto;}
.blogContent:before { position: absolute;bottom: -1px;left: -1px;	right: -1px;content: "";height: 3px;background-color: #4DA6FF;
	transition: transform 500ms ease;transform: scale(0, 1);transform-origin: left center;}
.blogContent {position: relative;	padding: 34px 38px 36px; -webkit-box-shadow: 0 20px 60px 0 rgba(11,22,37,.05); -moz-box-shadow: 0 20px 60px 0 rgba(11,22,37,.05); box-shadow: 0 20px 60px 0 rgba(11,22,37,.05);}
.bmeta {display: flex;	margin: 0 0 8px;}
.bmeta i {display: inline-block;font-size: 12px;margin-right: 9px;}
.bmeta span:first-child {	margin-left: 0;}
.bmeta span {	display: inline-block;font-size: 14px;color: #74777c;margin-left: 10px;margin-right: 10px;}
.bmeta a {color: inherit;}
.blogContent h3 {font-size: 20px;line-height: 30px;	margin: 0;}
/*
================================================
 Contact Area 
================================================
*/
.single-contact-sec { position: relative;padding-left: 130px;padding-top: 8px;margin: 0; padding-bottom: 60px;}
.single-contact-sec .ib_box::before { position: absolute;top: 0;	left: 0;	right: 0;	bottom: 0;	margin: auto;	content: '';	background: #4DA6FF;
	border-radius: 50%;	z-index: -1;	visibility: hidden;	opacity: 0;	width: calc(100% - 28px);	height: calc(100% - 28px);	transform: scale(.5);
	-moz-transform: scale(.5);	-webkit-transform: scale(.5);	-webkit-transition: all .3s ease;	-o-transition: all .3s ease;	transition: all .3s ease;}
.single-contact-sec .ib_box {position: absolute;	z-index: 3;	left: 0;	top: 5px;	width: 102px;	height: 102px;	text-align: center;	color: #4DA6FF;
	line-height: 102px;	font-size: 36px;	border: 2px solid #4DA6FF;	border-radius: 50%;	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;	transition: all .3s ease;}
.single-contact-sec h3 {	font-size: 24px;	line-height: 28px;	font-weight: 600;	margin: 0 0 14px;}
.single-contact-sec p {margin: 0;}
.single-contact-sec:hover .ib_box::before {visibility: visible;	opacity: 1;	transform: scale(1);-moz-transform: scale(1);	-webkit-transform: scale(1);}
.single-contact-sec .ib_box::after {	position: absolute;	top: 0;	left: 0;	right: 0;	bottom: 0;	margin: auto;	content: '';	background: var(--clr-white);
	border-radius: 50%;	z-index: -2;width: calc(100% - 28px);	height: calc(100% - 28px);-webkit-transition: all .3s ease;	-o-transition: all .3s ease;
	transition: all .3s ease;}
.single-contact-sec:hover .ib_box {	border-color: #4DA6FF;	color: var(--clr-white);}
.contact-sec .tm-btn-2 {padding: 1.5rem 2rem;}
.contact-map iframe {width:100%; height: 375px;}
.contact__form-panel {background: var(--clr-white);}
.contact-info-item { text-align: center;  margin-top: 40px; padding: 40px 40px; -webkit-box-shadow: 0px 0px 38px 0px rgb(0 0 0 / 10%); box-shadow: 0px 0px 38px 0px rgb(0 0 0 / 10%); background: var(--clr-white);}
.contact-info-item i { display: inline-block; width: 70px; height: 70px; text-align: center; line-height: 70px; font-size: 30px; border-radius: 50%; color: #4DA6FF; border: 1px solid #4DA6FF; margin-bottom: 20px; }
.contact-info-item h3 { margin-bottom: 15px; font-size: 22px; font-weight: 800;}
.contact-info-item a { display: block; color: var(--clr-secondary);}
.contact-sec .form-group { margin-bottom: 30px;}
.contact-sec .form-control {  height: 50px; color: var(--clr-secondary); background-color: #fff; border-radius: 4px;font-size: 15px; padding: 10px 20px; width: 100%; -webkit-box-shadow: 0 12px 40px 0 rgba(7,17,29,.05);
 -moz-box-shadow: 0 12px 40px 0 rgba(7,17,29,.05); box-shadow: 0 12px 40px 0 rgba(7,17,29,.05); border: 2px solid #f6f6f6;}
.contact-sec textarea.form-control { height: auto; }
.hidden { display: none; }
.alert { margin: 20px 0 0; }
.alert a {font-size: 22px;
  line-height: 30px;}
.copyright { padding: 15px 0; width: 100%; background: #4DA6FF;}
.copyright p {margin: 0; color: var(--clr-white);}
.copyright p span {color: var(--clr-white); font-weight: 600;}

.button-wsp {
  text-align: center;
}
.button-wsp li {
  margin: 45px 0;
}
.button-wsp li a {
  padding: 5% 25%;
  background: #4DA6FF;
  border-radius: 15px;
  color: #fff;
  font-size: 55px;
}
.button-wsp li a:hover { 
  background: #08194A;
  color: #fff;
}

/*
================================================
 Responsive CSS
================================================
*/
@media only screen and (min-width: 1300px) and (max-width: 1399px) {
/** About Area **/
.about-two__content .section-title__title {font-size: 30px;}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  /** Header Area **/
  .header-area .main-header nav ul li {margin-right: 20px;}
  .main-header .logo {margin: 10px 0 0;}
  .logo img {max-height: 40px;}
  /** Slider Area **/
  .hero-single .hero-content { margin-top: 5rem; margin-bottom: 3rem; height: auto;}
  .hero-single {height: 1150px;}

.button-wsp li {
  margin: 45px 0;
}
.button-wsp li a {
  padding: 5% 15%;
  background: #f26b31;
  border-radius: 15px;
  color: #fff;
  font-size: 35px;
}
.button-wsp li a:hover { 
  background: #08194A;
  color: #fff;
}

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

   /** Slider Area **/
   .hero-single .hero-content { margin-top: 15rem; }
   .hero-sldr.owl-theme .owl-nav .owl-prev, .hero-sldr.owl-theme .owl-nav .owl-next { top: 60%;}
   /** About Area **/
   .about-two__content {padding-left:15px;padding-right:15px;}
   /** Testimonials Area **/
   .review-box { padding: 10rem 1rem 8rem; grid-gap: 0;}
   .review-box .review-content h4 {margin-bottom: 1rem;}
   .review-box .review-content span {margin-bottom: 1rem;}

.button-wsp li {
  margin: 45px 0;
}
.button-wsp li a {
  padding: 5% 15%;
  background: #f26b31;
  border-radius: 15px;
  color: #fff;
  font-size: 35px;
}
.button-wsp li a:hover { 
  background: #08194A;
  color: #fff;
}

}
@media all and (max-width: 991.98px) {
/** Header Area **/
div#sticky-wrapper { height: 84px;}
.slicknav_menu { display: block;position: absolute; top: 0; right: 0; z-index: 6; background: #fff; width: 100%; padding: 20px 15px;
  -webkit-box-shadow: 0px 2px 20px #b7b7b7b7;box-shadow: 0px 2px 20px #b7b7b7b7;}
.slicknav_menu .slicknav_btn { text-shadow: none; font-size: 17px; padding: 10px 15px; -webkit-border-radius: 4px; border-radius: 4px;
  background-color: #4DA6FF;}
.slicknav_menu .slicknav_nav { position: absolute; left: 0; top: 100%; width: 100%; margin: 0; padding: 0px 15px 20px 15px;text-align: left !important;}
.slicknav_menu .slicknav_nav ul { background: #07194a; text-align: left;  margin-left: 0 !important; padding: 15px 20px 20px 20px;
  -webkit-box-shadow: 0px 2px 15px #505050ad;box-shadow: 0px 2px 15px #505050ad;}
.slicknav_menu .slicknav_nav ul li { display: block !important; margin-right: 0 !important;}
.slicknav_menu .slicknav_nav ul li a { width: 100% !important; color: #fff !important; -webkit-transition: .3s all; -o-transition: .3s all;
  transition: .3s all; margin: 0 !important; padding: 12px 15px !important;}
.slicknav_menu .slicknav_nav ul li a:hover { background: #ffffff;  color: #4DA6FF !important;  -webkit-border-radius: 0 !important;
 border-radius: 0 !important;}
.slicknav_menu .slicknav_nav ul li a:hover:after { display: none;}
.slicknav_menu .slicknav_nav ul li:last-child { margin-top: 15px;}
.slicknav_menu .slicknav_nav ul li:last-child a { text-align: center;}
.slicknav_menu .slicknav_nav ul li:last-child a:hover { background: #fff !important;}
.slicknav_menu .slicknav_nav .appionment {-webkit-transition: .5s; -o-transition: .5s; transition: .5s;}
.slicknav_menu .slicknav_nav .appionment a { width: 90%; background: #4DA6FF; margin: auto;text-align: center;}
.slicknav_menu .slicknav_nav .appionment a:hover { -webkit-border-radius: 0px; border-radius: 0px;}
.slicknav_menutxt { text-shadow: 0 1px 3px #615a5a;display: none !important;}
.slicknav_icon { margin: 0 !important;}
.slicknav_nav a { padding: 12px 10px;}
nav#menu { display: none;}
.header-area .top-header:after { width: 100%;}
.header-area .top-header .openClose-time {-webkit-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center;
 justify-content: center; padding-bottom: 4px;}
.header-area .top-header .contact-information { -webkit-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center;
 justify-content: center;}
.header-area .main-header { padding: 0;}
.header-area .main-header .logo {position: absolute;top: 21px;left: 15px;z-index: 9999;}
.header-area .top-header .contact-information .contact-information-phone a {font-size: 12px;}
/** Slider Area **/
.hero-single {height: auto;}
.hero-single .hero-content {height: auto;}
.hero-section {padding-bottom:12rem;}
.hero-single .hero-content {padding-bottom:6rem;}

.button-wsp li {
  margin: 45px 0;
}
.button-wsp li a {
  padding: 5% 15%;
  background: #f26b31;
  border-radius: 15px;
  color: #fff;
  font-size: 35px;
}
.button-wsp li a:hover { 
  background: #08194A;
  color: #fff;
}

}
@media (max-width: 767.98px) { 
/** Common CSS **/
section {padding: 40px 0;}
.sec-title h2 {font-size: 35px;}
/** Slider Area **/
.logo img { max-height: 40px;}
.hero-content { padding: 0 1rem;}
.hero-single .hero-content { height: auto; margin: 16rem 0 5rem;}
.hero-single .hero-content .hero-title {line-height: 1.2;font-size: 3.2rem;}
.hero-sldr.owl-theme .owl-nav {display: none;;}
.hero-section {padding-bottom:12rem;}
.hero-single .hero-content {padding-bottom:6rem;}
/** About Area **/
.about-area {padding-bottom: 40px;}
.about-two__content {padding-left:15px;padding-right:15px;}
/** Counter Area **/
.counter-area {padding: 90px 0 50px;}
/** Portfolio Area **/
ul.filter li { padding: 7px 10px;}
}
@media (max-width: 576.98px) {
/** Header Area **/
.header-area .top-header .contact-information { -webkit-box-orient: vertical;  -webkit-box-direction: normal;-webkit-flex-direction: column;
  -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center;
  align-items: center;}
.header-area .top-header .contact-information .contact-information-phone { margin-right: 0; -webkit-box-pack: center;-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin:0 0 5px;}

.button-wsp li {
  margin: 45px 0;
}
.button-wsp li a {
  padding: 5% 15%;
  background: #f26b31;
  border-radius: 15px;
  color: #fff;
  font-size: 20px;
}
.button-wsp li a:hover { 
  background: #08194A;
  color: #fff;
}



}