/* =========================
Global Reset & Variables
========================= */

{
box-sizing: border-box;
margin: 0;
padding: 0;
}


body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background: #F8FAFC; /* light blue background */
color: #333;
overflow-x: hidden;
}

a {
text-decoration: none;
color: inherit;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.section {
padding: 60px 0;
background: #fff;
border-radius: 12px;
margin-bottom: 40px;
}

/* =========================
Header / Navigation
========================= */
.site-header {
width: 100%;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 1000;
}

.nav-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
display: flex;
align-items: center;
font-weight: bold;
color: #680978; 
}

.logo-img {
height: 50px;
width: auto;
margin-right: 10px;
}

.nav-menu {
display: flex;
gap: 20px;
}

.nav-menu a {
padding: 8px 12px;
border-radius: 4px;
transition: 0.3s;
}

.nav-menu a:hover {
background: #007acc;
color: #fff;
}

.nav-toggle {
display: none;
font-size: 1.6rem;
background: none;
border: none;
cursor: pointer;
}

/* Mobile Menu */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 250px;
flex-direction: column;
background: #ffffff;
padding: 60px 20px;
gap: 15px;
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
transition: right 0.3s ease;
z-index: 1001;
}

.nav-menu.open { right: 0; }

.nav-toggle { display: block; }
}

/* =========================
Hero Slider
========================= */
.hero-slider {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
border-radius: 12px;
}

.hero-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
}

.hero-slide .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}

.hero-slide h1 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.hero-slide p {
font-size: 1.25rem;
margin-bottom: 20px;
text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.hero-slide .btn {
padding: 12px 24px;
background: #00aaff;
color: #fff;
border-radius: 6px;
transition: 0.3s;
}

.hero-slide .btn:hover {
background: #007acc;
}

/* =========================
Sections & Cards
========================= */
h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #007acc;
text-align: center;
}

p.lead {
font-size: 1.1rem;
margin-bottom: 20px;
text-align: center;
}

.card {
background: #e6f2ff; /* very light blue */
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}

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

.card h3 { margin-bottom: 12px; color: #007acc; }
.card p { margin-bottom: 12px; }
.card .btn {
padding: 8px 16px;
background: #007acc;
color: #fff;
border-radius: 6px;
display: inline-block;
}
.card .btn:hover { background: #005f99; }

/* Grid */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media(max-width:1024px){.grid-3{grid-template-columns: repeat(2,1fr);}}
@media(max-width:768px){.grid-3,.grid-2{grid-template-columns: 1fr;}}

/* Rounded images */
.rounded { border-radius: 12px; }
.shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.responsive-img { max-width: 100%; height: auto; }

/* =========================
Countdown
========================= */
.countdown {
font-size: 2rem;
font-weight: bold;
color: #007acc;
margin-top: 20px;
}

/* =========================
Video Wrapper
========================= */
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* =========================
CTA
========================= */
.cta {
background: #007acc;
color: #fff;
text-align: center;
padding: 60px 20px;
border-radius: 12px;
}

.cta .btn { background: #fff; color: #007acc; }

/* =========================
Floating WhatsApp
========================= */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
z-index: 100;
transition: transform 0.3s;
}

.whatsapp-float img { width: 35px; height: 35px; }
.whatsapp-float:hover { transform: scale(1.1); }

/* ===============================
FOOTER
================================= */
.site-footer {
background: linear-gradient(180deg, #1e88e5, #1565c0);
color: #fff;
font-size: 0.95rem;
margin-top: 40px;
}

.site-footer .footer-top {
padding: 40px 0;
}

.site-footer .footer-logo {
display: flex;
align-items: center;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}

.site-footer .footer-logo img {
height: 45px;
width: auto;
margin-right: 10px;
border-radius: 6px;
}

.site-footer .footer-links h3,
.site-footer .footer-social h3 {
margin-bottom: 12px;
font-size: 1.1rem;
color: #fff;
}

.site-footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}

.site-footer .footer-links ul li {
margin: 6px 0;
}

.site-footer .footer-links ul li a {
color: #e3f2fd;
transition: color 0.3s ease;
}

.site-footer .footer-links ul li a:hover {
color: #fff;
}

.site-footer .social-icons {
display: flex;
flex-direction: column;
gap: 8px;
}

.site-footer .social {
padding: 8px 12px;
border-radius: 6px;
background: rgba(255,255,255,0.15);
text-decoration: none;
color: #fff;
font-weight: 500;
transition: background 0.3s ease;
}

.site-footer .social:hover {
background: rgba(255,255,255,0.3);
}

.footer-bottom {
padding: 16px 0;
text-align: center;
font-size: 0.85rem;
color: #fff;
border-top: 1px solid #dce7f9;
}

/* === HERO SECTION === */
.hero-slide {
position: relative;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}

.hero-slide .hero-overlay {
background: rgba(0, 70, 140, 0.6); /* semi-transparent navy blue */
width: 100%;
padding: 80px 20px;
}

.hero-slide h1 {
font-size: 2.8rem;
margin-bottom: 10px;
font-weight: 700;
}

.hero-slide p {
font-size: 1.2rem;
font-weight: 400;
}

/* === SECTION === */
.section {
padding: 70px 20px;
}

.section.alt {
background: #f5f9ff; /* light blueish background */
}

.section .section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 25px;
color: #00468c; /* strong blue */
}

/* === NARROW CONTAINER === */
.container.narrow {
max-width: 800px;
margin: 0 auto;
}

/* === MISSION & VISION CARDS === */
.card.light {
background: #fff;
border: 1px solid #dce7f9;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.light:hover {
transform: translateY(-5px);
box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

.card.light h3 {
margin-bottom: 12px;
font-size: 1.4rem;
color: #00468c;
}

/* === FOUNDER SECTION === */
.founder {
background: #fff;
}

.founder-img img {
max-width: 100%;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.founder-text {
display: flex;
flex-direction: column;
justify-content: center;
}

.founder-text h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #00468c;
}

.founder-text h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #0066cc;
}

.founder-text p {
line-height: 1.6;
font-size: 1rem;
}

/* === CALL TO ACTION === */
.cta {
background: linear-gradient(135deg, #00468c, #007bff);
color: #fff;
padding: 70px 20px;
border-radius: 0;
}

.cta h2 {
font-size: 2rem;
margin-bottom: 15px;
}

.cta p {
margin-bottom: 20px;
}

.cta .btn {
background: #fff;
color: #00468c;
font-weight: bold;
padding: 12px 28px;
border-radius: 30px;
transition: background 0.3s ease, color 0.3s ease;
}

.cta .btn:hover {
background: #00468c;
color: #fff;
}

/* === GRID SYSTEM === */
.grid {
display: grid;
gap: 30px;
}

.grid-2 {
grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
grid-template-columns: repeat(3, 1fr);
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.grid-2, .grid-3 {
grid-template-columns: 1fr; /* stack */
}

.hero-slide {
height: 280px;
}

.hero-slide h1 {
font-size: 2rem;
}

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

.cta h2 {
font-size: 1.6rem;
}

.cta p {
font-size: 1rem;
}

.cta .btn {
padding: 10px 20px;
font-size: 0.95rem;
}
}

@media (max-width: 480px) {
.hero-slide {
height: 240px;
padding: 40px 15px;
}

.hero-slide h1 {
font-size: 1.6rem;
}

.hero-slide p {
font-size: 0.9rem;
}
}

/* === GRID SYSTEM === */
.grid {
display: grid;
gap: 30px;
}

.grid-2 {
grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
grid-template-columns: repeat(3, 1fr);
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.grid-2, .grid-3 {
grid-template-columns: 1fr; /* stack */
}

.hero-slide {
height: 280px;
}

.hero-slide h1 {
font-size: 2rem;
}

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

.cta h2 {
font-size: 1.6rem;
}

.cta p {
font-size: 1rem;
}

.cta .btn {
padding: 10px 20px;
font-size: 0.95rem;
}
}

@media (max-width: 480px) {
.hero-slide {
height: 240px;
padding: 40px 15px;
}

.hero-slide h1 {
font-size: 1.6rem;
}

.hero-slide p {
font-size: 0.9rem;
}
}

/* =========================
HERO / PAGE BANNER
========================= /
.hero-slide {
position: relative;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
border-radius: 0; / full width */
overflow: hidden;
}

.hero-slide .hero-overlay {
background: rgba(0, 64, 128, 0.6); /* semi-transparent deep blue */
width: 100%;
height: 100%;
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.hero-slide h1 {
font-size: 2.8rem;
margin-bottom: 12px;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero-slide p {
font-size: 1.2rem;
font-weight: 400;
text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* =========================
ABOUT INTRO
========================= /
.section-title {
font-size: 2rem;
margin-bottom: 20px;
text-align: center;
color: #00468c; / deep blue */
font-weight: 700;
}

.container.narrow {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.container.narrow p {
font-size: 1.1rem;
line-height: 1.7;
color: #333;
}

/* =========================
MISSION & VISION
========================= /
.section.alt {
background: #f0f6ff; / soft light blue */
}

.card.light {
background: #ffffff;
border: 1px solid #d9e8ff;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-align: center;
}

.card.light:hover {
transform: translateY(-6px);
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.card.light h3 {
font-size: 1.5rem;
margin-bottom: 12px;
color: #0066cc;
}

.card.light p {
font-size: 1rem;
line-height: 1.6;
}

/* =========================
FOUNDER SECTION
========================= */
.founder {
background: #fff;
}

.founder-img img {
max-width: 100%;
border-radius: 14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.founder-text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 15px;
}

.founder-text h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #00468c;
}

.founder-text h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #007bff;
font-weight: 600;
}

.founder-text p {
font-size: 1rem;
line-height: 1.7;
color: #444;
}

/* =========================
CALL TO ACTION
========================= */
.cta {
background: linear-gradient(135deg, #00468c, #007bff);
color: #fff;
padding: 70px 20px;
text-align: center;
border-radius: 0;
}

.cta h2 {
font-size: 2rem;
margin-bottom: 15px;
}

.cta p {
font-size: 1.1rem;
margin-bottom: 25px;
}

.cta .btn {
background: #fff;
color: #00468c;
font-weight: bold;
padding: 14px 32px;
border-radius: 30px;
transition: all 0.3s ease;
}

.cta .btn:hover {
background: #00468c;
color: #fff;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 768px) {
.hero-slide {
height: 260px;
}

.hero-slide h1 {
font-size: 2rem;
}

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

.grid.grid-2 {
grid-template-columns: 1fr; /* stack */
}

.founder-text {
margin-top: 20px;
text-align: center;
}
}

@media (max-width: 480px) {
.hero-slide {
height: 220px;
padding: 40px 15px;
}

.hero-slide h1 {
font-size: 1.6rem;
}

.hero-slide p {
font-size: 0.95rem;
}
}

/* ======= MENU =====  */

/* Mobile menu close button */
.nav-close {
display: none;
font-size: 2rem;
background: none;
border: none;
color: #333;
cursor: pointer;
margin-left: auto;
margin-bottom: 20px;
}

@media (max-width: 768px) {
.nav-close {
display: block;
}
}

/*

NEW INDEX CSS

=========
*/

/* ===========================
Base Styles
=========================== */
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: #ffffff;
color: #333;
line-height: 1.6;
}

h1, h2, h3 {
margin-bottom: 0.5em;
font-weight: 600;
color: #007acc; /* strong deep blue */
}

p {
margin-bottom: 1em;
color: #000;
}

a {
text-decoration: none;
color: #0d47a1;
}

a:hover {
color: #1565c0; /* lighter blue hover */
}

img.responsive-img {
max-width: 100%;
height: auto;
border-radius: 10px;
}

/* ===========================
Layout Helpers
=========================== */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.center {
text-align: center;
}

.grid {
display: grid;
gap: 2rem;
}

.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.section {
padding: 4rem 0;
}

.section.alt {
background: #f4f9ff; /* very soft light blue */
}

.narrow {
max-width: 600px;
margin: 0 auto;
}

/* ===========================
Buttons
=========================== */
.btn {
display: inline-block;
background: #0d47a1;
color: #fff;
padding: 0.7rem 1.5rem;
border-radius: 30px;
transition: 0.3s;
font-size: 0.95rem;
font-weight: 500;
}

.btn:hover {
background: #1565c0;
}

/* small button */
.btn.small {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}

/* ===========================
Cards
=========================== */
.card {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
transition: 0.3s ease-in-out;
}

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

.card.light {
background: #f9fbff;
}

/* ===========================
Hero Section
=========================== */
.hero-slide {
background: url('../assets/hero.jpg') center/cover no-repeat;
height: 70vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.hero-slide .overlay {
background: rgba(13, 71, 161, 0.6);
color: #fff;
padding: 2rem;
border-radius: 15px;
opacity: 20;
}

.hero-slide h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.hero-slide p {
font-size: 1.2rem;
margin-bottom: 1.5rem;
}

/* ===========================
About Section
=========================== */
.about h2 {
color: #0d47a1;
margin-bottom: 1rem;
}

.about-text p {
font-size: 1rem;
}

/* Founder */
section.alt img.rounded {
border: 4px solid #e3f2fd;
}

/* ===========================
Countdown
=========================== */
.countdown {
background: #0d47a1;
color: #fff;
padding: 2rem 1rem;
border-radius: 12px;
}

.countdown h2 {
color: #0D47A1;
}

.countdown-timer {
font-size: 2rem;
font-weight: bold;
letter-spacing: 2px;
margin-top: 1rem;
}

/* ===========================
Gallery & Testimonies
=========================== */
.muted {
color: #999;
font-style: italic;
}

.grid img {
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ===========================
Quick Links
=========================== */
.section .grid-3 .card {
text-align: center;
}

.section .grid-3 .card h3 {
margin-bottom: 0.8rem;
color: #0d47a1;
}

.section .grid-3 .card p {
margin-bottom: 1rem;
}

/* ===========================
WhatsApp Floating Button
=========================== */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}

.whatsapp-float img {
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease-in-out;
}

.whatsapp-float img:hover {
transform: scale(1.1);
}

.hero-slide {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
}

.hero-slide .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
color: #fff;
}

.hero-overlay {
background: rgba(0,0,0,0.5);
padding: 40px;
border-radius: 8px;
text-align: center;
color: #fff;
}

.hero-overlay h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}

.hero-overlay p {
font-size: 1.2rem;
color: #fff;
}

/*    events   */

/* =====================
PAGINATION STYLING
===================== */
.pagination {
margin: 30px 0;
text-align: center;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}

.pagination .btn.small {
display: inline-block;
padding: 8px 14px;
border-radius: 30px;
background: #e8f4ff; /* light blue background /
color: #0077cc; / deep blue text */
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: 1px solid #bcdfff;
transition: all 0.3s ease;
}

.pagination .btn.small:hover {
background: #0077cc;
color: #fff;
border-color: #0077cc;
transform: translateY(-2px);
}

.pagination .btn.small.active {
background: #0077cc;
color: #fff;
border-color: #0077cc;
font-weight: 600;
pointer-events: none;
}

.fb-page-wrapper {
position: relative;
width: 100%;
max-width: 600px; /* optional, prevents it from getting too large on desktop */
margin: 0 auto;
}

.fb-page-wrapper iframe {
width: 100% !important;
height: 400px;
}

/* ========================
CONTACT PAGE STYLES
======================== */

/* Section container */
.section.container {
max-width: 700px;
margin: 3rem auto;
padding: 2rem;
}

/* Page title */
.section.container h1,
.section.container h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
color: #222;
}

/* Form wrapper */
.form {
display: flex;
flex-direction: column;
gap: 1.2rem;
background: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Labels */
.form label {
font-weight: 600;
margin-bottom: 0.4rem;
display: block;
color: #333;
}

/* Inputs & Textareas */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
width: 100%;
padding: 0.9rem 1rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form input:focus,
.form textarea:focus {
border-color: #2c7be5;
box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.15);
outline: none;
}

/* Textarea */
.form textarea {
resize: vertical;
min-height: 150px;
line-height: 1.5;
}

/* Actions (submit button) */
.form .actions {
text-align: center;
margin-top: 1rem;
}

.form .btn {
display: inline-block;
background: #2c7be5;
color: #fff;
border: none;
padding: 0.9rem 2rem;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}

.form .btn:hover {
background: #1a5bb8;
}

/* Alerts (flash messages) */
.alert {
padding: 1rem 1.2rem;
border-radius: 8px;
margin-bottom: 1.5rem;
font-weight: 500;
font-size: 0.95rem;
}

.alert.success {
background: #e6f7ed;
border: 1px solid #b7ebc0;
color: #276738;
}

.alert.error {
background: #fff2f0;
border: 1px solid #ffccc7;
color: #a8071a;
}

/* Responsive */
@media (max-width: 600px) {
.section.container {
padding: 1rem;
}

.form {
padding: 1.5rem;
}
}

details summary {
cursor: pointer;
user-select: none;
}

details[open] summary {
/* Style the summary when details is open */
}

details > a {
display: block;
padding: 10px;
border-bottom: 1px solid #ccc;
}

details > a:last-child {
border-bottom: none;
}

.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}

.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}

.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}

.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}

.login-page {
font-family: Arial, sans-serif;
}

.login-page .container {
max-width: 400px;
margin: 50px auto;
padding: 40px 30px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-page h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

.login-page .form {
display: flex;
flex-direction: column;
}

.login-page label {
margin-bottom: 10px;
font-weight: bold;
color: #666;
}

.login-page input[type="email"],
.login-page input[type="password"] {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

.login-page input[type="checkbox"] {
margin-right: 10px;
}

.login-page .actions {
margin-top: 20px;
}

.login-page .btn {
padding: 15px;
background-color: #17A9FD;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.login-page .btn:hover {
background-color: #4267B2;
}

.login-page .muted {
color: #666;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}

/* Responsive Design */

@media (max-width: 768px) {
.login-page .container {
margin: 20px auto;
padding: 20px;
}
}

@media (max-width: 480px) {
.login-page .container {
margin: 10px auto;
padding: 10px;
}
.login-page input[type="email"],
.login-page input[type="password"] {
padding: 10px;
}
.login-page .btn {
padding: 10px;
}
}

/* ===========================================
BRAND COLOR OVERRIDES (PURPLE | WHITE | PINK)
Place these at the VERY END of your CSS
=========================================== */

:root {
--primary: #7b1fa2;   /* Royal Purple /
--accent: #e91e63;    / Pink /
--light: #ffffff;     / White */
--dark-text: #2b2b2b;
}

/* Replace ALL major blue UI elements with purple/pink */
.nav-menu a:hover,
.btn,
.cta,
.site-footer,
.hero-overlay,
.section-title,
.card h3 {
background: var(--primary) !important;
color: var(--light) !important;
}

/* Buttons Hover */
.btn:hover,
.cta .btn:hover,
.card .btn:hover {
background: var(--accent) !important;
color: var(--light) !important;
}

/* Headings */
h1, h2, h3 {
color: var(--primary) !important;
}

/* Accent Highlights */
a:hover, strong, .highlight {
color: var(--accent) !important;
}

/* Footer gradient updated */
.site-footer {
background: linear-gradient(180deg, var(--primary), var(--accent)) !important;
}

/* ===========================================
ANIMATIONS
=========================================== */

/* Fade Up */
.fade-up {
opacity: 0;
transform: translateY(25px);
animation: fadeUp .9s ease-out forwards;
}

@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Slow Fade In */
.fade-in {
opacity: 0;
animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
to { opacity: 1; }
}

/* Card Hover Pop */
.card:hover {
transform: translateY(-6px) scale(1.02);
}

/* Soft Floating Animation (for hero text) */
.float-soft {
animation: floatSoft 4s ease-in-out infinite;
}

@keyframes floatSoft {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}


/* ======= BOLD MINISTRY FOOTER ======= */
.footer {
  background: #4a148c; /* deep royal purple */
  color: #ffffff;
  margin-top: 60px;
  font-family: 'Poppins', sans-serif;
}

.footer-main {
  padding: 70px 0 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 50px;
}

/* Logo / About */
.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  text-decoration: none;
}

.footer-logo img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin-right: 12px;
  border: 2px solid #fff;
}

.footer-logo h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

/* Column Headings */
.footer-col h4 {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 14px;
  color: #ffffff;
  border-left: 4px solid #ffd54f;
  padding-left: 10px;
}

/* List Links */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin: 9px 0;
}

.footer-col ul li a {
  color: #f4eaff;
  text-decoration: none;
  transition: .3s;
}

.footer-col ul li a:hover {
  color: #ffd54f;
  transform: translateX(6px);
}

/* Social Links */
.footer-social a {
  display: flex;
  align-items: center;
  margin: 10px 0;
  color: #f4eaff;
  text-decoration: none;
  transition: .3s;
}

.footer-social i {
  margin-right: 8px;
  font-size: 1.2rem;
}

.footer-social a:hover {
  color: #ffd54f;
}

/* Bottom Bar */
.footer-bottom {
  background: #3b0f6f;
  padding: 18px 0;
  text-align: center;
  font-size: 0.95rem;
}

.footer-bottom a {
  color: #ffd54f;
  text-decoration: none;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-social a {
    justify-content: center;
  }
  .footer-logo {
    justify-content: center;
  }
}