/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* General ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
body {
  background: rgba(153, 211, 213, 0.32);
  margin: 0;
  padding: 0;
  font-family: 'Varela Round', sans-serif;
  color: #354b5e;
}

p, li {
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 28px;
  color: #666;
  list-style: none;
}

.header-text {
  position: relative;
  top: 29%;
  font-size: 35px;
  text-align: center;
  margin-bottom: 40px;
}

.header-text span {
  font-family: 'Allerta Stencil', sans-serif;
  padding: 8px;
  font-weight: bold;
  border-bottom: 2px solid;
}

/* Divider banner */
.divider {
  height: 150px;
  width: 100%;
  background-attachment: inherit;
  margin: 45px 0 52px;
  text-align: center;
  color: white;
  background: url(../images/divider.jpg) no-repeat fixed center;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Header & Navbar Adjustment ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.header {
  margin-top: 10px;
  padding: 20px 0; /* smaller padding */
}

ul.nav.navbar-nav li a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

ul.nav.navbar-nav li a:hover { color: #007bff; }

li.selected a {
  color: #007bff;
  font-weight: 700;
}

.logo { width: 220px; height: auto; }

@media (max-width: 768px){
  .logo { width: 160px; top: 0; }
  ul.nav.navbar-nav li a { font-size: 14px; padding: 8px 12px; }
}

.col-md-4.subscribe-form { margin-bottom: 49px; }

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Vision & Mission ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.vision-bar {
  position: relative;
  background-color: #e8f7f6;
  padding: 60px 20px 40px 20px;
  text-align: center;
  border-bottom: 3px solid #68abbb;
  overflow: hidden;
}

.vision-bar .vision-icon-wrapper {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50%;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  font-size: 2rem;
  color: #3498db;
  animation: pop-in 1s ease-out forwards;
}

.vision-bar p {
  font-size: 1.3rem;
  font-weight: 500;
  color: #2c3e50;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

@keyframes pop-in {
  0% { transform: translateX(-50%) scale(0); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.2); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); }
}

.mission {
  position: relative;
  background-color: #fff;
  padding: 80px 20px 60px 20px;
  text-align: center;
  border-top: 3px solid #68abbb;
}

.mission .mission-icon-wrapper {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #68abbb;
  border-radius: 50%;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  font-size: 2rem;
  color: #fff;
  animation: pop-in 1s ease-out forwards;
}

.mission h2 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 700;
}

.mission p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #555;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .vision-bar p, .mission p { font-size: 1.1rem; }
  .mission h2 { font-size: 1.7rem; }
  .vision-bar .vision-icon-wrapper, .mission .mission-icon-wrapper { padding: 20px; font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .vision-bar p, .mission p { font-size: 1rem; padding: 0 10px; }
  .mission h2 { font-size: 1.5rem; }
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Fun Facts ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.fun-fact {
  background: none;
  margin-top: 0;
  padding: 66px 0;
}

@media (min-width: 991px){
  .fun-fact {
    margin-top: 10px;
    background: url(../images/donate.jpg) no-repeat fixed center;
    background-size: cover;
    padding: 66px 0;
  }
  .milestone-counter { background: rgba(112, 159, 205, 0.46); padding: 40px 10px; }
}

.milestone-counter { background: rgba(0,0,0,0.7); padding: 40px 10px; }
.stat { padding: 150px auto; text-align: center; }
.highlight { color: white; padding: 20px 0; font-weight: bold; display: block; overflow: hidden; margin-bottom: 0; font-size: 48px; }
.stat i { color: #F9F9F9; }
.milestone-details { font-weight: bold; font-size: 18px; color: #FFF6F6; }

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Team ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.avatar-team-member {
  width: 150px; height: 150px; overflow: hidden; margin: auto; border-radius: 50%;
  display: block; margin-bottom: 1em;
}
.avatar-team-member img { width: 200px; height: auto; }
#team { border-bottom: none; }
.team-members .member { margin: 15px auto; cursor: default; overflow: hidden; }
.team-members .member .member-inner { position: relative; }
.team-members .member a.team-image { display: block; width: 100%; height: auto; z-index: 2; }
.team-members .member a.team-image img { width: 100%; }
.inner-details .member-details {
  position: absolute; width: 100%; left: 0; height: 100%; padding: 15px; bottom: 100%; margin: 0;
  z-index: 3; opacity: 0.9; background: #68ABBB; transition: all 0.4s;
}
.inner-details .member-details .member-details-inner {
  position: relative; top: 50%; text-align: center; transform: translateY(-50%);
}
.team-members .member-details .member-name { color: white; margin-top: 0; padding-top: 0; font-size: 30px; }
.team-members .member-details .member-position { color: #8BC3A3; font-size: 13px; }
.team-members .member-details .member-description { color: #fff; font-size: 13px; }
.member .member-details .member-details-inner .socials a {
  display: inline-block; color: white; font-size: 1.2em; line-height: 40px; width: 40px; height: 40px;
  background: rgba(0,0,0,0.25); transition: all 0.3s; border-radius: 50%;
}
.team-members .member:hover .member-details { bottom: 0; }
.member .member-details .member-details-inner .socials a:hover { background: rgba(0,0,0,1); }

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Themes (Bootstrap 3-friendly grid) ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.themes-section {
  padding: 50px 0;
  display: block; /* ensure we don't flex the whole section */
}
.themes-section [class*="col-"] { margin-bottom: 30px; }

/* card shell */
.theme-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* equal-height layout inside card */
.theme-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

/* icon chip */
.theme-icon {
  width: 70px; height: 70px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin: 0 auto 14px;
}

/* gradients */
.bg-gradient1 { background: linear-gradient(45deg, #ff7b7b, #ff5c5c); }
.bg-gradient2 { background: linear-gradient(45deg, #7bb7ff, #3498db); }
.bg-gradient3 { background: linear-gradient(45deg, #7bff9e, #28a745); }
.bg-gradient4 { background: linear-gradient(45deg, #f0a77b, #fd7e14); }
.bg-gradient5 { background: linear-gradient(45deg, #d77bff, #9b59b6); }
/* new: Community Empowerment */
.bg-gradient6 { background: linear-gradient(45deg, #6bd3d3, #1abc9c); }

/* titles & text */
.theme-card h5 {
  font-size: 1.15em;
  line-height: 1.35;
  margin: 6px 0 10px;
  color: #2c3e50;
}
.theme-card p { color: #555; margin-bottom: 14px; }

/* bullet list with FontAwesome checks */
.theme-card ul {
  padding-left: 0; margin: 0 0 12px; list-style: none;
}
.theme-card ul li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
}
.theme-card ul li:before {
  content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #28a745;
}

/* CTA at bottom */
.theme-card .btn { margin-top: auto; }

/* hover */
.theme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
  border-color: #cfd9e2;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Metrics ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 50px 0;
  background: #eef6f9;
  text-align: center;
}
.metric {
  flex: 1 1 200px;
  background: #fff;
  border-radius: 10px;
  padding: 24px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.metric-number {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: #3498db;
}
.metric-label {
  margin-top: 10px;
  font-size: 1.1rem;
  color: #333;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Footer ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
#footer {
  background: #198a75;
  color: #fff;
  padding: 40px 15px;
}
#footer h4 { font-weight: 700; margin-bottom: 15px; }
#footer ul { list-style: none; padding: 0; }
#footer ul li { display: inline-block; margin-right: 10px; color: #ccc; }
#footer .social-share i { margin: 0 5px; color: #fff; transition: color 0.3s; }
#footer .social-share i:hover { color: #007bff; }
#footer .footer-text, #footer .footer-text1 { color: #ccc; margin: 5px 0; }

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Scroll Animation ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}
[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/******* Carousel & Connect Widgets ******/
/*-------------------------------------------------------------------------------------------------------------------------------*/
.carousel {
  position: relative;
  top: 30px;
  margin-bottom: 35px;
  width: 100%;
}
.carousel-inner img { width: 100%; height: auto; max-height: 500px; }
.carousel-control.left, .carousel-control.right { background: none; }

.carousel-caption {
  font-family: 'Poiret One', cursive;
  text-transform: uppercase;
  font-size: 50px;
  font-weight: bold;
  background: rgba(152, 168, 173, 0.43);
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
}
@media (max-width: 600px) {
  .carousel-caption { font-size: 24px !important; background: none; }
}

.connect-widget { margin: 0 auto; width: 100%; text-align: center; }
.follow-block {
  display: inline-block; position: relative; padding: 19px 15px 20px 19px; cursor: pointer; width: 120px;
  text-align: center; text-decoration: none;
}
.follow-block i { font-size: 24px; color: #fff; }
.follow-block h6 { color: #fff; padding-top: 14px; }
.follow-block span { font-size: 20px; color: #fff; }
.bg-blue { background: #55acee; }
.bg-pink { background: #ea4c89; }
.bg-dark-blue { background: #35465c; }
.bg-red { background: #dd4b39; }
.bg-blue-f { background: #3f729b; }
.bg-extra-red { background: #c92228; }
/* ===================== EVENTS PAGE (slideshow + overview) ===================== */

/* Tabs polish */
#exTab2 .nav-tabs { margin-bottom: 15px; }
#exTab2 .nav-tabs > li > a {
  font-weight: 600;
  border-radius: 0;
}
#exTab2 .nav-tabs > li.active > a,
#exTab2 .nav-tabs > li.active > a:focus,
#exTab2 .nav-tabs > li.active > a:hover {
  border-color: #ddd #ddd transparent;
}

/* Overview list cards */
.blog-event{
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.blog-event:last-child { border-bottom: 0; }
.blog-event .featured-img img{ border-radius: 6px; display: block; }
.blog-event .featured-blog h3{ margin: 0 0 6px; font-size: 18px; }
.button-info{ margin-right: 8px; }

/* Center logo in navbar (keeps it tidy) */
.navbar .logo{ max-height: 48px; width: auto; }

/* -------- Recent Event slider -------- */
.recent-event { margin-top: 10px; }
.recent-title { font-weight: 700; margin: 10px 0 15px; }
.recent-event-slider { list-style: none; margin: 0; padding: 0; }
.recent-event-slider li { position: relative; overflow: hidden; border-radius: 8px; }
.recent-event-slider img { width: 100%; height: auto; display: block; }

/* Caption overlay */
.recent-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.recent-summary{ margin-top: 10px; }

/* bxSlider: pager dots */
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #cfd9e2;
}
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #3498db;
}

/* bxSlider: custom arrows (no image assets needed) */
.bx-wrapper .bx-controls-direction a {
  background: none !important;       /* remove default sprite */
  text-indent: 0 !important;
  width: 36px; height: 36px;
  line-height: 36px;
  top: 50%; margin-top: -18px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.45);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  text-align: center;
  font-size: 22px;
}
.bx-wrapper .bx-prev::after { content: "‹"; }
.bx-wrapper .bx-next::after { content: "›"; }

/* Responsive tweaks */
@media (max-width: 768px){
  .recent-caption { font-size: 13px; padding: 8px 10px; }
  .bx-wrapper .bx-controls-direction a {
    width: 30px; height: 30px; line-height: 30px; font-size: 18px; margin-top: -15px;
  }
  .blog-event { flex-direction: column; }
}