/* styles.css — EastHands / Lions Club site
   Fully responsive for desktop, tablet, and mobile */

/* ===== Fonts & Base ===== */
body { font-family: 'Noto Sans Bengali', sans-serif; }

/* ===========================
   HEADER & TOPBAR (LEO Orga)
   =========================== */
.topbar { background-color:#ff7f27; color:#fff; font-size:14px; }
.btn-lang { background:#fff; color:#333; font-size:13px; font-weight:600; padding:2px 10px; border-radius:3px; text-decoration:none; margin-left:6px; transition:.3s; }
.btn-lang:hover { background:#eee; color:#000; }
.social-links a { color:#fff; margin-left:10px; font-size:16px; transition:color .3s; }
.social-links a:hover { color:#005c30; }

/* Buttons */
.btn-donate{ background:#00aaff; color:#fff; font-weight:600; font-size:13px; border-radius:4px; padding:5px 14px; text-transform:uppercase; }
.btn-donate:hover{ background:#0090d9; color:#fff; }
.btn-volunteer{ background:#fff; color:#ff7f27; border:1px solid #ff7f27; font-weight:600; font-size:13px; border-radius:4px; padding:5px 14px; text-transform:uppercase; }
.btn-volunteer:hover{ background:#ff7f27; color:#fff; }

/* Navbar */
.navbar{ border-top:1px solid #f3f3f3; }
.logo-img{ height:55px; }
.navbar-nav .nav-link{ font-weight:500; color:#333 !important; margin:0 6px; position:relative; transition:.3s; }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{ color:#0B3C4D !important; }
.navbar-nav .nav-link.active::after{ content:""; display:block; height:2px; width:100%; background:#0B3C4D; margin-top:2px; }
.dropdown-menu{ border-radius:0; border-color:#eee; font-size:14px; }

/* Header responsive */
@media (max-width:991.98px){
  .topbar{ text-align:center; }
  .topbar .container{ flex-direction:column; }
  .social-links, .btn-donate, .btn-volunteer{ margin-top:5px; }
}
@media (max-width:575.98px){
  .topbar{ font-size:13px; }
  .btn-lang{ font-size:12px; padding:2px 8px; }
  .btn-donate, .btn-volunteer{ font-size:12px; padding:4px 10px; }
  .logo-img{ height:45px; }
}

/* ===========================
   FOOTER (Updated)
   =========================== */
.leo-footer {
  background-color: #0D4050;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
}

.footer-title {
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 12px;
  color: #ffb100;
  text-transform: uppercase;
}

.footer-links li {
  margin-bottom: 6px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: color .3s;
}

.footer-links a:hover {
  color: #ffb100;
}

.footer-social a {
  display: inline-block;
  color: #fff;
  margin-right: 10px;
  font-size: 18px;
  transition: color .3s;
}

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

/* Removed logo space */
.footer-logo { display: none; }

/* Adjusted spacing and removed title */
.footer-interest {
  text-align: center;
  margin-top: 20px;
}

.footer-interest-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 12px;
  font-size: 14px;
  transition: color .3s;
}

.footer-interest-links a:hover {
  color: #ffb100;
}

/* Divider + Bottom Note */
.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, .4);
  margin-top: 25px;
  margin-bottom: 15px;
}

.footer-note {
  color: #ddd;
  font-size: 13px;
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .footer-links,
  .footer-social { text-align: center; }
  .footer-interest-links a { display: block; margin: 5px 0; }
}
@media (max-width: 575.98px) {
  .footer-interest-links a { font-size: 13px; }
  .footer-note { font-size: 12px; }
}


/* ===========================
   HERO (with slider/overlay)
   =========================== */
.hero-section{ background:url('images/banner.jpg') center/cover no-repeat; height:70vh; background-color:#0B3C4D; text-shadow:0 1px 3px rgba(0,0,0,.5); margin-top:30px; }
.hero-section{ position:relative; height:80vh; background-size:cover; background-position:center; overflow:hidden; transition:background-image 1.5s ease-in-out; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; }
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.hero-section .container{ position:relative; z-index:2; }
.hero-title{ font-size:2.8rem; font-weight:800; color:#fff; text-shadow:0 3px 6px rgba(0,0,0,.4); }
.hero-subtitle{ font-size:1.3rem; color:#ffcc00; font-weight:500; }
@keyframes zoomOut { 0%{ transform:scale(1.1);} 100%{ transform:scale(1);} }
.zoom{ animation: zoomOut 6s ease-in-out forwards; }
@media (max-width:767.98px){ .hero-section{ height:60vh; } .hero-title{ font-size:1.8rem; } .hero-subtitle{ font-size:1rem; } }

/* ===========================
   GLOBAL IMPACT
   =========================== */
.global-impact-section{ background:#fff; text-align:center; }
.section-title{ color:#000; position:relative; display:inline-block; padding-bottom:8px; }
.section-title::after{ content:""; display:block; width:50px; height:3px; background:#ffb100; margin:6px auto 0; }
.impact-box{ padding:40px 20px; min-height:180px; display:flex; flex-direction:column; justify-content:center; }
.bg-blue1{ background:#0B3C4D; } .bg-purple{ background:#8a2ba0; } .bg-blue2{ background:#003bb3; }
.bg-gradient-blue{ background:linear-gradient(90deg,#0B3C4D,#3a2a99); }
.impact-number{ font-size:2rem; margin-bottom:10px; }
.impact-box p{ font-size:1rem; color:#fff; }
@media (max-width:991.98px){ .impact-box{ padding:30px 15px; } .impact-number{ font-size:1.7rem; } }
@media (max-width:575.98px){ .impact-box{ padding:25px 10px; } .impact-number{ font-size:1.5rem; } .impact-box p{ font-size:.9rem; } }

/* ===========================
   HIGHLIGHTS (About-style panel)
   =========================== */
.highlights-section { background:#fff; }
.highlights-card { border-radius:22px; box-shadow:0 12px 28px rgba(0,0,0,.08); }
.highlights-image-wrap{ height:100%; background:#111; }
.highlights-image{ display:block; width:100%; height:100%; object-fit:cover; }
.highlights-panel{ background:#0D4050; color:#eaeaea; }
.eyebrow{
  font-size:.9rem; font-weight:700; color:#ff7f27; letter-spacing:.4px; text-transform:uppercase;
  position:relative; display:inline-block; padding-right:16px;
}
.eyebrow::after{ content:""; display:inline-block; width:36px; height:2px; background:#ff7f27; margin-left:10px; vertical-align:middle; }
.highlights-title{ color:#fff; font-weight:800; font-size:2.1rem; }
.highlights-text{ color:#cfd2d4; line-height:1.8; }
.btn-watch{ background:#e53935; color:#fff; font-weight:700; border:none; border-radius:25px; padding:10px 18px; transition:.25s; }
.btn-watch:hover{ background:#c62828; color:#fff; }
.btn-watch i{ font-size:.95rem; }
.modal-content.bg-dark{ background:#000 !important; }
@media (max-width:991.98px){ .highlights-card{ border-radius:18px; } .highlights-title{ font-size:1.8rem; } }
@media (max-width:575.98px){ .highlights-title{ font-size:1.6rem; } .highlights-panel{ padding:24px !important; } }

/* ===========================
   UNIFY FEATURE BLOCKS (alignment for both sections)
   =========================== */
.section-tight{ padding:2.5rem 0 !important; }
.feature-container{ max-width:1100px; }
.feature-img{
  width:420px;
  height:280px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.feature-title{ color:#0B3C4D; font-size:2rem; font-weight:800; }
.feature-text{ color:#333; line-height:1.7; max-width:520px; }

/* thin divider */
.divider-line{ border:0; border-top:2px solid #0D4050; width:60%; margin:0.5rem auto 0.75rem; }

/* buttons reused */
.btn-learn{ background:#003bb3; color:#fff; font-weight:600; padding:10px 28px; border-radius:4px; transition:.3s; border:none; }
.btn-learn:hover{ background:#0B3C4D; color:#fff; }
.btn-learn-purple{ background:#8a2ba0; color:#fff; font-weight:600; padding:10px 28px; border-radius:4px; transition:.3s; border:none; }
.btn-learn-purple:hover{ background:#0B3C4D; color:#fff; }

@media (max-width:1199.98px){
  .feature-img{ width:380px; height:250px; }
}
@media (max-width:991.98px){
  .feature-img{ width:75%; height:auto; }
  .feature-title{ font-size:1.7rem; }
}
@media (max-width:575.98px){
  .feature-img{ width:85%; }
  .feature-title{ font-size:1.5rem; }
}

/* ===========================
   JOIN US
   =========================== */
.joinus-section{ background:#0B3C4D; color:#fff; }
.joinus-title{ position:relative; display:inline-block; color:#fff; padding-bottom:6px; }
.joinus-title::after{ content:""; display:block; width:50px; height:3px; background:#ffb100; margin:6px auto 0; }
.joinus-card{ border-radius:8px; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.joinus-card:hover{ transform:translateY(-5px); box-shadow:0 6px 15px rgba(0,0,0,.3); }
.joinus-img-wrap{ position:relative; overflow:hidden; }
.joinus-img{ display:block; width:100%; height:250px; object-fit:cover; }
.joinus-banner{ position:absolute; bottom:0; left:0; width:100%; padding:8px 15px; color:#fff; font-weight:600; clip-path:polygon(0 0,85% 0,100% 100%,0% 100%); }
.bg-green{ background:#00b578; } .bg-blue{ background:#4b80ff; }
.joinus-link{ color:#fff; text-decoration:none; font-weight:600; font-size:15px; }
.joinus-link:hover{ text-decoration:underline; }
.btn-findclub{ background:transparent; border:1.5px solid #fff; color:#fff; font-weight:600; border-radius:4px; padding:8px 24px; transition:.3s; }
.btn-findclub:hover{ background:#ffb100; border-color:#ffb100; color:#0B3C4D; }
@media (max-width:991.98px){ .joinus-img{ height:220px; } }
@media (max-width:575.98px){ .joinus-img{ height:200px; } .btn-findclub{ font-size:.9rem; padding:7px 20px; } }

/* ===========================
   ABOUT helpers
   =========================== */
.about-title h1{ color:#0B3C4D; }
.about-lead{ color:#5a5a5a; line-height:1.8; font-size:1rem; }
.about-img-frame{ border:3px solid #ff7f27; border-radius:16px; padding:6px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.about-img{ display:block; border-radius:12px; }

/* CTA just beneath About text (closer spacing) */
.about-cta { margin-top: 12px; }
.about-cta .btn { margin-right: 10px; }

/* Founding President, etc. (if used elsewhere) */
.founder-card{ background:#fff; border:2px solid #0D4050; border-radius:25px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.founder-title{ color:#0B3C4D; }
.founder-photo{ max-height:420px; object-fit:cover; border-radius:18px; width:100%; }
.mv-card{ background:#fff; border:2px solid #0D4050; border-radius:25px; transition:transform .3s, box-shadow .3s; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.mv-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(13,64,80,.20); border-color:#0B3C4D; }
.mv-title{ color:#0B3C4D; font-weight:700; }
.feature-card{ background:#fff; border:2px solid #0D4050; border-radius:25px; box-shadow:0 5px 15px rgba(0,0,0,.05); transition:all .3s; }
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 10px 25px rgba(13,64,80,.25); border-color:#0B3C4D; }
.about-icon{ width:75px; height:75px; border-radius:50%; display:grid; place-items:center; margin:0 auto 15px; background:#0D4050; color:#fff; font-size:30px; transition:all .3s; }
.feature-card:hover .about-icon{ background:#ff7f27; color:#fff; }
.about-feature-title{ color:#0B3C4D; font-weight:700; margin-bottom:8px; font-size:1.1rem; }
.about-feature-text{ color:#555; font-size:.96rem; line-height:1.7; margin-bottom:0; }
.about-history-title{ color:#0B3C4D; }
.about-history-underline{ width:60px; height:2px; background:#ff7f27; }

/* Members / Core Values (kept for other pages) */
.members-title{ color:#0D4050; font-weight:800; letter-spacing:.3px; }
.members-sub{ max-width:740px; color:#6b6b6b; }
.members-carousel { --gap:24px; }
.members-viewport{ overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.members-viewport::-webkit-scrollbar{ display:none; }
.members-track{ display:flex; flex-wrap:nowrap; gap:var(--gap); padding-bottom:4px; --perView:3; --gap:24px; }
.member-card{ flex:0 0 calc((100% - (var(--perView) - 1) * var(--gap)) / var(--perView)); background:#fff; border-radius:18px; box-shadow:0 10px 25px rgba(0,0,0,.06); padding:28px 22px; text-align:center; scroll-snap-align:start; }
.member-avatar{ width:140px; height:140px; border-radius:50%; margin:0 auto 14px; overflow:hidden; border:4px solid #f1f1f1; }
.member-avatar img{ width:100%; height:100%; object-fit:cover; }
.member-name{ font-weight:700; color:#0D4050; margin:6px 0; }
.member-link{ color:#00b578; text-decoration:none; font-weight:600; }
.member-bio{ color:#6b6b6b; font-size:.95rem; line-height:1.7; margin-top:10px; }
.members-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.members-dots .dot{ width:9px; height:9px; border-radius:50%; border:none; background:#cfd8dc; cursor:pointer; }
.members-dots .dot.active{ background:#0D4050; }
@media (max-width:991.98px){ .members-track{ --perView:2; } }
@media (max-width:575.98px){ .members-track{ --perView:1; } .member-avatar{ width:120px; height:120px; } }

.core-values-section{ background:#f7f9fb; }
.since-tag { color:#e53935; font-weight:800; letter-spacing:.2px; }
.core-title{ color:#0B3C4D; }
.core-item-title{ color:#0D4050; font-weight:800; margin-bottom:.35rem; }
.core-img{ width:100%; border-radius:22px; box-shadow:0 10px 25px rgba(0,0,0,.08); object-fit:cover; }
@media (max-width:991.98px){ .core-img{ border-radius:18px; } }


/* ===========================
   EXECUTIVE COMMITTEE SECTION
   =========================== */
.executive-section {
  background-color: #CAF2FF;
  color: #0D4050;
}

.executive-section h2 {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #0D4050;
}

.exec-card {
  background: #fff;
  color: #222;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

.exec-photo {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.exec-body {
  padding: 20px 18px 25px;
  flex-grow: 1;
}

.exec-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0D4050;
  margin-bottom: 5px;
}

.exec-designation {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 12px;
}

.exec-text {
  font-size: 0.93rem;
  line-height: 1.6;
  color: #333;
}

.exec-founder {
  background: #fffaf0;
  border: 2px solid #f3e2b3;
  padding: 25px;
}

.exec-founder .exec-name {
  color: #b47c00;
}

.exec-founder .founder-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
  border: 4px solid #fff3c0;
  box-shadow: 0 0 12px rgba(180, 124, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .exec-photo {
    height: 250px;
  }
  .exec-body {
    padding: 18px;
  }
}
@media (max-width: 575.98px) {
  .exec-photo {
    height: 220px;
  }
  .exec-text {
    font-size: 0.9rem;
  }
}
/* ===== Present President (page-scoped) ===== */
.president-section{ background:#fff; }
.president-card{
  background:#ffffff;
  border:2px solid #f1d27a;           /* soft golden border like the reference */
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  max-width:1080px;
}
.president-photo{
  width:92px; height:92px; object-fit:cover; border-radius:50%;
  border:3px solid #eee; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.president-name{ color:#0D4050; }
.president-role{ color:#6d6d6d; line-height:1.4; }
.president-salutation{ color:#0D4050; }
.president-card p{ color:#333; line-height:1.8; font-size:1rem; }

/* spacing tune for smaller screens */
@media (max-width: 575.98px){
  .president-card{ padding:22px !important; }
  .president-photo{ width:84px; height:84px; }
}


/* ===========================
   QUOTE FROM PRESIDENT SECTION
   =========================== */
.quote-president-section {
  background: #fff;
}

.quote-president-card {
  background: #ffffff;
  border: 2px solid #f1d27a;       /* same soft golden border as presentpresident.php */
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  max-width: 950px;
  margin: 0 auto;
}

.quote-text {
  font-family: 'Georgia', serif;
  font-size: 1.4rem;
  color: #0D4050;
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.2rem;
}

.quote-author {
  font-weight: 500;
  font-size: 1rem;
  color: #333;
}

.quote-president-photo {
  border-radius: 8px;
  border: 3px solid #eee;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-height: 330px;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .quote-text { font-size: 1.1rem; text-align: center; }
  .quote-author { text-align: center; }
}
/* ===========================
   SECRETARY PAGE (Photo styling)
   =========================== */
.secretary-photo {
  width: 100%;
  max-width: 220px;
  max-height: 330px;
  border-radius: 50%;             /* circular image shape */
  object-fit: cover;
  border: 3px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* ===== Homepage Mission & Vision (no-conflict) ===== */
.home-mv .mv-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  padding:28px 22px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.home-mv .mv-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}
.home-mv .mv-icon{
  width:78px; height:78px; margin:0 auto 12px;
  display:grid; place-items:center;
  color:#0D4050;                 /* icon color as requested */
  font-size:38px;
}
.home-mv .mv-title{
  font-weight:800; color:#0D4050; letter-spacing:.2px;
}
.home-mv .mv-text{ color:#5d6770; line-height:1.7; }

/* Optional: ensure equal height on small screens too */
@media (max-width:575.98px){
  .home-mv .mv-card{ padding:22px 18px; }
}
/* ===== Homepage Leadership Section ===== */
.home-leadership .leadership-block h4 {
  font-size: 1.3rem;
  font-weight: 700;
}

.home-leadership .leadership-block p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

.home-leadership .leadership-image-wrap img {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.home-leadership .leadership-image-wrap img:hover {
  transform: scale(1.03);
}

.home-leadership .btn-quote {
  background-color: #0D4050;
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.home-leadership .btn-quote:hover {
  background-color: #092f3b;
}

@media (max-width: 991.98px) {
  .home-leadership .leadership-image-wrap {
    text-align: center;
  }
}
/* ===== Homepage Contact Info Section ===== */
.home-contactinfo .contact-card {
  background: linear-gradient(145deg, #fefaff, #f1faff);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  padding: 30px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-contactinfo .contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.home-contactinfo .contact-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
}

.home-contactinfo .contact-card p {
  font-size: 0.96rem;
  line-height: 1.7;
}

@media (max-width: 575.98px) {
  .home-contactinfo .contact-card {
    padding: 25px 18px;
  }
}
/* ===== Treasurer Section Styling ===== */
.treasurer-section {
  background-color: #CAF2FF;
}

.treasurer-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.treasurer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.treasurer-photo {
  max-height: 330px;
  width: auto;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.treasurer-card p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
}

@media (max-width: 575.98px) {
  .treasurer-photo {
    max-height: 260px;
  }
}
.ourteam-section .team-card{
  background:#fff;
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border:1px solid #f1f1f1;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ourteam-section .team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}

.ourteam-section .team-avatar-wrap{
  width:220px; height:220px; margin:0 auto 18px;
}
.ourteam-section .team-avatar{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}

.ourteam-section .team-name{ font-weight:700; color:#0D4050; margin-bottom:.25rem; }
.ourteam-section .team-role{ color:#0D4050; font-weight:600; }
.ourteam-section .team-cred{ color:#777; font-size:.9rem; }
.ourteam-section .team-bio{ color:#4b4b4b; font-size:.95rem; line-height:1.7; }

/* Button styles */
.ourteam-btn{
  background:#0D4050; color:#fff; font-weight:700;
  border-radius:8px; padding:10px 20px; border:2px solid #0D4050;
}
.ourteam-btn:hover{ color:#fff; opacity:.9; }
.ourteam-btn--outline{
  background:#fff; color:#0D4050; border:2px solid #0D4050;
}
.ourteam-btn--outline:hover{
  background:#0D4050; color:#fff;
}

/* Stacked (single-column) cards on “Load More” */
.team-card--stacked{ padding:16px 18px; }
.team-avatar-wrap--sm{ width:92px; height:92px; margin:0; }
.team-avatar--sm{ width:92px; height:92px; border-radius:50%; object-fit:cover; }

/* Responsive tweaks */
@media (max-width:575.98px){
  .ourteam-section .team-avatar-wrap{ width:180px; height:180px; }
}
/* ===== Service Activities Section ===== */
.service-activities-section {
  background-color: #f9f9f9;
}

.service-title {
  color: #0D4050;
  position: relative;
  font-weight: 700;
}

.service-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background-color: #0D4050;
  margin: 10px auto 0;
}

.service-main-img {
  border-radius: 10px;
  max-width: 420px;
  border: 3px solid #0D4050;
  padding: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.service-card {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-left: 4px solid #0D4050;
  transition: all 0.3s ease-in-out;
  height: 100%;
}

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

.service-card h5 {
  color: #0D4050;
  margin-bottom: 10px;
}

.service-card p {
  color: #333;
  text-align: justify;
  font-size: 15px;
  margin: 0;
}
/* =========================
   EVENTS PAGE (Current Events)
   ========================= */
.events-section { background:#fff; }

.events-header { max-width: 860px; margin: 0 auto 1rem; }
.events-title{
  display:inline-block;
  color:#0D4050;
  font-weight:800;
  margin-bottom:.5rem;
  padding:.35rem 1rem;
  border:2px solid #0D4050;
  border-radius:999px;            /* pill look like the reference */
}
.events-blurb{
  color:#333;
  margin:0 auto;
  max-width:680px;
  font-size:.98rem;
}
.events-blurb a{ color:#0D4050; font-weight:700; text-decoration:none; }
.events-blurb a:hover{ text-decoration:underline; }

.event-card{
  background:#fff;
  border:2px solid #0D4050;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.event-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.event-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Keep posters nicely sized on very tall images */
@supports (aspect-ratio: 3/4) {
  .event-img{ aspect-ratio: 3/4; object-fit: cover; }
}

/* Small tweaks on narrow screens */
@media (max-width:575.98px){
  .events-title{ font-size:1.25rem; }
  .events-blurb{ font-size:.95rem; }
}
/* =========================
   NEWS PAGE (responsive)
   ========================= */
.news-title{
  color:#0D4050;
  font-weight:800;
  display:inline-block;
  border:2px solid #0D4050;
  padding:.35rem 1.1rem;
  border-radius:999px;
}
.news-lead{ max-width:760px; margin:.5rem auto 0; color:#445; }

.news-card{
  border:2px solid #0D4050;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.1); }

.news-thumb img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}
.news-body{ padding:14px 16px 6px; }
.news-date{ color:#0D4050; font-weight:700; font-size:.85rem; }
.news-heading{
  margin:.15rem 0 .25rem;
  color:#0D4050;
  font-weight:800;
  line-height:1.25;
}
.news-excerpt{ color:#555; }
.news-footer{
  padding:10px 16px 16px;
  margin-top:auto;
}
.news-link{
  text-decoration:none;
  color:#0D4050;
  font-weight:700;
}
.news-link:hover{ text-decoration:underline; }

/* Pagination */
.news-pagination-wrap .pagination .page-link{
  color:#0D4050;
  border:1px solid #0D4050;
}
.news-pagination-wrap .pagination .page-item.active .page-link{
  background:#0D4050;
  border-color:#0D4050;
  color:#fff;
}
.news-pagination-wrap .pagination .page-link:hover{
  background:#0D4050;
  color:#fff;
}

/* Responsive heights for thumb */
@media (max-width: 991.98px){
  .news-thumb img{ height:200px; }
}
@media (max-width: 575.98px){
  .news-thumb img{ height:190px; }
}
/* joinus.css — Page styles for Join Us / Volunteering Application */

/* Container */
.joinus-container {
  max-width: 980px;
}

/* Logo same size as header logo */
.joinus-logo {
  height: 55px;
  width: auto;
  display: block;
  margin: 0 auto 8px;
}

/* Title */
.joinus-title {
  color: #0D4050;
  font-weight: 800;
  margin-bottom: 8px;
}

/* Back button */
.back-home {
  border-color: #0D4050;
  color: #0D4050;
  font-weight: 600;
}
.back-home:hover {
  background: #0D4050;
  color: #fff;
}

/* Notice / instruction box */
.joinus-notice {
  border: 2px solid #0D4050;
  border-radius: 14px;
  padding: 18px 18px;
  background: #f7fbfd;
  color: #223;
  line-height: 1.7;
}

/* Form */
.joinus-form .form-label {
  font-weight: 600;
  color: #0D4050;
}

.joinus-form .form-control {
  border-radius: 10px;
  padding: 10px 12px;
}

.btn-join {
  background: #0D4050;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 16px;
  border: none;
}
.btn-join:hover {
  background: #09323e;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .joinus-title { font-size: 1.6rem; }
  .joinus-notice { padding: 14px; }
}
/* donate.css — Lions Club Chittagong Donation Page */

/* General */
.donate-section {
  background-color: #fff;
}
.donate-title {
  color: #0D4050;
  font-weight: 800;
  margin-bottom: 20px;
}
.donate-subtitle {
  color: #0D4050;
  font-weight: 700;
  margin-bottom: 18px;
}

/* Description box */
.donate-box {
  border: 2px solid #0D4050;
  border-radius: 14px;
  padding: 15px 20px;
  max-width: 800px;
  background: #f8fbfc;
  color: #222;
  line-height: 1.6;
}

/* Side Image */
.donate-sideimg {
  border-radius: 14px;
  max-height: 300px;
  object-fit: cover;
}

/* Highlight Box */
.donate-highlight-box {
  border: 2px solid #0D4050;
  border-radius: 14px;
  background: #fefefe;
}
.donate-highlight-box img {
  border-radius: 14px;
}
.donate-logo {
  height: 45px;
  width: auto;
}
.btn-donate-now {
  background: #0D4050;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-donate-now:hover {
  background: #092f3d;
  color: #fff;
}

/* QR */
.donate-qr {
  width: 160px;
  height: auto;
  border-radius: 10px;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .donate-box { padding: 12px 14px; }
  .donate-sideimg { max-height: 220px; }
  .btn-donate-now { display: inline-block; margin-top: 10px; }
}
@media (max-width: 576px) {
  .donate-title { font-size: 1.6rem; }
  .donate-subtitle { font-size: 1.3rem; }
}
/* =========================
   GALLERY (cards + lightbox)
   ========================= */
.gallery-page {
  background:#ffffff;
}

/* grid */
.gallery-grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
@media (max-width: 1199.98px){ .gallery-grid { grid-template-columns: repeat(12, 1fr); } }
@media (max-width: 991.98px) { .gallery-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 575.98px){ .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* card */
.gcard {
  grid-column: span 3;             /* 4 per row on >= lg */
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border:1px solid #eee;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 991.98px){ .gcard { grid-column: span 4; } } /* 2 per row on md */
@media (max-width: 575.98px){ .gcard { grid-column: span 4; } } /* 1 per row on xs */

.gcard:hover{
  transform: translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

.gthumb{
  aspect-ratio: 16 / 10;
  background:#f3f6f8;
  overflow:hidden;
}
.gthumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .3s ease;
}
.gcard:hover .gthumb img{ transform: scale(1.03); }

.gcap{
  padding:14px 16px;
}
.gcap-title{
  font-weight:700;
  color:#0D4050;
  margin-bottom:4px;
}
.gcap-sub{
  color:#6b6b6b;
  font-size:.95rem;
}

/* lightbox */
.g-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index:1055;
}
.g-lightbox.show{ opacity:1; visibility:visible; }

.g-lightbox img{
  max-width:min(100%, 1100px);
  max-height:80vh;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  background:#000;
}

.g-lightbox-cap{
  color:#fff;
  text-align:center;
  margin-top:10px;
  font-weight:600;
}

.g-close{
  position:absolute;
  top:16px;
  right:18px;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#ffffff;
  color:#0D4050;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.g-close:hover{ background:#e9eef2; }
/* contact.css — Lions Club Chittagong Contact Page */

/* Title */
.contact-title {
  color: #0D4050;
  font-weight: 800;
  text-transform: capitalize;
}

/* Subtitles */
.contact-subtitle {
  color: #0D4050;
  text-transform: uppercase;
  font-size: 1.05rem;
}

/* Info text */
.contact-info p {
  color: #222;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Form */
.contact-form .form-label {
  color: #0D4050;
  font-weight: 600;
}
.contact-form .form-control {
  border-radius: 8px;
  padding: 10px 12px;
}
.contact-form .form-control:focus {
  border-color: #0D4050;
  box-shadow: 0 0 0 0.2rem rgba(13, 64, 80, 0.25);
}

/* Button */
.btn-contact {
  background-color: #0D4050;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 22px;
  border: none;
}
.btn-contact:hover {
  background-color: #09303b;
  color: #fff;
}

/* Responsive */
@media (max-width: 576px) {
  .contact-title {
    font-size: 1.7rem;
  }
  .contact-info {
    text-align: center;
  }
}