body {
    /* Espacio superior para que el contenido no se superponga con el nav fijo */
    background-color: #F6F8FF; /* Color de fondo */
}

.navbar-brand img {
    height: 40px; /* Ajusta la altura según tus necesidades */
    margin-left: 25px; /* Ajusta el margen derecho según tus necesidades */
}

main {
    background-image: url('waves.svg');
    background-repeat: repeat;
    background-size: cover;
    padding-top: 50px; /* Añadir un poco de padding superior para separarlo del contenido */
}

.navbar {
    background-color: #2E282A; /* Color de fondo del nav */
    font-weight: 600;
    font-size: 1.1rem;
}

.navbar-nav {
    text-align: center;
}

.nav-link {
    color: #F6F8FF; /* Color de los enlaces del nav */
}

.nav-link:hover {
    color: #FF5201; /* Color de los enlaces del nav al pasar el ratón por encima */
}

.navbar-toggler {
    border-color: #F6F8FF; /* Color del borde del botón hamburguesa */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23F6F8FF' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Color del icono del botón hamburguesa */
}
/*INICIO*/
/* General Styles */
.section {
    padding: 0 5%;
    margin: 10px 0;
}

.section img {
    max-width: 85%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.section-content {
    text-align: center;
    padding-top: 2.5%;
}

h1, h2 {
    color: #2E282A; /* Color de los textos */
}

.btn-container {
    text-align: center;
}

.btn-primary {
    background-color: #FF6D1F;
    border-color: #FF6D1F;
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-size: 1.2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 50px; /* Botón redondeado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s; /* Transición suave */
    text-decoration: none; /* Quitar subrayado */
    font-weight: 600;
    display: inline-block;
}

.btn-primary:hover {
    background-color: #FF5201; /* Color más brillante para el hover */
    border-color: #FF5201;
    transform: translateY(-2px); /* Efecto de elevación al pasar el ratón */
}

.btn-primary:active {
    background-color: #FF5201; /* Color de fondo más claro cuando se hace clic */
    border-color: #FF5201;
    transform: translateY(0); /* Sin efecto de elevación al hacer clic */
}

.sub-section {
    padding: 10px;
}

.section h4 {
    color: #FF5201; /* Color del título */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía elegante */
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.section .icon {
    margin-right: 2px;
    color: #2E282A; /* Color del icono */
    font-size: 1.4rem;
}

.section h4:after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #FF5201;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#descripcionServicios {
    color: #2E282A;
    font-weight: 700;
    font-size: 1.2rem;
}

/*Inicio carrusel*/
.carousel {
    max-width: 100%; /* Permitir que el carrusel ocupe el 90% del ancho disponible */
    margin: auto;
}

.carousel-inner {
    max-height: 75vh; /* Permitir que el carrusel ocupe hasta el 80% de la altura del viewport */
    background-color: #ffffff00; /* Color de fondo del carrusel para cuando las imágenes no llenen todo el espacio */
}

.carousel-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.904); /* Fondo más oscuro al pasar el mouse */
    border-radius: 50%; /* Hacer los botones redondos */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    color: #fff; /* Color de los iconos */
    text-decoration: none;
}

.carousel-control-prev {
    left: -5px;
}

.carousel-control-next {
    right: -5px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color:#FF6D1F; /* Fondo más oscuro al pasar el mouse */
}

.carousel-control-prev i,
.carousel-control-next i {
    font-size: 1.5rem; /* Tamaño de los iconos */
}

.carousel-indicators {
    position: absolute;
    bottom: 10px; /* Ajustar la posición inferior */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff; /* Color de los indicadores */
    background-clip: padding-box;
    border: 0 solid transparent;
    border-radius: 50%; /* Hacer los indicadores redondos */
    opacity: .8;
    transition: opacity 1s ease;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: #FF6D1F; /* Color del indicador activo */
}


/* Responsive Styles */
@media (max-width: 767px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px;
        height: 35px;
    }

    .carousel-control-prev {
        left: -20px;
    }

    .carousel-control-next {
        right: -20px;
    }
    
    .btn-container {
        text-align: center;
    }

    .sub-section {
        text-align: center;
    }

    .carousel-inner {
        max-height: 35vh; /* Ajuste de altura para dispositivos móviles */
    }

    .carousel-indicators {
        bottom: 0px; /* Ajustar la posición inferior para dispositivos móviles */
    }

    .carousel-indicators li {
        width: 8px;
        height: 8px;
    }
}

/*Fin carrusel*/

/*FIN*/
footer {
    background-color: #343a40;
    color: white; /* Color del texto del footer */
    text-align: center;
    padding: 10px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin: 10px 10px;
}

.footer-column p, .footer-contact a {
    margin: 5px 0;
}

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

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social a {
    margin: 0 10px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: #FF6D1F; /* Color de la paleta para hover */
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        text-align: center;
    }
}


/* Encabezados y diseño para los títulos*/
.title-section {
    position: relative;
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
    text-transform: uppercase;
}

.title {
    font-size: 1.96rem;
    font-weight: bold;
    z-index: 1;
    color: white;
    margin: 0;
}

.title-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 195%;
    height: 100%;
    background: linear-gradient(225deg, #FF5201 50%, transparent 50%);
    z-index: 0;
}

/* Estilos para el texto debajo del título "Conócenos" */
.container-fluid p {
    color: #423E3B; /* color de texto */
    font-size: 1.2rem; /* tamaño de texto */
    line-height: 1.6; /* altura de línea para mejorar la legibilidad */
    margin-bottom: 20px; /* margen inferior */
    font-weight: 450; /* grosor de letra (puedes ajustar este valor) */
    max-width: 1200px; /* ancho máximo */
    margin-left: auto; /* centrado horizontal */
    margin-right: auto; /* centrado horizontal */
}

/* Estilos para los subtítulos de Misión y Visión */
.sub-section h1, .section h1 {
    color: white; /* color de texto */
    font-size: 2rem; /* tamaño de los subtítulos */
    margin-bottom: 10px; /* margen inferior */
    position: relative; /* posición relativa para pseudo-elementos */
    display: inline-block; /* para el ancho adecuado del fondo */
    padding: 10px 20px; /* espacio alrededor del texto */
    background-color: #423E3B; /* color de fondo */
    border-radius: 30px; /* bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* sombra */
}

.sub-section h1::before, .sub-section h1::after, .section h1::before, .section h1::after{
    content: '';
    position: absolute;
    z-index: -1; /* detrás del texto */
    background-color: #FF6D1F; /* color del elemento decorativo */
    border-radius: 50%; /* forma circular */
}

.sub-section h1::before, .section h1::before {
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
}

.sub-section h1::after, .section h1::after {
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
}

/* Estilos para el texto de Misión y Visión */
.sub-section p {
    color: #423E3B; /* color del texto */
    font-size: 1.1rem; /* tamaño del texto */
    line-height: 1.6; /* altura de línea para mejorar la legibilidad */
    font-weight: 450; /* grosor de letra (puedes ajustar este valor) */
    text-align: center; /* alinear el texto a ambos lados */
    max-width: 500px; /* ancho máximo */
    margin-left: auto; /* centrado horizontal */
    margin-right: auto; /* centrado horizontal */
}

/* Media queries para ajustar el diseño en diferentes tamaños de pantalla */
@media (max-width: 1200px),
       (max-width: 992px),
       (max-width: 768px),
       (max-width: 576px),
       (max-width: 430px),
       (max-width: 414px),
       (max-width: 375px),
       (max-width: 360px),
       (max-width: 344px) {
    .carousel-inner {
        max-height: 30vh; /* Ajuste de altura para dispositivos móviles */
    }
    .nav-link:hover {
        color: #FF5201; /* Color de los enlaces del nav al pasar el ratón por encima */
    }
}

/* Ajustes específicos para cada punto de ruptura */
@media (max-width: 576px) {
    .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 430px) {
    .carousel-inner {
        max-height: 20vh; /* Ajuste de altura para dispositivos móviles */
    }
}

@media (max-width: 375px) {
    .carousel-inner {
        max-height: 25vh; /* Ajuste de altura para dispositivos móviles */
    }
}

@media (max-width: 360px) {
    .carousel-inner {
        max-height: 22vh; /* Ajuste de altura para dispositivos móviles */
    }
}

@media (max-width: 344px) {
    .carousel-inner {
        max-height: 17vh; /* Ajuste de altura para dispositivos móviles */
    }
}



@media (max-width: 740px),
       (max-width: 896px),
       (max-width: 932px),
       (max-width: 1024px),
       (max-width: 1180px)  {
    .carousel-inner {
        max-height: 100vh; /* Ajuste de altura para dispositivos móviles */
    }
}