/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/


@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap');



/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(../css/animate.min.css);
@import url(../css/normalize.css);
@import url(../css/icomoon.css);
@import url(../css/font-awesome.min.css);
@import url(../css/meanmenu.css);
@import url(../css/owl.carousel.min.css);
/* @import url(../css/swiper.min.css); */
@import url(../css/slick.css);
@import url(../css/jquery.fancybox.min.css);
@import url(../css/jquery-ui.css);
@import url(../css/nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

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

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family: 'Inter Tight', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
     margin: 0;
     padding: 0;

}


h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 18px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

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

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

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

 :focus {
     outline: 0;
}




.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}


.fa-facebook, .fa-linkedin, .fa-instagram{
    color: #fff;
    
}


/**-- heading section --**/


/* relevantes */
.titulo-principal{
     font-family: 'Inter Tight', sans-serif;
     text-align: center;
}
.titulo-principal h2{
     font-size: 60px;
     font-weight: 800;
}
/* falta agregar media query */

/*-- header area --*/

.header {
     width: 100%;
     background: #ECECEC;
}

.header_top {
     background-color: #010ECF;
     padding: 10px 0;
}

ul.conta_icon li a img {
     padding-right: 7px;
}

ul.social_icon {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}

ul.social_icon li {
     height: 30px;
     color: #fff;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     padding-right: 5px;
}

ul.social_icon li:last-child {
     padding-right: 0px;
}

ul.social_icon li a {
     color: #fff;
     width: 30px;
     height: 30px;
     background-color: #183661;
     float: left;
     text-align: center;
     line-height: 31px;
     border-radius: 100%;
     font-size: 17px;
}

ul.social_icon li a:hover {
     background: #f2c119;
     color: #fff;
}

.select-box {
     cursor: pointer;
     position: relative;
     width: 90px;
}

.select,
.label {
     color: #677691;
     display: block;
     font-size: 12px;
}

.select {
     width: 100%;
     position: absolute;
     top: 0;
     padding: 5px 0;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     background: none transparent;
     border: 0 none;
}

.select-box1 {
     background: #ecf3fc;
     border: #677691 solid 1px;
     border-radius: 30px;
}

.label {
     position: relative;
     padding: 0px 23px 0px 9px;
     cursor: pointer;
     margin-bottom: 0;
}

.open .label::after {
     content: "▲";
}

.label::after {
     content: "▼";
     font-size: 12px;
     position: absolute;
     right: -18px;
     top: 0;
     padding: 0px 24px;
}

.se_fonr1 {
     justify-content: flex-end;
     display: flex;
     flex-wrap: wrap;
}

.time_o {
     padding-left: 15px;
     color: #0d1015;
     font-size: 14px;
}


.logo {
     text-align: center;
     display: block;
}
 video{
     max-width: 400px;
     border: none;
}

ul.conta_icon li a i {
     padding-right: 5px;
     padding-left: 5px;
}

ul.conta_icon li a {
     color: #202020;
     font-size: 17px;
}

ul.conta_icon li a:hover {
     color: #183661;
     text-decoration: underline !important;
}

ul.right_icon {
     font-size: 25px;
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
}

ul.right_icon li img {
     margin-right: 30px;
}




/*--   navigation--*/

.header_bottom {
     background-color: #010ecf;
}

.navigation.navbar {
     float: left;
     padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 30px 24px;
     color: #ffffff;
     font-size: 17px;
     line-height: 20px;
     font-weight: 400;
     text-transform: uppercase;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.lista-2 .nav-item{
     height: 100%;
}

.nav-item{
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     background-color: #f2c119;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     background-color: #f2c119;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.search {
     padding: 24px 0;
     text-align: right;
}

.form_sea {
     border-radius: 20px;
     border: #fff solid 1px;
     padding: 0px 15px;
     color: #000;
     height: 32px;
     position: relative;
     width: 100%;
}

.seach_icon {
     position: absolute;
     margin-left: -25px;
     z-index: 999;
     background: transparent;
     padding: 3px 0px 0px 0px;
     color: #b7b7b7;
}


/*-- marker-end sidebar  navigation--*/


/** banner section **/

.banner_main {
     background: url(../images/banner.jpg);
     padding: 97px 0px 0px 0px;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     min-height: 698px;
}

.blodark {
     color: #000;
     font-family: 'Inter Tight', sans-serif;
     font-size: 65px;
     font-weight: 800;
}

.text-bg {
     text-align: left;
}

.ban_img {
margin-right: -45px;
position: absolute;
}

.text-bg h1 {
     color: #010ecf;
     font-size: 80px;
    
     padding-bottom: 50px;
     font-weight: 800;
}

.text-bg p {
     color: #2a2a2c;
     line-height: 30px;
     font-size: 25px;
     font-weight: 500;
     margin-bottom: 50px;
}

.text-bg .read_more {
     font-weight: 500;
     background: #1d37fd;
     color: #fff !important;
     border-radius: 43px;
     margin-right: 25px;
     padding: 13px 0;
     max-width: 210px;
}

.text-bg .read_more:hover {
     background: #fcc10e;
     color: #000 !important;
}

.ban_img figure {
     margin: 0;
}

.ban_img figure img {
     width: 100%;
}


/** end banner section **/

.titlepage h2 {
     font-size: 35px;
     color: #141414;
     line-height: 40px;
     font-weight: bold;
     padding: 0;
}

.titlepage h2 img {
     padding-right: 10px;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.read_more {
     font-size: 17px;
     background-color: #fff;
     color: #000;
     padding: 15px 0px;
     width: 100%;
     max-width: 170px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     font-weight: 500;
     border-radius: 50px;
     text-transform: uppercase;
}

.read_more:hover {
     background: #03cafc;
     color: #fff !important;
     transition: ease-in all 0.5s;
}


/* about us */
#about-us{
     margin-top: 100px;
     font-family: 'Inter Tight', sans-serif;
     margin-bottom: 200px;
}
.us-container{
     display: flex;
     justify-content: center;
     
}
.us-right{
     width: 800px;
     margin-top: 30px;
     margin-left: 20px;
}
.us-text p{
     text-align: justify;
     font-size: 18px;
     color: #000;
}
.blue-text{
     color: #010ecf;
     font-weight: 800;
}
.bg-grey{
     background-color: #D6D6D6;
     width: auto;
     max-width: 80px;
     padding: 5px;
     border-radius: 10px;
     margin-bottom: 20px;
}
.bg-grey p{
     text-align: center;
     text-transform: uppercase;
     font-weight: 600;
}
.us-left{
     width: 600px;
}
.us-left video{
     border-radius: 15px;
     margin-right: 20px;
     max-width: 600px;

}
.us-datos{
     display: flex;
     margin-top: 20px;
}
.circle{
     border-radius: 50%;
     background-color: #010ecf;
     width: 45px;
     height: 45px;
     position: absolute;
     z-index: 1;
 
}


@media (max-width: 838px) {
     video{
          max-width: 300px;
          border: none;
     }
     .col-md-4{
          max-width: 380px;
          margin: 0 auto;
     }
     
    .us-container{
     flex-direction: column;
     margin: 0 auto;
     padding: auto;
    }

    .us-right {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

    .us-left video{
     border-radius: 15px;
     max-width: 350px;
     }

     .us-left{
          width: auto;
          margin: 0 auto; 
     }
     .bg-grey{
          margin-top: 20px;
     }
     
    
     .us-text {
          width: 100%;
          margin: 20px auto;
          padding: 10px;
     }

     .us-text p {
          margin: 0 auto;
     }
     .banner_main{
          background: none;
     }
}


.rect-red{
     background-color: #d6d6d6;
     border-radius: 20px;
     padding: 10px;
     top: 1px;
     right: 20px;
     margin-left: 40px;
     position: relative;
     width: 140px;
     margin-right: 10px;

}

.rect-red p{
     text-align: center;
     margin-left: 20px;
     color: #000;
     font-size: 18px;
     font-weight: 600;
}




/* rectangulo azul */
#rect-azul{
     margin-bottom: 200px;
     font-family: 'Inter Tight', sans-serif;
}
.rectangulo{
     background-color: #010ecf;
     border-radius: 20px;
     width: 100%;
     padding: 40px;
     position: relative;
     height: 400px;
}
.cont-rect{
     display: flex;
}
.rect-left{
     width: 80%;
}
.rect-left h2{
     font-size: 60px;
     color: #fff;
     font-weight: 600;
}
.rect-left img{
     width: 100px;
     position: absolute;
     bottom: 0;
     margin-bottom: 30px;
}
.rect-right img{
     width: 25%;
     float: right;
     position: absolute;
     bottom: 0;
     right: 0;
}
@media (max-width: 838px) {
     .rect-right img{
          display: none;
     }
     .rect-left h2{
          font-size: 40px;
          width: 100%;
     }
     .rect-left{
          width: 100%;
     }
}

/* carrusel soluciones */
#soluciones{
     font-family: 'Inter Tight', sans-serif;
     margin-bottom: 200px;
}

.car-soluciones{
     display: flex;
     justify-content: space-between !important;

}

.slick-slide{
     margin: 20px;
}

.tit-left{
     text-align: left;
}

.tit-left h2{ 
     font-size: 50px;
     font-weight: 800;
     color: #000;
}
element.style{
     width: 800px;
}
.solucion{
     padding: 10px;
     background-color: #fff;
     border-radius: 25px;
     height: 550px;
     position: relative;
     box-shadow: 5px 2px 10px 2px rgba(0, 0, 0, 0.5);
}
.solucion img{
     border-radius: 25px 25px 0 0;
     position: absolute;
     top: 0;
     left: 0;
     height: 300px;
     width: 100%;
     object-fit: cover;
}
.cont-solucion{
     padding: 10px;
     position: absolute;
     top: 55%;
}
.red-blue{
     background-color: #010ecf;
     height: fit-content;
     padding: 2px 15px 2px 15px;
     width: fit-content;
     max-width: 200px;
     border-radius: 30px;
}
.red-blue h3{
     margin-top: 10px;
     font-weight: 600;
     text-align: center;
     justify-content: center;
     color: #fff;
}
.cont-solucion p{
     
     color: #000;
     font-size: 25px;
     font-weight: 600;
     margin-top: 25px;
}

@media (max-width: 838px) {
     .solucion{
          margin: 0 auto;
          width: 100%;
          max-width: 400px;
     }
     .cont-solucion p{
          font-size: 18px;
     }
}
/* servicios */
#servicios{
     margin-bottom: 100px;
}
.grid-container {
     margin-top: 50px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
   }
   
   .item {
     border: none;
     padding: 20px;
   }

   .item h3{
     margin-top: 20px;
     color: #010ecf;
     font-size: 20px;
     font-weight: 800;
   }
   
   .item img {
     width: 100px;
     height: 100px;
     display: block;
   }
   .grid-container ul li{
     font-size: 15px;
     color: #000;
     font-weight: 600;
   }
   
   @media (max-width: 838px) {
     .grid-container {
       grid-template-columns: repeat(2, 1fr);
     }
     .item{
          padding: 10px;
     }
   }
/* conmutador */
#conmutador{
     margin-bottom: 100px;
     font-family: 'Inter Tight', sans-serif;
}
.titulos{
     text-align: center;
     font-family: 'Inter Tight', sans-serif;

}
.titulos h3{
     color: #010ecf;
     font-weight: 600;
     font-size: 30px;
}
.titulos h2{
     
     font-size: 80px;
     font-weight: 800;
}
.titulos h4{
     color: #010ecf;
     font-size: 40px;
     font-weight: 600;
}

@media (max-width: 838px) {
     .titulos h3{
          font-size: 20px;
     }
     .titulos h2{
          font-size: 40px;
     }
     .titulos h4{
          font-size: 25px;
     }
}

.pbx-datos{
     margin-top: 100px;
     display: flex;
}
.pbx-left{
     width: 50%;
}
.sub-tittle{
     font-weight: 800;
     color: #000;
     font-size: 30px;
     line-height: 1.2;
}
.texto{
     margin-top: 20px;
     font-size: 18px;
     color: #000;
     text-align: justify;
}
.btn-primario{
     margin-top: 20px;
     color: #010ecf;
     background-color: #9CEC22;
     border-radius: 10px;
     padding: 10px;
     width: 120px;
     font-size: 18px;
     font-weight: 600;
}
.btn-primario a{
     justify-content: center;
     display: flex;
     text-align: center;
     color: #010ecf;
}
@media (max-width: 838px) {
     .pbx-datos{
          flex-direction: column;
     }
     .pbx-left{
          width: 100%;
     }
     .sub-tittle{
          font-size: 25px;
     }
     .pbx-right img{
          margin: 40px auto;
     }
     
}
/* clientes satisfechos */

#clientes{
     background-color: #E5F6FB;
     padding: 40px;
     
}
#clientes h2{
     margin-top: 50px !important;
     color: #010ecf !important;
}
.frases{
     font-size: 30px;
     line-height: 1.1;
     color: #000;
}
.logos-clientes{
     margin-top: 100px;
     display: flex; 
     flex-wrap: wrap; 
     justify-content: center; 
     margin-bottom: 100px;
}
.logos-clientes .cliente {
     flex: 0 0 200px;
     margin: 10px; 
     text-align: center; 
}
   .logos-clientes img {
     max-width: 100%; 
     max-height: 100px; 
}

@media (max-width: 838px) {
     .frases{
          font-size: 18px;
          margin: 0 auto;
     }
}


/* footer */
footer{
     background-color: #ECECEC;
     padding: 30px;
}
.secciones{
     display: flex;
}
.seccion img{
     width: 300px;
}
.seccion{
     width: 400px;
     margin-left: 20px;
     margin-right: 20px;
}
.seccion li{
     font-size: 18px;
     color: #000;

}
.seccion h5{
     color: #010ecf;
     font-weight: 800;
     font-size: 20px;
     text-transform: uppercase;
     text-align: center;
}
.enlaces{
     text-align: center;
     font-size: 20px;
     font-weight: 500;
     color: #000;
}
.enlaces h6{
     font-weight: 800;
     color: #000;
     font-size: 18px;
}

   
   .slick-next, .slick-prev{
     display: none; 
   }
   .slick-arrow{
     display: none;
   }
   


   
@media (max-width: 838px) {
     .secciones {
          flex-direction: column;
     }
     .seccion{
          margin: 0 auto;
          width: auto;
          margin-top: 40px;
     }
   }


#servicios .item{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     border: 2px solid transparent;
     transition: all 0.5s;
}

#servicios .item:hover{
     border: 2px solid #010ecf;
}

.float{
     position: fixed;
     width: 60px;
     height: 60px;
     bottom: 40px;
     left: 40px;
     background-color:#25d366;
     color:#fff;
     border-radius: 50px;
     text-align: center;
     font-size: 30px;
     box-shadow: 2px 2px 3px #999;
      z-index: 100;
 }
 .float:hover {
     text-decoration: none;
     color: #25d366;
   background-color:#fff;
 }
 
 .my-float{
     margin-top:16px;
 }

 #soluciones .grid-container img{
     width: 100px;
 }

 #soluciones li{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 #servicios .item .serviciosImg{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .nav-item a span {
     color: black;
     font-size: 15px;
     padding: 5px 0 10px 0;
     display: block;
     text-transform: uppercase;
     font-family: 'Montserrat';
     letter-spacing: 1px;
 }
 #cart_menu_num {
     position: absolute;
     top: -55%;
     left: 55%;
     background: red;
     width: 15px;
     height: 15px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     padding: 2px;
 }

 .fa-cart-shopping{
     position: relative;
 }

 .alinear{
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .alinear span{
     width: 90%;
 }

 .alinear img{
     max-width: 5%;
 }

 .alinear button{
     max-width: 5%;
 }
 
 @media(max-width: 838px){
     .alinear button{
         max-width: 40%;
     }
     
     .alinear img{
         display: none;
     }
 }