/* Updated Custom Styles for Enhanced Aesthetics - Health Sector Focus */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
    background-color: #f9f9f9; /*  Very light grey background for overall subtle texture */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1.2rem; /* Slightly reduced paragraph spacing */
}

.navbar {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    transition: var(--transition);
}

.navbar.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 123, 138, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Teal navbar toggler icon */
}

.navbar-nav .nav-item {
    margin-left: 0.8rem; /* Reduced nav item spacing */
}

.navbar-nav .nav-link {
    color: #555; /* Nav link color */
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: var(--transition);
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    color: #007B8A; /* Teal hover/focus color */
}

/* Section Styles */
section {
    padding: 5rem 0;
}

.container {
    max-width: 1140px; /* Bootstrap standard container width for 'xl' screens */
}

.bg-light-teal {
    background-color: var(--light-teal) !important;
}

.bg-white {
    background-color: #ffffff !important; /*  White background */
}


/* Button Styles - more subtle and professional */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: scale(1.0); /* Reset scale when button is active (pressed) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /*  Reduced shadow when pressed */
}


/* Form Styles - refined form appearance */
.form-group {
    margin-bottom: 1.4rem; /* Reduced form group spacing */
}

.form-control {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.65rem 0.9rem; /* Slightly smaller form padding */
    font-size: 0.95rem; /* Slightly smaller form font size */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); /* Subtle inner shadow for depth */
}

.form-control:focus {
    border-color: #00ACC1; /* Cyan focus border */
    box-shadow: 0 0 0 0.2rem rgba(0, 172, 193, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.03); /* Cyan focus shadow and inner shadow */
    outline: 0;
}

label {
    font-weight: 500; /* Slightly less bold label */
    color: #555; /* Label color */
    margin-bottom: 0.4rem; /* Reduced label margin */
    display: block;
}

textarea.form-control {
    min-height: 140px; /* Slightly reduced textarea height */
}


/* Footer Styles */
footer {
    background-color: #1f2937;
    color: #e5e7eb;
}

footer h5 {
    color: #ffffff;
}

footer-links a {
    color: #e5e7eb;
    transition: all 0.3s ease;
}

footer-links a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.social-links a {
    color: #e5e7eb;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #ffffff;
    transform: translateY(-3px);
    display: inline-block;
}

.footer .contact-info i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.footer hr {
    background-color: rgba(229, 231, 235, 0.1);
}

/* Accessibility Focus Outline */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #ffca28; /* Yellow-amber focus outline - more visible */
    outline-offset: 2px;
}


/* Section Specific Backgrounds - now more health-oriented colors */
#about, #vision, #contact {
    background-color: #ffffff; /* White background for these sections */
}

#values, #mission, #why-choose-us, #services {
    background-color: #f0fafa; /* Very light, almost white, greenish background - subtle */
}


/* Typography adjustments - Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');


/* Subtle Section Dividers - optional, creates more visual separation */
section:not(:first-of-type) {
    border-top: 1px solid #e0e0e0; /* Very light grey horizontal rule */
    padding-top: 3.5rem; /* Re-add padding after top border */
    margin-top: 3.5rem; /* Add margin to space out sections */
}


/* Consider adding a subtle background pattern to sections if you want more visual texture - example: */
/* section {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0),
                      linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
} */
/*  This is just an example, you can experiment with subtle patterns or textures */

/* Modern styling with animations and improved aesthetics */
:root {
    --primary-color: #007B8A; /* Teal - main brand color */
    --secondary-color: #005F6B; /* Darker teal for hover states */
    --text-color: #1f2937; /* Dark gray for text */
    --light-bg: #f3f4f6; /* Light gray for backgrounds */
    --light-teal: rgba(0, 123, 138, 0.1); /* Very light teal for card backgrounds */
    --transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/together.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
}

.hero-text {
    animation: fadeInUp 1s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Service Cards */
.service-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    text-align: center;
}

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

.service-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Contact Form */
.contact-form .form-control {
    padding: 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.contact-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Footer */
.footer {
    background: #1f2937;
    color: white;
    padding: 4rem 0 2rem;
}

.footer a {
    color: #e5e7eb;
    text-decoration: none;
    transition: var(--transition);
}

.social-links a {
    font-size: 1.5rem;
    margin-right: 1rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-text {
        text-align: center;
        padding: 2rem;
    }
    
    .service-card {
        margin-bottom: 1rem;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Modern Section Spacing */
section {
    padding: 5rem 0;
}

/* Card Hover Effects */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.1), transparent);
    opacity: 0;
    transition: var(--transition);
}

.service-card:hover::after {
    opacity: 1;
}

.about-card {
    transition: transform 0.2s ease-in-out;
}

.about-card:hover {
    transform: translateY(-5px);
}

.bg-light-teal {
    background-color: rgba(0, 128, 128, 0.1);
}

.text-primary {
    color: var(--primary-color) !important;
}