@import url(https://fonts.googleapis.com/css2?family=Oswald&family=Rubik&display=swap);

 body,
 html {
     height: 100%;
     font-size: 1rem
 }

 label,
 a,
 button,
 h4,
 h5,
 h6,
 p {
     font-family: Rubik !important
 }

 h1,
 h2 {
     font-family: Oswald, sans-serif
 }

 .gradient {
     background: #0061f2;
     background: linear-gradient(135deg, rgba(0, 97, 242, 1) 0, rgba(105, 0, 199, 1) 100%)
 }

 .page-header {
     margin-top: 4rem;
     font-size: 1.25rem;
     color: #fff
 }

 .feature {
     color: #fff
 }

 .feature ul {
     padding-left: 2rem;
     list-style-type: none
 }

 .feature ul li {
     padding-left: 2rem;
     background-image: url(10k6Img/check.svg);
     background-repeat: no-repeat;
     line-height: 1.5rem;
     margin-bottom: 1rem
 }

 .icon {
     color: #fff;
     height: 5rem;
     width: 5rem;
     font-size: 1.75rem;
     border-radius: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center
 }

 .gallery {
     background-color: #f5f5f5
 }

 .gallery img {
     border-radius: 5%
 }

 .services {
     color: #fff
 }

 footer {
     font-size: 1rem;
     margin: 0;
     padding: 1rem
 }

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

 .col-md-4,
 .col-md-3 {
     margin-bottom: 4rem !important
 }

 .col-lg-3,
 .col-lg-4 {
     margin-bottom: 2rem !important
 }

 @media screen and (max-width:1366px) {
     .img-enoc {
         width: 80px !important;
     }

     .textos h1 {
         font-size: 35px !important
     }

     .links {
         margin-bottom: 10px !important
     }

     .textos p {
         font-size: 15px !important
     }
 }

 @media screen and (max-width:1280px) {
   

     .text-margin {
         margin-top: 5rem
     }

     .textos2 {
         display: flex !important;
         align-items: center;
     }



     .links {
         position: fixed;
         z-index: 1231241;
         left: 0;
         top: 5rem;
         margin: auto
     }

     .navbar-toggler {
         position: fixed !important;
         top: 0;
         left: 3px;
         z-index: 1241124124123123 !important;
         background: linear-gradient(to right, #3077d0 0%, #1c3777 100%) !important;
         border: none !important;
         color: transparent !important
     }

     .textos {
         position: relative;
         top: 8rem
     }

     .textos {
         display: none !important
     }
 }

 @media(max-width:991px){
    .navbar-nav {
        height: 100vh !important;
        /* margin-top: 68px !important;
        padding-top: 3rem; */
        padding-bottom: 3rem;
        background: linear-gradient(to right, #3077d0 0%, #1c3777 100%) !important
    }
 }

 .nav-item {
     margin-right: .25rem !important;
     margin-left: .25rem !important
 }

 :root {
     --principal-color: #2e59a9;
     --secundario-color: #132b4f;
     --terciario-color: #5FC3E4;
     --secundario-dark-color: #a42b8c;
     --color-1: #e91e63;
     --color-2: #f5ae10;
     --color-3: #09d69c;
     --color-4: #1b9cfc;
     --bg-dark: #2b2c2f;
     --principal-to-dark-color: var(--secundario-color);
     --dark-to-main-color: var(--bg-dark);
     --shadow-black-100: 0 5px 15px rgba(0, 0, 0, .1);
     --shadow-black-300: 0 5px 15px rgba(0, 0, 0, .3);
     --black-900: #000000;
     --black-400: #555555;
     --black-100: #f7f7f7;
     --black-000: #ffffff;
     --black-alpha-100: rgba(0, 0, 0, .05);
     --c-brand-rgb: 44, 74, 154;
 }

 .wrap {
     position: relative;
     height: 100vh
 }

 .video-bg {
     position: relative;
     height: 100%;
     background: #000;
     overflow: hidden
 }
 
 .iframe_video{
    height: 100%;
 }

 .video-bg::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .3);
     background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")
 }

 .navbar-toggler {
     position: fixed;
     top: 1rem;
     left: 10px;
     border-radius: 10px;
     border: white solid 1px
 }

 .video-bg iframe {
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100vw;
     height: 60vw
 }

 .content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     color: #fff
 }

 .containerr {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, -50%)
 }

 .title {
     text-align: center;
     font-size: 2.5vw
 }

 .features {
     display: flex
 }

 .features .features-carousel {
     justify-content: space-between
 }

 .features .feature-item {
     box-shadow: 5px 2px 7px 2px #d5d5d5;
     margin: 15px;
     padding: 30px;
     border-radius: 10px;
     text-align: center;
     position: relative;
     z-index: 1;
     overflow: hidden
 }

 .features .feature-item::after,
 .features .feature-item::before {
     content: "";
     position: absolute;
     z-index: -1;
     border-radius: 50%;
     transition: all .5s ease;
     opacity: 0
 }

 .features .feature-item::before {
     height: 20px;
     width: 20px;
     background-color: var(--color-4);
     left: -20px;
     top: 40%
 }

 .features .feature-item:hover:before {
     left: 10px;
     opacity: 1
 }

 .features .feature-item::after {
     height: 30px;
     width: 30px;
     background-color: var(--color-2);
     right: -30px;
     top: 80%
 }

 .features .feature-item:hover::after {
     right: -15px;
     opacity: 1
 }

 .features .feature-item .icon {
     height: 75px;
     width: 75px;
     margin: 0 auto 30px;
     text-align: center;
     font-size: 30px;
     color: var(--principal-color);
     position: relative;
     z-index: 1;
     transition: all .5s ease
 }

 .features .feature-item .icon::before {
     content: "";
     position: absolute;
     left: 100%;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--principal-color);
     transition: all .5s ease;
     z-index: -1;
     opacity: 0
 }

 .features .feature-item:hover .icon {
     color: #fff;
     font-size: 20px
 }

 .features .feature-item:hover .icon::before {
     left: 0;
     border-radius: 50%;
     opacity: 1
 }

 .features .feature-item .icon i {
     line-height: 60px
 }

 .features .feature-item h3 {
     font-size: 22px;
     margin: 0 0 20px;
     color: var(--black-900);
     font-weight: 500
 }

 .features .feature-item p {
     font-size: 16px;
     line-height: 26px;
     font-weight: 300;
     color: var(--black-400);
     margin: 0 0 15px
 }

 .feature-item {
     cursor: pointer;
     transition: .4s all ease-in-out
 }

 .feature-item:hover {
     transform: translatey(4rem)
 }

 .feature-item:hover {
     transform: translatey(4rem)
 }

 #link-info,
 #link-info2,
 #link-info3 {
     width: 100% !important;
     display: inline-block !important
 }

 .service {
     position: relative;
     overflow: hidden;
     z-index: 2;
     cursor: pointer
 }

 .service::after {
     content: "";
     width: 100%;
     height: 40px;
     background: rgba(2, 3, 600, 53%);
     position: absolute;
     bottom: 0;
     right: 0;
     transition: all 600ms ease 0s
 }

 .service:hover::after {
     width: 100%;
     height: 60%;
     background: linear-gradient(to right, #3077d0 0%, #1c3777 100%);
     z-index: -1;
     box-shadow: 1px 1px 4px 1px grey
 }

 .service:hover p {
     color: #fff !important
 }

 .service:hover .h2service {
     background: -webkit-linear-gradient(178.18deg, #ffffff -13.56%, #ffffff 158.3%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent
 }

 .service:hover a {
     background: -webkit-linear-gradient(178.18deg, #ffffff -13.56%, #ffffff 158.3%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent
 }

 .service:hover .line-2 {
     background-color: white !important
 }

 .service:hover .btn-consultar {
     display: block !important;
     color: white;
     border-radius: 12px
 }

 .service:hover img {
     filter: none !important
 }

 .ms-3 h5 {
     color: #061f5c;
     background: var(--c-brand);
     color: white;
     padding: 1rem;
     border-radius: 5px
 }

 .container-personalizado {
     max-width: 1615px !important
 }

 .service:hover .iconbox {
     background-color: rgba(255, 255, 255, .2);
     color: #fff
 }

 .service h2 {
     background: linear-gradient(to right, #3077d0 0%, #1c3777 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: bolder
 }

 .enoc {
     background: linear-gradient(to right, #3077d0 0%, #1c3777 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent
 }

 .rubik {
     font-family: 'Rubik Mono One', sans-serif !important
 }

 .service a {
     background: linear-gradient(to right, #3077d0 0%, #1c3777 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: bolder
 }

 .btn-consultar:hover {
     transform: translateX(10px)
 }

 .btn-consultar {
     transition: 500ms
 }

 .theme-shadow img {
     transition: 1s ease
 }

 #counter {
     background: linear-gradient(rgba(var(--c-brand-rgb), .8), rgba(var(--c-brand-rgb), .8)), url(https://img.freepik.com/fotos-premium/transporte-logistica-buque-carga-contenedor-avion-carga-representacion-3d-e-ilustracion_37416-487.jpg?w=2000);
     background-position: center;
     background-size: cover;
     padding-top: 140px;
     padding-bottom: 140px;
     margin-bottom: 4rem;
     background-attachment: fixed
 }

 label {
     font-size: 18px;
     background: linear-gradient(to right, #3077d0 0%, #1c3777 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: bold
 }

 .form-check,
 .form-check-input {
     float: initial !important
 }

 .navbar-toggler-icon {
     background-image: url('10k6Img/menu.png') !important;
     background-repeat: no-repeat !important
 }

 select {
     cursor: pointer !important
 }

 input[type=email],
 textarea {
     cursor: text
 }

 input[type=radio] {
     cursor: pointer
 }


 /* CORRECCIÓN NAVBAR */
 .contact_nav{
    position:fixed; z-index: 1231241; right: 0; top: 2rem;
 }

 @media(max-width:1280px){
    .contact_nav_item{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        /* display: block; */
     }
     .navbar{
        padding-top: 0rem;
     }
 }

 @media(max-width:992px){
    .row-avion {
        display: block !important
    }
 }