
/* Bhamane Soft Pastel Theme */
:root {
    --primary-color: #004b87 !important; /* Soft Purple */
    --secondary-color: #ff9933 !important; /* Pastel Pink/Peach */
    --accent-color: #dee2e6 !important; /* Thistle / Light Purple */
    --bg-light: #f4f6f9 !important; /* Very soft pinkish white */
    --text-main: #212529 !important; /* Dark purple/gray for contrast */
    --text-light: #495057 !important; 
    --header-bg: #004b87 !important;
    --footer-bg: #1c2331 !important;
    --button-bg: #004b87 !important;
    --button-hover: #0056b3 !important;
}

body {
    background-color: var(--bg-light) !important;
    color: var(--text-main) !important;
}

header, .top-nav, .main-nav {
    background-color: var(--header-bg) !important;
}

.hero-section {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--secondary-color) 100%) !important;
}

.hero-title {
    color: var(--primary-color) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background-color: var(--button-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 75, 135, 0.3) !important;
}

footer {
    background-color: var(--footer-bg) !important;
}

/* GP Members Circular Styling & Adjustments */
.member-card {
    border-radius: 15px !important;
    background: white !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-align: center !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.member-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 75, 135, 0.2) !important;
}

.member-img-wrapper {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 15px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 4px solid var(--secondary-color) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.member-img-wrapper img, .member-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.member-info {
    width: 100% !important;
}

.member-name {
    font-size: 1.2rem !important;
    color: var(--primary-color) !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

.member-role {
    font-size: 0.95rem !important;
    color: var(--text-light) !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
}

.member-contact {
    display: inline-block !important;
    background-color: var(--bg-light) !important;
    color: var(--primary-color) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--accent-color) !important;
    margin-bottom: 10px !important;
}

/* Forcing contact above image as per user request */
/* The user requested: "change contact no which is above mentioned images as per name" */
/* We will flex order the elements if they are inside a common container */
.member-card {
    display: flex !important;
    flex-direction: column !important;
}
.member-info {
    display: flex !important;
    flex-direction: column !important;
}
.member-contact {
    order: -1 !important; /* Put contact at the top of member-info */
    margin-bottom: 15px !important;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-card, .scheme-card, .alert-card {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Force Header and Nav to pastel gradient matching hero */
.main-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 249, 0.98)) !important;
}
.navbar {
    background: linear-gradient(135deg, #ffffff, #f4f6f9) !important;
}
.navbar .nav-links li a {
    color: #212529 !important;
}
.navbar .nav-links li a:hover, .navbar .nav-links li a.active {
    color: #ffffff !important;
    background-color: #004b87 !important;
    border-radius: 5px !important;
    border-bottom: none !important;
}
.footer, .site-footer {
    background: linear-gradient(135deg, #ffffff, #f4f6f9) !important;
    color: #212529 !important;
}
.footer * {
    color: #212529 !important;
}

/* Fix member grid rendering */
.members-ref-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
}
.member-ref-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    width: 250px;
}
.member-img-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 75, 135, 0.3);
}

/* Ensuring bright pastel colors for navbar and footer */
.navbar, .footer, .site-footer { background: linear-gradient(135deg, #ffffff, #f4f6f9) !important; color: #212529 !important; }

.brand-text h1, .brand-text h1.village-name {
    color: #ff9933 !important; /* Saffron color for prominence */
}
.brand-text p.lgd-code {
    color: #004b87 !important;
}
