/*
|--------------------------------------------------------------------------
| Custom Professional Blog Styles
|--------------------------------------------------------------------------
| This file contains all custom CSS to be shared across your blog articles.
*/

/* Enhancing the main article container */
.blog-article {
    background-color: #fff;
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
    padding: 3rem; /* Increase padding for a spacious feel */
}

/* Main Heading (h1) */
.custom-heading {
    font-family: 'Arial', sans-serif; /* Use a clean sans-serif for the title */
    color: #00afdb; /* Primary brand color */
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.mbd-color-text {
    color: #00afdb !important;
}

.mbd-color-border {
    border-color: #00afdb !important;
}

.custom-section {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

/* Section Headings (h2 from HTML) */
.custom-section-heading {
    border-left: 5px solid #00afdb; /* Add a striking left border */
    padding-left: 15px;
    margin-top: 0.5rem;
    font-weight: 600; /* Slightly bolder */
    color: #00afdb !important; /* Ensure primary color is applied */
    font-size: 1.8rem;
}

/* Sub-Headings (h4 from HTML) */
h4 {
    font-weight: 500;
}

/* Introductory Paragraph */
.intro-text {
    font-size: 1.15rem;
    line-height: 1.8;
}

/* --- Content Elements --- */

/* Lists */
.custom-list .list-group-item {
    line-height: 1.6;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Nested lists */
.sub-list {
    border-left: 2px dashed #dee2e6;
}
.sub-list .list-group-item {
    padding-left: 10px !important;
}


/* Alerts/Tips Boxes */
.custom-alert {
    border-left: 5px solid;
    font-size: 0.95rem;
    padding: 1rem;
}
.alert-info {
    /* Background color from user's new file */
    background-color: #00afdb !important;
    border-color: #00ccff !important;
    /* Added CSS: Ensure text is white for contrast against dark blue background */
    color: #fff !important; 
}
/* Ensure icons and strong tags in the dark alert are also white */
.alert-info .fas, .alert-info strong {
    color: #fff !important;
}

/* Image Styling */
.blog-image {
    max-width: 100%;
    height: auto;
    border: 3px solid #eee; /* Light border around image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Links and Buttons */
.custom-btn-link {
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.custom-btn-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.custom-share-btn {
    border-radius: 50rem; /* Pill button for share */
}

.custom-social-btn {
    border-radius: 5px;
    font-size: 0.9rem;
}

/* --- Footer --- */
.custom-footer-message {
    font-family: 'Arial', sans-serif;
    color: #495057;
    padding-top: 1rem;
}

.table-day-column {
	white-space: nowrap;
}

.line-height-sm {
	line-height: 1.3 !important;
}

/* Custom CSS to enforce equal width on all columns except the first one (Day) */
.table-fixed {
    table-layout: fixed; /* Fixes column widths based on the first row or specified width */
    width: 100%;
}

/* By default, equal width will be distributed. We need to explicitly size the narrow column. */
.table-fixed tr:first-child {
    width: 5rem; /* Matches the inline style used for the 'Day' column */
}

/* Ensure the table is centered on all screen sizes */
@media (max-width: 768px) {
    .table-responsive.d-inline-block {
        display: block !important;
        text-align: center;
    }
}

/* --- Responsiveness (Mobile Adjustments) --- */

@media (max-width: 991.98px) {
    /* Adjust padding for smaller screens */
    .blog-article {
        padding: 1.5rem;
    }
    
    /* Slightly smaller main heading on mobile */
    .custom-heading {
        font-size: 2rem;
    }
    
    /* Center text/elements for better mobile flow */
    .text-md-start {
        text-align: center !important;
    }

    /* Stack social links more tightly */
    .social-links {
        justify-content: center;
        margin-top: 1rem !important;
    }
}







/*
|--------------------------------------------------------------------------
| 1. COMPONENTS (Blocks)
|--------------------------------------------------------------------------
*/

/* --- banner --- */
#hospital-azar-title-section .banner h1 {
    color: white ; /* Default text color for the banner */
    text-align: center;
    line-height: 1.32em;
    letter-spacing: 0.5px;
    font-family: inherit;
}

#hospital-azar-title-section .banner p {
    color: white ; /* Default text color for the banner */
    text-align: center;
}
/* Modifier: For a blue background */
.banner--blue {
    background-color: #00afdb;
}


/* --- heading --- */
.heading {
    font-size: 45px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 12px;
    position: relative;
    display: inline-block;
}

/* Modifier: Adds the custom underline style */
.heading--underline {
    padding-bottom: 5px; /* Adds space for the underline */
}

.heading--underline::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: currentColor; /* Inherits text color */
}


/* --- paragraph --- */
.paragraph {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

---

/*
|--------------------------------------------------------------------------
| 2. LAYOUT / UTILITIES
|--------------------------------------------------------------------------
*/

/* --- container --- */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* --- spacing-vertical-large (for flexible vertical padding) --- */
.spacing-vertical-large {
    padding-top: 50px; /* Large top padding */
    padding-bottom: 50px; /* Large bottom padding */
}
/* You can easily define other sizes like 'spacing-vertical-small' (30px) or 'spacing-vertical-extra-large' (80px) as you need them. */


/*
|--------------------------------------------------------------------------
| 1. GENERAL & LAYOUT
|--------------------------------------------------------------------------
*/

.section-gray-background {
    background-color: #f8f8f8; /* Light gray background */
}

.section-padding {
    padding-top: 40px;
    padding-bottom: 40px; /* Adjust as needed for various section paddings */
}

/*
|--------------------------------------------------------------------------
| 2. COMPONENTS
|--------------------------------------------------------------------------
*/

/* --- feature-card --- */
.feature-card {
    text-align: center;
    padding: 20px; /* Internal padding for the card content */
    margin-bottom: 20px; /* Space between cards on smaller screens */
    /* Add box-shadow or border if you want more visual separation */
}


/* --- feature-icon --- */
.feature-icon {
    margin-bottom: 20px; /* Space between icon and title */
    color: #00afdb; /* Brand blue for icons */
    font-size: 48px; /* Large icon size */
}

.feature-icon a {
    color: inherit; /* Ensures the link inherits the icon color */
    text-decoration: none;
}


/* --- feature-title --- */
.feature-title {
    font-size: 22px;
    font-weight: bold; /* Based on the image */
    color: #333; /* Darker text for titles */
    margin-top: 0;
    margin-bottom: 15px; /* Space below title */
    line-height: 1.3;
}


/* --- feature-description --- */
.feature-description {
    font-size: 15px; /* Smaller font size for description */
    color: #555;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 15px; /* Space below paragraph */
}

/* --- card-action-area --- */
.card-action-area {
    margin-top: 25px; /* Space above the button */
    /* text-align: center is inherited from .feature-card */
}


/* --- custom-button --- */
.custom-button {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 4px; /* Slightly rounded corners */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

/* Modifier: Primary blue button style */
.custom-button--primary {
    background-color: #00afdb; /* Matching the blue from the banner */
    color: white;
    border: 1px solid #00afdb;
}

.custom-button--primary:hover {
    background-color: #00a0b2; /* Slightly darker blue on hover */
    border-color: #00a0b2;
    color: white;
}

/* Modifier: Smaller button size */
.custom-button--small {
    padding: 8px 20px;
    font-size: 13px;
}

#hospital-azar-features-section h3 {
    font-size: 18px;
    margin: 0 12px 4px 60px;
    letter-spacing: 0px;
    line-height: 25px;
    font-weight: 700;
    color: #1e2022;
}

#hospital-azar-features-section i {
    font-size: 36px;
    line-height: 47px;
    color: #1e2022;
}

/*
|--------------------------------------------------------------------------
| 1. GENERAL & LAYOUT
|--------------------------------------------------------------------------
*/

/* --- content-section --- */
.content-section {
    text-align: center;
    /* Add padding if needed, not explicitly visible but usually good practice */
    padding-top: 40px; 
    padding-bottom: 40px;
}

/* Modifier: Blue background */
.content-section--blue {
    background-color: #00afdb; /* Brand blue color */
}


/*
|--------------------------------------------------------------------------
| 2. COMPONENTS (The white boxes)
|--------------------------------------------------------------------------
*/

/* --- content-box --- */
.content-box {
    background-color: white;
    padding: 30px; /* Internal padding */
    margin-bottom: 20px; /* Space between boxes on small screens */
    height: 100%; /* Ensures both boxes are the same height within the row */
}

/* Modifier: White box with rounded corners and slight border/shadow */
.content-box--bordered {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for lift */
    border: 1px solid rgba(0, 0, 0, 0.05);
}


/* --- box-header --- */
.box-header {
    font-size: 25px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Modifier: Blue text for the header */
.box-header--blue {
    color: #00afdb;
}

/* --- box-subheader --- */
.box-subheader {
    font-size: 0.7em; /* Matches the relative size from the original HTML */
    font-weight: normal;
    display: block; /* Ensures it starts on a new line */
    margin-top: 5px;
}


/* --- box-image (For the Hospital Azar image) --- */
.box-image {
    max-width: 100%;
    height: auto;
    display: block; /* Removes any default inline spacing */
    margin: 0 auto; /* Centers the image */
}


/* --- video-embed (For the YouTube video wrapper) --- */
.video-embed {
    /* Standard responsive container rules, replaces Bootstrap's 'embed-responsive' */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
    height: 0;
    overflow: hidden;
    margin-top: 15px; /* Space below the header */
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Optional: adds rounded corners to the video frame */
}


/* --- section-margin-vertical (Replaces the inline margin:50px 0;) --- */
.section-margin-vertical {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* --- section-no-padding-bottom (Replaces p-b-0) --- */
.section-no-padding-bottom {
    padding-bottom: 0 !important; /* Use !important only if necessary to override default section padding */
}

/* --- row-equal-height (A class to ensure columns stretch vertically) --- */
.row-equal-height {
    /* Required to make 'height: 100%' on .step-card work */
    display: flex;
    flex-wrap: wrap; 
}

#the-journey-section h1, 
#the-journey-section h3 {
    color: #fff;
}

.large-text {
    font-size: 90px;
    line-height: 100px;
    letter-spacing: -.02em;
    font-weight: 700;
}

.journey-desc {
    color: #fff;
}

.div-padding [class*="col-"] {
    padding: 5%;
}




/*
|--------------------------------------------------------------------------
| 1. LAYOUT & UTILITIES
|--------------------------------------------------------------------------
*/

/* --- section-spacing-bottom (For the space below the entire procedures section) --- */
.section-spacing-bottom {
    padding-bottom: 80px; /* Generous space before the next section */
}

/* --- spacing-bottom-small (Replaces m-b-10 on the row for small margin at the bottom) --- */
.spacing-bottom-small {
    margin-bottom: 10px;
}

/* --- text-align-center (Replaces align-center) --- */
.text-align-center {
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| 2. HEADER BLOCK (Heading and subtitle)
|--------------------------------------------------------------------------
*/

/* --- header-block (Replaces heading-text) --- */
.header-block {
    margin-bottom: 40px; /* Space below the header before the content starts */
}

/* Modifier: Centers text (Replaces text-center) */
.header-block--centered {
    text-align: center;
}

/* Modifier: Adds the line below the main title (Replaces heading-line) */
.header-block--lined .header-title {
    position: relative;
    padding-bottom: 15px; /* Space for the line */
    margin-bottom: 15px;
    display: inline-block; /* Essential for centering and line width */
}

.header-block--lined .header-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px; /* Length of the line */
    height: 2px;
    background-color: #00afdb; /* Use brand color for the line */
}

/* --- header-title (H4 tag) --- */
.header-title {
    font-size: 45px;
    color: #333;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: -.7px;
    line-height: 40px;
}

/* --- header-subtitle (SPAN tag) --- */
.header-subtitle {
    display: block;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| 3. PROCEDURE CARDS (The images and descriptions)
|--------------------------------------------------------------------------
*/

/* --- procedure-card (Replaces team-member) --- */
.procedure-card {
    margin-bottom: 30px; /* Vertical spacing between cards in different rows */
    text-align: left; /* Default alignment for the text content */
}

/* --- card-media (Replaces team-image) --- */
.card-media {
    overflow: hidden;
    margin-bottom: 15px;
}

.card-media img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Slight transition for image hover effect */
    transition: transform 0.4s ease;
}

/* Optional: Add a slight zoom effect on hover for professionalism */
/*
.procedure-card:hover .card-media img {
    transform: scale(1.05);
}
*/

/* --- card-content (Replaces team-desc) --- */
.card-content {
    padding: 0 5px; /* Small horizontal padding for content alignment */
}

/* --- card-title (H3 tag) --- */
.card-title {
    font-size: 26px;
    color: #333;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 22px;
    margin-bottom: 0;
}

/* --- card-description (P tag) --- */
.card-description {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* --- card-action-area (Div for buttons/links at the bottom) --- */
.card-action-area {
    margin-top: 15px;
}



/*
|--------------------------------------------------------------------------
| 1. LAYOUT & UTILITIES
|--------------------------------------------------------------------------
*/

/* --- section-padded --- */
.section-padded {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --- text-align-center --- */
.text-align-center {
    text-align: center !important;
}

/* --- spacing-top-medium --- */
.spacing-top-medium {
    margin-top: 15px;
}


/*
|--------------------------------------------------------------------------
| 2. HEADER BLOCK (TESTIMONIALS title)
|--------------------------------------------------------------------------
*/

/* --- header-content-block --- */
.header-content-block {
    margin-bottom: 30px; 
}

/* Modifier: Centers text */
.header-content-block--centered {
    text-align: center;
}

/* Modifier: Adds the line below the title */
.header-content-block--underlined .header-content-title {
    position: relative;
    padding-bottom: 8px; /* Space for the line */
    margin-bottom: 5px;
    display: inline-block;
}

.header-content-block--underlined .header-content-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: #333; /* Dark line color */
}

/* --- header-content-title (H4 tag) --- */
.header-content-title {
    font-size: 34px;
    color: #333;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: -.7px;
    line-height: 40px;
}


/*
|--------------------------------------------------------------------------
| 3. REVIEW GRID & CARDS
|--------------------------------------------------------------------------
*/

/* --- review-grid (Replaces grid-layout) --- */
.review-grid {
    display: grid;
    gap: 30px; /* Space between grid items */
    margin-top: 20px;
}

/* Modifier: 3 columns layout */
.review-grid--3-col {
    /* Using CSS Grid for modern, flexible column layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


/* --- review-card-wrapper (Replaces grid-item) --- */
.review-card-wrapper {
    text-align: center;
}

/* --- review-card (The container for the image and text) --- */
.review-card {
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for lift */
    border-radius: 8px;
    overflow: hidden; /* Important for containing the image corners */
    margin-bottom: 10px; /* Space above 'Read More' link */
    padding-bottom: 20px; /* Padding for text content */
}

/* --- review-card-image (The image) --- */
.review-card-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

/* --- review-card-quote (P tag with quote) --- */
.review-card-quote {
    font-size: 15px;
    color: #444;
    line-height: 1.5;
    padding: 0 20px;
    margin-top: 0;
    margin-bottom: 15px;
    font-style: italic; /* The quote looks slightly stylized/italicized */
}

/* --- review-card-name (Patient name) --- */
.review-card-name {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

/* --- review-card-subject (Procedure type) --- */
.review-card-subject {
    display: block;
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}


/* --- review-read-more-link (Read More link) --- */
.review-read-more-link {
    font-size: 14px;
    color: #00afdb; /* Brand color for the link */
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

.review-read-more-link:hover {
    text-decoration: underline;
}

/* --- compliance-note --- */
.compliance-note {
    font-size: 12px;
    opacity: 0.8;
    color: #666;
    margin: 20px auto 0;
}

#youtube-shorts-section h1,
#youtube-shorts-section p {
    color: #fff;
}

#youtube-shorts-section iframe {
    width: 315px;
    height: 560px;
    border: 3px solid #fff;
}

#youtube-shorts-section .container {
    max-width: 1500px;
}

#youtube-shorts-section .row {
    padding-left: 0;
    padding-right: 0;
}

/* Container for the phone look - ADJUSTED SIZE FOR LARGER BEZEL */
.phone-frame-wrapper {
    /* New Dimensions: 315px + 70px (35px bezel on each side) = 385px */
    width: 385px; 
    /* New Dimensions: 560px + 70px (35px bezel on each side) = 630px */
    height: 630px; 
    
    position: relative;
    background-color: transparent;
    border: 5px solid white; 
    border-radius: 50px; 
    
    /* Centering the iframe using Flexbox is essential */
    display: flex;
    justify-content: center; /* Center iframe horizontally */
    align-items: center; /* Center iframe vertically */
    
    margin-top: 30px;
    padding: 0; 
    box-sizing: border-box; 
    
    /* Box Shadow for depth */
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.5); 
    
    overflow: hidden; 
}

/* Style the iframe inside the phone frame (NO CHANGE NEEDED HERE) */
.phone-frame-wrapper iframe {
    display: block;
    width: 315px;
    height: 560px;
    border-radius: 20px; 
    border: none; 
    margin: 0; 
    padding: 0;
}

/* ::before for the speaker/camera notch (NO CHANGE NEEDED HERE) */
.phone-frame-wrapper::before {
    content: '';
    position: absolute;
    top: 5px; /* Keeps the notch close to the outer edge */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; 
    height: 10px; 
    background-color: white; 
    border-radius: 0 0 8px 8px; 
    z-index: 10; 
}

/* ::after for the Home button/bar (NO CHANGE NEEDED HERE) */
.phone-frame-wrapper::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Keeps the home bar close to the outer edge */
    left: 50%;
    transform: translateX(-50%);
    width: 100px; 
    height: 3px;
    background-color: white; 
    border-radius: 2px;
    z-index: 10;
}

.center-items {
    display:flex;
    justify-content: center;
}





/*
|--------------------------------------------------------------------------
| 1. FOOTER LAYOUT & GENERAL STYLES
|--------------------------------------------------------------------------
*/

/* --- site-footer --- */
.site-footer {
    /* The 'inverted' style is handled by the blue background and white text */
    background-color: #00afdb; /* Brand blue background */
    color: white; /* Default text color for the entire footer */
    font-size: 15px;
}

/* --- footer-primary-content (The main blue section) --- */
.footer-primary-content {
    background-color: #00afdb;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}
#footer .footer-primary-content p,
#footer .footer-primary-content li > a:not(.btn):not(:hover) {
    color: white;
}

/* --- text-align-center (Replaces text-center) --- */
.text-align-center {
    text-align: center;
}

/*
|--------------------------------------------------------------------------
| 2. WIDGETS (Columns)
|--------------------------------------------------------------------------
*/

/* --- footer-widget (Replaces widget) --- */
.footer-widget {
    margin-bottom: 20px; /* Space between widgets on mobile/small screens */
}

/* --- widget-heading (Replaces widget-title) --- */
.widget-heading {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: white; /* Ensure heading color is white */
    margin-bottom: 20px;
}

/* --- widget-text (For the disclaimer paragraph) --- */
.widget-text {
    line-height: 1.6;
    margin-bottom: 25px; /* Replaces mb-5 */
}

/* --- link-list (Replaces list) --- */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.link-list li {
    margin-bottom: 10px; /* Space between links */
}

.link-list a {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s;
}

.link-list a:hover {
    opacity: 0.8;
}

/*
|--------------------------------------------------------------------------
| 3. BUTTON
|--------------------------------------------------------------------------
*/

/* --- button (Base button style) --- */
.button {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* --- button--white (Replaces btn btn-light) --- */
.button--white {
    background-color: white;
    color: #00bcd4; /* Brand blue text on white button */
    border: 1px solid white;
}

.button--white:hover {
    background-color: #f0f0f0;
    color: #008899;
}


/*
|--------------------------------------------------------------------------
| 4. COPYRIGHT BAR & SCROLL-TO-TOP
|--------------------------------------------------------------------------
*/

/* --- footer-copyright-bar (Replaces copyright-content and inline style) --- */
.footer-copyright-bar {
    background-color: white;
    color: #666; /* Darker text for copyright bar */
    padding: 15px 0;
    position: relative; /* Base for the scroll-to-top button */
}

/* --- copyright-text-content --- */
.copyright-text-content {
    font-size: 13px;
    text-align: center;
}

/* Position the button correctly relative to the copyright bar */
.footer-copyright-bar > .container {
    position: relative;
}

#header #mainMenu nav > ul > li > a {
    padding: 10px;
}





#hospital-azar-title-section a.link_underline:hover,
#hospital-azar-features-section a.link_underline:hover,
#jdr-extra-details a.link_underline:hover,
#faq-content a.link_underline:hover,
#dr-carlos-illich-navarro a.link_underline:hover,
#dr-luis-eduardo-guerrero a.link_underline:hover,
#dr-peter-lopez a.link_underline:hover,
#surgeon_title a.link_underline:hover {
    text-decoration:underline;
}


#dr-luis-eduardo-guerrero p,
#dr-peter-lopez p {
    font-size: 1rem;
}











































/* Surgeon page stuff */
#surgeon-content .surgeon_page_link {
    color: #00afdb; 
    text-decoration: none; 
    padding-left: 15px; /* Space for the border and arrow */
    border-left: 3px solid #00afdb;
    font-size: 24px;
    transition: padding-left 0.5s ease;
}

#surgeon-content .surgeon_page_link:hover {
    color: #00afdb; 
    padding-left: 30px;
    transition: padding-left 0.5s ease;
}

.slight_blue_underline {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.slight_blue_underline::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;

    width: 15%;
    border-bottom: 3px solid #00afdb;
    padding-bottom: 8px;
}

.surgeon_page_title {
    position: relative;
    padding-top: 8px;

}

.surgeon_page_title p {
    font-size: 20px;
    color: #00afdb;
}

.surgeon_page_title::before {
    content: '';
    display: block;
    position: absolute;
    right: calc(var(--bs-gutter-x) * .5);
    top: 0;

    width: 75%;
    border-top: 3px solid #00afdb;
    padding-top: 8px;
}