:root{
  --teal: #0a9697;
  --teal-dark: #0a9d8d;
  --peach: #f0a48d;
  --dark: #2b2b2b;
}
body{
  font-family:'Open Sans', sans-serif;
  font-weight:300;
  color:#333;
  margin:0;
}
h1{font-family:'Open Sans', sans-serif; font-weight:800;}
h2{font-family:'Open Sans', sans-serif; font-weight:600;}
h3{font-family:'Open Sans', sans-serif; font-weight:400;}
h4,h5,h6{font-family:'Open Sans', sans-serif; font-weight:600;}
a{ text-decoration:none; }

/* Top bar */
#sp-top-bar{ background-color:var(--dark); color:#ddd; padding:8px 0; font-size:13px; }
.topbar-text{ color:#fff; }

/* Logo */
#sp-logo{ background:#fff; padding:16px 0; }
.logo-img{ max-height:220px; }
.btn-sabha-app{ background:#d9232d; color:#fff; margin-right:6px; }
.btn-blogs, .btn-donate{ background:#2e7d32; color:#fff; margin-right:6px; }
.btn-sabha-app:hover, .btn-blogs:hover, .btn-donate:hover{ opacity:.9; color:#fff; }

/* Header / nav */
#sp-header{ background-color:var(--teal); }
#sp-header .navbar{ padding:0; }
#sp-header .navbar-nav{ flex-wrap: wrap; }
#sp-header .nav-link{
  color:#f0f0f0 !important;
  font-weight:700;
  padding:16px 14px !important;
  text-transform:uppercase;
  font-size:13px;
}
#sp-header .nav-item.active > .nav-link,
#sp-header .nav-link:hover{ color:#1605FF !important; background:rgba(255,255,255,.08); }
#sp-header .dropdown-menu{ background:var(--teal); border:0; border-radius:0; margin-top:0; }
#sp-header .dropdown-item{ color:#f0f0f0; font-weight:600; font-size:13px; padding:8px 20px; }
#sp-header .dropdown-item:hover{ background:rgba(255,255,255,.12); color:#1605FF; }
.navbar-toggler{ background:#fff; border:0; margin:10px; padding:8px 12px; }

/* Offcanvas */
.offcanvas{ background:var(--teal); color:#fff; width:280px; }
.offcanvas-header .btn-close{ filter:invert(1); }
.offcanvas-menu-list{ list-style:none; padding:0; margin:0; }
.offcanvas-menu-list > li{ border-bottom:1px solid rgba(255,255,255,.15); position:relative; }
.offcanvas-menu-list a{ display:block; color:#fff; padding:12px 6px; font-weight:600; }
.offcanvas-menu-list ul{ list-style:none; padding-left:14px; }
.offcanvas-menu-list ul a{ font-weight:400; padding:8px 6px; }
.oc-toggle{ position:absolute; right:0; top:6px; background:none; border:0; color:#fff; padding:8px; }

/* Hero / slider */
.hero-slider{ background:linear-gradient(120deg, var(--teal), var(--teal-dark)); color:#fff; padding:70px 0; text-align:center; }
.hero-slider img{ max-width:100%; border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.hero-slider h1{ font-size:2rem; margin-bottom:.5rem; }

/* Home page slider (5 blank autoplay slides) */
/* Home page slider - 5 photo slides, fade + Ken Burns zoom, autoplay */
#sp-slider{ position:relative; background:#000; overflow:hidden; }

.slider-slide{
  width:100%;
  height:88vh;
  min-height:560px;
  max-height:850px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:kenburns 9s ease-in-out infinite alternate;
}
@media (max-width:768px){
  .slider-slide{ height:65vh; min-height:380px; max-height:600px; }
}

@keyframes kenburns{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.12); }
}

/* Dark gradient so captions stay readable over any photo */
#sp-slider .carousel-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

.slider-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:0 8% 8%;
  text-align:center;
  color:#fff;
  z-index:2;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease .35s, transform .9s ease .35s;
}
#sp-slider .carousel-item.active .slider-caption{
  opacity:1;
  transform:translateY(0);
}
.slider-caption h2{
  font-size:2.3rem;
  font-weight:800;
  margin-bottom:.4rem;
  text-shadow:0 3px 14px rgba(0,0,0,.55);
  letter-spacing:.5px;
}
.slider-caption p{
  font-size:1.05rem;
  font-weight:400;
  margin:0 auto;
  max-width:640px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
@media (max-width:768px){
  .slider-caption h2{ font-size:1.4rem; }
  .slider-caption p{ font-size:.9rem; }
  .slider-caption{ padding:0 6% 10%; }
}

/* Controls */
#sp-slider .carousel-control-prev,
#sp-slider .carousel-control-next{ width:8%; z-index:3; }
#sp-slider .carousel-control-prev-icon,
#sp-slider .carousel-control-next-icon{
  background-color:rgba(0,0,0,.35);
  border-radius:50%;
  padding:22px;
  transition:background-color .25s ease, transform .25s ease;
}
#sp-slider .carousel-control-prev:hover .carousel-control-prev-icon,
#sp-slider .carousel-control-next:hover .carousel-control-next-icon{
  background-color:var(--teal);
  transform:scale(1.08);
}

/* Indicators as pill dashes */
#sp-slider .carousel-indicators{ z-index:3; margin-bottom:1.4rem; }
#sp-slider .carousel-indicators [data-bs-target]{
  width:34px; height:5px; border-radius:3px;
  background-color:rgba(255,255,255,.55);
  border:0; opacity:1; margin:0 5px;
  transition:background-color .3s ease, width .3s ease;
}
#sp-slider .carousel-indicators .active{
  background-color:var(--teal);
  width:50px;
}

/* Page title / simple content sections */
.page-title-simple{ padding:60px 0; }
.page-title-simple h1{ color:var(--teal); font-size:1.9rem; margin-bottom:1rem; }
#sp-page-title{ padding: 60px 0; }
#sp-page-title h1{ color:#00ccff; text-align:center; font-size:1.7rem; }
#sp-page-title .col-lg-4{ padding: 0 25px; margin-bottom: 30px;}

.content-note{
  margin-top:1.5rem; padding:14px 18px; background:#fff7ec; border-left:4px solid var(--peach);
  border-radius:4px; font-size:.95rem; color:#5a4632;
}
.content-note i{ margin-right:6px; color:#c97b2d; }

/* Our vision */
#sp-our-visition{ background-color:var(--peach); padding:50px 0; }
#sp-our-visition h3{ font-weight:700; }
#sp-our-visition .accent{ color:#ff3503; }

/* Profile / execom cards */
.profile-card{ text-align:center; margin-bottom:30px; }
.profile-card .avatar{
  width:150px; height:150px; border-radius:50%; margin:0 auto 14px; background:#2e1ba3;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; font-weight:700;
  background-image:linear-gradient(135deg,#2e1ba3,#0a9697);
}
.profile-card h2{ font-size:1rem; letter-spacing:1px; color:var(--teal); text-transform:uppercase; margin-bottom:4px;}
.profile-card h3{ font-size:1.05rem; margin:0; }
.profile-card p{ color:#777; margin:0; }

/* Slogan */
#sp-slogan{ background-color:var(--teal-dark); color:#fff; padding:30px 0; }
#sp-slogan h3{ font-weight:700; }

/* Bottom */
#sp-bottom{ background-color:#000; color:#fff; padding:60px 0; }
#sp-bottom h2{ font-size:1.15rem; color:#fff; background:#000; }
#sp-bottom p, #sp-bottom h4{ color:#fff; font-size:.92rem; }
.social-icons a{ color:#fff; font-size:1.7rem; margin-right:16px; }
.social-icons a:hover{ color:var(--teal); }

/* Footer */
#sp-footer{ background-color:#808080; color:#fff; padding:14px 0; font-size:.85rem; text-align:center; }
#sp-footer a{ color:#fff; text-decoration:underline; }

/* Generic content sections reused across pages */
.section-pad{ padding:50px 0; }
.section-pad h1{ color:#00ccff; }
.section-pad h1 span, .card-title-teal{ color:#00ccff; }
.two-col-figure img{ max-width:100%; border-radius:6px; margin-bottom:16px; }
ul.simple-list{ padding-left:1.2rem; }
ul.simple-list li{ margin-bottom:8px; }
.list-links li{ margin-bottom:10px; }


.section-pad{
    padding:70px 0;
    background:#f7f7f7;
}

.profile-card{
    text-align:center;
    margin-bottom:40px;
}

.profile-card .avatar{
    width:220px;
    height:220px;
    margin:0 auto 20px;
    overflow:hidden;
    border:4px solid #fff;
    border-radius:0;          /* Square image */
    box-shadow:0 4px 15px rgba(0,0,0,.15);
    background:#fff;
}

.profile-card .avatar img{
    width:100%;
    height:100%;
    object-fit:fill;         /* Change to fill if you don't want cropping */
    transition:.4s;
}

.profile-card:hover .avatar img{
    transform:scale(1.05);
}

.profile-card h2{
    font-size:18px;
    font-weight:700;
    color:#8b0000;
    margin-bottom:8px;
    text-transform:uppercase;
    font-family:'Poppins',sans-serif;
}

.profile-card h3{
    font-size:20px;
    font-weight:600;
    color:#222;
    margin-bottom:8px;
    font-family:'Poppins',sans-serif;
}

.profile-card p{
    font-size:16px;
    color:#777;
    margin:0;
}

@media (max-width:768px){

.profile-card .avatar{
    width:150px;
    height:150px;
}

.profile-card h3{
    font-size:18px;
}

}