.bottom_ncasc {
    background-image: url("/images/newfooter.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #def1f7 !important;
}

[class*=title-2].sppb-section .sppb-section-title .sppb-title-heading:after, [class*=title-2].sppb-addon .sppb-addon-title:after {
    display: none;
}

[class*=title-2].sppb-section .sppb-section-title .sppb-title-heading:before, [class*=title-2].sppb-addon .sppb-addon-title:before {
    background: #fec746;
    left: 0;
    width: 150px;
    height: 3px;
    bottom: 25px;
}

.header-3#sp-header .sp-megamenu-parent>li {
     margin: 0 5px;
}

.ncasc-btn .sp-slider-btn-text {
    background-color: #0098c4;
}

/*.sppb-btn-dark {
    background-color: red;
}*/


/* LANGUAGE SWITCHER */

/* Container styling to ensure they line up nicely */
div.mod-languages ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px; /* Slightly wider gap to accommodate the glow */
    align-items: center;
}

/* Base style for all language list items */
div.mod-languages ul li {
    display: inline-flex;
    padding: 0 !important; /* Forces the internal padding over Joomla defaults */
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

/* Hover state for the inactive flag(s) */
div.mod-languages ul li:not(.lang-active):hover {
    background-color: #f5f5f7;
    border-color: #e5e5ea;
    cursor: pointer;
    transform: translateY(-1px); /* Slight lift effect */
}

/* The Active Flag styling with a rich, intense glow */
div.mod-languages ul li.lang-active {
    background-color: #ffffff;
    border-color: #0098c4;

    /* Stacking shadows: 1st is a crisp shadow, 2nd is a wide soft colored glow */
    box-shadow: 0 2px 4px rgb(0 152 196 / 0.35),
    0 0 9px rgb(0 152 196 / 0.62);
}

/* Ensure the flag images inside look crisp */
div.mod-languages ul li img {
    display: block;
    border-radius: 2px; /* Smooths out sharp flag corners */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Gives flags a slight depth */
    height: 14px;
}

@media (max-width: 767px) {
.lang_menu {
    display: none !important;
    }
}

/*OFFCANVAS*/

/* Align the header text and the toggle button on the exact same line */
.offcanvas-menu .mod-menu__heading.nav-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    cursor: pointer;
}

/* Ensure the toggler icon behaves properly */
.offcanvas-menu .menu-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

/* Base style for the icon (Circle Plus) */
.offcanvas-menu .menu-toggler::after {
    content: "\f055" !important;
    font-family: "Font Awesome 5 Free" !important; /* Update to "Font Awesome 6 Free" if using FA6 */
    font-weight: 900 !important;
    color: #e01b5d; /* Your pink brand color */
    font-size: 18px;
}

/* If the parent list item is open/expanded, switch to Circle Minus */
.offcanvas-menu li.menu-parent[aria-expanded="true"] .menu-toggler::after,
.offcanvas-menu li.menu-parent.active .menu-toggler::after {
    content: "\f056" !important;
}

/* Force the list to display horizontally */
.lang_offcanvas .mod-languages__list {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important; /* Removes any default bullet points */
    padding: 0 !important;       /* Removes default padding */
    margin: 15px 0 !important;    /* Adds space above and below the flags */
    gap: 12px;                  /* Creates space between the two flags */
}

/* Ensure the list items themselves don't force a new line */
.lang_offcanvas .mod-languages__list li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Optional: Make the flag images look crisp and slightly interactive */
.lang_offcanvas .mod-languages__list img {
    display: block;
    width: auto;
    height: 16px; /* Sets a uniform, clean height for the flags */
    border-radius: 2px; /* Smooths sharp flag edges slightly */
    transition: transform 0.2s ease;
}

/* Subtle hover effect for the flags */
.lang_offcanvas .mod-languages__list a:hover img {
    transform: scale(1.1);
}



/*DOCTORS*/

.appointment-button {
    display: none !important;
}

.specialists-social-profile {
    display: none !important;
}

.specialist-contact-info {
    display: none !important;
}

/*DOC CARDS*/

/* Container Spacing */
.spmedical-specialists {
    margin-bottom: 30px;
}

/* The Main Card - Switched to column layout */
.specialist-wrapper.spmedical-d-flex {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Stacks image on top of text */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Ensures all cards in a row match height */

    /* Safari Fixes for Overflow Masking */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;

}

.specialist-wrapper.spmedical-d-flex:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Image Section Base Container */
.specialists-img-wrapper {
    position: relative;
    width: 100%;
    /* MATCH THE SOURCE IMAGE RATIO:
           Your image is 263x357, which is roughly a 3:4 portrait ratio.
           Using 3/4 here means the box on mobile will naturally match the
           shape of the actual doctor's photo perfectly, resulting in ZERO extreme cropping! */
    aspect-ratio: 3 / 4;

    overflow: hidden;
    background-color: #f8f9fa;

    /* Safari rendering fix for absolutely positioned children */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    flex-shrink: 0;
}

/* Add prefix to the button base state */
.specialists-img-wrapper .spmedical-btn {
    -webkit-transform: translate(-50%, 15px);
    transform: translate(-50%, 15px);
}

/* Add prefix to the button hover state */
.specialist-wrapper:hover .spmedical-btn {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.specialists-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* TARGET THE FACE:
       Using 'center 30%' instead of just 'center' shifts the camera view slightly upward.
       This ensures the eyes and smile stay perfectly framed, while keeping the head
       from being cut off even if the card stretches on massive phone screens. */
    object-position: center 30%;

    display: block;
    transition: transform 0.3s ease;
}

.specialist-wrapper:hover .specialists-img-wrapper img {
    transform: scale(1.05); /* Subtle zoom into the doctor's photo */
}

/* 1. Base Button State (Hidden) */
.specialists-img-wrapper .spmedical-btn {
    position: absolute;
    /*bottom: 20px;*/
    left: 50%;
    transform: translate(-50%, 15px); /* Centers horizontally, pushes down 15px */

    /* Strict sizing to fix the massive block issue */
    display: inline-block !important;
    width: auto !important;
    max-width: 80% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;

    /* Text and Padding */
    text-align: center;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 10px 20px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Colors and Aesthetics */
    background-color: #0098c4 !important; /* Clean matching teal/blue */
    color: #ffffff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: none !important;

    /* Animation Properties */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2;
}

/* 2. Hover Interaction to Reveal the Button */
.specialist-wrapper:hover .spmedical-btn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Slides up to its final position */
}

/* Info Section */
.specialists-info-wrapper {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Container for Name and Badge side-by-side */
.specialists-name {
    display: flex;
    flex-wrap: wrap;       /* Allows the badge to drop to the next line safely on tiny screens */
    align-items: center;   /* Perfectly aligns the middle of the text and the badge */
    gap: 10px;             /* Puts a clean space between the name and the badge */
    margin-bottom: 15px;   /* Spacing below the name section */
}

/* Reset heading margins so flex alignment works perfectly */
.specialists-name h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.specialists-name h3 a {
    color: #2c3e50;
    text-decoration: none;
}

.specialists-name h3 a:hover {
    color: #0098c4;
}

/* Updated Badge Styling */
.specialists-designation {
    display: inline-block;
    background: #e3f2fd;
    color: #0098c4;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;       /* Slightly smaller to complement the name */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;        /* Keeps the badge compact */
}

/* Specialties List */
.area-of-specialties {
    margin-top: auto; /* Pushes content to the bottom if cards vary in height */
}

.area-of-specialties h3 {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    font-weight: 600;
}

.area-of-specialties ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.area-of-specialties ul li {
    font-size: 14px;
    color: #34495e;
    position: relative;
    padding-left: 15px;
    line-height: 1.4;
}

.area-of-specialties ul li::before {
    content: "•";
    color: #0098c4;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Request Appointment Button (Hidden if not used, or styled if it exists) */
.specialists-social-profile {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f1f2f6;
    text-align: center;
}

.specialists-social-profile .btn-link {
    color: #0098c4;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}


/*.spmedical-specialists-list .spmedical-row .spmedical-col-lg-4 {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.specialist-wrapper .specialists-img-wrapper {
    margin-right: 35px;
    flex: 1;
    position: relative;
    border-radius: 5px 0 0 5px;
    overflow: hidden;
}*/


/*.specialist-info {
    box-shadow: 0 7px 22px 0 rgba(0, 0, 0, .09);
    border-radius: 5px;
}*/

@media (min-width: 1200px) {
    #spmedical .spmedical-col-xl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* On screens larger than phones (tablets/desktops), revert back to your clean grid height */
/* On desktops/tablets, keep it at a fixed height so the grid rows stay neat */
@media (min-width: 576px) {
    .specialists-img-wrapper {
        height: 250px; /* Bumped slightly to 250px to fit portrait photos beautifully */
        aspect-ratio: auto;
    }
}

/*END CARDS*/

.spmedical-sidebar .sidebar-title {
    font-size: 17px;
    color: #9b9b9b;
    font-weight: 700;
    border-bottom: 1px solid #e5e5e5;
    padding: 25px;
}

.spmedical .spmedical-btn {
    background-color: #0098c4;
}

.spmedical-buttons-group .spmedical-submit-button {
    background-color: #0098c4;
}

.spmedical-btn.spmedical-btn-primary:focus, .spmedical-btn.spmedical-btn-primary:hover {
    color: #fff;
    background-color: #005871;
}

.spmedical-buttons-group .reset-button {
    background-color: #0098c4;
    color: white;
    padding: 3px 10px;
    border-radius: 5px;
}

.reset-button:focus,
.reset-button:hover {
    color: #fff !important;
    background-color: #005871;
}

form.spmedical-search {
    display: flex;
    width: 100%;
    padding: 15px 20px;
    box-shadow: 0 7px 22px 0px rgba(0, 0, 0, 0.09);
    border-radius: 5px;
    background: #fff;
}

.spmedical-sidebar .spmedical-buttons-group {
    text-align: center;
    padding: 10px;
}

.about-specialist .specialist-intro p {
    font-size: 15px;
    font-weight: 300;
    color: #353535;
}

.ut-person.ut-person-8 .sppb-addon-content .person-after>div:first-child {
    margin-top: -10px;
    position: relative;
}

.ut-person.ut-person-8 .sppb-addon-content .person-after {
    background: #fff;
    padding: 15px 15px 20px;
    min-height: 130px;
}

div.pagination ul>li>a {
    border: none;
    min-width: 30px;
    height: 40px;
    line-height: 1;
    border-radius: 5px !important;
}


[class*=title-1].sppb-section .sppb-section-title .sppb-title-heading:before, [class*=title-1].sppb-addon .sppb-addon-title:before {
    display: none;
}

body .sppb-btn {
    text-transform: inherit !important;
}

.spmedical-specialists .specialist-wrapper .specialists-img-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 152 196 / 95%);
    opacity: 0;
    transition: .4s;
}

body .btn-primary, body .sppb-btn-primary {
    background: #d51757;
    color: #fff;
    border: 1px solid #d51757;
}

body .btn-primary.disabled, body .btn-primary:hover, body .btn-primary:active, body .btn-primary:not(:disabled):not(.disabled):active, body .sppb-btn-primary.disabled, body .sppb-btn-primary:hover, body .sppb-btn-primary:active, body .sppb-btn-primary:not(:disabled):not(.disabled):active {
    background: #98113e;
    color: #fff;
    border: 1px solid #98113e;
}

.spmedical .spmedical-specialists-search-wrapper form input {
    padding: 10px 35px;
}

.spmedical-specialist-search .input-filters .specialist-wrapper .custom-combobox .custom-combobox-toggle {
    top: 16px;
}

.spmedical-specialists-search-result .spmedical-result-counter h4 {
    font-size: 16px;
     font-weight: 600;
    color: #666;
    margin: 0;
}

/*OTROS*/

[class*=title-2].sppb-section .sppb-section-title .sppb-title-heading:before, [class*=title-2].sppb-addon .sppb-addon-title:before {
display: none;
}

section .sppb-section-title .sppb-title-heading, [class*=title-2].sppb-addon .sppb-addon-title {
    padding-bottom: 0;
}

.explore-more {
    color: #0098c4 !important;
    font-weight: bold !important;
}

body .sppb-btn-white-primary:hover {
    background-color: #eef6fb !important;
}

.sp-page-title .breadcrumb {
    padding: 0 !important;
}

.spmedical-specialist-search .input-item .spmedical-btn {
    text-transform: inherit;
}

.spmedical-sidebar .spmedical-category-search h3 {
    text-transform: inherit;
}

.spmedical-sidebar .spmedical-buttons-group .spmedical-submit-button {
    text-transform: inherit;
    padding: 4px 10px;
}

.spmedical-buttons-group .reset-button {
    text-transform: inherit;
}

#spmedical-specialists-filters-form ul>li label input {
    margin-top: 0;
}


.spmedical .spmedical-title {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.spmedical .spmedical-subtitle {
    font-size: .9375rem;
    line-height: 32px;
    font-weight: 300;
    text-align: center;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
}

.spmedical-sidebar .spmedical-category-search {
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.spmedical .spmedical-specialists-search-wrapper form input {
    font-size: 16px !important;
}


/*HEADERS*/

.sp-page-title.title-image-bg:before {
    background: transparent !important;
}

/*LINKS*/
/*RED*/

.red_links a {
    color: #d51757 !important;
}

.red_links a:hover {
    color: #8c0f39 !important;
}

.white_links a {
    color: #eef6fb !important;
}

.white_links a:hover {
    color: #c0c8cf !important;
}


/*TITLES LINES*/

.titles_line_blue .sppb-section-title:after {
    content: "";          /* Required for pseudo-elements to show up */
    display: block;       /* Forces it onto a new line under the text */
    width: 150px;          /* Give it a specific width */
    /*margin-top: 8px;*/      /* Space between text and line */
    border-bottom: 3px solid #0098c4;
    margin: 0 auto;
    padding: 10px;
}

.spmedical-title:after {
    content: "";          /* Required for pseudo-elements to show up */
    display: block;       /* Forces it onto a new line under the text */
    width: 150px;          /* Give it a specific width */
    /*margin-top: 8px;*/      /* Space between text and line */
    border-bottom: 3px solid #0098c4;
    margin: 0 auto;
    padding: 10px;
}

.spmedical-person a {
    /*color: #0098c4 !important;*/
    color: #D51757 !important;
}

.splms-person-title:hover {
    color: #0098c4 !important;
}

div.pagination {
     border: none !important;
}

/*SEARCH MODULE*/

/* Hide the first dropdown wrapper (Departments) */
.spmedical-search .input-item:first-child {
    display: none !important;
}

/* Hide the last dropdown wrapper before the button (Specialists) */
/*.spmedical-search .input-item:nth-child(3) {
    display: none;
}*/

.spmedical-specialists-filters .spmedical-category-search:first-of-type {
    display: none !important;
}

form.spmedical-search .btn-primary {
    padding: 11px 30px;
}

form.spmedical-search .input-item .custom-combobox-input:focus {
    outline: 0;
    border-color: #0098c4;
}

/* 2. Responsive override (Forces it hidden on mobile/tablets if a framework media query is overriding you) */
@media (max-width: 1199px) {
    .spmedical-search .input-item:first-child {
        display: none !important;
    }
    .spmedical-specialists-filters .spmedical-category-search:first-of-type {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .spmedical-search .input-item:first-child {
        display: none !important;
    }
    .spmedical-specialists-filters .spmedical-category-search:first-of-type {
        display: none !important;
    }
}

/* --- RESPONSIVE SEARCH MODULE FIX --- */

/* On mobile phones and smaller screens */
@media (max-width: 767px) {
    /* 1. Force the fields to stack vertically instead of side-by-side */
    .mod-spmedical-search .spmedical-search {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Adds clean spacing between each stacked field */
        width: 100% !important;
    }

    /* 2. Make each field wrapper stretch across the full width of the phone */
    .mod-spmedical-search .spmedical-search .input-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 3. Ensure the custom jQuery UI combo input takes up the full container space */
    .mod-spmedical-search .spmedical-search .custom-combobox {
        display: flex !important;
        width: 100% !important;
    }

    .mod-spmedical-search .spmedical-search .custom-combobox-input {
        flex-grow: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: 45px !important; /* Gives a more thumb-friendly touch target height */
    }

    /* 4. Force the Submit button to be full width and easy to tap */
    .mod-spmedical-search .spmedical-search .btn-primary {
        width: 100% !important;
        height: 45px !important;
        display: block !important;
    }
}

/*FIX PAGINATION SPMEDICAL ON MOBILE*/

@media (max-width: 767px) {
    ul.pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 6px !important; /* Slightly increased gap for a cleaner grid separation */
        padding-left: 0 !important;
    }

    ul.pagination .page-item {
        margin: 0 !important;
    }

    ul.pagination .page-link {
        /* FIXED TARGET SIZING:
           Using absolute height/width blocks completely eliminates icon vs text height variances */
        width: 40px !important;
        height: 40px !important;

        /* FLEX ALIGNMENT:
           This perfectly centers both text numbers AND Font Awesome icons dead center */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Reset padding so it doesn't inflate the explicit dimensions */
        padding: 0 !important;

        font-size: 14px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* Fix to ensure Font Awesome sub-spans inherit layout correctly */
    ul.pagination .page-link span {
        display: inline-block !important;
        line-height: 1 !important;
    }
}

/*LOGO MOBILE*/
/* --- FIXED MOBILE LOGO SCALE --- */
@media (max-width: 399px) {
    /* Target the link container safely */
    #sp-header a.logo,
    #sp-header .logo a {
        display: inline-block !important;
        max-width: 160px !important;
        width: 100% !important;
    }

    /* Target the image itself */
    #sp-header img.logo-image,
    #sp-header .logo-image img {
        width: 100% !important;
        max-width: 160px !important;
        height: auto !important;
    }




}

/*TO REMOVE THE EMPTY YELLOW BAR AT THE TOP ON MOBILE*/
@media (max-width: 575px) {
    #sp-top-bar {
        display: none;
    }
}