@charset "utf-8";

/* ----------------------------------
Name: global.css
Version: 1.0.0
Autor: Fragmenta Soluciones Digitales
Website: https://www.fragmenta.mx
----------------------------------- */

/* ===================================
    Reset
====================================== */
*,
*::before,
*::after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
html { font-size: 16px !important;}
body {
     font-family: 'Barlow', sans-serif !important;
     font-display: optional;
     -webkit-font-smoothing: antialiased;
     font-smooth: antialiased;
     /* font-size: 16px; */
     font-weight: 300;
     line-height: auto;
     color:#0A0B0A;
     background-color: #fff;
     margin: 0px;
}
body, html {height: 100%; -moz-osx-font-smoothing: grayscale;}


section{
  position: relative;
  overflow-x:clip;
}


a:focus {text-decoration: none!important;}
a, a:active, a:focus { color: #1F2547; text-decoration: none;}
a:hover, a:active{text-decoration: underline; cursor: pointer;transition: 0.5s ease all;}
/*a:focus, a:active, button:focus, button:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none; box-shadow: none; } */

footer a, footer a:active, footer a:focus { color: #ffffff; text-decoration: none; font-size: 12px!important; line-height: 20px;}
/*footer a:hover, footer a:active{color: #1158A0; text-decoration: none; cursor: pointer;}
footer a:focus, footer a:active, footer button:focus, footer button:active, footer .btn.active.focus, footer .btn.active:focus, footer .btn.focus, footer .btn:active.focus, footer .btn:active:focus,footer  .btn:focus {outline: none; box-shadow: none; }

/*img {max-width:100%; height:auto; }*/


/* ===================================
    Typography
====================================== */
/* heading */
h1, h2, h3, h4, h5, h6 {font-family: 'Inter', sans-serif; letter-spacing: 0;color: #1F2547;}
/* h1, .h1 {font-size:3rem; line-height:3.5rem; font-weight: 600;} */

h1, .h1 {font-size:2.125rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h2, .h2 {font-size:1.5rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h3, .h3 {font-size:1.375rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h4, .h4 {font-size:1rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h5, .h5 {font-size:0.875rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h6, .h6 {font-size:0.75rem; line-height:150%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}

p {font-size: 0.875rem;font-weight: 400;line-height:150%;}
.span{font-size: 0.875rem;font-weight: 400;line-height: 150%!important;}


.font-main {font-family: 'Barlow', sans-serif!important;}
.font-alt {font-family: 'Inter', sans-serif!important;}


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {

h1, .h1 {font-size:2.375rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h2, .h2 {font-size:1.75rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h3, .h3 {font-size:1.625rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h4, .h4 {font-size:1.25rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h5, .h5 {font-size:1rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h6, .h6 {font-size:0.875rem; line-height:150%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}

p {font-size: 1rem;font-weight: 400;line-height:150%;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

h1, .h1 {font-size:2.625rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}
h2, .h2 {font-size:2rem; line-height:130%; font-weight: 500;margin-top: 0px; margin-bottom: 5px;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


/* text color */

.text-alt{color: #0095DF;}

.text-simulado{color:red;}

/* ===================================
    Background color
====================================== */

.deg-main{
  background: linear-gradient(180deg, #1F2547 0%, #012B38 100%);
}

.bg-alt{
  background: #F2F4F8;
}

.deg-alt{
  background: linear-gradient(0deg, #1F2547 0%, #012B38 100%),linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.bg-light-blue{
  background: #106D9A;
}


/* ===================================
    Covers
====================================== */
.logo-loader{
  filter: brightness(0) invert(1);width:150px;
}

/* Contenedor del loader genérico */
.page-loader-evcon {
  position: fixed;
  inset: 0;
  background: #012B38;            /* tu color de fondo base */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Estado oculto */
.page-loader-evcon.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}


.position-form-cover{
  top:0px;
}


.position-form-cover-top{
  top:0px;
}


/* ===================================
    Button
====================================== */

/*Boton tarjetas*/
.btn-next{
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#fff;
  transition:all .5s ease;
}

.btn-next::after{
  content: "\F138";
  font-family: bootstrap-icons !important;
  font-size: 18px;
 display: inline-block;
 transition: transform 0.4s ease;
}

.btn-next:hover{
  background: #fff;
  border: 1px solid #fff;
  color: #1F2547;
  transition:all .5s ease;
  text-decoration: none;
}

.btn-next:hover::after {
  transform: rotate(-25deg) translate(0px, -1px);
}

.btn-next-dark{
  border: 1px solid #012B38!important;
  color: #012B38;
}

.btn-next-dark:hover{
  background: #012B38!important;
  color: #fff!important;
}

/*btn prev*/

.btn-prev{
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#fff;
  transition:all .5s ease;
}

.btn-prev::after{
  content: "\F12F";
  font-family: bootstrap-icons !important;
  font-size: 18px;
 display: inline-block;
 transition: transform 0.4s ease;
}

.btn-prev:hover{
  background: #fff;
  border: 1px solid #fff;
  color: #1F2547;
  transition:all .5s ease;
  text-decoration: none;
}

.btn-prev:hover::after {
  transform: rotate(50deg) translate(0px, -1px);
}

/*Boton principal*/

 .main-btn{
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
 background: #0095DE;
 padding: 5px 15px 5px 5px;
 border-radius: 40px;

}

.main-btn {
  width: auto;
 height: 40px;
}

.main-btn .circle {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 display: block;
 margin: 0;
 width: 30px;
 height: 30px;
 background: #012B38;
 border-radius: 40px;
 display: flex;
justify-content: flex-start;
align-items: center;
}

.main-btn .circle i{
  margin-left: 7px;
  color: #fff;
}

.main-btn .button-text {
  width: auto;
  height: 100%;
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 margin: 0 0 0 35px;
 color: #fff;
 display: flex;
justify-content: flex-start;
align-items: center;
}

.main-btn:hover{
  text-decoration: none;
}

.main-btn:hover .circle {
 width: 95%;
}

.main-btn:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

.main-btn:hover .button-text {
 color: #fff;
 text-decoration: none;
}

.bg-btn-dark{
  background: #1F2547!important;
}

.bg-btn-dark .circle{
  background: #fff!important;
}

.bg-btn-dark .circle i{
  color: #1F2547!important;
}

.bg-btn-dark:hover .button-text {
  color: #1F2547!important;
  font-weight: 400!important;
}

/*Btn training*/
.bg-btn-training{
  background: #3A6C2C!important;
}

.bg-btn-training .circle{
  background: #fff!important;
}

.bg-btn-training .circle i{
  color: #3A6C2C!important;
}

.bg-btn-training:hover .button-text {
  color: #3A6C2C!important;
  font-weight: 400!important;
}

/*Btn innovation*/
.bg-btn-innovation{
  background: #2E254A!important;
}

.bg-btn-innovation .circle{
  background: #fff!important;
}

.bg-btn-innovation .circle i{
  color: #2E254A!important;
}

.bg-btn-innovation:hover .button-text {
  color: #2E254A!important;
  font-weight: 400!important;
}

/*Revisar*/



/*btn white*/

.btn-main-white {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px;
  min-width: 150px;
  position: relative;
  color: #BA242D;
  background: #fff;
  border: 0px;
  text-decoration: none;
  transition: 0.3s ease all;
  z-index: 1;
  font-weight: 500;
}

.btn-main-white:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: #A51E26;
  border: 1px solid #fff;
  z-index: -1;
}

.btn-main-white:hover, .btn-main-white:focus {
  color: #fff;
}

.btn-main-white:hover:before, .btn-main-white:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

.btn-main-white:active {
  transform: scale(0.9);
}

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

.btn-link{
  color: #333333!important;
}

.btn-link p{margin-bottom: 0px!important}

/*Btn back*/

.content-btn-back{
  display: flex;
  justify-content: flex-start;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  flex-direction:row;
}

.btn-back {
 display: flex;
 height: 3em;
 width: auto;
 align-items: center;
 justify-content: center;
 border-radius: 3px;
 transition: all 0.4s linear;
 cursor: pointer;
 border: none;
 background: transparent;
 color:#000!important;
}

.btn-back > i {
 margin-right: 5px;
 margin-left: 5px;
 font-size: 20px;
 font-weight: 500;
 transition: all 0.4s ease-in;
 color:#000!important;
}

.btn-back:hover > i {
 font-size: 1.2em;
 transform: translateX(-5px);
 color:#000!important;
}

.btn-back:hover {
 transform: translateX(-2px);
 color:#000!important;
}

/* ===================================
    Evcon Groups
====================================== */

/*Section evcon groups*/

.grid-evcon-group{
  display: grid;
  grid-template-columns:1fr;
  gap:20px;
  grid-template-areas:
  "text"
  "evse"
  "evsu"
  "evtr"
  "evin";
}

.text-EG{grid-area: text;}
.evcon-security{grid-area: evse;}
.evcon-support{grid-area: evsu;}
.evcon-training{grid-area: evtr;}
.evcon-innovation{grid-area: evin;}

.text-EG{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ===================================
       Call to action
====================================== */

.cont-cta{
  width: 100%;
  min-height: 300px;
  padding: 30px 30px 30px 30px;
  background:url("../../assets/img/call-to-action/banner.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
}

.img-cta{
  width: 50%;
  position: relative;
  bottom: -30px;
}


/* ===================================
    Contenedores
====================================== */

.degradado-carousel-wrapper{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  background: #FFF;
  background: linear-gradient(91deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  animation: scroll 30s linear infinite;
}

.carousel-track-right {
  display: flex;
  animation: scroll-right 30s linear infinite;
}


.item {
  min-width: 200px;
  height: auto;
  margin: 0 10px;
}

.item .content-logo{
  width: 200px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #1F254780;
  border-radius: 10px;
}

.item .content-logo img{
  width: 90%;
}


/* Animación */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 3));
  }
}

@keyframes scroll-right {
  100% {
    transform: translateX(0);
  }
  0% {
    transform: translateX(calc(-300px * 3));
  }
}


/* ===================================
    Cintillo certificaciones
====================================== */


/* Sección general */
.cintillo-cert {
  position: absolute;
    background: transparent;
    padding: 20px 0;
    color: #ffffff;
    bottom: 30px;
    width: 100%;
  overflow: hidden;
}

/* Layout general: texto a la izquierda, logos a la derecha */
.cintillo-cert-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Texto */
.cintillo-cert-text p {
  font-weight: 500;
  margin: 0px;
}

/* Contenedor del marquee */
.cintillo-cert-marquee {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* La banda que se mueve */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0px;
  width: max-content;
  animation: marquee 22s linear infinite;
}

/* Logos */
.marquee-track img {
  height: 70px;
  width: auto;
  filter: brightness(1);
  object-fit: contain;
}

/* Animación infinita */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === Responsive === */

@media (max-width: 992px) {

  .cintillo-cert {bottom: 0px;}

  .cintillo-cert-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .marquee-track img {
    height: 50px;
  }
}

@media (max-width: 576px) {
  .cintillo-cert {
    padding: 15px 0;
  }

  .cintillo-cert-text p {
    font-size: 14px;
    max-width: none;
  }

  .marquee-track img {
    height: 45px;
  }

  .marquee-track {
    gap:0;
    animation-duration: 18s; /* más rápido en móvil */
  }
}

/* ===================================
    Deco
====================================== */
.img-ondas{
  width: 100%;
  object-fit: contain;
  position: absolute;
  bottom: 100px;
  left: 0px;
}

.deco-card{
  width: 90px;
  height: 8px;
  background: linear-gradient(270deg, #212B3E 0%, #080E1F 100%);
}

.list-main{
  padding-left: 20px;
}

.list-main li{list-style: circle;}

.list-main b{font-weight: 700!important;}

.border-bottom{
  border-bottom: 1px solid #a7aab9!important;
}


.stiky{
  position: sticky;
top: 100px;
}

/* ===================================
    numeralia
====================================== */

.num-counter{
  font-size: 48px;
  font-weight: 800;
  line-height: 150%;
}

.icon-porcentaje{font-size: 30px;}

/* ===================================
    hover
====================================== */

.hover-zoom:hover .image,
.parent:hover .hover-zoom .image {
	transform: scale(1.1);
	transition-duration: 7s;
}

.hover-zoom-rotate:hover .image,
.parent:hover .hover-zoom-rotate .image {
	transform: scale(1.1) rotate(3deg);
	transition-duration: 7s;
}


/* ===================================
    Galerias
====================================== */

.content-pag{
  margin-top: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.swiper-pagination-bullet{
   background:#1F2547;
   opacity:1;
   margin-right: 5px!important;
   margin-left: 8px!important;
}


.swiper-pagination-bullet-active{
 background: #0095DE;
}

/* ===================================
    Cards
====================================== */

.card-main{
  background: #F2F4F8;
  width: 100%;
  min-height: auto;
  padding: 20px;
  border-radius: 10px;
}

.card-main .icon-center{
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-main .icon-center .icon-img{
  width: 120px;
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.card-main:hover .icon-img{
  transform: translate3d(0, -3px, 0);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.card-main:hover .icon-img-xl{
  transform: translate3d(0, -3px, 0);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.card-main .icon-left{
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.card-main .icon-left .icon-img{
  width: 85px;
  height: 85px;
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

.card-main .icon-left .icon-img-xl{
  width: 100px;
  height: 100px;
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}

/*Card Evcon Groups*/

.card-group{
  width:100%;
  min-height: 400px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  color: #1F2547;
  padding: 20px;
  transition:all .5s ease;
}

.card-group a{
  text-decoration: none;
  color: #1F2547;
}

.card-group .logo{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.card-group .logo img{
  width: 100%;
}

.card-group .description{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top:10px;
}

.card-group .title{
  width: 100%;
}


.card-group .description p{
    margin: 0px;
}

.card-group .btn-next{
  width: 40px;
  height: 40px;
  border: 1px solid #012B38;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#012B38;
  transition:all .5s ease;
}

.card-group:hover{
  background: linear-gradient(0deg, rgba(16, 109, 154, 0.15), rgba(16, 109, 154, 0.15)),
linear-gradient(0deg, #DBE9F0, #DBE9F0);
  transition:all .5s ease;
  cursor: pointer;
}

.card-group:hover .btn-next{
  background: #012B38;
  border: 1px solid #012B38;
  color: #fff;
  transition:all .5s ease;
  text-decoration: none;
}


.btn-next:hover{

}

.card-group:hover .btn-next:after {
  transform: rotate(-25deg) translate(0px, -1px);
}

/*Card-group-Menu*/

.card-group-menu{
  width:100%;
  min-height: 120px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  background: #F8FAFF;
  color: #1F2547;
  padding: 10px;
  transition:all .5s ease;
}


.card-group-menu a{
  text-decoration: none;
  color: #1F2547;
}

.card-group-menu .logo{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-group-menu .logo img{
  width: 150px;
}

.card-group-menu .description{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top:0px;
}

.card-group-menu .title{
  width: 100%;
}


.card-group-menu .description p{
    margin: 0px;
}

.card-group-menu .btn-next{
  width: 40px;
  height: 40px;
  border: 1px solid #012B38;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color:#012B38;
  transition:all .5s ease;
}

.card-group-menu:hover{
  background: #FFFFFF;
  transition:all .5s ease;
  cursor: pointer;
  color: #1F2547 !important;
  text-decoration: none;
}

.card-group-menu:hover .btn-next{
  background: #012B38;
  border: 1px solid #012B38;
  color: #fff!important;
  transition:all .5s ease;
  text-decoration: none;
}


.btn-next:hover{

}

.card-group-menu:hover .btn-next:after {
  transform: rotate(-25deg) translate(0px, -1px);
}

/*Card Exito*/
.img-card-exito{
  border-radius: 10px;
}

.card-exito{
  padding: 40px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  position: relative;
}

.img-comilla{
  position: absolute;
  top: 60px;
left: 20px;
}


.bg-img-security{
  background: linear-gradient(180deg, #E6813D 0%, rgba(230, 129, 61, 0) 100%),url("../../assets/img/evcon-security/caso-de-exito.jpg")!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
}
.bg-exito-security{background: linear-gradient(358.36deg, #77370B -3.02%, #FF9148 113.99%);}

.bg-img-entreprise-net{
  background: linear-gradient(180deg, #014D95 0%, rgba(0, 78, 150, 0) 100%),url("../../assets/img/temp/enterprise-networking/cover-exito.jpg")!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
}
.bg-exito-entreprise-net{background: linear-gradient(84.94deg, #004691 0%, #156082 99.89%);}

.bg-img-colaboracion{
  background: linear-gradient(180deg, rgba(58, 108, 44, 0.8) 0%, rgba(58, 108, 44, 0) 100%),url("../../assets/img/temp/colaboracion/cover-exito.jpg")!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
}
.bg-exito-colaboracion{background: linear-gradient(84.94deg, #233D0B 0%, #619630 99.89%);}

.bg-img-data-center{
  background: linear-gradient(180deg, #1F2549 0%, rgba(31, 37, 73, 0) 100%),url("../../assets/img/temp/data-center/cover-exito.jpg")!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
}
.bg-exito-data-center{background: linear-gradient(84.94deg, #1A2243 0%, #494180 99.89%);}


/*Section eventos*/

.card-evento{
  display: grid;
  grid-template-columns: 1fr;
  gap:20px;
  margin-bottom: 20px;
}

.card-evento .img-section img{
  width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 50%;
    aspect-ratio: 1 / 1;
  }

.card-evento p{
  font-size: 0.875rem!important;
  font-weight: 400!important;
  line-height:150%!important;
  font-family: 'Barlow', sans-serif!important;
}

.card-evento span{
  font-size: 0.875rem!important;
  font-weight: 400!important;
  line-height:150%!important;
  font-family: 'Barlow', sans-serif!important;
}

/* ===================================
    Grid
====================================== */

.grid-1fr{grid-template-columns: 1fr;}
.grid-3fr{grid-template-columns: repeat(3,1fr);}
.grid-50{grid-template-columns: 1fr 1fr}
.no-gap{gap:0px;}
.gap-10{gap:10px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.row-gap-20{row-gap: 20px;}

/* ===================================
    Alertas
====================================== */

.noti-info{
  background: #0095DE;
  color:#fff;
  padding: 15px;
  width: 100%;
  transition: 0.7s ease all;
  border-radius: 5px;
}

/* ===================================
    Formularios
====================================== */

/* Inputs y textarea */
.form-control{
  background-color: #fff;
  color: #1F2547;
  border-radius: 5px;
}

.form-control:hover {
  border-color: #0095DE;
}

.form-control:focus{
      box-shadow: 0 0 0 0rem rgba(13, 110, 253, .25);
      border-color: #EBF1F6;
      background-color: #fff;
      color: #1F2547;
}

.form-select{
  background-color: #F2F4F8;
    color: #1F2547;
    border-radius: 5px;
    border: none;
}

.form-select:focus{
  border: none!important;
}


/* ===================================
    Collapse
====================================== */
.collapsing{
  transition:height 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
  filter: blur(4px);
  opacity: 0;
}


.collapse {
  transition: height 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
  filter: blur(4px);
  opacity: 0;
}
.collapse.show {
  filter: blur(0);
  opacity: 1;
}
/* ===================================
    Paginador
====================================== */

.pagination{
  align-items: center;
}

.page-link{
  background: #106D9A;
    border: 1px solid #106D9A;
    color: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 3px;
    cursor: pointer;
    border-radius: 50%;
}

.page-link:hover{
  background: #1F2547;
color: white !important;
}

.pagination .active{
  width: 35px;
      height: 35px;
      background: #1F2547;
      border-color: #1F2547 !important;
      color: white;
      text-decoration: none;
      border-radius: 50%;
  }
.first .page-link{
  color:#000;
  border-radius: 0px ;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  margin: 0px;
  background: transparent;
}

.pagination .disabled{
  opacity: .35;
cursor: auto;
pointer-events: none;
}



.pagination .disabled:focus{
  border: 0px;
}

.last .page-link{
  color:#000;
  border-radius: 0px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  margin: 0px;
  background: transparent;
}

.prev .page-link{
  color: #000000;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  background: transparent;
}

.next .page-link{

  color: #000000;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 3px;
  padding: 0px;
  border: none!important;
  background: transparent;
}

.prev .page-link:hover{
  background: #1F2547;
color: #fff;
}


.next .page-link:hover{
  background: #1F2547;
color: #fff;
}

.last .page-link:hover{
  color: #106D9A !important;
    background: transparent !important;

}

.first .page-link:hover{
  color: #106D9A !important;
    background: transparent !important;

}


/*Focus*/


.pagination a:focus{
outline: none; box-shadow: none;
}

.next a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}
.prev a:focus{
outline: none; box-shadow: none;
background: transparent;
color: #D42C1C;
}

.last a:focus{
outline: none; box-shadow: none;
background: transparent;
}

.first a:focus{
outline: none; box-shadow: none;
background: transparent;
}



/* ===================================
  Sticky
====================================== */

.sticky-efect {
  width: 100%;
  position: sticky;
  top:100px;
  display:inline-block;

}

/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

/*Section evcon groups*/
.grid-evcon-group{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  grid-template-areas:
  "text text "
  "evse evsu"
  "evtr evin";
}

/*Section eventos*/
.card-evento{grid-template-columns: 40% auto;}
.card-evento .img-section img{width: 100%;}

/*Grid*/
.xs-grid-3fr{grid-template-columns: repeat(3,1fr);}


/*Cards*/
.card-main{min-height: 350px;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {


/*Section evcon groups*/
.grid-evcon-group{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  grid-template-areas:
  "text text "
  "evse evsu"
  "evtr evin";
}


/*Section eventos*/
.card-evento{grid-template-columns: 40% auto;}
.card-evento .img-section img{width: 100%;}

/*Grid*/
.sm-grid-1fr{grid-template-columns:1fr;}
.sm-grid-80{grid-template-columns: 80% 1fr;}
.sm-grid-75{grid-template-columns: 75% 1fr;}
.sm-grid-70{grid-template-columns: 70% 1fr;}
.sm-grid-65{grid-template-columns: 65% 1fr;}
.sm-grid-60{grid-template-columns: 60% 1fr;}
.sm-grid-55{grid-template-columns: 55% 1fr;}
.sm-grid-50{grid-template-columns: 1fr 1fr;}
.sm-grid-45{grid-template-columns: 45% 1fr;}
.sm-grid-35{grid-template-columns: 35% 1fr;}
.sm-grid-30{grid-template-columns: 30% 1fr;}
.sm-grid-25{grid-template-columns: 25% 1fr;}
.sm-grid-20{grid-template-columns: 20% 1fr;}
.sm-grid-3fr{grid-template-columns: repeat(3,1fr);}
.sm-no-gap{gap:0px;}
.sm-gap-10{gap:10px;}
.sm-gap-20{gap:20px;}
.sm-gap-30{gap:30px;}
.sm-gap-40{gap:40px;}
.sm-gap-50{gap:50px;}


}
/* md  */ @media (min-width: 768px) {
.position-form-cover-top{top:-85px;}

.num-counter{font-size: 58px;}
.icon-porcentaje{font-size: 40px;}

/*Section evcon groups*/
.grid-evcon-group{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
  grid-template-areas:
  "text text "
  "evse evsu"
  "evtr evin";
}

/*Section eventos*/
.card-evento{grid-template-columns: 1fr;}
.card-evento .img-section img{width: 80%;}
.card-evento p{font-size: 1rem!important;}
.card-evento span{font-size: 1rem!important;}

/*Grid*/
.md-grid-1fr{grid-template-columns:1fr;}
.md-grid-80{grid-template-columns: 80% 1fr;}
.md-grid-75{grid-template-columns: 75% 1fr;}
.md-grid-70{grid-template-columns: 70% 1fr;}
.md-grid-65{grid-template-columns: 65% 1fr;}
.md-grid-60{grid-template-columns: 60% 1fr;}
.md-grid-55{grid-template-columns: 55% 1fr;}
.md-grid-50{grid-template-columns: 1fr 1fr;}
.md-grid-45{grid-template-columns: 45% 1fr;}
.md-grid-40{grid-template-columns: 40% 1fr;}
.md-grid-35{grid-template-columns: 35% 1fr;}
.md-grid-30{grid-template-columns: 30% 1fr;}
.md-grid-25{grid-template-columns: 25% 1fr;}
.md-grid-20{grid-template-columns: 20% 1fr;}
.md-grid-3fr{grid-template-columns: repeat(3,1fr);}
.md-no-gap{gap:0px;}
.md-gap-10{gap:10px;}
.md-gap-20{gap:20px;}
.md-gap-30{gap:30px;}
.md-gap-40{gap:40px;}
.md-gap-50{gap:50px;}

/*cta global*/
.cont-cta{
  grid-template-columns: 55% auto;
  padding: 30px 60px 30px 60px;
}

.img-cta {
  height: 120%;
  width: auto;
    position: absolute;
    bottom: -30px;
    right: 0px;
}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.num-counter{font-size: 68px;}
.icon-porcentaje{font-size: 50px;}

/*Section evcon groups*/
.grid-evcon-group{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
  grid-template-areas:
  "text text text"
  "evse evsu ."
  ". evtr evin";
}

/*Section eventos*/
.card-evento{grid-template-columns: 40% auto;}
.card-evento .img-section img{width: 100%;}

/*Grid*/
.lg-grid-1fr{grid-template-columns:1fr;}
.lg-grid-80{grid-template-columns: 80% 1fr;}
.lg-grid-75{grid-template-columns: 75% 1fr;}
.lg-grid-70{grid-template-columns: 70% 1fr;}
.lg-grid-65{grid-template-columns: 65% 1fr;}
.lg-grid-60{grid-template-columns: 60% 1fr;}
.lg-grid-55{grid-template-columns: 55% 1fr;}
.lg-grid-50{grid-template-columns: 1fr 1fr;}
.lg-grid-45{grid-template-columns: 45% 1fr;}
.lg-grid-40{grid-template-columns: 40% 1fr;}
.lg-grid-35{grid-template-columns: 35% 1fr;}
.lg-grid-30{grid-template-columns: 30% 1fr;}
.lg-grid-25{grid-template-columns: 25% 1fr;}
.lg-grid-20{grid-template-columns: 20% 1fr;}
.lg-grid-3fr{grid-template-columns: repeat(3,1fr);}
.lg-no-gap{gap:0px;}
.lg-gap-10{gap:10px;}
.lg-gap-20{gap:20px;}
.lg-gap-30{gap:30px;}
.lg-gap-40{gap:40px;}
.lg-gap-50{gap:50px;}

/*cta-global*/
.cont-cta{
  grid-template-columns: 55% auto;
    padding: 30px 100px 30px 100px;
}
.img-cta{
  height: 140%;
  width: auto;
  bottom: -30px;
}



} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {


.position-form-cover{top:-50px;}

/*Section evcon groups*/
.grid-evcon-group{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  grid-template-areas:
  "text text evse evsu"
  ". evtr evin .";
}

/*Grid*/
.xl-grid-1fr{grid-template-columns:1fr;}
.xl-grid-80{grid-template-columns: 80% 1fr;}
.xl-grid-75{grid-template-columns: 75% 1fr;}
.xl-grid-70{grid-template-columns: 70% 1fr;}
.xl-grid-65{grid-template-columns: 65% 1fr;}
.xl-grid-60{grid-template-columns: 60% 1fr;}
.xl-grid-55{grid-template-columns: 55% 1fr;}
.xl-grid-50{grid-template-columns: 1fr 1fr;}
.xl-grid-45{grid-template-columns: 45% 1fr;}
.xl-grid-40{grid-template-columns: 40% 1fr;}
.xl-grid-35{grid-template-columns: 35% 1fr;}
.xl-grid-30{grid-template-columns: 30% 1fr;}
.xl-grid-25{grid-template-columns: 25% 1fr;}
.xl-grid-20{grid-template-columns: 20% 1fr;}
.xl-grid-3fr{grid-template-columns: repeat(3,1fr);}
.xl-no-gap{gap:0px;}
.xl-gap-10{gap:10px;}
.xl-gap-20{gap:20px;}
.xl-gap-30{gap:30px;}
.xl-gap-40{gap:40px;}
.xl-gap-50{gap:50px;}

}
/* xxl */ @media (min-width: 1400px) {}