p {
    line-height: 34.4px;
}
.container-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: black; /* Fondo negro */
}

.background-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/Seccion_01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    animation-duration: 2.6s; /* Duración de la animación */
    animation-name: slideInFromBottom; /* Nombre de la animación */
    animation-fill-mode: forwards; /* Mantener los estilos aplicados después de la animación */
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.container-main-two {
    background-color: #000000;
}

.img-fluid {
    width: 100%;
    height: auto;
}

.overlay-content {
    width: 100%;
    padding: 20px;
    /* Fondo semitransparente opcional */
    color: white;
    /* Color de texto */
    box-sizing: border-box;
    /* Asegura que el padding no desborde el contenedor */
}

.overlay-content h1 {
    text-align: justify;
    /* Justificar el texto */
}

.custom-text-style {
    text-align: justify;
    /* Justificar el texto */
    top: 30vh;
    /* Mover el texto hacia arriba */
    left: 50%;
    /* Centrar el texto horizontalmente */
    transform: translateX(-50%);
    /* Centrar el texto horizontalmente */
    width: 81.5%;
    /* Ancho del contenedor */
    font-size: 18px;
    /* Tamaño del texto por defecto */
    margin-top: -24px;
}
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 0;
    font-style: normal;
}
#titulo_s2 {
    font-size: 25.7px;
    /* Tamaño del texto */
    margin-top: 60px;
    /* Margen superior */
    margin-bottom: 10px;
    /* Margen inferior */
    text-align: left !important;
    /* Alineación del texto */
}

/* Media query para dispositivos móviles en resolución Mobil M (375px) */

/* Media query para dispositivos móviles en resolución Mobil L (425px) */

/* Media query para dispositivos con una anchura máxima de 768px (tabletas en orientación vertical y otros dispositivos móviles) */

/* Estilos del logo */
.logo-container {
    position: absolute;
    top: 12vh;
    margin-top: -27px;
    /* Ajusta el valor según lo necesario usando unidades relativas */
    left: 10.5vw;
    /* Ajusta el valor según lo necesario usando unidades relativas */
}

.logo {
    max-width: 200px;
    /* Tamaño máximo del logo para pantallas grandes */
    width: 100%;
    height: auto;
}

/* Media queries para ajustar el tamaño del logo en pantallas más pequeñas */

/* Media queries para ajustar la posición del logo en pantallas más pequeñas */

/* titulo2 */

/* Media query para ajustar el tamaño del título en dispositivos muy pequeños */

/* todo el contenido del boton*/

.button-container {
    display: flex;
    margin-left: -0px;
    margin-top: 43px;
    /* Ajusta el valor según sea necesario */
}
.button-container {
    display: inline-block; /* Ajusta el display según tu diseño */
}

.button-container a button:hover {
    color: rgb(255, 255, 255); /* Color del texto al pasar el mouse (blanco en este caso) */
    box-shadow: 0 4px 16px rgb(255, 255, 255); /* Sombra con color rojo (255, 0, 0) y opacidad 0.5 */
    transition: box-shadow 0.3s ease; /* Efecto de transición suave */
    border-radius: 100%!important;
}

.button-container {
    color: rgba(255, 255, 255, 0); /* Color del texto inicial */
    padding: 10px 10px; /* Añadir algo de padding */
    border: none; /* Quitar bordes */
    cursor: pointer; /* Cambiar el cursor al pasar el mouse */
    text-align: center; /* Centrar el texto */
    display: inline-block; /* Hacer que el botón sea un bloque en línea */
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Efecto de transición suave para fondo, sombra y color del texto */
}

/* Aumentar la especificidad del selector */
.button-container:hover {
    background: rgba(255, 255, 255, 0); /* Color de fondo al pasar el mouse (blanco) */
    color: rgb(255, 255, 255) !important; /* Color del texto al pasar el mouse (negro) con !important para asegurar la prioridad */
    box-shadow: inset 0 0 30px rgba(255, 11, 11, 0.5), 0 4px 16px rgb(255, 0, 0); /* Sombra interna y externa */
}

/* Específicamente para el texto dentro del span */
.button-container:hover #button-text {
    color: rgb(255, 255, 255) !important; /* Cambiar el color del texto a negro */
}


/* Estilos para el botón */
#icon-button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

#icon-button img {
    width: 50%;
    /* Ajusta la imagen del botón al 100% del ancho del botón */
    height: auto;
    /* Altura automática */
}

.button-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#button-text {
    position: relative;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
}

.button-container {
    position: relative;
    /* Necesario para posicionar el seudoelemento */
}

#button-text {
    position: relative;
    display: inline-block;
    /* Para que el hover funcione correctamente */
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.button-container:hover #button-text {
    opacity: 1;
    /* Cuando el mouse está encima, se vuelve visible */
    transform: translateY(-100%);
    /* Se mueve hacia arriba */
}

#button-text::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgb(194, 16, 16);
    /* Por defecto, la barra estará transparente */
    transition: background-color 0.3s ease;
}

.button-container:hover #button-text::after {
    background-color: rgb(194, 16, 16);
    /* Cambia el color de la línea al pasar el mouse */
}

#button-text:hover::after {
    background-color: transparent;
    /* Color de la línea cuando se pasa el ratón */
}

.containerre {
    max-width: 100%;
    /* Ajusta el ancho máximo del contenedor */
    width: 550px;
    /* Ancho del contenedor en tamaño predeterminado */
    /* Centra el contenedor horizontalmente */
}
/* fin de Estilos apra boton */
/* Estilos del logo */
.logo-container {
    position: absolute;
    top: 12vh;
    /* Ajusta el valor según lo necesario usando unidades relativas */
    left: 10.5vw;
    /* Ajusta el valor según lo necesario usando unidades relativas */
}

.logo {
    max-width: 200px;
    /* Tamaño máximo del logo para pantallas grandes */
    width: 100%;
    height: auto;
}

/* Media queries para ajustar el tamaño del logo en pantallas más pequeñas */
@media (max-width: 768px) {
    .custom-text-style{
            left: 45% !important;
    }
    #titulo_s1 {
        font-weight: bold;
        font-size: 35px !important;
        line-height: 34.4px !important;
    }
    #titulo_s2 {
        font-size: 18px !important;
    }
    #button-text {
        font-size: 20px!important;
    }
    .row-project {
        padding: 0px !important;
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

/* Media queries para ajustar la posición del logo en pantallas más pequeñas */
@media (max-width: 320px) {
    .logo-container {
        top: 12%;
        /* Ajustamos la posición vertical del contenedor del logo */
        left: 11%;
        /* Ajustamos el tamaño máximo del logo */
    }
}

@media (max-width: 425px) {
    .logo-container {
        top: 12%;
        /* Ajustamos la posición vertical del contenedor del logo */
        left: 11%;
        /* Ajustamos el tamaño máximo del logo */
    }
}

/* titulos s1 */

/* Estilos base */

/* Estilos para todas las pantallas */

/* Estilos base para todas las pantallas */
#titulo_s1 {
    line-height: 3rem;
    font-size: 46px; /* Tamaño de fuente predeterminado */
    margin-top: -70px; /* Margen superior ajustado */
    margin-left: 0px; /* Margen izquierdo ajustado */
}

/* titulo s 2*/

/* Estilos para pantallas muy grandes (1200px o más) */

/*boton*/

/*seccion 2 */

#carouselExampleSlidesOnly {
    background-color: black;
}

/* Eliminar los márgenes entre las columnas */
#carouselExampleSlidesOnly .carousel-item .col {
    padding-right: 10;
    padding-left: 0;
    background-color: black;
}

/* Cambiar el tamaño de las imágenes */
#carouselExampleSlidesOnly .carousel-item img {
    max-width: 100%;
    /* Ajustar el ancho máximo para que ocupe todo el ancho del contenedor */
    height: auto;
    /* Mantener la proporción de aspecto de la imagen */
    max-height: 270px;
    /* Establecer la altura máxima de las imágenes, ajusta este valor según tus necesidades */
}

/* Contenedor de bajo de carrucel styles*/

.container_2 {
    background-color: black;
}

.custom-style1 {
    margin-top: 50px;
    font-family: "Roboto", sans-serif;
    /* Utiliza Roboto como la fuente principal */
    font-weight: bold;
    font-size: 35px;
}

.custom-style2 {
    font-family: "Roboto", sans-serif;
    /* Utiliza Roboto como la fuente principal */
    margin-top: -38px;
    /* Establece la variante Light de Roboto */
    font-size: 18px;
}

.custom-style3 {
    font-family: "Roboto", sans-serif;
    /* Utiliza Roboto como la fuente principal */
    font-weight: 0; /*300 */
    /* Establece la variante Light de Roboto */
    font-size: 18px;
    /* Cambia el tamaño del texto según sea necesario */
    margin-top: -6px;
    /* Ajusta el margen superior para mover el texto hacia arriba */
}

.text-column {
    text-align: center;
    /* Centra el texto horizontalmente */
}

.text1 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    text-align: center;
    font-size: 25px;
}

.text2 {
    font-family: "Roboto", sans-serif;
    /* numero */
    font-weight: bold;
    font-size: 44px;
}

.text3 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    text-align: center;
    font-size: 25px;
}

.text4 {
    font-family: "Roboto", sans-serif;
    /*nuemero*/
    font-weight: bold;
    font-size: 44px;
}

.text5 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    text-align: center;
    font-size: 25px;
}

.text6 {
    font-family: "Roboto", sans-serif;
    /*numero */
    font-weight: bold;
    font-size: 44px;
}

.custom-style {
    margin-top: 10.5%;
    /* Ajusta el margen superior para mover el texto hacia abajo */
}

.fondo-negro {
    background-color: black;
    height: 72px;
    padding: 20px; /* Opcional: para agregar algo de espacio dentro del div */
}

.move-left {
    margin-top: -65px !important;
    margin-left: -28px !important; /* Ajusta el valor según sea necesario */
}

/*seccion 3*/

.carousel-container {
    background-color: black;
}

.logo-s3 {
    width: 50px;
    height: auto;
}
.logo-text-container {
    display: flex;
    align-items: center;
}

.logo-s3 {
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

.logo-text {
    font-size: 1.5em; /* Ajusta el tamaño del texto según sea necesario */
}
.text1_s3 {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 35px;
    color: #404040;
    padding-top: 90px;
    /* Puedes ajustar este valor según sea necesario */
}

.text2_s3 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    text-align: center;
    font-size: 20px;
    color: #404040;
    padding-top: 9px;
    /* Puedes ajustar este valor según sea necesario */
}

.custom-card {
    padding-top: 70px;
    max-width: 16rem;
    /* Ajusta este valor según sea necesario */
    background-color: transparent !important;
    /* Fondo transparente */
    border: none !important;
    /* Elimina el borde */
}

.custom-card .card-title {
    color: black;
    /* Color del título de la tarjeta */
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 18.5px;
    /* Tamaño de fuente del título */
    text-align: center;
}

.custom-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-button {
    background-color: transparent;
    border: 2px solid rgb(255, 0, 0);
    border-radius: 5px;
    color: rgb(0, 0, 0);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition:
        background-color 0.3s,
        color 0.3s;
    margin-bottom: 80px;
}

.custom-button:hover {
    background-color: red;
    /* Cambia el fondo al pasar sobre el botón */
    color: white;
    /* Cambia el color de texto a blanco */
}

.custom-card .card-text {
    display: flex;
    /* Utiliza flexbox para centrar verticalmente */
    flex-direction: column;
    /* Cambia la dirección del flexbox a columna */
    justify-content: center;
    /* Centra verticalmente */
    align-items: center;
    /* Centra horizontalmente */
    height: 100px;
    /* Establece una altura fija para todos los elementos card-text */
}

/* seccion 4 */
.container-col-s4 {
    padding: 10rem;
    padding-bottom: 0rem;
}
.text1_s4 {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 35px;
    padding-top: 5rem;
    /* Puedes ajustar este valor según sea necesario */
    color: #000000;
    /* Justifica horizontalmente */
    display: flex;
    /* Utiliza flexbox */

    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    text-align: left;
}

.text2_s4 {
    font-family: "Roboto", sans-serif;
    padding-top: 1rem;
    margin-bottom: -9rem;
    font-weight: 0; /* Establece la variante Light de Roboto */
    font-size: 1.3rem;
    text-align: justify;
    /* Justifica horizontalmente */
    display: flex;
    /* Utiliza flexbox */

    /* Centra horizontalmente */
    align-items: center;
    text-align: left;
    /* Centra verticalmente */
}

.custom-card-img {
    width: 130px;
    /* ajusta el ancho de la imagen según sea necesario */
    height: auto;
    /* mantiene la proporción de aspecto */
    margin-right: 200px !important;
    margin-top: 4px;
    display: flex;
}

.custom-cardd-img {
    width: 80px;
    height: auto;
    margin-right: 250px !important;
    /* ajusta el margen derecho según sea necesario */
    margin-top: 4px;
}

.card-text {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    margin-top: 3px;
    text-align: justify;
}

/*seccion 5*/

.custom-img {
    width: 100px;
    /* ajusta el ancho de la imagen según sea necesario */
    height: auto;
    /* mantiene la proporción de aspecto */
}

.card-title5 {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 2.2rem;
    /* Puedes ajustar este valor según sea necesario */
    color: white;
    text-align: justify;
    /* Justifica horizontalmente */
    display: flex;
}

.card-text5 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    text-align: justify;
    font-size: 1.2rem;
    color: white;
}

.text-centerr {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 35px;
    text-align: justify;
    color: white;
}

.text-center-2 {
    font-family: "Roboto", sans-serif;
    font-weight: 0; /* Establece la variante Light de Roboto */
    margin-top: 3px !important;
    font-size: 1.3rem;
    color: white;
}

/*Animaciones*/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#titulo_s1, #titulo_s2 {
    opacity: 0; /* Oculta el elemento inicialmente */
    animation: fadeIn 3s ease-in-out forwards;
    animation-delay: 3s; /* Retrasa la animación 3 segundos */
    
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.logo {
    animation: animateFromTop 1s ease forwards;
    animation-delay: 1s;
    /* retraso de 0.5 segundos */
}

@keyframes animateFromTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.counter {
    font-size: 24px;
    /* Tamaño de fuente inicial */
    animation: countUp 5s forwards;
    /* Duración de la animación: 5 segundos */
}

@keyframes countUp {
    from {
        font-size: 24px;
        /* Tamaño de fuente inicial */
    }

    to {
        font-size: 72px;
        /* Tamaño de fuente final */
    }
}

/*seccion 3*/
.text1_s3 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

.card-body-style {
    margin-top: 30px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

.text2_s3 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

.card-img-container {
    position: relative;
    display: inline-block;
    /* Asegura que el contenedor ocupe el tamaño exacto de la imagen */
}

.image-container {
    position: relative;
}

.text-overlay {
    position: absolute;
    top: 43%;
    /* Centra verticalmente */
    left: 50%;
    /* Centra horizontalmente */
    transform: translate(-50%, -50%);
    /* Ajusta para centrar completamente */
    color: white;
    padding: 10px;
    /* Espaciado interior */
    border-radius: 5px;
    /* Bordes redondeados */
    font-family: "Roboto", sans-serif;
    font-weight: bold;
}

/* Seccion 4 */

.text1_s4 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}
/* animacion texto 1*/

.text2_s4 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

/* animacion texto 2*/

/*seccion 5*/
.container-project {
    background-image: url("../img/seccion_5.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.row-project {
    padding: 10rem;
}

.card-title5 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

/*texto 1*/

.card-text5 {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

/*texto 2*/

.card-img-overlay {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out;
    /* Transición para suavizar el cambio */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate {
    opacity: 1;
    animation: fadeIn 4s ease-in-out forwards;
}

/*4 cards*/

.language-switcher {
    background-color: #000000;
    color: #fff;
}

.language-switcher a {
    background-color: #000000;
    color: #fff;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {
        float: none;
    }
    .topnav.responsive .dropdown-content {
        position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}