/* Start custom CSS *//* Transición suave texto blanco */
.hover-white h2,
.hover-white p {
    transition: color 0.2s ease;
}

/* Hover en cualquier parte de la columna */
.hover-white:hover h2,
.hover-white:hover p {
    color: #ffffff !important;
}


/* --- SWAP para ICON WIDGET (FontAwesome o SVG) --- */

/* contenedor del icono */
.hover-white .swap-chevron .elementor-icon-wrapper{
    position: relative;
    width: 22px;
    height: 22px;
}

/* ocultamos icono original */
.hover-white:hover .swap-chevron .elementor-icon{
    opacity: 0;
    transition: opacity .25s ease;
}

/* nuevo icono */
.hover-white .swap-chevron .elementor-icon-wrapper:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    background-image: url("https://jointpreservationcenter.com/wp-content/uploads/2026/02/Chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* mostrar nuevo icono al hacer hover en TODA la columna */
.hover-white:hover .swap-chevron .elementor-icon-wrapper:after{
    opacity: 1;
}


/* ================================
   SOPORTE SI EL ICONO ES IMAGE WIDGET
================================ */

.hover-white .swap-chevron{
    position: relative;
    width: 22px;
    height: 22px;
}

.hover-white .swap-chevron img{
    transition: opacity .25s ease;
}

.hover-white:hover .swap-chevron img{
    opacity: 0;
}

.hover-white .swap-chevron:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    background: url("https://jointpreservationcenter.com/wp-content/uploads/2026/02/Chevron-right.svg") center / 22px 22px no-repeat;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.hover-white:hover .swap-chevron:after{
    opacity: 1;
}/* End custom CSS */