body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Light background */
    color: #343a40; /* Dark text for readability */
}

.navbar {
    background-color: #ffffff !important; /* White navbar background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05); /* Subtle shadow */
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
}

.navbar-brand,
.nav-link {
    font-weight: 600;
    color: #007bff !important; /* Primary blue for links */
}

.nav-link:hover {
    color: #0056b3 !important; /* Darker blue on hover */
}

.hero-section {
    background: linear-gradient(180deg, #007bff, #feffff); /* Blue gradient */
    color: white;
    padding: 80px 0;
    text-align: center;
    border-radius: 0 0 50px 50px; /* More rounded bottom */
    margin-bottom: 40px;
}

.hero-section h1 {
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.section-heading {
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
    color: #007bff;
}

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Ensure cards are same height in a row */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}

.card-title {
    font-weight: 600;
    color: #007bff;
}

.card-text {
    color: #6c757d; /* Muted text color */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 50px; /* Pill-shaped buttons */
    padding: 10px 25px;
    font-weight: 600;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}

.doctor-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #007bff; /* Border around doctor image */
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
}

.ratio-16x9 {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.form-control {
    border-radius: 10px;
    border: 1px solid #ced4da;
    padding: 10px 15px;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

footer {
    background-color: #343a40; /* Dark footer */
    color: white;
    padding: 40px 0;
    border-radius: 50px 50px 0 0; /* Rounded top corners */
    margin-top: 50px;
}

footer a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #00c6ff;
}

/* Responsive adjustments */
/* The media query block was missing its closing brace. This is the main fix. */
@media (max-width: 991.98px) {
    /* Changed max-width to Bootstrap's 'lg' breakpoint for better consistency
       with the navbar-expand-lg class used in your HTML */

    /* Logo optimization (assuming you're using an 'mobile-logo' class on the image element) 
    .navbar-brand img {
        height: 50px !important; /* Reduced height for mobile 
        width: auto !important;
        max-width: 70%;
    }*/

    /* Ensure the navbar links are visible and tappable when collapsed */
    #navbarNav .nav-item {
        padding: 5px 0;
    }

    /* For the CTA button, ensure it spans the width of the collapsed menu */
    .navbar-collapse .btn-primary.w-100 {
        font-weight: 600;
    }

    .hero-section {
        padding: 60px 0;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p {
        font-size: 1rem;
    }

    .doctor-img {
        width: 150px;
        height: 150px;
    }

    .section-heading {
        margin-bottom: 30px;
    }
} /* End of media query */


.register-container {
    max-width: 450px;
    margin: 80px auto;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.clamped {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.expand-btn {
    cursor: pointer;
    color: #007bff;
    text-decoration: underline;
}

.post-card {
    margin-bottom: 20px;
}

 #scrollToTopBtn {
            display: none; /* Hidden by default */
            position: fixed; /* Fixed/sticky position */
            bottom: 20px; /* Place the button at the bottom of the page */
            right: 30px; /* Place the button 30px from the right */
            z-index: 99; /* Make sure it does not overlap with other things */
            border: none; /* Remove borders */
            outline: none; /* Remove outline */
            background-color: var(--bs-primary, #0d6efd); /* Primary Bootstrap color */
            color: white; /* Text color */
            cursor: pointer; /* Add a mouse pointer on hover */
            padding: 10px 15px; /* Some padding */
            border-radius: 50%; /* Rounded corners */
            font-size: 18px; /* Increase font size */
            transition: opacity 0.3s;
            opacity: 0.8;
        }

        #scrollToTopBtn:hover {
            opacity: 1; /* Darken the button on hover */
        }