/* Evita el scroll horizontal en el sitio */
body, html {
    overflow-x: hidden;
    scroll-behavior: smooth; /* Alternativa en CSS */
}


/* Asegura que los elementos del carousel no se desborden horizontalmente */
.carousel-inner {
    overflow-x: hidden;
}

/* Controla que las imágenes no se desborden horizontalmente */
.carousel-item img {
    max-width: 100%;
    overflow-x: hidden;
}



body{
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
   }

.navbar {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
    border-top: 5px solid #4368a8;
}

/* Estilo del menú cuando se hace scroll */
.navbar-scrolled {
    background-color: #040404; /* Puedes cambiar el color a tu preferencia */
}

/* Estilo inicial del menú transparente */
.navbar {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}


.navbar-nav > li a{color:#ffffff;font-weight: 400;font-size: 1.2em;}
.navbar-nav > li.active a{color:#21d5f2;}
.navbar-nav > li a:hover{color:#21d5f2;}

/* Estilo del menú cuando se hace scroll */
.navbar-scrolled {
    background-color: #002c54; /* Puedes cambiar el color a tu preferencia */
}

/* Media query para estilos en modo responsivo (tamaño celular) */
@media (max-width: 991px) {
    .navbar {
        background-color: #040404 /* Cambia el color a tu preferencia */
    }
    .subtitle-car {font-size: 2.0rem !important;}
    .title-car {font-size: 0.8rem !important;}
}



.carousel-item {
    height: 500px; /* Ajusta la altura aquí */
}
.title-car{font-size: 1.3em;color:white;font-weight: 300;}
.subtitle-car{font-size: 3.0em;font-weight: 700;}

.tintb{color:#21d5f2;}
.tintg{color:#99e271;}
.tintr{color:#893827;}
.tintw{color:#ffffff;}
 footer{background-color: #040404;}


.get{background:#00929c;color:white; padding: 20px; border-radius:30px; width: 100%;max-width: 420px;text-align:center;
text-decoration: none;transition:all 0.3s ease-in-out;}

.get:hover{background:#d9a954;color:white; padding:20px; border-radius:30px; width: 100%;max-width: 420px;text-align:center;
    text-decoration: none;transition:all 0.3s ease-in-out;}

.btn-action{position:relative;display: block !important; width: 100%; max-width: 220px;margin: 0 auto; text-align: center;padding: 20px 20px;background: #002c54; color:white;border:none; border-radius: 40px; text-decoration: none;
transition:all ease-in-out 0.3s;border:1px solid #002c54;font-weight: bold;}
.btn-action:hover{background: #ffffff;color:#d9a954;border:1px solid #002c54;}

.btn_mas{background:#4368a8; color: white; text-align: center;border-radius: 30px;
width: 100%; max-width:300px;padding: 15px; font-size: 1em;text-decoration: none;font-weight:300;margin-top: 10px;transition: all 0.3s ease-in-out;}
.btn_mas:hover{background:#629afa;}

.bg-carousel{background: #000000;}
.h-banner{display: block;padding-top:150px;}
.bg-gray{background: #f7f8f8;}

.icn-fb{text-indent: -99999px;height:23px;width: 21px;display: inline-block;background: url("../img/fb-01.svg") 0px 2px no-repeat;margin:7px;}
.icn-inst{text-indent: -99999px;height:25px;width: 25px;display: inline-block;background: url("../img/inst.svg") 0px 0px no-repeat;margin:7px;}
.icn-whats{text-indent: -99999px;height:25px;width: 25px;display: inline-block;background: url("../img/whats-01.svg") 0px 0px no-repeat;margin:7px;}


.title-sec{ display: block;margin: 0 auto;color:#893827;}
.title-sec span{display: block;font-size: 0.5em;color: #893827;font-weight: 300;}

.title-ser{ display: block;margin: 0 auto;color:#ffffff;}
.title-ser span{display: block;font-size: 0.5em;color: #ffffff;font-weight: 300;}

.title-test{ display: block;margin: 0 auto;color:#99e271;}
.title-test span{display: block;font-size: 0.5em;color: #ffffff;font-weight: 400;}

.card-eppor{
   transition: 0.3s ease-in-out all; width: 100%; height:100%; min-height: 350px; border-radius: 12px; display: block;position: relative;
}


.card-ind{
    transition: 0.3s ease-in-out all; width: 100%; height:auto; border-radius: 12px; display: block;position: relative;background:white;
    padding-top:20px;padding-bottom:5px; text-align: left;border:1px solid #e3e5e5;
 }
 .card-ind hr{border:1px solid #e3e5e5;}
 .card-ind p{padding-left:10px; color:#002c54; font-size:1em;font-weight: 400;}

 .card-ind:hover{transform: scale(1.02) translateY(-10px);box-shadow: #1e1f20;-webkit-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);
    -moz-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);
    box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);}
.card-eppor:hover{transform: scale(1.02) translateY(-10px);box-shadow: #1e1f20;-webkit-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);
    -moz-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);
    box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.18);}

.title-card{color:#21d5f2;font-weight:bold;font-size: 0.8em;}
.text-card{color:white;font-size: 0.4em;}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 62%);
    display: flex;
    border-radius: 12px;
    align-items: center;  /* Centra el texto verticalmente */
    justify-content: center;  /* Centra el texto horizontalmente */
}

.text-overlay {
    color: white;
    font-size: 2em;       /* Tamaño del texto */
    text-align: center;   /* Alinea el texto al centro */
    padding: 20px 0px;
    z-index: 1;  
    position:absolute;  
    bottom:0px;  
    width: 80%;     /* Asegura que el texto esté encima del degradado */
}

.bg-gav{background: url("../img/gav-bg.png") center center no-repeat; background-size: 400px;}

    
.box-icons img{width: 40px;display:inline-block;}

.nosotros{background:#2f333a;}
.box-white{background: white;}

p.sub-nos{line-height: 1;font-size: 1.2em;}
p.sub-nos span{color: #21d5f2;font-size: 1.8em;font-weight: bold;display: block;}
p.text-nos{font-size: 1.3em;}

.img-grid img {
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.scroll-wrapper img{display: block;transition:all 0.3s ease-in-out;}

.scroll-wrapper img:hover{opacity: 0.5;}
.scroll-wrapper {
    overflow-x: scroll; /* Habilita el scroll horizontal */
    overflow-y: hidden; /* Oculta el scroll vertical */
    width: 100%;
    display: block;
    white-space: nowrap;
    position: relative;
    padding-top: 20px; /* Espacio para el scroll arriba */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

.scroll-wrapper::-webkit-scrollbar {
    height: 10px; /* Altura del scroll horizontal */
    width: 10px; /* Ancho del scroll vertical, aunque no será visible */
    position: absolute;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: #21d5f2; /* Color del scroll */
    border-radius: 5px; /* Bordes redondeados */
}

.scroll-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color de fondo del track */
}

/* Invertir el scroll horizontal para que esté arriba */
.scroll-wrapper {
    transform: scaleY(-1); /* Invierte el eje vertical */
}

.scroll-wrapper .row {
    transform: scaleY(-1); /* Reinvierte el contenido para que se muestre correctamente */
    display: flex;
    flex-wrap: nowrap; /* Mantiene las columnas en una fila */
}

.scroll-wrapper .col-12 {
    flex-shrink: 0; /* Evita que las columnas se compriman */
    width: 100%; /* Cada columna ocupa el 1*/

}

/* Lightbox Styles */
.lightbox {
    display: none; /* Oculto inicialmente */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Siempre encima */
}

.lightbox.active {
    display: flex; /* Se muestra al activarse */
}

.lightbox-img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
}

.close {
    position: absolute;
    top: 72px;
    right: 20px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-nav button {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    font-size: 35px;
    padding: 0px;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.bg-testimonios{background-color: #e2efdb;}

.card{font-size: 0.7em;}
.card h5{font-size: 1.2em;}
.card img{width: 40%;}



.btn-whats{
    color: white;
    display: block;
    width: 50px;
    right: 40px;
    height: 50px;
    background: url("../img/whats.png") center center no-repeat;
    text-decoration: none;
    background-size: 50px;
    position: fixed;
    bottom: 50px;
    text-indent: -99999px;
}

.btn_cotizar span{display: block;color:#99e271;font-weight: bold;font-size: 1.8em;
line-height: 0.8em;margin-bottom: 12px;}

.btn_cotizar:hover{background-color: #00929c;}

.bg-gray{
    background: #f7f8f8;
}

.phone{
    background: url(../img/icn_phone.png) 0 0 no-repeat;
    padding-left: 45px;
    background-size: 40px;
    height: 40px;
    align-items: center;
    display: flex;
}

.edif{
    background: url(../img/icn_edif.png) 0 0 no-repeat;
    padding-left: 45px;
    background-size: 40px;
    height: 40px;
    align-items: center;
    display: flex;
}

.bg-footer{
    background: #000000;
}

.float{animation: floating 3s ease-in-out infinite; position:relative;}

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
    }
}

.img-border{border-radius: 12px 12px 0 0;}


div.servicios p{color:white; background-color:#4368a8;padding: 5px 20px; margin:5px;border:none;border-radius: 20px;display: inline-block;
max-width:auto;}
div.servicios p:hover{background-color: #00929c;}

.fnt16{font-size: 18px;}

footer a{text-decoration: none;color:white;}

/* Estilos para ocultar elementos inicialmente */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Clase que se activará cuando el elemento entre en pantalla */
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Desde abajo */
.scroll-reveal.bottom {
    transform: translateY(50px);
}
.scroll-reveal.bottom.active {
    transform: translateY(0);
}

/* Desde abajo */
.scroll-reveal.top {
    transform: translateY(-50px);
}
.scroll-reveal.top.active {
    transform: translateY(0px);
}

/* Desde la derecha */
.scroll-reveal.right {
    transform: translateX(50px);
}
.scroll-reveal.right.active {
    transform: translateX(0);
}

/* Desde la izquierda */
.scroll-reveal.left {
    transform: translateX(-50px);
}
.scroll-reveal.left.active {
    transform: translateX(0);
}