/* color primario #9F4DFF 
color secundario #64009f */
*{
    font-family: "Roboto", sans-serif;
    
}
 /* Estilos adicionales para el header */
.navbar {
    background-color: rgba(0, 0, 0, 0.1); /* Fondo negro con 50% de opacidad */
    transition: background-color 0.3s ease;
    padding-left: 100px;
    padding-right: 100px;
    height: 80px;
    transition: height 0.3s ease;
}
.navbar-toggler {
    margin-top: 0; /* Asegura que no haya margen superior que cause el desplazamiento */
}
.navbar .navbar-brand img {
    height: 60px;
    transition: all 0.3s ease;
}
.navbar.scrolled {
    background-color: white !important; /* Cambia el color cuando se scrollea, con menor transparencia */
}
.navbar.scrolled .navbar-brand img {
    height: 60px; /* Cambia el tamaño del logo al hacer scroll */
}
.navbar.scrolled .nav-link {
    color: #9F4DFF !important; /* Cambia el color del texto al hacer scroll */
}
.nav-link{
    color: white;
}

/* Estilo para el icono del toggler en estado inicial */
.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='rgba(255, 255, 255, 1)' stroke-width='2' linecap='none' linejoin='none' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    border: none;
    /* Cambia el color a violeta */
}
/* Estilo cuando el toggler está en estado de "scrolled" */
.navbar.scrolled .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='rgba(138, 43, 226, 1)' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    border: none;
}

/* Estilo cuando el toggler está en estado de "scrolled" */



#hero{
    background: url(/images/fondo.jpg)center center fixed;
    background-size: cover;
    height: 70vh;
    color: white;
}  

#hero .col-md-12{
    align-items: center;
    text-align: center;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 200px;
}
#hero .col-md-12 h1{
    font-size: 60px;
    font-weight: 800;
    padding-bottom: 20px;
    }

#hero .col-md-8 h2{
        font-size: 25px;
        font-weight: 300;
        padding-left: 100px;
        padding-right: 100px;
    }

#servicios{
    background: #e8e8e8f5;
    padding-top: 50px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 50px;
}
.descripcion h3{
        align-items: center;
        text-align: center;
        color: #9F4DFF;
        font-weight: 500;
    }
.descripcion h1{
        text-align: center;
    }
    
.descripcion p{
        text-align: center;
        color: #817e7e;
    }

.servicios{
    background: #e8e8e8f5;
    padding-left: 100px;
    padding-right: 100px;
}
.card {
    margin: 20px 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s, background-color 0.3s, color 0.3s;
    color: white;
    height: 350px;
    
}

.card:hover {
    transform: translateY(-10px);
    background-color: #9F4DFF;
    
}
.card:hover .pic h5,
.card:hover .pic p {
    color:white;
}
.card:hover .pic p b {
    color: white;
}

.card:hover .pic i {
    color:#64009f ;
}

.card .pic {
    text-align: center;
    padding: 20px;
}

.card .pic img {
    max-width: 100px;
    margin-bottom: 20px;
}

.card .pic h5 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #333;
}

.card .pic p {
    color: #666;
}
i{
padding-bottom: 20px;
color:#9F4DFF; 
font-size: 80px;
}

/* Estilo del footer */
.footer {
    background-color: #9F4DFF; /* Color de fondo oscuro */
    color: #fff; /* Color del texto */
    padding: 20px 0; /* Espaciado superior e inferior */
    text-align: center; /* Centrar el texto */
    position: relative; /* Asegura que el footer no se mueva */
    bottom: 0; /* Mantiene el footer al final de la página */
    width: 100%; /* Asegura que el footer ocupe todo el ancho de la página */
}

/* Contenido del footer */
.footer-content {
    display: flex;
    justify-content: center; /* Centra los íconos */
    gap: 30px; /* Espacio entre los íconos */
    margin-bottom: 10px; /* Espacio entre los íconos y el texto */
}

/* Estilo de los íconos en el footer */
.footer-content i {
    color: #fff; /* Color de los íconos */
    font-size: 24px; /* Tamaño de los íconos */
    text-decoration: none; /* Elimina el subrayado */
}
.footer-content i{
    color: white;
    font-size: 50px;
}

.footer-content i:hover {
    color: #64009f; /* Color de los íconos al pasar el cursor */
}

/* Texto del footer */
.footer-text {
    font-size: 14px; /* Tamaño del texto */
}

















/*MEDIA*/

@media (max-width: 768px) {
    .card {
        margin: 10px 0;
    }
    
}
/* Estilos personalizados para el menú desplegable */
@media (max-width: 991.98px) { /* Se aplica en dispositivos con un ancho de pantalla de 991.98px o menos */
    .navbar-nav .nav-item .nav-link {
        color: #9F4DFF; /* Color del texto de los enlaces del menú */
    }
    .navbar-nav .nav-item .nav-link:hover {
        color: #64009f; /* Color del texto al pasar el mouse sobre un enlace */
        font-size: 20px;
        font-weight: 500;
    }
    .navbar-nav {
        background-color: white; /* Color de fondo del menú desplegable */
    }
    .navbar-collapse {
        background-color: white; /* Color de fondo de la sección colapsada */
    }
}
/* Dispositivos móviles pequeños (hasta 575.98px) */
@media (max-width: 575.98px) {
    .navbar {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
    }
    #hero .col-md-12 {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 100px;
    }
    #hero .col-md-12 h1 {
        font-size: 30px;
    }
    #hero .col-md-8 h2 {
        font-size: 18px;
    }
    .card {
        height: auto;
        margin: 10px 0;
    }
    i {
        font-size: 40px;
    }
}

/* Dispositivos móviles medianos (576px - 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .navbar {
        padding-left: 30px;
        padding-right: 30px;
        height: 80px;
    }
    #hero .col-md-12 {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 120px;
    }
    #hero .col-md-12 h1 {
        font-size: 40px;
    }
    #hero .col-md-8 h2 {
        font-size: 20px;
    }
    .card {
        height: auto;
        margin: 15px 0;
    }
    i {
        font-size: 50px;
    }
}

/* Dispositivos tablets (768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar {
        padding-left: 50px;
        padding-right: 50px;
        height: 80px;
    }
    #hero .col-md-12 {
        padding-left: 60px;
        padding-right: 60px;
        padding-top: 150px;
    }
    #hero .col-md-12 h1 {
        font-size: 50px;
    }
    #hero .col-md-8 h2 {
        font-size: 22px;
    }
    .card {
        height: auto;
        margin: 20px 0;
    }
    i {
        font-size: 60px;
    }
}

/* Dispositivos tablets grandes y laptops pequeñas (992px - 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar {
        padding-left: 70px;
        padding-right: 70px;
        height: 80px;
    }
    #hero .col-md-12 {
        padding-left: 80px;
        padding-right: 80px;
        padding-top: 170px;
    }
    #hero .col-md-12 h1 {
        font-size: 55px;
    }
    #hero .col-md-8 h2 {
        font-size: 24px;
    }
    .card {
        height: auto;
        margin: 25px 0;
    }
    i {
        font-size: 70px;
    }
}

/* Laptops grandes y pantallas de escritorio (1200px en adelante) */
@media (min-width: 1200px) {
    .navbar {
        padding-left: 100px;
        padding-right: 100px;
        height: 80px;
    }
    #hero .col-md-12 {
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 200px;
    }
    #hero .col-md-12 h1 {
        font-size: 60px;
    }
    #hero .col-md-8 h2 {
        font-size: 25px;
    }
    .card {
        height: 350px;
        margin: 30px 0;
    }
    i {
        font-size: 80px;
    }
}