/* 
    Archivo de correcciones CSS para CDR Veterinaria
*/

/* Corregir estilo de los feature-icons - asegurar que los iconos son visibles */
.feature-box .feature-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 32px;
    color: #ffffff !important;
    margin: 0 auto 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Asegurar que los iconos dentro de feature-icon sean visibles */
.feature-box .feature-icon i,
.feature-box .feature-icon .fas,
.feature-box .feature-icon .far,
.feature-box .feature-icon .fab {
    color: #ffffff !important; 
    font-size: 32px;
    display: inline-block;
}

/* Asegurar que el botón back-to-top es visible */
.back-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.back-to-top i,
.back-to-top .fas,
.back-to-top .fa-arrow-up {
    color: #ffffff !important; 
    font-size: 20px !important;
    display: inline-block !important;
    visibility: visible !important;
}

.back-to-top.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.back-to-top:hover {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
}

/* Asegurar que todos los iconos de Font Awesome son visibles */
.fas, .far, .fab, .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
    display: inline-block;
}

.far {
    font-weight: 400;
}

.fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Garantizar que todos los iconos específicos sean visibles */
.fa-microscope,
.fa-user-md,
.fa-heart,
.fa-arrow-up {
    display: inline-block !important;
    visibility: visible !important;
    font-size: inherit;
    width: auto;
    height: auto;
}

/* Asegurar que los iconos en la sección Why Choose Us son visibles */
.why-choose-us .feature-icon i {
    color: #ffffff !important;
    display: inline-block !important;
}