/*********************************************************************************

	Template Name: Template Full Name Here
	Description: A perfect template to build beautiful and unique medical websites. It comes with nice and clean design.
	Version: 1.0

	Note: This is custom css.

**********************************************************************************/


/*********************************************************************************

	Template Name: Template Full Name Here
	Description: A perfect template to build beautiful and unique medical websites. It comes with nice and clean design.
	Version: 1.0

	Note: This is custom css.

**********************************************************************************/

/* Custom CSS for the Beautiful Card Effect */
.custom-beautiful-card {
    background-color: #ffffff; /* Clean white background */
    padding: 60px 40px; /* Generous padding inside the card */
    border-radius: 12px; /* Slightly rounded corners for a soft look */
    margin: 0 auto; /* Center the card itself */
    max-width: 1100px; /* Constrain the width for optimal readability */
    position: relative; /* Needed for potential future pseudo-elements or absolute positioning */
    z-index: 2; /* Ensures it sits above any background elements if present */
    transform: translateY(-30px); /* Lifts the card slightly above its natural position for visual interest */
    
    /* Responsive adjustments for smaller screens */
    @media (max-width: 991px) { /* Medium devices and down */
        padding: 40px 30px;
        transform: translateY(-20px);
    }
    @media (max-width: 767px) { /* Small devices and down */
        padding: 30px 20px;
        border-radius: 8px; /* Slightly less rounded on small screens */
        transform: translateY(-10px);
    }
}

/* Optional: Adjust the top padding of the outer section if the card lift creates too much space */
.brook-professonal-design.pt--120 {
    padding-top: 150px; /* Increase if the card lift makes the content start too high */
}

/* Optional: Refine list item styling within the card for better aesthetics */
.custom-beautiful-card ul li {
    position: relative;
    padding-left: 25px; /* Space for a custom bullet */
    margin-bottom: 12px; /* Slightly tighter spacing for lists within cards */
    line-height: 1.6;
}

.custom-beautiful-card ul li:last-child {
    margin-bottom: 0; /* No margin after the last list item */
}

/* Custom bullet point for the lists */
.custom-beautiful-card ul li::before {
    content: "\2022"; /* Unicode for a solid bullet */
    color: #FF5722; /* A vibrant accent color, adjust to your brand! */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
    top: 0; /* Align with the top of the text */
}

/* Ensure headings inside the card are well-spaced */
.custom-beautiful-card .brook-section-title {
    margin-bottom: 40px; 
}

.custom-beautiful-card h4.heading {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle line under subheadings */
    padding-bottom: 15px;
    margin-bottom: 30px !important; /* Ensure enough space below the line */
}

.user-bio{
	font-style: italic;
	color: #fff;
	margin-top: 15px;
}

/* Custom styles for lists with checkmarks */
.styled-list {
    list-style: none; /* Removes default bullet points */
    padding-left: 0; /* Removes default padding from the ul */
}

.styled-list li {
    position: relative; /* Allows absolute positioning of the pseudo-element */
    padding-left: 30px; /* Creates space for the custom icon */
    margin-bottom: 10px; /* Adds space between list items */
    line-height: 1.6; /* Improves readability */
}

.styled-list li::before {
    content: "\f400"; /* Ionicons checkmark icon code */
    font-family: 'Ionicons'; /* Specifies the Ionicons font */
    position: absolute;
    left: 0; /* Positions the icon at the beginning of the padding space */
    color: #3264F5; /* A nice teal color for the checkmark. Feel free to change this! */
    font-size: 18px; /* Adjusts the size of the icon */
    top: 50%; /* Vertically centers the icon */
    transform: translateY(-50%); /* Fine-tunes vertical alignment */
}

/* Custom styles for Team Page bios */
.team-detailed-bio .thumb .overlay {
    display: none; /* Hide the default overlay with bio on dedicated team page */
}

.team-detailed-bio .user-bio {
    opacity: 1; /* Make bio visible */
    visibility: visible; /* Ensure bio is visible */
    height: auto; /* Allow bio to take full height */
    position: relative; /* Change from absolute to relative to flow with content */
    padding: 0 15px; /* Add some padding for readability */
    color: #555; /* Adjust text color */
    font-size: 15px; /* Adjust font size */
    line-height: 1.7;
    margin-top: 20px; /* Space from role */
}

/* Ensure social icons are always visible on detailed team cards */
.team-detailed-bio .social-icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    margin-top: 15px; /* Adjust spacing if needed */
}

/* Adjustments for team cards on other pages to keep hover effect */
.bk-team-with-caption-area .team__style--3 .thumb .overlay {
    /* Keep existing hover styles or ensure they override these if needed */
    opacity: 0;
    visibility: hidden;
    transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-color: rgba(0, 0, 0, 0.7); /* Example: Dark overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* To center content */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.bk-team-with-caption-area .team__style--3 .thumb:hover .overlay {
    opacity: 1;
    visibility: visible;
}

.bk-team-with-caption-area .team__style--3 .thumb .user-bio {
    color: #fff; /* White text on overlay */
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}
.bk-team-with-caption-area .team__style--3 .thumb:hover .user-bio {
    opacity: 1; /* Visible on hover */
    visibility: visible;
}

/* Also ensure social icons on default team cards only show on hover if that's the intent */
.bk-team-with-caption-area .team__style--3 .thumb .social-icon {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: absolute; /* Keep absolute position to layer over image */
    bottom: 20px; /* Position at the bottom */
    width: 100%; /* Take full width */
}

.bk-team-with-caption-area .team__style--3 .thumb:hover .social-icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Adjust for the new navigation link to team.html in the footer */
.ft-menu-list li a[href="team.html"] {
    font-weight: bold; /* Example style for the active/new link */
    color: #fff; /* Example color */
}

/* Custom styles for the contact form radio options */
.form-group-radio fieldset {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.form-group-radio legend {
    width: auto; /* Allow legend to take only its content width */
    padding: 0 10px;
    margin-bottom: 0; /* Adjust margin for spacing */
    font-weight: 600; /* Make question bolder */
    color: #333; /* Darker color for questions */
    font-size: 20px; /* Larger font size for questions */
    line-height: 1.2;
}

.form-group-radio .radio-option {
    margin-top: 15px; /* Space between radio options */
    display: flex;
    align-items: center;
}

.form-group-radio .radio-option input[type="radio"] {
    margin-right: 10px; /* Space between radio button and label */
    appearance: none; /* Hide default radio button */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #1abc9c; /* Border color for custom radio */
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    outline: none;
}

.form-group-radio .radio-option input[type="radio"]:checked {
    background-color: #1abc9c; /* Fill color when checked */
    border-color: #1abc9c; /* Border color when checked */
}

.form-group-radio .radio-option input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff; /* Inner dot color */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-group-radio .radio-option label {
    font-size: 16px;
    color: #555;
    cursor: pointer;
    margin-bottom: 0; /* Remove default label margin */
    line-height: 1; /* Align text better with radio button */
}

/* General contact form input and textarea styling */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    background-color: #f8f8f8;
    transition: all 0.3s ease-in-out;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
    border-color: #1abc9c;
    box-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
    background-color: #fff;
}

#contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Adjustments for the form output message */
.form-output {
    text-align: center;
    margin-top: 20px;
}
.form-output p {
    font-size: 18px;
    font-weight: 500;
}
.form-output.success p {
    color: #28a745; /* Green for success */
}
.form-output.error p {
    color: #dc3545; /* Red for error */
}
/* Custom CSS for .text-link */
.text-link {
    color: #1abc9c; /* A nice teal color, matching potential theme accents */
    text-decoration: none; /* Remove default underline */
    font-weight: 500; /* Slightly bolder than surrounding text */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.text-link:hover {
    color: #16a085; /* Slightly darker teal on hover */
    text-decoration: underline; /* Add underline on hover for clear indication */
}

/* -----------------------------
   Reveal: scale + fade on view
   ----------------------------- */
/* Only apply hidden state when JS is present to avoid FOUC */
.js .reveal-child {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transform-origin: center center;
}

.reveal-child {
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.js .reveal-child.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}