body {
            font-family: 'Roboto', sans-serif;
            background-color: #FFFFFF;
        }
        
        header {
            position: absolute; 
            top: 0;
            left: 0;
            width: 100%; 
            z-index: 1000; 
        }
        
        .bg-orange-custom {
            background-color: #ff681d;
        }
        
        .bg-orange-custom:focus, .bg-orange-custom:hover {
            background-color: #ff681d;
            text-decoration:underline;
        }
        
        .text-orange-custom {
            color: #ff681d;
        }
        
        .text-yellow-custom {
            color: #ffde00;
        }
        
        .bg-yellow-custom {
            background-color: #ffde00;
        }
        .card-custom {
            border-radius: 1.5rem; 
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
        .btn-custom {
            border-radius: 5px;
            width: 150px;
            padding: 2.5px;
        }
        .social-icon {
            width: 30px;
            height: 30px;
        }
        
        .bg-vias-aprendizaje{
            background-color: #000000;
            color: #FFFFFF;
            padding: 25px;
        }
        
        .title-section{
            color: #ff681d;
            font-weight: bold;
            border-bottom: 3px solid #ff681d;
            padding-bottom: 4px;
            display: block;
        }
        .nav-item{
            color: #FFF !important;
            border: 1px solid #FFF;
            border-radius: 10px;
            margin-right: 15px;
            width: 170px;
            text-align: center;
        }
        
        .nav-link{
            padding: 2.5px;
            color: #FFF;
        }
        
        .nav-link:focus, .nav-link:hover {
            color: #FFFFFF;
            text-decoration: underline;
        }

        /* Estilos específicos para la sección Hero */
        .hero-section-home {
            position: relative;
            height: 650px; /* Ajusta la altura según sea necesario */
            background-color: #000; /* Fondo oscuro por defecto */
            overflow: hidden;
        }

        .hero-background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: right center; /* Ajusta la posición de la imagen de fondo */
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.8), transparent); /* Ajusta el gradiente */
        }

        .hero-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            text-align: start;
            height: 100%;
            padding-left: 3rem; /* Espaciado desde la izquierda */
        }

        .hero-image-overlay {
            position: absolute;
            bottom: 0; /* Alinea la imagen a la parte inferior */
            right: 10%; /* Ajusta la posición de la imagen desde la derecha */
            width: 500px; /* Ancho de la imagen superpuesta */
            height: auto;
            z-index: 2; /* Asegura que esté por encima del contenido y el fondo */
        }

        /* Media queries para responsividad (ajustar según sea necesario) */
        @media (max-width: 992px) {
            .hero-image-overlay {
                width: 400px;
                right: 5%;
            } 
			
			.navbar-toggler{
				background-color: #ff681d;
			}
			
			.navbar-nav{
				background: #ff681d;
			}
			
			.nav-item {
				margin: 5px 20%;
			}
        }

        @media (max-width: 768px) {
            .hero-section-home {
                height: 550px;
            }
            .hero-content {
                padding-left: 1.5rem;
            }
            .hero-image-overlay {
                width: 245px;
                right: 0;
            }
        }

        @media (max-width: 576px) {
            .hero-section-home {
                height: 500px;
            }
            .hero-content h2 {
                font-size: 2.5rem;
            }
            .hero-content p {
                font-size: 1.1rem;
            }
            .hero-image-overlay {
                width: 200px;
                right: -20px; /* Puedes ajustar esto para que la imagen no se salga tanto */
                bottom: 0;
            }
        }

        /* Nuevos estilos para la sección de Perfiles */
        .profiles-section {
            padding-top: 5rem;
            padding-bottom: 5rem;
            position: relative;
            overflow: hidden; /* Para que la imagen de fondo no se desborde */
            background-color: #fff;
        }

        .profiles-background-image {
            position: absolute;
            top: 0;
            right: 0; /* Alinea la imagen a la derecha */
            height: 100%; /* Ocupa toda la altura de la sección */
            width: auto; /* Ancho automático para mantener proporciones */
            object-fit: cover;
            opacity: 1; /* Puedes ajustar la opacidad si es necesario */
            z-index: 0; /* Asegura que esté detrás del contenido */
            transform: translateX(20%); /* Ajusta esta propiedad para mover la imagen más hacia la derecha si es necesario */
            left: 0%;
        }

        .profiles-content {
            position: relative;
            z-index: 2; /* Asegura que el contenido esté por encima de la imagen de fondo */
        }

        .btn-home {
            background-color: #000;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .btn-home:hover {
            background-color: #333;
            color: #fff;
        }

        /* Ajustes para pantallas más pequeñas en Perfiles */
        @media (max-width: 768px) {
            .profiles-background-image {
                opacity: 0.5; /* Reduce la opacidad en móviles para que el texto sea más legible */
                transform: translateX(0);
                width: 100%;
                height: auto;
                object-position: top right;
            }
        }
        
        .hr-custom{
            height: 2px;
            background-color: #ff681d;
            border: none;
            opacity: 1;
        }
        
		
		.img-footer{
			width: 5%;
			text-align: center;
			display: inline-block !important;
		}
		
		.img-footer-phone{
			margin-top: -25px;
		}
		
        @media (max-width: 768px) {
			
			.img-footer{
				display: block !important;
				width: 100%;
				margin-bottom: 10px;
			}
			
			.img-footer-phone{
				margin-top: 0px;
			}
		}
		
			
		.div-btn-home{
			text-align: end;
			padding-top: 1.5rem !important;
			padding-bottom: 1.5rem !important;
		}