/*==============================================
Template Name: Cyberlux - Advanced Cybersecurity & IT Service Responsive HTML5 Template
Author:  https://www.templatemonster.com/authors/webtheme/
Description: Description
Version: 1.0.0
Text Domain: Cyberlux
Tags:corporate, business, consultant, multipurpose, technology, it-solution, software, agency, company, portfolio, digital-agency, cyber, cybersecurity, security digital-marketing.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Cyberlux Header Area Css
02. Cyberlux Hero Area Css
03. Cyberlux section-title css
04. Cyberlux Service Area Css 
05. Cyberlux about Area Css
06. Cyberlux team Area Css
07. Cyberlux team details Area Css
08. Cyberlux Video section css
09. Cyberlux Teastimonial Area Css
10. Cyberlux case study area Css
11. Cyberlux blog grid Area Css
12. Cyberlux Testimonial Area Css
13. Cyberlux Blog Area Css
14. Cyberlux Footer Area Css
15. Cyberlux counter area css
16. Cyberlux Breadcumb Area Css
17. Cyberlux service details Area Css
18. Cyberlux pricing area css
19. Cyberlux faq area css
20. Cyberlux contact Area css
21. lovebird google map css
22. Cyberlux Scroll Up Css
23. Cyberlux Loader css

=======================*/
/* =======================================
      Start  Curser pointer CSS 
=========================================*/

.cursor-move,
.cursor-move2 {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* native cursor still works because pointer-events none */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  z-index: 9999;
  will-change: transform, left, top;
}

/* inner dot */
.cursor-move {
  width: 7px;
  height: 7px;
  background-color: #FAB101;
}

/* outer ring */
.cursor-move2 {
  width: 40px;
  height: 40px;
  border: 2px solid #FAB101;
}

/* touch fallback: optional hide custom on touch */
@media (hover: none), (pointer: coarse) {
  .cursor-move,
  .cursor-move2 {
    display: none;
  }
}

/*  hover style */
.cursor-move.grow {
  transform: translate(-50%, -50%) scale(1.3);
}
.cursor-move2.grow {
  transform: translate(-50%, -50%) scale(1.6);
}
.cursor-move.grow-small {
  transform: translate(-50%, -50%) scale(1.1);
}

.cursor-move2.grow-small {
  transform: translate(-50%, -50%) scale(1.2);
}

/* Fallback: if JS disabled, hide custom cursor */
.no-js .cursor-move,
.no-js .cursor-move2 {
  display: none;
}
/* =======================================
      end  Curser pointer CSS 
=========================================*/
/*---=====================================================
   <!--Cyberlux Header Area Css-->
=========================================================---*/
.header-area {
    padding: 0 30px 0 28px;
    position: relative;
    z-index: 2;
    margin: 0px 0px -108px 0px;
    border-bottom: 1px solid #FFFFFF33;
}
.header-area.style-one.inner {
    margin: -11px 85px -58px 100px;
    position: relative;
    top: -37px;
}
.header-area.style-one.inner.sticky {
    top: 0;
    margin: 0px 85px 0px 0px;
}
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    margin-right: 38px;
}
.header-menu ul li a {
    display: inline-block;
    padding: 35px 0;
    text-transform: capitalize;
    transition: 0.5s;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    font-weight: 500;
}

.header-menu ul li a:hover{
    color:#FAB101;
}
.header-button {
    display: inline-block;
    float: right;
}
.Cyberlux-btn a {
    font-size: 15px;
    color: #0A1431;
    padding: 12px 35px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 26px;
    position: relative;
    z-index: 1;
    transition: 0.4s;
    overflow: hidden;
    display: inline-block;
    font-weight: 500;
    background: #FAB101;
    border: 1px solid #FAB101;
    font-family: "Inter", sans-serif;
}
.Cyberlux-btn a:before {
    background: #000;
    content: "";
    position: absolute;
    right: -3px;
    top: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: 0.4s;
    border-radius: 25px;
}
.Cyberlux-btn a:hover:before {
    width: 103%;
    left: 0;
}
.Cyberlux-btn a:hover{
    color: #fff;
}
.header-menu ul li i {
    font-size: 10px;
    color: #fff;
    position: relative;
    left: 5px;
    top: 0px;
    transition: 0.5s;
}
.header-menu ul li a:hover i{
    color:#FAB101;
}
.header-search-icon i {
    display: inline-block;
    color: #ffff;
    transition: 0.5s;
}

/*sub-menu*/
.header-menu ul li.menu-item-has-children {
    position: relative;
}

.header-menu ul li .sub-menu {
    position: absolute;
    width: 200px;
    display: block;
    text-align: left;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    top: 150%;
    z-index: 2;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-top: 5px solid #FAB101;
    border-radius: 3px 3px 0 0;
}

.header-menu ul li:hover .sub-menu{
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.header-menu ul li .sub-menu li a {
    display: block;
    padding: 10px 15px !important;
    color: #0A1431;
    width: 200px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 500;
    transition: 0.5s;
    position: relative;
    z-index: 1;
}

.header-menu ul li .sub-menu li a:hover{
    color: #fff !important;
}

.header-menu ul li .sub-menu li a:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background:#FAB101;
    z-index: -1;
    transition: 0.5s;
}

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


.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    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: #0A1431 !important;
    transition: 0.5s;
    z-index: 999 !important;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}


/*---=====================================================
   <!--Cyberlux Hero Area Css-->
=========================================================---*/
.style-one.hero-area {
    background: url(../images/img/banner01-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 970px;
    position: relative;
    z-index: 1;
}
.style-one.hero-area .hero-thumb {
    position: absolute;
    top: 235px;
    right: 165px;
    z-index: 1;
}
.style-one.hero-area .hero-shape {
    position: absolute;
    top: 235px;
    right: 165px;
}
.style-one.hero-area .hero-content {
    padding-top: 50px;
}
.style-one .hero-content h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #FAB101;
    margin: 0px 0 0px 62px;
    text-transform: uppercase;
    position: relative;
}
.style-one .hero-content h4::before {
    position: absolute;
    content: "";
    top: 12px;
    left: -60px;
    width: 50px;
    background-color: #FAB101;
    border-radius: 2px;
    height: 4px;
}
.style-one .hero-content h4::after {
    position: absolute;
    content: "";
    top: 9px;
    left: -60px;
    width: 9px;
    background-color: #fff;
    border-radius: 50%;
    height: 9px;
    -webkit-animation: MOVE-BG 3s linear infinite alternate;
    -moz-animation: MOVE-BG 3s linear infinite alternate;
    -o-animation: MOVE-BG 3s linear infinite alternate;
    animation: MOVE-BG 3s linear infinite alternate;
}
.style-one .hero-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 75px;
    color: #fff;
    margin: 6px 0 0;
}
.style-one .hero-content h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 75px;
    color: #fff;
    margin: 0px 0 0;
}
.style-one .hero-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #fff;
    margin: 8px 0 34px;
    width: 60%;
}
.hero-button {
    display: flex;
    align-items: center;
    gap: 18px;
}
.hero-explore a {
    font-size: 15px;
    color: #FAB101;
    padding: 12px 35px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 26px;
    position: relative;
    z-index: 1;
    transition: 0.4s;
    overflow: hidden;
    display: inline-block;
    font-weight: 500;
    background: transparent;
    border: 1px solid #FAB101;
    font-family: "Inter", sans-serif;
}
.hero-explore a:before {
    background: #FAB101;
    content: "";
    position: absolute;
    right: -3px;
    top: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: 0.4s;
    border-radius: 25px;
}
.hero-explore a:hover:before {
    width: 103%;
    left: 0;
}
.hero-explore a:hover{
    color: #000319;
}
/* ======================  Banner animation Css Start here  =========================== */
.banner-section.option3 {
    position: relative;
    z-index: 3;
    padding: 315px 0 245px 0;
}
#particles-banner-animate {
    opacity: .8;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: transparent;
}
#particles-banner-animate2 {
    opacity: .8;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:-1;
    background: transparent;
}
/*---=====================================================
   <!--Cyberlux Hero Two Area Css-->
=========================================================---*/
.hero-area.style-two {
    background: url(../images/img/banner01-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 970px;
    position: relative;
    z-index: 1;
}
.hero-area.style-two .bannar-main-box {
    padding-left: 445px;
}
.hero-area.style-two .hero-content h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #FAB101;
    margin: 0px 0 0px 62px;
    text-transform: uppercase;
    position: relative;
}
.hero-area.style-two .hero-content h4::before {
    position: absolute;
    content: "";
    top: 12px;
    left: -60px;
    width: 50px;
    background-color: #FAB101;
    border-radius: 2px;
    height: 4px;
}
.hero-area.style-two .hero-content h4::after {
    position: absolute;
    content: "";
    top: 9px;
    left: -60px;
    width: 9px;
    background-color: #fff;
    border-radius: 50%;
    height: 9px;
    -webkit-animation: MOVE-BG 3s linear infinite alternate;
    -moz-animation: MOVE-BG 3s linear infinite alternate;
    -o-animation: MOVE-BG 3s linear infinite alternate;
    animation: MOVE-BG 3s linear infinite alternate;
}
.hero-area.style-two .hero-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 75px;
    color: #fff;
    margin: 6px 0 0;
}
.hero-area.style-two .hero-content h2 {
    font-size: 60px;
    font-weight: 700;
    line-height: 75px;
    color: #fff;
    margin: 0 0 0;
}
.hero-area.style-two .hero-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #fff;
    margin: 8px 0 34px;
    width: 70%;
}
.hero-area.style-two .hero-thumb {
    position: absolute;
    top: 0;
    left: 0;
}
.hero-area.style-two .hero-shape {
    position: absolute;
    top: 265px;
    left: 195px;
    z-index: 2;
}
.hero-area.style-two .hero-shape2 {
    position: absolute;
    top: 225px;
    left: 150px;
}
.hero-area.style-two .hero-thumb {
    position: absolute;
    top: 245px;
    left: 170px;
    z-index: 1;
}
.hero-area.style-two .hero-shape4 {
    position: absolute;
    top: 320px;
    right: 150px;
}
.hero-area.style-two .hero-shape3 {
    position: absolute;
    top: 320px;
    right: 128px;
}

/*---=====================================================
   <!--Cyberlux Section Title Area Css-->
=========================================================---*/
.section-sub-title h2 {
    font-size: 20px;
    color: #FAB101;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
    position: relative;
    padding: 0 0 0px 65px;
}
.section-sub-title h2::before {
    position: absolute;
    content: "";
    top: 12px;
    left: 0px;
    width: 50px;
    background-color: #FAB101;
    border-radius: 2px;
    height: 4px;
}
.section-sub-title h2::after {
    position: absolute;
    content: "";
    top: 9px;
    left: 0px;
    width: 9px;
    background-color: #fff;
    border-radius: 50%;
    height: 9px;
    -webkit-animation: MOVE-BG 3s linear infinite alternate;
    -moz-animation: MOVE-BG 3s linear infinite alternate;
    -o-animation: MOVE-BG 3s linear infinite alternate;
    animation: MOVE-BG 3s linear infinite alternate;
}
.section-title-space {
    margin-bottom: 50px;
}
.section_title h3 {
    font-size: 45px;
    line-height: 55px;
    color: #ffffff;
    font-weight: 700;
    margin: 10px 0 0;
}
.section_title h4 {
    font-size: 45px;
    line-height: 55px;
    color: #ffffff;
    font-weight: 700;
    margin: 0px 0 0;
}
.section-title-description p {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    margin: 12px 0 28px;
}

/*---=====================================================
   <!--Cyberlux Helpline Area Css-->
=========================================================---*/
.helpline {
    background: #FAB101;
    padding: 40px 15px 32px;
    border-radius: 10px;
    margin-top: -80px;
    transition: .5s;
    position: relative;
    z-index: 2;
}
.helpline-box {
    position: relative;
    z-index: 1;
}
.helpline-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: -25px;
    height: 100%;
    width: 1px;
    background-color: #0003191A;
}
.upper-box{
   margin-left: 30px;
}
.helpline-text h2 {
    font-size: 30px;
    line-height: 40px;
    color: #000319;
    margin: 0;
    font-weight: 700;
}
.helpline-text p {
    font-size: 16px;
    line-height: 26px;
    color: #424557;
    margin: 20px 0 0;
    font-weight: 600;
}

/*---=====================================================
   <!--Cyberlux about Area Css-->
=========================================================---*/
.about-area {
    padding: 100px 0 150px;
    background-image: url(../images/img/about-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 0px;
    z-index: 1;
}
.about-thumb {
    position: relative;
    z-index: 1;
}
.about-thumb2 {
    position: absolute;
    top: 160px; /* Reducimos este valor para que suba */
    left: 290px;
}
.about-thumb3 {
    position: absolute;
    top: 395px;
    right: 220px;
}
.single-about-box {
    display: flex;
    transition: 0.5s;
    background: #FAB1010D;
    padding: 24px 30px 25px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 14px;
    box-shadow: 0px 0px 2px 0px #FFFFFF40;
}
.single-about-box:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    transition: 0.5s;
    background: #000;
    border-radius: 5px;
}
.single-about-box:hover:before {
    height: 100%;
}
.about-icon{
    transition: .5s;
}
.single-about-box:hover .about-icon {
    transform: scaleX(-1);
}
.about-sub-title h2 {
    font-size: 20px;
    color: #FAB101;
    font-weight: 500;
    line-height: 30px;
    text-transform: uppercase;
    position: relative;
    padding: 0 0 0px 155px;
}
.about-sub-title h2::before {
    position: absolute;
    content: "";
    top: 12px;
    left: 95px;
    width: 50px;
    background-color: #FAB101;
    border-radius: 2px;
    height: 4px;
}
.about-sub-title h2::after {
    position: absolute;
    content: "";
    top: 9px;
    left: 95px;
    width: 9px;
    background-color: #fff;
    border-radius: 50%;
    height: 9px;
    -webkit-animation: MOVE-BG 3s linear infinite alternate;
    -moz-animation: MOVE-BG 3s linear infinite alternate;
    -o-animation: MOVE-BG 3s linear infinite alternate;
    animation: MOVE-BG 3s linear infinite alternate;
}
.about_title h3 {
    font-size: 45px;
    line-height: 55px;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    margin: 10px 0 0;
}
.about_title h4 {
    font-size: 45px;
    line-height: 55px;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    margin: 0px 0 0;
}
.about-title-description p {
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #ffffff;
    font-weight: 400;
    width: 85%;
    margin: 12px auto 28px;
}

/*---=====================================================
   <!--Cyberlux Service Area Css-->
=========================================================---*/
.service-area {
    padding: 95px 0 100px;
    background-image: url(../images/img/service-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.service-area .Cyberlux-btn {
    text-align: right;
}
/* Estructura base de la caja de servicio (color fijo por defecto) */
.single-service-box {
    transition: 0.5s;
    background: #0A1431;
    padding: 45px 15px 50px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0px 0px 2px 0px #FFFFFF40;
    overflow: hidden; /* Asegura que el pseudo-elemento de fondo resparde los bordes redondeados */
}

/* Efecto de despliegue animado original de la plantilla */
.single-service-box:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    transition: 0.5s;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
}

/* Activación de la animación al pasar el mouse por encima de cada caja específica */
.single-service-box:hover::before {
    height: 100%;
}

/* Imagen de fondo diferencial 1 (Aire libre / Camping) */
.single-service-box.service-bg-1:before {
    background-image: url('../images/img/service-box-hover.png');
}

/* Imagen de fondo diferencial 2 (Escuela rural / Zonas aisladas) */
.single-service-box.service-bg-2:before {
    background-image: url('../images/img/service-box-hover-escuela.png');
}

/* Imagen de fondo diferencial 3 (Hogar y emergencias) */
.single-service-box.service-bg-3:before {
    background-image: url('../images/img/service-box-hover-hogar.png');
}
.single-service-box:hover::before{
    height: 100%;
}
.service-icon {
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    background-color: #FAB10133;
    margin: 0 auto;
    transition: 0.5s;
}
.single-service-box:hover .service-icon {
    background-color: #FAB101;
}
.service-icon img {
    transition: .5s;
}
.single-service-box:hover .service-icon img {
    filter: brightness(0);
    transform: scaleX(-1);
}
.service-content h5 {
    font-size: 22px;
    color: #ffffff;
    margin: 23px 0 0;
    transition: 0.5s;
    font-weight: 600;
    line-height: 30px;
}
.service-content h5 p {
    color: #ffffff;
    font-weight: 400;
    padding: 10px 0 33px;
    font-size: 16px;
    line-height: 26px;
}
.service-button a {
    font-size: 15px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    padding: 12px 35px;
    transition: 0.4s;
    background: #FAB10133;
    text-transform: uppercase;
    border-radius: 30px;
    color: #FAB101;
    z-index: 1;
}
.service-button a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 30px;
    background-color: #FAB101;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}
.single-service-box:hover .service-button a::before {
    transform: scale(1);
}
.single-service-box:hover .service-button a{
    color: #0A1431;
}

/*---=======================================
   <!--Cyberlux why choose Area Css-->
============================================---*/
.why-choose-area {
    padding: 95px 0 130px;
    background: #0A1431;
    position: relative;
    z-index: 1;
}
.why-choose-thumb {
    position: relative;
    z-index: 1;
}
.why-thumb2 {
    position: absolute;
    top: 128px;
    left: 250px;
}
.why-thumb3 {
    position: absolute;
    bottom: 70px;
    left: 250px;
    z-index: 2;
}
.why-choose-single-box {
    padding: 18px 22px 8px;
    border-radius: 10px;
    border: 1px solid #FAB10133;
}
.choose-icon {
    display: inline-block;
}
.choose-title {
    display: inline-block;
}
.choose-title h4 {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    margin: 0 0 0;
    font-weight: 600;
}
.choose-single-box {
    display: flex;
    background: #FAB101;
    align-items: center;
    height: 100px;
    width: 260px;
    border-radius: 50px 10px 10px 50px;
    padding: 7px 0 0 30px;
    position: absolute;
    bottom: 110px;
    left: 465px;
    z-index: 3;
}
.choose-title h2 {
    font-size: 16px;
    color: #000319;
    font-weight: 400;
    line-height: 26px;
    margin-left: 10px;
    font-family: "Inter", sans-serif;
}
.choose-description p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

/*---=======================================
   <!--Cyberlux why choose Area Css-->
============================================---*/
.why-choose-two-area {
    padding: 95px 0 130px;
    background: #0A1431;
    position: relative;
    z-index: 1;
}
.why-choose-two-thumb {
    position: relative;
    text-align: right;
    z-index: 1;
}
.why-two-thumb2 {
    position: absolute;
    top: 160px;
    right: 680px;
}
.why-two-thumb3 {
    position: absolute;
    bottom: 70px;
    right: 470px;
    z-index: 2;
}
.why-choose-single-box {
    padding: 18px 22px 8px;
    border-radius: 10px;
    border: 1px solid #FAB10133;
}
.choose-icon {
    display: inline-block;
}
.choose-title {
    display: inline-block;
}
.choose-title h4 {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    margin: 0 0 0;
    font-weight: 600;
}
.choose-two-single-box {
    display: flex;
    background: #FAB101;
    align-items: center;
    height: 100px;
    width: 260px;
    border-radius: 50px 10px 10px 50px;
    padding: 7px 0 0 30px;
    position: absolute;
    bottom: 100px;
    right: 340px;
    z-index: 3;
}
.choose-title h2 {
    font-size: 16px;
    color: #000319;
    font-weight: 400;
    line-height: 26px;
    margin-left: 10px;
    font-family: "Inter", sans-serif;
}

/*---=======================================
   <!--Cyberlux team Area Css -->
============================================---*/
.team-area {
    padding: 110px 0 100px;
    background: #0A1431;
    position: relative;
    z-index: 1;
}
.team-area .section-sub-title h2::before {
    left: 0px;
    right: 140px;
    margin: auto;
}
.team-area .section-sub-title h2::after {
    left: 0px;
    right: 180px;
    margin: auto;
}
.single-team-box {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    transition: 0.5s;
    border-radius: 5px;
}
.team-thumb {
    line-height: 0;
    position: relative;
    text-align: center;
}
.team-thumb img {
    transition: 0.4s;
    margin-top: 130px;
    width: 100%;
}
.team-member-content {
    background: #FAB1011A;
    padding: 23px 30px 145px;
    position: absolute;
    top: 0px;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 5px;
    transition: .5s;
}
.single-team-box:hover .team-member-content {
    background-color: #FAB101;
}
.team-member-name h2 {
    margin: 12px 0 0 0;
    color: #fff;
    transition: 0.5s;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
}
.single-team-box:hover .team-member-name h2 {
    color: #0A1431;
}
.member-designation h3 {
    margin: 0;
    padding: 0;
    color: #fff;
    transition: 0.5s;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    font-family: "Inter", sans-serif;
}
.single-team-box:hover .member-designation h3 {
    color: #0A1431;
}
.team-plus-icon {
    position: absolute;
    top: 105px;
    right: 25px;
    z-index: 1;
    transition: .5s;
}
.single-team-box:hover .team-media-icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(100px);
}
.team-plus-icon i {
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #000;
    background-color: #FAB101;
    border-radius: 5px;
    font-weight: bold;
    transition: .5s;
}
.team-media-icon {
    position: absolute;
    right: 25px;
    margin: auto;
    top: 15px;
    z-index: 1;
    display: inline-block;
    border-radius: 5px;
    transition: .5s;
    background: #0A1431;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0px);
}
.team-media-icon li {
    list-style: none;
}
.team-media-icon li a i {
    font-size: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 0;
    margin: 0px;
    color: #fff;
    transition: .5s;
    display: inline-block;
}

/*
<!-- =====================================-->
<!-- Cyberlux Video section css -->
<!-- =====================================-->*/
a.video-vemo-icon.venobox.vbox-item {
    position: relative;
    top: 28px;
    left: 0;
    transform: translate(151%, 23%);
    background: #FAB101;
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000319 !important;
    border-radius: 50%;
    border: 10px solid #000319;
    transition: 0.2s linear;
    z-index: 22;
}
a.video-vemo-icon.venobox.vbox-item:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    -webkit-animation: border-animation 1500ms ease-out infinite;
    animation: border-animation 1500ms ease-out infinite;
    background: #ffffff;
}
a.video-vemo-icon.venobox.vbox-item i {
    position: relative;
    z-index: 2222;
    color: #000319;
    font-size: 25px;
    /* transform: rotate(-45deg); */
}
.circle-animation {
    position: absolute;
    left: 398px;
    bottom: 70px;
    border-radius: 100%;
}
a.circle-animate {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 152px;
    height: 152px;
    line-height: 152px;
    text-align: center;
    border-radius: 100%;
    background: #FAB101;
}
.text-inner {
    animation: circle 15s linear infinite;
    position: relative;
    fill: transparent;
}
.text-inner svg {
    width: 110px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    word-spacing: 10px;
    transform: rotate(0) scaleX(1) scaleY(1);
    position: relative;
}
.text-inner text {
    fill: #000319;
    direction: ltr;
    transition: 0.3s stroke, 0.3s stroke-width, 0.3s fill;
    font-size: 35px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

/*
<!-- ============================================-->
<!--Cyberlux Teastimonial Area Css -->
<!-- ============================================-->*/
.teastimonial-area {
    padding: 120px 0 120px;
    background: #0A1431;
    position: relative;
    z-index: 1;
}
.testimonial-single-content {
  position: relative;
  text-align: center;
  z-index: 1;
  transition: 0.5s;
}
.testimonial-title h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.testimonial-single-content {
    transition: 0.5s;
    padding: 0 20px 60px 20px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid #FFFFFF4D;
    box-shadow: 0px 0px 3px 0px #FFFFFF4D;
}
.testimonial-img-desc-content {
  padding: 30px 0px 0px;
  border-radius: 5px;
  position: relative;
  transition: 0.5s;
  z-index: 1;
  text-align: center;
}
.testimonial-image {
    position: relative;
    text-align: center;
    background: #D9D9D9;
    height: 50px;
    width: 50px;
    line-height: 56px;
    border-radius: 50%;
    margin: auto;
}
.testimonial-image::before {
    position: absolute;
    content: "";
    top: 25px;
    left: -160px;
    height: 1px;
    width: 150px;
    background-color: #FFFFFF4D;
}
.testimonial-image::after {
    position: absolute;
    content: "";
    top: 25px;
    left: 60px;
    height: 1px;
    width: 150px;
    background-color: #FFFFFF4D;
}
.testimonial-image img {
    height: auto;
    width: auto !important;
    position: relative;
    display: inline-block !important;
}
.about-author {
  padding: 0;
  display: inline-block;
}
.about-author h2 {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    line-height: 30px;
    transition: 0.4s;
    margin: 0;
}
.about-author h3 {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
  font-family: "Inter", sans-serif;
}
.testi-description p {
  position: relative;
  z-index: 1;
  transition: 0.5s;
  color: #fff;
  padding: 23px 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  margin: 0;
  text-align: center;
  font-family: "Inter", sans-serif;
}
.author-info {
  transition: 0.5s;
}
.author-image {
    padding: 0;
    margin: 0 15px 0 0;
    display: inline-block;
    align-items: center;
    position: relative;
    top: 17px;
}
.author-image img {
  display: inline-block;
  border-radius: 50%;
  transition: 0.5s;
  position: relative;
  z-index: 1;
  top: 8px;
}
.testimonial-section.option1 .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    z-index: 999;
}
.testimonial-section-carousel1 .owl-prev {
    display: inline-block;
    margin-right: 30px;
}
.testimonial-section-carousel1 .owl-prev i {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #FAB101;
    background-color: #0A1431;
    display: inline-block;
    transition: .5s;
    box-shadow: 0px 0px 3px 0px #FFFFFF4D;
}
.testimonial-section-carousel1 .owl-next {
    display: inline-block;
}
.testimonial-section-carousel1 .owl-next i {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #FAB101;
    background-color: #0A1431;
    display: inline-block;
    transition: .5s;
    box-shadow: 0px 0px 3px 0px #FFFFFF4D;
}

.testimonial-section-carousel1 .owl-prev i:hover{
  color: #000319;
  background: #FAB101;
}
.testimonial-section-carousel1 .owl-next i:hover{
  color: #000319;
  background: #FAB101;
}

/* Cyberlux testi nav */
.teastimonial-area .owl-nav {
    position: absolute;
    left: 0px;
    right: 0;
    text-align: center;
    bottom: -14px;
}
.teastimonial-area .owl-prev {
    display: inline-block;
    margin-right: 30px;
}
.teastimonial-area .owl-prev i {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #FAB101;
    background-color: #0A1431;
    display: inline-block;
    transition: .5s;
    box-shadow: 0px 0px 3px 0px #FFFFFF4D;
}
.teastimonial-area .owl-next {
    display: inline-block;
}
.teastimonial-area .owl-next i {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 5px;
    color: #FAB101;
    background-color: #0A1431;
    display: inline-block;
    transition: .5s;
    box-shadow: 0px 0px 3px 0px #FFFFFF4D;
}
.teastimonial-area .owl-prev i:hover{
  color: #000319;
  background: #FAB101;
}
.teastimonial-area .owl-next i:hover{
  color: #000319;
  background: #FAB101;
}

.icon-box-section {
    display: flex;
    align-items: center;
    gap: 16px;
}
.icon-box-section .icon-box-icon i{
  font-size: 25px;
  display: inline-block;
  height: 60px;
  width: 60px;
  color: #000;
  background-color: #FAB101;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
}
.icon-box-section .icon-box-title h5 {
    color: #ffffff;
    transition: 0.5s;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
    font-family: "Inter", sans-serif;
}
.icon-box-section .icon-box-description p {
  color: #FAB101;
  font-weight: 500;
  font-size: 18px;
  font-family: "Inter", sans-serif;
}

/*
<!-- =====================================-->
<!--Cyberlux case study area Css -->
<!-- =====================================-->*/
.case-study-area {
    padding: 100px 0 120px;
    background-image: url(../images/img/case-study-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.case-study-area .section-title-space {
    margin-bottom: 55px;
}
.case-study-thumb {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: 0.5s;
  border-radius: 3px;
}
.case-study-thumb::after {
  position: absolute;
  content: "";
  border-radius: 3px;
  height: 0%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: 0.5s;
  background-color: #FAB10199;
}
.case-study-thumb:hover:after {
  height: 100%;
}
.case-study-thumb img {
	line-height: 0;
	height: 430px;
	object-fit: cover;
	border-radius: 5px;
}
.case-study-content {
    padding: 1px 30px 20px;
    position: absolute;
    bottom: -118px;
    background-color: #0A1431;
    box-shadow: 0px 0px 2px 0px #FFFFFF40;
    left: 0;
    margin: 0 25px;
    right: 0;
    transition: 0.5s;
    z-index: 2;
    border-radius: 10px;
}
.single-case-study-box:hover .case-study-content {
  bottom: 30px;
}
.case-study-title h3 a {
  font-size: 22px;
  display: inline-block;
  transition: 0.5s;
  line-height: 30px;
  color: #FAB101;
  font-weight: 600;
  z-index: 2;
  position: relative;
  padding: 7px 0 0 0;
}
.case-study-catagories h2 {
    margin: 0;
    line-height: 0;
}
.case-study-catagories h2 a {
  font-size: 16px;
  line-height: 26px;
  color: #fff;
  font-weight: 300;
  transition: 0.5s;
  padding:0 0 0;
  display: inline-block;
  font-family: "Inter", sans-serif;
}
.case-study-button a i {
    font-size: 20px;
    display: inline-block;
    position: absolute;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    color: #000;
    background: #FAB101;
    border-radius: 50%;
    top: 25px;
    right: 20px;
    transform: rotate(-45deg);
    transition: .5s;
}
.case-study-button a i:hover{
    transform: rotate(0deg);
}
.case-study-area .owl-dots {
    position: absolute;
    top: -125px;
    right: 140px;
}
.case-study-area .owl-dot {
    height: 13px;
    width: 13px;
    background: #fff;
    display: inline-block;
    margin-right: 22px;
    border-radius: 50%;
    position: relative;
    transition: .5s;
}
.case-study-area .owl-dot.active::before {
    position: absolute;
    content: "";
    top: -10px;
    left: -10px;
    height: 35px;
    width: 35px;
    background-color: transparent;
    border: 1px solid #FAB101;
    border-radius: 50%;
    transition: .5s;
}
.case-study-area .owl-dot.active{
  background: #FAB101;
}

/*
<!-- =====================================-->
<!--Cyberlux Blog Area Css-->
<!-- =====================================-->*/
.blog-area {
    padding: 110px 0 120px;
    background-image: url(../images/img/blog-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.blog-area .section-sub-title h2::before {
    left: 0px;
    right: 125px;
    margin: auto;
}
.blog-area .section-sub-title h2::after {
    left: 0px;
    right: 168px;
    margin: auto;
}
.blog-area .single-blog-box {
    display: block;
    position: relative;
    background: #0A1431;
    padding: 20px 20px 41px;
    border-radius: 20px;
    border: 1px solid #0A1431;
    transition: .5s;
}
.blog-area .single-blog-box:hover {
    border: 1px solid #FAB101;
}
.blog-area .single-blog-thumb{
    position: relative;
    overflow: hidden;
}
.blog-area .single-blog-thumb::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
}
.blog-area .single-blog-box:hover .single-blog-thumb::before {
    left: 0;
    right: 0;
    opacity: 0;
}
.blog-area .single-blog-thumb img {
    height: 345px;
    width: 100%;
    object-fit: cover;
}
.blog-area .blog-post-time {
    display: inline-block;
    background: #0A1431;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 70px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    border-radius: 5px;
    padding: 8px 0 0 0;
}
.blog-area .blog-post-time h5 {
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin: 0;
    font-weight: 400;
}
.blog-area .blog-post-time h6 {
    padding: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    margin: 0;
    text-align: center;
}
.blog-area .blog-content {
    padding: 20px 0 0px;
    border-radius: 0;
}
.blog-area .blog-content .blog_post_inner_content span {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.blog-area .blog-content .blog_post_inner_content span i {
    display: inline-block;
    font-size: 12px;
    color: #FAB101;
    margin-right: 10px;
}
.blog-area .blog-content > a {
    font-size: 20px;
    display: inline-block;
    padding: 20px 0 27px;
    transition: 0.5s;
    font-weight: 600;
    line-height: 28px;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
}
.blog-area .single-blog-box:hover .blog-content > a{
    color: #FAB101;   
}
.blog-area .blog-btn a {
    position: relative;
    font-size: 15px;
    display: inline-block;
    font-weight: 500;
    transition: 0.5s;
    background: transparent;
    text-transform: uppercase;
    color: #FAB101;
    padding: 12px 32px;
    border: 1px solid #FAB101;
    border-radius: 30px;
    z-index: 1;
    font-family: "Inter", sans-serif;
}
.blog-area .blog-btn a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scale(0);
    background-color: #FAB101;
    border-radius: 30px;
    z-index: -1;
    transition: .5s;
}
.blog-area .single-blog-box:hover .blog-btn a::before {
    transform: scale(1);
}
.blog-area .single-blog-box:hover .blog-btn a {
    color: #000319;
}
.blog-area .blog-btn a i {
    transform: rotate(-45deg);
    display: inline-block;
    transition: 0.5s;
    margin-left: 7px;
}
.blog-area .single-blog-box:hover .blog-btn a i {
    color: #000319;
    transform: rotate(0deg);
}

/*
<!-- =====================================-->
<!--Cyberlux Text Area Css-->
<!-- =====================================-->*/
.text-area {
    position: relative;
    z-index: 1;
    padding: 49px 0 46px;
    background: #FAB101;
}

.text-area .inner-container {
    max-width: 1812px;
    margin: 0 auto;
}

.text-area .marquee {
    position: relative;
    --duration: 30s;
    --gap: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap:0px;
}

.text-area .marquee-block {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: 0;
    min-width: 87%;
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
}
.text-area:hover .marquee-block {
    animation-play-state: paused;
}
.text-area .marquee-block .content-box {
    position: relative;
    margin-right:0px;
}

.text-area .marquee-block .content-box:last-child {
    margin-right:0px;
}

.text-area .marquee-block .content-box:last-child::before {
    display: none;
}

.text-area .marquee-block .content-box .title{
    margin:0;
}

.text-area .marquee-block .content-box .title {
    font-size: 25px;
    line-height: 35px;
    color: #000319;
    display: inline-block;
    padding: 0 45px;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
}

.text-area .marquee-block .content-box .title img {
    position: relative;
    left: -48px;
    animation: rotateme 4s linear infinite;
}

  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
}

/*
<!-- =====================================-->
<!--Cyberlux About-Two Area Css -->
<!-- =====================================-->*/
.about-two-area {
    padding: 125px 0 125px;
    background-image: url(../images/img/about-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.about-two-single-box {
    padding: 25px 0 30px;
    border-top: 1px solid #FFFFFF1A;
    border-bottom: 1px solid #FFFFFF1A;
}
.single-about-two-box {
    display: flex;
    transition: 0.5s;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 14px;
}
.about-title h4 {
    font-size: 20px;
    line-height: 28px;
    margin: 0;
    font-weight: 600;
}
.about-title p {
    font-size: 16px;
    line-height: 26px;
    margin: 5px 0 0;
    font-weight: 400;
}
.about-two-shape {
    position: absolute;
    top: 145px;
    left: 140px;
    z-index: 1;
}
.about-two-shape2 {
    position: absolute;
    top: 130px;
}

/*
<!-- =====================================-->
<!--Cyberlux blog grid Area Css -->
<!-- =====================================-->*/
.blog-grid-area {
    padding: 100px 0 80px;
    background-image: url(../images/img/service-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.blog-grid-area .single-blog-box {
    display: block;
    position: relative;
    background: #0A1431;
    padding: 20px 20px 41px;
    border-radius: 20px;
    border: 1px solid #0A1431;
    transition: .5s;
    margin-bottom: 30px;
}
.blog-grid-area .single-blog-thumb{
    position: relative;
    overflow: hidden;
}
.blog-grid-area .single-blog-thumb::before {
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
}
.blog-grid-area .single-blog-box:hover .single-blog-thumb::before {
    left: 0;
    right: 0;
    opacity: 0;
}
.blog-grid-area .single-blog-thumb img {
    height: 245px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.blog-grid-area .blog-content {
    padding: 20px 0 0px;
    border-radius: 0;
}
.blog-grid-area .blog-content .blog_post_inner_content span {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.blog-grid-area .blog-content .blog_post_inner_content span i {
    display: inline-block;
    font-size: 12px;
    color: #FAB101;
    margin-right: 10px;
}
.blog-grid-area .blog-content > a {
    font-size: 20px;
    display: inline-block;
    padding: 20px 0 27px;
    transition: 0.5s;
    font-weight: 600;
    line-height: 28px;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
}
.blog-grid-area .single-blog-box:hover .blog-content > a{
    color: #FAB101;   
}
.blog-grid-area .blog-btn a {
    position: relative;
    font-size: 15px;
    display: inline-block;
    font-weight: 500;
    transition: 0.5s;
    background: transparent;
    text-transform: uppercase;
    color: #FAB101;
    padding: 12px 32px;
    border: 1px solid #FAB101;
    border-radius: 30px;
    z-index: 1;
    font-family: "Inter", sans-serif;
}
.blog-grid-area .blog-btn a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scale(0);
    background-color: #FAB101;
    border-radius: 30px;
    z-index: -1;
    transition: .5s;
}
.blog-grid-area .single-blog-box:hover .blog-btn a::before {
    transform: scale(1);
}
.blog-grid-area .single-blog-box:hover .blog-btn a {
    color: #000319;
}
.blog-grid-area .blog-btn a i {
    transform: rotate(-45deg);
    display: inline-block;
    transition: 0.5s;
    margin-left: 7px;
}
.blog-grid-area .single-blog-box:hover .blog-btn a i {
    color: #000319;
    transform: rotate(0deg);
}


/*
<!-- =====================================-->
<!--Cyberlux Footer Area Css style-one -->
<!-- =====================================-->*/
.footer-area {
    background: #0A1431;
    position: relative;
    padding: 90px 0 30px;
}
.footer-area .footer-desc p {
    font-size: 16px;
    line-height: 26px;
    margin: 42px 0 45px;
    color: rgb(255 255 255);
    font-weight: 400;
}
.social-media-section ul li {
    display: inline-block;
}
.social-media-section ul li a {
    display: inline-block;
    position: relative;
    color: #fff;
    background-color: #ffffff38;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    margin-right: 5px;
    transition: .5s;
    z-index: 1;
}
.social-media-section ul li a::after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: #FAB101;
    transform: scale(0);
    transition: .5s;
}
.social-media-section ul li a:hover:after {
    transform: scale(1);
}
.footer-area .footer-call-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.footer-area .footer-call-box .footer-call-icon i {
    color: #fff;
    display: inline-block;
    height: 40px;
    width: 40px;
    font-size: 20px;
    line-height: 40px;
    background-color: #ffffff57;
    text-align: center;
    border-radius: 50%;
}
.footer-area .footer-call-content p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.footer-area .footer-title h2 {
    font-size: 23px;
    line-height: 40px;
    margin: 0;
    color: #ffffff;
    font-weight: 700;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.footer-area .footer-title h2::before {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 1px;
    background-color: rgb(255 255 255);
    content: "";
    z-index: -1;
    opacity: 0;
    transition: .5s;
}
.footer-area .footer-title h2:hover::before {
	width: 100%;
	opacity: 1;
}
.footer-area .footer-list-item {
    padding-top: 35px;
}
.footer-area .footer-list-item ul li {
    margin-bottom: 18px;
}
.footer-area .footer-list-item ul li a {
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    color: rgb(255 255 255);
    font-weight: 400;
    transition: 0.5s;
}
.footer-area .footer-list-item ul li a:hover{
    color: #FAB101; 
}
.footer-area .footer-list-item ul li a i {
    display: inline-block;
    margin-right: 8px;
    transition: 0.5s;
    font-size: 12px;
}
.footer-area .footer-list-item ul li a:hover i{
    color: #FAB101; 
}
.footer-bottom-content p {
   font-size: 16px;
   line-height: 26px;
   color: #fff;
   margin: 0;
   padding-top: 35px;
   border-top: 1px solid #ffffff3b;
   font-weight: 400;
}

/*
<!-- =====================================-->
<!-- Cyberlux counter area css -->
<!-- =====================================-->*/
.single-counter-box {
    padding: 27px 30px 18px;
    transition: 0.5s;
    margin-bottom: 20px;
    display: flex;
    border-radius: 10px;
    gap: 11px;
    align-items: center;
    border: 1px solid #FAB10133;
}
.single-counter-box:hover {
    border: 1px solid #FAB101;
}
.single-counter-box .counter-icon {
    height: 80px;
    width: 80px;
    line-height: 80px;
    border-radius: 50%;
    background-color: #FAB10133;
    text-align: center;
    transition: .5s;
}
.single-counter-box .counter-icon img {
    transition: 0.5s;
}
.single-counter-box:hover .counter-icon img {
    filter: brightness(0);
    transform: scaleX(-1);
}
.single-counter-box:hover .counter-icon {
    background-color: #FAB101;
}
.counter-content h3 {
    font-size: 45px;
    line-height: 55px;
    display: inline-block;
    color: #fff;
    transition: .5s;
    font-weight: 700;
}
.counter-content span {
    font-size: 45px;
    line-height: 55px;
    display: inline-block;
    color: #fff;
    transition: .5s;
    font-weight: 700;
}
.counter-content p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin: 0;
    font-weight: 400;
}

/*
<!-- =====================================-->
<!-- Cyberlux contact area css -->
<!-- =====================================-->*/

.contact-area {
    background: url(../images/img/service-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 100px 0px 100px;
}
.contact-area .form-bg {
    padding: 40px 35px 45px;
    background: #0A1431;
    border-radius: 10px;
    margin-bottom: 30px;
}
.contact-form-title h2 {
    font-size: 35px;
    line-height: 40px;
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 10px;
}
.contact-form-title p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    transition: 0.5s;
    margin: 30px 0 50px;
}
.single-input-box input {
    height: 56px;
    width: 100%;
    padding-left: 10px;
    border: 1px solid rgb(255 255 255 / 20%);
    background: transparent;
    margin-bottom: 25px;
    outline: 0;
    border-radius: 7px;
    color: #fff;
}
.single-input-box input::placeholder {
    font-size: 16px;
    color: rgb(255 255 255 / 70%);
}
.contact-area .single-input-box select#subject {
    height: 56px;
    width: 100%;
    color: rgb(255 255 255 / 70%);
    padding-left: 10px;
    border: 1px solid rgb(255 255 255 / 20%);
    background: transparent;
    margin-bottom: 25px;
    outline: 0;
    border-radius: 7px;
}
.contact-area .single-input-box option {
    background: #000;
}
.single-input-box textarea {
    height: 160px;
    width: 100%;
    padding-top: 12px;
    padding-left: 10px;
    border: 1px solid rgb(255 255 255 / 20%);
    background: transparent;
    margin-bottom: 25px;
    outline: 0;
    border-radius: 7px;
    color: #fff;
}
.single-input-box textarea::placeholder {
    font-size: 16px;
    color: rgb(255 255 255 / 70%);
}
.massage-sent-button button {
    display: inline-block;
    font-size: 16px;
    padding: 16px 35px;
    color: #0A1431;
    font-weight: 500;
    position: relative;
    z-index: 1;
    transition: .5s;
    border: none;
    border-radius: 5px;
    background-color: #FAB101;
    overflow: hidden;
}
.massage-sent-button button:before {
    position: absolute;
    content: "";
    z-index: -1;
    width: 60px;
    height: 60px;
    left: -41px;
    top: 0px;
    border-radius: 30px;
    background: #0A1431;
    opacity: 0.3;
    transform: scale(1);
    transition: .5s;
}
.massage-sent-button button:hover:before{
    width:100%;
    height:100%;
    border-radius:0;
    left:0;
}

.contact-area .contact-info-box {
    padding: 32px 30px 30px;
    background: #0A1431;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 30px;
}
.contact-area .contact-info-box .contact-info-icon i {
    position: relative;
    color: #fff;
    display: inline-block;
    height: 60px;
    width: 60px;
    font-size: 30px;
    line-height: 60px;
    background-color: #FFFFFF1A;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
    transition: .5s;
}
.contact-area .contact-info-box:hover .contact-info-icon i {
    color: #0A1431;
}
.contact-area .contact-info-box .contact-info-icon i::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #FAB101;
    border-radius: 50%;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}
.contact-area .contact-info-box:hover .contact-info-icon i::after {
    transform: scale(1);
}
.contact-info-content h2 {
    font-size: 25px;
    line-height: 35px;
    color: #fff;
    margin: 20px 0 5px;
    font-weight: 700;
    font-family: "Rajdhani", sans-serif;
}
.contact-info-content p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin: 0px;
    font-weight: 400;
}

/*---=====================================================
   <!--Cyberlux Breadcumb Area Css-->
=========================================================---*/
.breadcumb-area {
    padding: 260px 0 180px;
    background: url(../images/img/banner01-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
}
.breadcumb-content {
    text-align: center;
}
.breadcumb-content h4 {
    font-size: 60px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}
.breadcumb-content ul li a {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}
.breadcumb-content ul li a span {
    display: inline-block;
    margin: 0 5px;
    position: relative;
    top: 2px;
}
.breadcumb-content ul li {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

/*---=====================================================
   <!--Cyberlux service details Area Css-->
=========================================================---*/
.service-details-area {
    padding: 100px 0 80px;
    background-image: url(../images/img/service-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.service-details-thumb img {
    width: 100%;
    border-radius: 5px;
}
.services-details-title {
    font-size: 42px;
    color: #fff;
    font-weight: 700;
    margin: 40px 0 24px;
}
.service-details-desc {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 24px;
}
.service-detail-desc {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-weight: 400;
}
.service-sub-title h3 {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    margin: 35px 0 30px;
}
.service-details-iteam {
    padding-left: 20px;
}
.service-details-iteam ul li {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 10px;
}
.service-details-iteam ul li i {
    display: inline-block;
    color: #FAB101;
    margin-right: 20px;
}
.service-sub-title h4 {
    font-size: 30px;
    color: #fff;
    font-weight: 700;
    margin: 55px 0 22px;
}
.service-cyber-desc p {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    margin-bottom: 40px;
    font-weight: 400;
}
.widget-sidber {
    border-radius: 5px;
    padding: 38px 35px 40px;
    margin-bottom: 27px;
    background-color: #0A1431;
}
.widget-sidber-content h4 {
    font-size: 30px;
    line-height: 1;
    color: #fff;
    font-weight: 600;
    position: relative;
}
.widget-sidber-content h4::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #FAB101;
    bottom: -18px;
}
.widget_search form {
    position: relative;
}
.widget-category {
    margin-top: 45px;
}
.widget-category ul li {
    list-style: none;
    display: inline-block;
}
.widget-category ul li a {
    font-size: 18px;
    display: inline-block;
    margin-bottom: 14px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: 0.5s;
    text-transform: capitalize;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #ffffff5d;
    font-weight: 500;
    font-family: "Rajdhani", sans-serif;
}
.widget-category ul li a:hover{
    color:#FAB101;
}
.widget-category ul li a i{
    font-size: 12px;
    display: inline-block;
    margin-right: 5px;
    color:#FAB101;
}
.widget-sidber-download-button a {
    display: inline-block;
    background: #00181a;
    width: 100%;
    color: #fff;
    padding: 15px 23px;
    border-radius: 5px;
    margin-bottom: 18px;
    text-transform: capitalize;
}
.widget-sidber-download-button i {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    margin-right: 9px;
    position: relative;
    top: 3px;
}
.widget-sidber-download-button a.active i {
    color: #fff;
}
.widget-sidber-download-button span i {
    float: right;
    display: inline-block;
    font-size: 16px;
}
.widget-sidber-download-button a.active span i {
    color: #fff;
}
  
.widget-sidber-download-button {
    margin-top: 45px;
}
.post-thumb a img {
    height: 80px;
    width: 85px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 12px;
}
.category-content h4{
    margin: 0;
}
.category-content h4 a {
    font-size: 16px;
    line-height: 26px;
    transition: .5s;
    font-weight: 500;
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
}
.category-content h4 a:hover{
    color:#FAB101;
}
.category-content h5 {
    font-size: 14px;
    line-height: 24px;
    margin: 0 0 0;
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.widget_search form {
    position: relative;
}
.widget_search input {
    padding-left: 20px !important;
    height: 60px;
    width: 100% !important;
    position: relative;
    outline: 0 !important;
    border: transparent !important;
    margin-top: 45px;
    background-color: #FAB101;
}
button.icons {
    border: 0;
    font-size: 16px;
    position: absolute;
    right: 14px;
    top: 58px;
    color: #012549;
    background: transparent;
}
.widget_search input::placeholder {
    color: #012549;
}

/***=====================================
   Cyberlux pricing area css
====================================***/
.pricing-area {
    padding: 110px 0 100px;
    background-image: url(../images/img/pricing-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.pricing-single-items {
    position: relative;
    text-align: center;
    background: #0A1431;
    padding: 41px 35px 48px;
    border: 1px solid #0A1431;
    border-radius: 10px;
    box-shadow: 0px 0px 2px 0px #FFFFFF4D;
    margin-bottom: 20px;
    transition: .5s;
}
.pricing-single-items:hover {
    border: 1px solid #FAB101;
}
.tab {
    position: relative;
    overflow: hidden;
    text-align: right;
    margin-top: -68px;
}
.tabs {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #F6F4F5;
    border-radius: 30px;
    transition: .5s;
}
.tabs li {
    float: left;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.tabs li a {
    padding: 14px 35px;
    border-radius: 30px;
    display: inline-block;
    font-size: 15px;
    text-transform: uppercase;
    color: #000319;
    background-color: #fff;
    transition: .5s;
    font-weight: 500;
}
.tabs_item {
    display: none;
    padding: 48px 0 0;
}
.tabs_item:first-child {
    display: block;
}
li.current a {
    background: #FAB101 !important;
    transition: .5s;
}
.pricing-plan {
    font-size: 28px;
    line-height: 34px;
    color: #fff;
    font-weight: 700;
    font-family: "Rajdhani", sans-serif;
}
.pricing-money h3 {
    font-size: 36px;
    line-height: 40px;
    color: #fff;
    font-weight: 700;
    margin: 14px 0 18px;
    text-transform: capitalize;
    transition: .5s;
    font-family: "Rajdhani", sans-serif;
}
.pricing-single-items:hover .pricing-money h3{
   color: #FAB101; 
}
.pricing-title span {
    font-size: 16px;
    color: #ccd0e2;
}
p.pricing-text {
    font-size: 16px;
    color: #fff;
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 37px;
    padding-bottom: 31px;
    border-bottom: 1px solid #FFFFFF3D;
    font-family: "Inter", sans-serif;
}
.pricing-feature ul li {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 12px;
    transition: .5s;
}
.pricing-feature ul li img {
    margin-right: 10px;
}
.pricing-btn a {
    font-size: 15px;
    text-transform: uppercase;
    position: relative;
    height: 50px;
    line-height: 50px;
    border-radius: 30px;
    width: 100%;
    font-weight: 500;
    border: 1px solid #FAB101;
    display: inline-block;
    margin-top: 24px;
    transition: .5s;
    z-index: 1;
}
.pricing-single-items:hover .pricing-btn a{
   color: #000319; 
}
.pricing-btn a:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #FAB101;
    border-radius: 30px;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}
.pricing-single-items:hover .pricing-btn a:after{
   transform: scale(1);
}

/***=====================================
   Cyberlux faq area css
====================================***/
.faqs-area {
    padding: 95px 0 100px;
    background-image: url(../images/img/service-bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.faqs-container {
    margin-top: 60px;
}
.faq-singular .faq-question {
    font-size: 22px;
    z-index: 1;
    position: relative;
    width: 100%;
    cursor: pointer;
    padding: 16px 20px;
    margin: 28px 0 0px;
    background: #0A1431;
    border-radius: 30px;
    color: #fff !important;
    font-weight: 600;
    transition: 0.4s;
    display: inline-block;
    font-family: "Rajdhani", sans-serif;
}
.faq-singular.active .faq-question {
    color: #000319 !important;
    background: #FAB101;
    border-radius: 30px 30px 0 0;
}
.faq-answer {
    display: none;
    font-size: 16px;
    padding: 23px 10px 23px 30px;
    background: #0A1431;
    border-radius: 0 0 30px 30px;
    color: #FFFFFF;
}
.faq-singular.active .faq-answer::before {
    position: absolute;
    content: '';
    opacity: 0.149;
    width: 640px;
    height: 1px;
    background-color: #042424;
    left: 30px;
    top: 5px;
}
.faq-singular .faq-question:before {
    position: absolute;
    content: "+";
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    font-weight: 400;
    transition: 0.5s;
    color: #fff;
    z-index: 1;
}
.faq-singular.active .faq-question:before {
    content: "-";
    font-size: 40px;
    color: #fff;
    right: 40px;
    z-index: 1;
}
.faq-singular.active .faq-question::after {
    color: #042424;
}
.faqs-area .desc {
    font-size: 16px;
    line-height: 28px;
    color: #fff;
    font-weight: 400;
}
.faqs-area .faq-thumb {
    position: relative;
    z-index: 1;
}
.faq-shape {
    position: absolute;
    top: 140px;
    z-index: 1;
    left: 580px;
}
.faq-shape2 {
    position: absolute;
    bottom: 80px;
    left: 760px;
}

/*=============================================
   <!-- Cyberlux google map css-->
===============================================*/
.google-map iframe {
    width: 100%;
    height: 600px;
}
  
/*** 
==================================
   Cyberlux Search Popup css
==================================
***/


.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #FAB101;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    border-right: 3px solid #FAB101;
    border-left: 3px solid #FAB101;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
  
    overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #FAB101;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

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

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}
.search-box-btn {
    display: inline-block;
    padding: 0px 28px 0 27px;
    position: relative;
    top: -7px;
}
.search-box-btn i {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: .5s;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 22px;
    border: 1px solid #FAB101;
    text-align: center;
}
.search-box-btn.search-box-outer span i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.upp.search-box-btn.search-box-outer span i {
    color: #FAB101;
}

.search-box-btn.search-box-outer span i:after {
    position: absolute;
    content: "0";
    right: -10px;
    top: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #FAB101;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 12px;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}


span.flaticon-multiply i {
    display: inline-block;
    color: #FAB101;
}


/*------Cyberlux Scroll Up Css------------*/
.prgoress_indicator {
    position: fixed;
    right: 26px;
    bottom: 35px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgb(22 193 245 / 50%);
    z-index: 9999999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #FAB101;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}
.prgoress_indicator:hover ::after {
  color: #FAB101;
}
.prgoress_indicator:hover ::before {
  opacity: 1;
}
.prgoress_indicator svg path {
  fill: none;
}
.prgoress_indicator svg.progress-circle path {
  stroke:#FAB101;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}




/*===========================
<-- Cyberlux Loader css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 99999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #16c1f580;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color:#FAB101;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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

@keyframes MOVE-BG {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(42px);
        transform: translateX(42px);
    }
  }

@keyframes border-animation {
  0% {
      transform: translate(-50%,-50%) scale(.5);
      opacity: 1;
      border-width: 3px
  }

  40% {
      opacity: .5;
      border-width: 2px
  }

  65% {
      border-width: 1px
  }

  100% {
      transform: translate(-50%,-50%) scale(1);
      opacity: 0;
      border-width: 1px
  }
}

.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-animate2 {
    animation-name: float-bob;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@keyframes dance2 {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
  }

  50% {
      -webkit-transform: translate3d(25px, -25px, 0);
  }

  100% {
      -webkit-transform: translate3d(0, -25px, 25px);
  }
}
@-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); 
  } 
}

/*wood animation*/
@keyframes wooo {
  0% {
    transform: rotate3d(0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 359deg);
  }
}
@keyframes circle {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(-360deg);
  }
  }
  .circle {
      animation: circle 15s linear infinite;
  }
  .right-speen {
      animation: rightspeen 15s linear infinite;
  }
  .spin2 {
      animation: spin2 15s linear infinite;
  }
  @keyframes rightspeen {
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(360deg);
  }
}

/* ===================================================
   Ajustes personalizados para la caja de contacto
=================================================== */
.why-choose-thumb {
    position: relative;
}

/* ===================================================
   Corrección definitiva para la caja de contacto sobre la foto
=================================================== */
.why-choose-thumb {
    position: relative !important;
}

/* ===================================================
   Reposicionar los puntos del carrusel abajo y al centro
=================================================== */
.case-study-area .owl-dots {
    position: static !important;
    text-align: center !important;
    margin-top: 30px !important;
    display: block !important;
    width: 100% !important;
}
/* Restaurar el tamaño original y correcto del banner principal */
.hero-area {
    min-height: 85vh !important;
    height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 40px !important;
}

/* Cambiar el color de fondo del menú móvil a azul oscuro */
.mean-container .mean-bar,
.mean-container .mean-nav {
    background-color: #0A1431 !important;
}

/* Opcional: Asegurar que el botón hamburguesa se vea bien sobre el azul */
.mean-container a.meanmenu-reveal {
    color: #FAB101 !important;
}
.mean-container a.meanmenu-reveal span {
    background-color: #FAB101 !important;
}




/* ===================================================
   SOLUCIÓN FINAL: Ocultar texto Cyberlux y ajustar Logo Móvil
=================================================== */

/* 1. Volver invisible cualquier texto plano (Cyberlux) en la barra principal */
.mean-container .mean-bar {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    
    /* Aplicar el logo de Pampa Solar respetando su proporción */
    background-image: url('../images/img/Logo.png') !important;
    background-size: 130px auto !important; 
    background-repeat: no-repeat !important;
    background-position: left 15px center !important;
    height: 70px !important;
}

/* 2. Apagar pseudo-elementos o etiquetas de la marca antigua */
.mean-container .mean-bar .mean-brand,
.mean-container .mean-bar::before,
.mean-container .mean-bar::after {
    display: none !important;
    content: none !important;
}

/* 3. Evitar que enlaces intrusos se muestren, excepto el botón hamburguesa */
.mean-container .mean-bar > a:not(.meanmenu-reveal) {
    display: none !important;
}

/* 4. Restaurar configuración del botón hamburguesa para que funcione bien */
.mean-container a.meanmenu-reveal {
    font-size: 20px !important;
    line-height: 22px !important;
    color: #FAB101 !important;
    background: transparent !important;
    top: 15px !important;
    text-indent: 0 !important;
}

/* 5. Asegurar que las rayitas del menú no se oculten */
.mean-container a.meanmenu-reveal span {
    background-color: #FAB101 !important;
    display: block !important;
}


/* ===================================================
   Ajuste de los marcos amarillos (Subirlos)
=================================================== */
.about-thumb2 {
    top: 160px !important;
}

.about-thumb3 {
    top: 210px !important;
    right: 30px !important; /* Antes estaba en 220px. Súbelo a 270 o 290 si necesitas que vaya más a la izquierda */
}

/* ===================================================
   Ajuste de tamaño de las imágenes del blog (850x1300)
=================================================== */
.blog-area .single-blog-thumb img {
    width: 100% !important; /* Se asegura de no desbordar la columna */
    height: auto !important; /* Anula el límite anterior de 345px */
    aspect-ratio: 850 / 1300 !important; /* Fuerza la medida y proporción exacta solicitada */
    object-fit: cover !important; /* Evita que la imagen se deforme o aplaste */
}