/* =========================
BASE STYLES
========================= */

/* =========================
TOP BAR
========================= */

.top-bar{
position:fixed;
top:0;
left:0;
width:100%;
background:#1f5f8f;
color:#fff;
z-index:10000;
font-size:14px;
}

.top-bar-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 30px;
flex-wrap:wrap;
}

/* =========================
NAVBAR (CORRECT SPACING)
========================= */

.navbar{
position:fixed;
top:50px; /* 🔥 increased spacing from top bar */
left:0;
width:100%;
background:white;
z-index:9999;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
transition:all 0.3s ease;
}

.navbar .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 30px;
}

/* =========================
LOGO (SAFE PREMIUM VERSION)
========================= */

.logo img{
height:110px;
width:auto;
object-fit:contain;
position:relative; /* 🔥 removed absolute (FIXES BUG) */
top:0;
z-index:10001;
transition:all 0.3s ease;
}

/* =========================
BODY SPACING (FIXED)
========================= */

body{
padding-top:140px; /* 🔥 increased so nothing hides */
}

/* =========================
SCROLL SHRINK EFFECT
========================= */

.navbar.scrolled{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(10px);
box-shadow:0 5px 20px rgba(0,0,0,0.12);
}

.navbar.scrolled .container{
padding:10px 30px;
}

.navbar.scrolled .logo img{
height:80px;
}

/* =========================
MOBILE FIX
========================= */

@media(max-width:768px){

.navbar{
top:70px;
}

body{
padding-top:160px;
}

.logo img{
height:75px;
}

.navbar.scrolled .logo img{
height:65px;
}
}






body {
    
h1, h2, h3{
font-family: 'Roboto', sans-serif;
}
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* Section headings */
h1 {
    font-size: 32px;
    margin-bottom: 15px;
}

h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

/* Paragraph consistency */
p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Founder section override (fix oversized feel) */
.founder-section h1 {
    font-size: 26px;   /* reduce from likely oversized value */
}

.founder-section p {
    font-size: 16px;
}

/* Optional: tighten founder spacing for cleaner look */
.founder-section {
    padding: 60px 0;
}


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

:root{
--primary-blue:#1f5f8f;
--accent-orange:#f15a24;
--light-bg:#f5f7fa;
--dark-text:#333;
}

html{
scroll-behavior:smooth;
}

body{
color:var(--dark-text);
background:var(--light-bg);
line-height:1.6;
}

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}





/* =========================
TOP BAR (PREMIUM)
========================= */

.top-bar{
background:var(--primary-blue);
color:#fff;
font-size:14px;
}

.top-bar-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 20px;
flex-wrap:wrap;
}

.top-contact span{
margin-right:20px;
}

.top-contact i{
margin-right:6px;
color:var(--accent-orange);
}

/* SOCIAL ICONS */
.top-social a{
color:#fff;
margin-left:12px;
font-size:14px;
transition:0.3s;
}

.top-social a:hover{
color:var(--accent-orange);
transform:translateY(-2px);
}




















/* =========================
NAVBAR
========================= */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
z-index:1000;
}

.navbar .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 30px;
}

.logo img{
height:55px;
}

.nav-links{
display:flex;
align-items:center;
gap:28px;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:var(--primary-blue);
font-weight:600;
font-size:15px;
position:relative;
}

.nav-links a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:var(--accent-orange);
transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

.donate-btn{
background:var(--accent-orange);
color:white !important;
padding:10px 18px;
border-radius:30px;
font-weight:700;
}

.donate-btn:hover{
background:var(--primary-blue);
}

/* =========================
DROPDOWN
========================= */

.dropdown{
position:relative;
}

.dropdown-menu{
position:absolute;
top:100%;
left:0;
background:var(--accent-orange);
display:none;
flex-direction:column;
min-width:200px;
border-radius:8px;
overflow:hidden;
}

.dropdown-menu a{
color:white;
padding:12px 18px;
display:block;
}

.dropdown-menu a:hover{
background:rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-menu{
display:flex;
}

/* =========================
HAMBURGER
========================= */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:28px;
height:3px;
background:var(--primary-blue);
}

/* =========================
MOBILE NAV
========================= */

@media(max-width:768px){

.nav-links{
position:absolute;
top:70px;
right:0;
background:white;
flex-direction:column;
width:260px;
display:none;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
padding:20px 0;
}

.nav-links.active{
display:flex;
}

.hamburger{
display:flex;
}

}


/* =========================
HERO SECTION (CLEAN WORKING BASELINE)
========================= */

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

/* SLIDES CONTAINER */
.slides{
  display:flex;
  height:100%;
  width:100%;
  transition:transform 1s ease-in-out;
}

/* EACH SLIDE */
.slide{
  flex: 0 0 100%;
  height:100vh;
  position:relative;
}

/* IMAGE FIX (THIS SOLVES YOUR "ZOOM ISSUE") */
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;        /* keeps it filled but not distorted */
  object-position:center;  /* centers image properly */
  display:block;
}

/* DARK OVERLAY (FOR TEXT READABILITY) */
.slide::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

/* CAPTION (FIXED VISIBILITY) */
.caption{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:white;
  z-index:2;
  max-width:700px;
}

/* TEXT */
.caption h1{
  font-size:3rem;
  margin-bottom:15px;
}

.caption p{
  font-size:1.3rem;
  margin-bottom:20px;
}

/* BUTTONS */
.btn{
  padding:12px 24px;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
}

.btn.donate{
  background:var(--accent-orange);
  color:white;
}

.btn.volunteer{
  background:var(--primary-blue);
  color:white;
  margin-left:10px;
}




/* =========================
SLIDER DOTS (MAKE THEM VISIBLE)
========================= */

.slider-dots{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}

.slider-dots span{
  width:10px;
  height:10px;
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.slider-dots span.active{
  background:#f15a24;
  transform:scale(1.2);
}



/* =========================
SLIDER ARROWS
========================= */

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.4);
  color:white;
  border:none;
  font-size:24px;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
  transition:0.3s;
}

.slider-btn:hover{
  background:rgba(0,0,0,0.7);
}

.slider-btn.prev{
  left:15px;
}

.slider-btn.next{
  right:15px;
}












/* =========================
ABOUT SECTION
========================= */

.about{
background:white;
padding:100px 20px;
}

.about-content{
display:flex;
align-items:center;
gap:40px;
max-width:1200px;
margin:auto;
}

.about-text{
flex:1;
}

.about-text h2{
font-size:2.5rem;
color:var(--primary-blue);
margin-bottom:20px;
}

.about-text p{
font-size:1.2rem;
margin-bottom:20px;
}

.about-image{
flex:1;
}

.about-image video{
width:100%;
border-radius:10px;
}

@media(max-width:768px){

.about-content{
flex-direction:column;
text-align:center;
}

}

/* =========================
PROGRAMS SECTION
========================= */
/* =========================
PROGRAMS PREMIUM SECTION
========================= */

.programs {
  padding: 100px 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.7rem;
  color: #1f5f8f;
}

.section-header p {
  color: #666;
  font-size: 1.1rem;
}

/* GRID */
.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* CARD */
.program-item {
  position: relative;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* IMAGE LAYER */
.program-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

/* DARK GRADIENT OVERLAY */
.program-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1));
  z-index: 1;
}

/* CONTENT */
.program-content {
  position: absolute;
  bottom: 0;
  padding: 25px;
  z-index: 2;
  transform: translateY(20px);
  transition: 0.4s ease;
}

.program-content h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.program-content p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  opacity: 0.9;
}

/* CTA LINK */
.program-link {
  font-size: 0.9rem;
  font-weight: bold;
  color: #f15a24;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s ease;
}

/* HOVER EFFECT */
.program-item:hover .program-image {
  transform: scale(1.1);
}

.program-item:hover .program-content {
  transform: translateY(0);
}

.program-item:hover .program-link {
  opacity: 1;
  transform: translateY(0);
}

/* OPTIONAL: subtle lift */
.program-item:hover {
  transform: translateY(-8px);
}
/* =========================
IMPACT SECTION
========================= */

/* =========================
GLASS IMPACT SECTION
========================= */

.impact {
  position: relative;
  padding: 100px 20px;
  text-align: center;

  /* 🔥 Background image (optional but powerful) */
  background: url('../images/program1.png') center/cover no-repeat;
}

/* Dark overlay */
.impact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* Content wrapper */
.impact-overlay {
  position: relative;
  z-index: 2;
}

.impact h2 {
  font-size: 2.7rem;
  color: #fff;
  margin-bottom: 50px;
}

/* Cards container */
.impact-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* 🔥 GLASS CARDS */
.impact-card {
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;
  padding: 35px 30px;
  border-radius: 15px;

  flex: 1 1 220px;
  max-width: 250px;

  transition: 0.3s ease;
}

/* Hover effect */
.impact-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: rgba(255,255,255,0.2);
}

/* Icon */
.impact-card i {
  font-size: 38px;
  margin-bottom: 15px;
  color: #f15a24;
}

/* Numbers */
.impact-card h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* Text */
.impact-card p {
  font-size: 0.95rem;
  opacity: 0.9;
}

.impact-card {
  animation: fadeUp 0.8s ease forwards;
}

.impact {
  margin-top: 60px;
}

/* =========================
TESTIMONIAL VIDEO
========================= */

.testimonials{
background:white;
text-align:center;
}

.testimonial-video{
width:100%;
height:100vh;
object-fit:cover;
}

/* =========================
DONATION FORM
========================= */

.donate-form{
padding:80px 20px;
text-align:center;
}

.donate-form form{
max-width:600px;
margin:auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.donate-form input{
width:100%;
padding:10px;
margin-bottom:20px;
border:1px solid #ccc;
border-radius:5px;
}

/* =========================
FOOTER
========================= */

.footer{
background:var(--primary-blue);
color:white;
padding:70px 20px 20px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
max-width:1200px;
margin:auto;
}

.footer-logo{
width:120px;
margin-bottom:15px;
}

.footer-links ul{
list-style:none;
}

.footer-links a{
color:white;
text-decoration:none;
}

.footer-links a:hover{
color:var(--accent-orange);
}

.footer-bottom{
text-align:center;
border-top:1px solid rgba(255,255,255,0.2);
margin-top:40px;
padding-top:15px;
}

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

.contact-header{
height:55vh;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
color:white;
}

.contact-header .overlay{
background:rgba(0,0,0,0.6);
padding:40px;
text-align:center;
}

.contact-form{
padding:70px 20px;
max-width:800px;
margin:auto;
}

.contact-form form{
background:white;
padding:40px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.form-row{
display:flex;
flex-direction:column;
margin-bottom:20px;
}

.form-row input,
.form-row textarea{
padding:12px;
border:1px solid #ddd;
border-radius:5px;
}

.submit-btn{
background:var(--accent-orange);
color:white;
padding:14px;
border:none;
border-radius:5px;
cursor:pointer;
}

.submit-btn:hover{
background:var(--primary-blue);
}

/* =========================
PROGRAM PAGES
========================= */

/* =========================
PROGRAM PAGES (CLEAN + PREMIUM)
========================= */

/* HERO */
.program-hero{
  height:60vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.program-hero .overlay{
  background:rgba(0,0,0,0.6);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
  text-align:center;
  padding:20px;
}

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

.program-hero p{
  font-size:1.1rem;
  opacity:0.9;
}

/* =========================
PROGRAM DETAILS
========================= */

.program-details{
  padding:90px 20px;
  max-width:900px;
  margin:auto;
  text-align:center;
}

.program-details h2{
  font-size:2.2rem;
  color:var(--primary-blue);
  margin-bottom:20px;
}

.program-details p{
  font-size:1.05rem;
  line-height:1.9;
  color:#555;
}

/* =========================
PROGRAM IMPACT (DIFFERENT STYLE 🔥)
========================= */

.program-impact{
  padding:100px 20px;
  text-align:center;
  background:linear-gradient(to right, #1f5f8f, #163f63);
  color:white;
}

.program-impact h2{
  font-size:2.4rem;
  margin-bottom:50px;
}

/* GRID */
.impact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  max-width:1000px;
  margin:auto;
}

/* GLASS CARDS */
.impact-box{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  padding:35px 25px;
  border-radius:16px;
  transition:0.3s ease;
}

.impact-box:hover{
  transform:translateY(-8px) scale(1.03);
  background:rgba(255,255,255,0.15);
}

/* TEXT */
.impact-box h3{
  font-size:2.3rem;
  margin-bottom:10px;
  color:#f15a24;
}

.impact-box p{
  font-size:0.95rem;
  opacity:0.9;
}

/* =========================
CTA SECTION
========================= */

.program-cta{
  padding:90px 20px;
  text-align:center;
  background:var(--primary-blue);
  color:white;
}

.program-cta h2{
  font-size:2.2rem;
  margin-bottom:20px;
}

.program-cta p{
  max-width:600px;
  margin:auto;
  margin-bottom:25px;
  opacity:0.9;
}

.program-cta .btn{
  background:var(--accent-orange);
  color:white;
  padding:12px 25px;
  border-radius:30px;
}

.program-cta .btn:hover{
  background:white;
  color:var(--primary-blue);
}



/* =========================
AFYA BORA PAGE (PROGRAM PAGE DESIGN)
========================= */

/* HERO IMPROVEMENT */
.program-hero{
  position:relative;
}

.program-hero .overlay{
  backdrop-filter: blur(3px);
}

/* =========================
PROGRAM DETAILS (READABLE + PREMIUM)
========================= */

.program-details{
  max-width:850px;
  margin:auto;
  padding:100px 20px;
  text-align:left;
}

.program-details h2{
  font-size:2.4rem;
  color:var(--primary-blue);
  margin-bottom:20px;
}

.program-details p{
  font-size:1.05rem;
  line-height:1.9;
  color:#444;
}

/* =========================
IMPACT SECTION (GLASS + FULL WIDTH)
========================= */

.program-impact{
  position:relative;
  padding:100px 20px;
  background:linear-gradient(135deg, #1f5f8f, #163f63);
  color:white;
  text-align:center;
}

.program-impact h2{
  font-size:2.5rem;
  margin-bottom:50px;
}

/* GRID */
.impact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

/* GLASS CARDS */
.impact-box{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  padding:35px 25px;
  border-radius:16px;
  transition:0.3s ease;
}

/* HOVER */
.impact-box:hover{
  transform:translateY(-10px) scale(1.03);
  background:rgba(255,255,255,0.15);
}

/* TEXT */
.impact-box h3{
  font-size:1.4rem;
  margin-bottom:10px;
  color:#fff;
}

.impact-box p{
  font-size:0.95rem;
  opacity:0.9;
}

/* =========================
CTA (STRONGER)
========================= */

.program-cta{
  text-align:center;
  padding:100px 20px;
  background:linear-gradient(to right, #1f5f8f, #0f2f4a);
  color:white;
}

.program-cta h2{
  font-size:2.5rem;
  margin-bottom:20px;
}

.program-cta p{
  max-width:600px;
  margin:auto;
  margin-bottom:30px;
}

.program-cta .btn{
  background:#f15a24;
  padding:14px 28px;
  border-radius:30px;
  font-weight:600;
}

.program-cta .btn:hover{
  background:white;
  color:#1f5f8f;
}



















/* ================= FOUNDER SECTION (CLEAN FINAL) ================= */

.founder-section{
padding:80px 20px;
background:white;
}

.founder-container{
max-width:1100px;
margin:auto;
}

/* Heading */
.founder-text h1{
font-size:2.3rem;
color:var(--primary-blue);
margin-bottom:25px;
}

/* Layout container */
.founder-body{
position:relative;
}

/* IMAGE aligned with FIRST PARAGRAPH */
.founder-image{
float:left;
width:280px;
margin:5px 25px 15px 0;
}

.founder-image img{
width:100%;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* MESSAGE TEXT */
.founder-message{
position:relative;
}

.founder-message p{
font-size:1.05rem;
line-height:1.9;
margin-bottom:15px;
}

/* Clear float */
.founder-body::after{
content:"";
display:block;
clear:both;
}

/* ================= QUOTES ================= */

/* Opening quote (FIXED POSITION) */
.founder-message::before{
content:"“";
font-size:90px;
color:rgba(0,0,0,0.12);
position:absolute;
top:8px;          /* 👈 move DOWN to align with first line */
left:-5px;
font-family:Georgia, serif;
line-height:1;
}

/* Closing quote */
.founder-message::after{
content:"”";
font-size:110px;
color:rgba(0,0,0,0.08);
position:absolute;
bottom:-40px;
right:10px;
font-family:Georgia, serif;
}

/* NAME */
.founder-name{
margin-top:25px;
color:var(--accent-orange);
}

/* SOCIAL ICONS */
.founder-social{
margin-top:10px;
}

.founder-social a {
    color: var(--primary-blue);
    margin: 0 8px;
    font-size: 18px;
    transition: 0.3s;
}

.founder-social a:hover {
    color: var(--accent-orange);
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.founder-image{
float:none;
width:100%;
margin:0 0 20px 0;
}

.founder-message::before,
.founder-message::after{
display:none; /* hide big quotes on small screens */
}

}

/* =========================
WHO WE ARE SECTION (REVAMPED)
========================= */

.who-we-are-section{
    background: #ffffff;
    padding: 90px 20px;
}

.who-we-are-container{
    max-width: 1000px;
    margin: auto;
}

.who-we-are-section h2{
    text-align: center;
    font-size: 2.6rem;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.intro-text{
    font-size: 1.1rem;
    line-height: 1.9;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 30px auto;
}

.section-subtitle{
    margin-top: 40px;
    font-size: 1.6rem;
    color: var(--primary-blue);
    text-align: center;
}

.mission-intro{
    text-align: center;
    margin-bottom: 30px;
}

/* Mission grid cards */
.mission-grid{
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:nowrap; /* forces single line */
    overflow-x:auto;  /* prevents breaking on small screens */
}

.mission-card{
    background: #f5f7fa;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s ease;
    border: 1px solid #eee;
}

.mission-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.mission-card h4{
    color: var(--primary-blue);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.mission-card p{
    font-size: 0.95rem;
    color: #555;
}

.closing-text{
    text-align: center;
    margin-top: 50px;
    font-size: 1.1rem;
    font-weight: 500;
}









/* =========================
PARTNERS SECTION (PREMIUM SLIDER)
========================= */

.partners-section{
    background:#ffffff;
    padding:90px 20px;
    text-align:center;
    overflow:hidden;
}

.partners-section h2{
    font-size:2.5rem;
    color:var(--primary-blue);
    margin-bottom:10px;
}

.partners-subtext{
    max-width:600px;
    margin:0 auto 50px;
    color:#666;
}

/* SLIDER WRAPPER */
.partners-slider{
    overflow:hidden;
    position:relative;
}

/* TRACK */
.partners-track{
    display:flex;
    width:max-content;
    gap:60px;
    animation:scroll 25s linear infinite;
}

/* LOGO */
.partner-logo{
    min-width:180px; /* 🔥 bigger logos */
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s ease;
    filter:grayscale(100%);
    opacity:0.7;
}

/* IMAGE */
.partner-logo img{
    width:100%;
    max-height:90px; /* 🔥 increased size */
    object-fit:contain;
}

/* HOVER EFFECT */
.partner-logo:hover{
    transform:scale(1.1);
    filter:grayscale(0%);
    opacity:1;
}

/* SCROLL ANIMATION */
@keyframes scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* PAUSE ON HOVER (PREMIUM TOUCH) */
.partners-slider:hover .partners-track{
    animation-play-state:paused;
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

    .partner-logo{
        min-width:140px;
    }

    .partner-logo img{
        max-height:70px;
    }

}













/* =========================
GLOBAL TYPOGRAPHY CLEANUP (IMPORTANT FIX)
========================= */

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* remove conflict from earlier h1 rules */
h1, h2, h3, h4{
    font-weight: 700;
}

/* unify paragraph styling */
p{
    font-size: 16px;
    line-height: 1.8;
}



border-radius:50%;
object-fit:cover;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
//* =========================
TEAM SECTION (PREMIUM FINAL VERSION)
========================= */

.team-section{
    padding:80px 20px;
    background:#f7f7f7;
    text-align:center;
}

.team-section h2{
    font-size:2.5rem;
    color:var(--primary-blue);
    margin-bottom:40px;
}

/* =========================
ADVISORY TEAM GRID
========================= */

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:30px;
    max-width:1100px;
    margin:auto;
}

/* CARD */
.team-card{
    background:#fff;
    border-radius:14px;
    padding:25px 20px 20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;
    transition:all 0.3s ease;
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp 0.6s ease forwards;
}

.team-card:nth-child(2){ animation-delay:0.2s; }
.team-card:nth-child(3){ animation-delay:0.4s; }

.team-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 18px 35px rgba(0,0,0,0.15);
}

/* IMAGE BLOCK */
.team-img-wrapper{
    width:110px;
    height:110px;
    margin:0 auto 10px;
}

.team-img-wrapper img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #f15a24;
    transition:0.4s ease;
}

.team-card:hover .team-img-wrapper img{
    transform:scale(1.05);
    box-shadow:0 0 0 6px rgba(241,90,36,0.15);
}

/* TEXT */
.team-card h3{
    margin-top:5px;
    font-size:16px;
    color:var(--primary-blue);
}

.team-card p{
    font-size:13px;
    color:#666;
    margin:3px 0 8px;
}

/* =========================
CORE TEAM GRID
========================= */

.core-team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:30px;
    max-width:1000px;
    margin:60px auto;
    padding:0 20px;
}

/* CORE CARD */
.core-team-card{
    background:#fff;
    border-radius:16px;
    padding:25px 20px 20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;
    transition:all 0.3s ease;
    position:relative;

    /* animation */
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp 0.6s ease forwards;
}

.core-team-card:nth-child(2){ animation-delay:0.2s; }
.core-team-card:nth-child(3){ animation-delay:0.4s; }

.core-team-card:hover{
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* AVATAR */
.core-avatar{
    width:120px;
    height:120px;
    margin:0 auto 10px;
}

.core-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    border:4px solid var(--accent-orange);
    transition:0.4s ease;
}

.core-team-card:hover .core-avatar img{
    transform:scale(1.08);
    box-shadow:0 0 0 6px rgba(241,90,36,0.15);
}

/* =========================
⭐ FEATURED FOUNDER
========================= */

.core-team-card.featured{
    border:2px solid var(--accent-orange);
    background:linear-gradient(to bottom, #fff, #fff7f3);
    transform:scale(1.05);
}

.core-team-card.featured .core-avatar{
    width:140px;
    height:140px;
}

.core-team-card.featured h3{
    font-size:19px;
}

.core-team-card.featured::before{
    content:"Finance";
    position:absolute;
    top:15px;
    left:15px;
    background:var(--accent-orange);
    color:#fff;
    font-size:11px;
    padding:5px 10px;
    border-radius:20px;
}

/* =========================
SOCIAL ICONS (PREMIUM)
========================= */

.team-social{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:5px;
}

.team-social a{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f1f1f1;
    color:var(--primary-blue);
    font-size:13px;
    transition:0.3s ease;
    position:relative;
    overflow:hidden;
}

/* hover */
.team-social a:hover{
    background:var(--accent-orange);
    color:#fff;
    transform:translateY(-2px);
}

/* shine effect */
.team-social a::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:rgba(255,255,255,0.3);
    transition:0.3s;
}

.team-social a:hover::after{
    left:100%;
}

/* =========================
ANIMATION
========================= */

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

/* =========================
MOBILE FIX
========================= */

@media(max-width:768px){

    .team-grid,
    .core-team-grid{
        grid-template-columns:1fr;
    }

    .core-team-card.featured{
        transform:none; /* prevent zoom breaking mobile */
    }

}


/* =========================
WHATSAPP PREMIUM CHAT UI
========================= */

.whatsapp-container{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:9999;
}

/* FLOAT BUTTON */
.whatsapp-button{
    width:65px;
    height:65px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    transition:0.3s ease;
}

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

/* PULSE EFFECT */
.whatsapp-button::after{
    content:"";
    position:absolute;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    opacity:0.4;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{transform:scale(1); opacity:0.4;}
    70%{transform:scale(1.6); opacity:0;}
    100%{opacity:0;}
}

/* CHAT BOX */
.whatsapp-box{
    width:300px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    position:absolute;
    bottom:80px;
    right:0;
    overflow:hidden;
    display:none;
    animation:fadeIn 0.3s ease;
}

/* HEADER */
.whatsapp-header{
    background:#25D366;
    color:#fff;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.whatsapp-header span{
    cursor:pointer;
    font-size:20px;
}

/* BODY */
.whatsapp-body{
    padding:15px;
    font-size:14px;
    color:#333;
}

/* BUTTON */
.whatsapp-start{
    display:block;
    text-align:center;
    background:#25D366;
    color:#fff;
    padding:12px;
    text-decoration:none;
    font-weight:600;
}

.whatsapp-start:hover{
    background:#1ebe5d;
}

/* SHOW CLASS */
.whatsapp-box.show{
    display:block;
}

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

/* MOBILE */
@media(max-width:768px){
    .whatsapp-box{
        width:260px;
    }
}


.animate-on-scroll{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.animate-on-scroll.visible{
opacity:1;
transform:translateY(0);
}

.btn{
transition:all 0.3s ease;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* =========================
TOP BAR (WORKING FIXED VERSION)
========================= */

.top-bar{
position:fixed;
top:0;
left:0;
width:100%;
background:var(--primary-blue);
color:#fff;
z-index:1001;
font-size:14px;
}

.top-bar-content{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 20px;
flex-wrap:wrap;
}

/* CONTACT */
.top-contact span{
margin-right:20px;
}

.top-contact i{
margin-right:6px;
color:var(--accent-orange);
}

/* SOCIAL */
.top-social a{
color:#fff;
margin-left:12px;
font-size:14px;
transition:0.3s;
}

.top-social a:hover{
color:var(--accent-orange);
transform:translateY(-2px);
}

/* =========================
FIX NAVBAR POSITION
========================= */

.navbar{
top:40px; /* pushes below top bar */
}

/* =========================
PREVENT CONTENT HIDING
========================= */

body{
padding-top:110px; /* IMPORTANT */
}

/* =========================
LOGO IMPROVEMENT
========================= */

.logo img{
height:70px;
}

/* =========================
MOBILE FIX
========================= */

@media(max-width:768px){

.top-bar-content{
flex-direction:column;
text-align:center;
gap:5px;
}

.navbar{
top:70px;
}

body{
padding-top:140px;
}

}











/* =========================
TOP CONTACT RESTORE + PREMIUM STYLE
========================= */

.top-contact{
display:flex;
flex-wrap:wrap;
gap:18px;
align-items:center;
}

/* each item */
.top-contact span{
display:flex;
align-items:center;
gap:6px;
font-size:13.5px;
white-space:nowrap;
}

/* icons */
.top-contact i{
color:#f15a24;
font-size:14px;
}

/* links (if clickable) */
.top-contact a{
color:#fff;
text-decoration:none;
transition:0.3s;
}

.top-contact a:hover{
color:#f15a24;
}

/* hover effect for whole item */
.top-contact span:hover{
opacity:0.85;
transform:translateY(-1px);
transition:0.2s;
}



/* =========================
FORCE NORMAL PAGE FLOW
========================= */

.hero{
  margin-bottom:0;
}

.about{
  display:block;
  position:relative;
  z-index:1;
  clear:both;
}




/* =========================
PAGE FLOW SAFETY FIX
========================= */

.hero{
  display:block;
}

section{
  position:relative;
  z-index:1;
}



.video-container{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* VIDEO */
.testimonial-video{
  width:100%;
  display:block;
  object-fit:cover;
}

/* CONTROL BAR */
.video-controls{
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(0,0,0,0.5);
  padding:8px;
  border-radius:10px;
  backdrop-filter:blur(6px);
}

/* BUTTONS */
.video-controls button{
  background:none;
  border:none;
  color:white;
  font-size:16px;
  cursor:pointer;
}

/* VOLUME SLIDER */
.video-controls input[type="range"]{
  width:80px;
  cursor:pointer;
}


.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:25px;
  margin-top:40px;
}

.video-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  height:300px; /* 🔥 IMPORTANT FIX */
}

.video-card:hover{
  transform:scale(1.03);
}

.video-card video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.video-card{
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.video-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



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

.video-card {
  width: 100%;
  height: 300px; /* give it a visible height */
  overflow: hidden;
  border-radius: 12px;
  background: #000; /* fallback color */
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.video-card{
  width: 100%;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  position: relative;
}

.testimonial-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:25px;
  margin-top:20px;
}

/* CARD STYLE */
.video-card{
  position:relative;
  height:500px;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  cursor:pointer;
  transition:transform 0.4s ease, box-shadow 0.4s ease;
}

/* HOVER EFFECT */
.video-card:hover{
  transform:scale(1.03);
  box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

/* VIDEO */
.testimonial-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s ease;
}

/* ZOOM INSIDE ON HOVER */
.video-card:hover .testimonial-video{
  transform:scale(1.1);
}

/* PLAY ICON OVERLAY */
.video-card::after{
  content:"▶";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:40px;
  color:white;
  background:rgba(0,0,0,0.4);
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  opacity:0;
  transition:0.3s ease;
  pointer-events:none;
}

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

/* FADE IN ANIMATION */
.video-card{
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp 0.8s ease forwards;
}

.video-card:nth-child(1){ animation-delay:0.1s; }
.video-card:nth-child(2){ animation-delay:0.2s; }
.video-card:nth-child(3){ animation-delay:0.3s; }

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







.gallery{
  padding:80px 0;
  background:#f9f9f9;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:20px;
  margin-top:40px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform 0.5s ease;
}

/* hover zoom */
.gallery-item:hover img{
  transform:scale(1.1);
}

/* dark overlay effect */
.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.2);
  opacity:0;
  transition:0.3s ease;
}

.gallery-item:hover::after{
  opacity:1;
}



/* ================= GALLERY PAGE ================= */

.page-header{
  padding:80px 0;
  text-align:center;
  background:#f5f5f5;
}

.gallery-tabs{
  display:flex;
  justify-content:center;
  gap:15px;
  margin:30px 0;
}

.tab-btn{
  padding:10px 20px;
  border:none;
  cursor:pointer;
  background:#eee;
  border-radius:6px;
  font-weight:600;
}

.tab-btn.active{
  background:#25D366;
  color:#fff;
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}








/* ================= FILTERS ================= */
.gallery-filters{
  text-align:center;
  margin-bottom:30px;
}

.filter-btn{
  padding:10px 18px;
  margin:5px;
  border:none;
  background:#eee;
  cursor:pointer;
  border-radius:20px;
  transition:0.3s;
}

.filter-btn.active,
.filter-btn:hover{
  background:#25D366;
  color:#fff;
}

/* ================= MASONRY ================= */
.gallery-masonry{
  column-count:3;
  column-gap:15px;
}

.gallery-item{
  break-inside:avoid;
  margin-bottom:15px;
  overflow:hidden;
  border-radius:10px;
  cursor:pointer;
}

.gallery-item img{
  width:100%;
  transition:0.4s;
}

.gallery-item:hover img{
  transform:scale(1.08);
}

/* ================= LIGHTBOX ================= */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.lightbox img{
  max-width:90%;
  max-height:80%;
}

.close-lightbox{
  position:absolute;
  top:20px;
  right:30px;
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

/* ================= VIDEO MODAL ================= */
.video-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.video-modal video{
  width:80%;
  max-width:800px;
}

.close-video{
  position:absolute;
  top:20px;
  right:30px;
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .gallery-masonry{
    column-count:2;
  }
}

@media(max-width:500px){
  .gallery-masonry{
    column-count:1;
  }
}





/* ================= HERO ================= */
.volunteer-hero{
  height:80vh;
  background:url('../images/volunteer.jpg') center/cover no-repeat;
  position:relative;
}

.volunteer-hero .overlay{
  background:rgba(0,0,0,0.6);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#fff;
  text-align:center;
  padding:20px;
}

.volunteer-hero h1{
  font-size:42px;
  margin-bottom:15px;
}

/* ================= ABOUT ================= */
.volunteer-about{
  padding:60px 0;
  text-align:center;
  max-width:800px;
}

/* ================= ROLES ================= */
.roles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
}

.role-card{
  background:#fff;
  padding:25px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  transition:0.3s;
}

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

.role-card i{
  font-size:30px;
  color:#25D366;
  margin-bottom:10px;
}

/* ================= CTA ================= */
.volunteer-cta{
  background:#25D366;
  color:#fff;
  text-align:center;
  padding:60px 20px;
}

.volunteer-hero {
  height: 90vh;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
              url('../images/18 - Copy.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.volunteer-hero-content {
  max-width: 700px;
  animation: fadeInUp 1s ease;
}


.volunteer-section {
  position: relative;
  padding: 80px 20px;
  background: #f9f9f9;
  overflow: hidden;
}

/* GRID */
.volunteer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* IMAGE STYLE */
.volunteer-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  transform: rotate(-2deg);
  transition: 0.3s;
}

.volunteer-image img:hover {
  transform: rotate(0deg) scale(1.05);
}

/* TEXT */
.volunteer-text h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.volunteer-text p {
  margin-bottom: 15px;
}

.volunteer-text ul {
  margin-bottom: 20px;
}

.volunteer-text li {
  margin-bottom: 8px;
}

/* TOP SHAPE */
.shape-top {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #25D366;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* BOTTOM SHAPE */
.shape-bottom {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #25D366;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.volunteer-hero h1 {
  font-size: 48px;
  margin-bottom: 15px;
}

.volunteer-hero p {
  font-size: 18px;
  margin-bottom: 25px;
}

.volunteer-btn {
  background: #25D366;
  color: #fff;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.volunteer-btn:hover {
  background: #1ebe5d;
}












/* ================= PROGRAM PAGE (SAFE CLEAN VERSION) ================= */

.program-hero{
  height:65vh;
  background-size:cover;
  background-position:center;
  position:relative;
}

.program-hero .overlay{
  background:rgba(0,0,0,0.6);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  padding:20px;
}

.program-hero h1{
  font-size:48px;
  margin-bottom:10px;
}

.program-details{
  padding:80px 20px;
  max-width:900px;
}

.program-impact{
  background:#f5f7fa;
  padding:80px 20px;
}

.impact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:25px;
  margin-top:40px;
}

.impact-box{
  background:#fff;
  padding:25px;
  border-radius:12px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.3s;
}

.impact-box:hover{
  transform:translateY(-5px);
}

.impact-box i{
  font-size:30px;
  color:#f15a24;
  margin-bottom:10px;
}

.program-cta{
  background:#1f5f8f;
  color:#fff;
  text-align:center;
  padding:70px 20px;
}

/* ================= FIX: PROGRAM IMPACT TEXT VISIBILITY ================= */

.program-impact .impact-box{
  background:#ffffff;
  color:#333; /* 🔥 force dark text */
}

.program-impact .impact-box h3{
  color:#1f5f8f; /* brand blue */
}

.program-impact .impact-box p{
  color:#555;
}

.program-impact .impact-box i{
  color:#f15a24; /* keep your orange icon */
}

/* ================= FIX: PROGRAM IMPACT HEADING ================= */

.who-we-are-container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
    text-align: left; /* 🔥 FIX: readable alignment */
}

.who-we-are-container h2 {
    text-align: center; /* keep title centered */
    font-size: 36px;
    margin-bottom: 20px;
}

.who-we-are-container p {
    text-align: left;
    line-height: 1.8;
    color: #444;
    margin-bottom: 15px;
}



/* HERO */
.contact-hero {
  background: url('../images/contact-header.jpg') center/cover no-repeat;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact-hero .overlay {
  background: rgba(0,0,0,0.6);
  color: white;
  text-align: center;
  padding: 40px;
  border-radius: 10px;
}

/* GRID */
.contact-modern {
  padding: 80px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}

/* FORM CARD */
.contact-form-card {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* INFO CARD */
.contact-info-card {
  background: linear-gradient(135deg, #0a2540, #0f3c68);
  color: white;
  padding: 40px;
  border-radius: 12px;
}

.info-box {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.info-box i {
  font-size: 20px;
  color: #00c2ff;
}

/* MAP */
.map-section {
  padding: 60px 0;
  text-align: center;
}

.map-container {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}


/* SUCCESS MESSAGE */
.form-success {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 37, 64, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 999;
}

.form-success.active {
  opacity: 1;
  visibility: visible;
}

.success-content {
  background: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  animation: scaleIn 0.4s ease;
}

.success-content i {
  font-size: 50px;
  color: #00c2ff;
  margin-bottom: 15px;
}

@keyframes scaleIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



#map {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  margin-top: 20px;
}








.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 15px 20px;
  width: 100%;

  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Prevent weird spacing issues */
.footer-bottom p {
  margin: 0;
  color: #bbb;
  font-size: 14px;
}

/* Right side text */
.footer-bottom .credit {
  text-align: right;
}

/* Link styling */
.footer-bottom .credit a {
  color: #00c2ff;
  text-decoration: none;
  font-weight: 600;
}

.footer-bottom .credit a:hover {
  color: #fff;
}