@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

.clinic-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    text-align: left; /* Text aligned to the left */
    padding: 20px;
}

.header-image img {
    display: none; /* Hide the image by default on desktop view */
    max-width: 100%; /* Ensure the image is responsive */
    height: auto;
}

.header-title h2 {
    color: #8152A1;
    font-size: 3rem;
    margin: 20px 0 20px 0; /* Adjust top margin to push it to the top */
}

.header-description p {
    color: #F79568;
    font-size: 1.5rem;
    margin: 20px 0; /* Adjusted to remove bottom margin */
}

.header-cta .btn-consultation {
    background-color: #00B3B0;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 36px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.header-cta .btn-consultation:hover {
    background-color: #00897b;
}

/* Mobile styles */
@media (max-width: 768px) {
    .clinic-header {
        background-color: white; /* Set white background for the entire section */
        align-items: center; /* Center align items */
        text-align: center; /* Center text alignment */
        padding-top: 20px; /* Add padding to the top of the section */
        padding-bottom: 20px; /* Add padding to the bottom of the section */
    }

    .header-title, .header-description, .header-cta {
        width: 100%; /* Ensure full width */
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center align items */
        justify-content: center; /* Center justify content */
        text-align: center; /* Center text alignment */
    }

    .header-title h2 {
        font-size: 2rem; /* Adjust the font size for mobile */
        margin-top: 0; /* Remove top margin if needed */
    }

    .header-description p {
        font-size: 1.25rem; /* Adjust the font size for mobile */
    }

    .header-cta .btn-consultation {
        padding: 10px 30px; /* Adjust padding for the button */
        margin-top: 20px; /* Add space above the button */
    }
    
    .header-image img {
        display: block; /* Ensure the image is displayed */
        margin-top: 6
        margin-bottom: 20px; /* Space below the image */
        max-width: 100%; /* Limit the width of the image to ensure padding */
    }
}