.elementor-1848 .elementor-element.elementor-element-4ac53f6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:60px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1848 .elementor-element.elementor-element-4df6aa0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:90px;--padding-left:10px;--padding-right:10px;}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1848 .elementor-element.elementor-element-d77ba40 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1848 .elementor-element.elementor-element-d77ba40.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}/* Start custom CSS for doclik_medical_directory_title, class: .elementor-element-f60e3f0 */.elementor-1848 .elementor-element.elementor-element-f60e3f0{
    text-align: center;
}

.elementor-1848 .elementor-element.elementor-element-f60e3f0 .col-lg-5{
    width: 100% !important;
}

.elementor-1848 .elementor-element.elementor-element-f60e3f0 .col-lg-7{
    display: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4ac53f6 */.elementor-1848 .elementor-element.elementor-element-4ac53f6 .medical-directory-section {
    padding: 0;
}/* End custom CSS */
/* Start custom CSS for wc-categories, class: .elementor-element-d77ba40 */.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
}

.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li {
    flex: 1 1 calc(25% - 10px);
    min-width: 200px;
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
}

/* Aseguramos que el <a> ocupe todo el espacio del <li> */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li a {
    display: block; /* Hace que toda la caja sea clickeable */
    width: 100%;
    height: 100%;
    position: relative;
}

/* Imagen con filtro de brillo para oscurecer */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.3s ease-in-out; /* Filtro de brillo */
}

/* Flecha blanca en el centro */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li a::before {
    content: "➤";
    font-size: 2rem;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2; /* Se asegura de que la flecha esté sobre la imagen */
    transition: opacity 0.3s ease-in-out;
}

/* Efecto hover */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li:hover {
    transform: translateY(-5px);
}

.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li:hover img {
    filter: brightness(0.7); /* Oscurecer solo la imagen */
}

.elementor-1848 .elementor-element.elementor-element-d77ba40 .clearfix li:hover a::before {
    opacity: 1; /* Aparece la flecha */
}

/* Ocultar contador */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .count {
    display: none;
}

/* Estilos del título */
.elementor-1848 .elementor-element.elementor-element-d77ba40 .woocommerce-loop-category__title {
    color: black !important;
    font-size: 20px;
    padding-top: 15px;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-f71bc4b */.elementor-1848 .elementor-element.elementor-element-f71bc4b img{
    width: 100px !important;
}/* End custom CSS */