.bg-image-top {
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg-image-bottom {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}


.content-area .content-area { background-image:none !important; }












/* Social Card Styles */
.social-card {  width: 100%;  background: #fff;   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  overflow: hidden;  text-align: center;  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.social-card:hover {  transform: translateY(-5px);  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);}
.social-card-image {  background: #f4f4f4;}
.social-card-image img {  width: 100%;  height: auto;  object-fit: cover;}
.social-card-content {  padding: 15px;}
p.social-card-title {  font-size: 18px;  margin: 0;}
.social-card-icons {  margin: 10px 0;}
.social-card-icons i {  font-size: 24px;  margin: 0 5px;  color: var(--primary);}
.social-card-icons i:hover {  color:var(--primary)  transform: scale(1.1);}
.social-card-link {  display: inline-block;  margin-top: 10px;  color: #fff;  padding: 10px 20px;  text-decoration: none;  border-radius: 4px;  font-size: 14px;  transition: background-color 0.3s ease;}
.social-card-link:hover {  background-color: #0056b3; }












/* wrapper & background media */
.video-banner-style-2 .video-banner-wrap {
  position: relative;
  overflow: hidden;
  height: calc((var(--vh, 1vh) * 100) - var(--header-height));
  min-height: 600px;
  max-height: 1200px;
}

/* full‑cover video / img */
.video-banner-style-2 .video-banner-wrap video,
.video-banner-style-2 .video-banner-wrap ._img-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hide play button */
.video-banner-style-2 .video-banner-play-btn {
  display: none;
}

/* right‑side panel */
.video-banner-style-2 .video-banner-inner {
  position: absolute;
  right: 15%;
  bottom: 0;
  width: 40%;
  max-width: 550px;
  background: rgba(53, 142, 152, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  box-sizing: border-box;
  text-align: left;
  border-top: 10px solid #000;
}

/* text & buttons */
.video-banner-style-2 .video-banner-caption {
  color: #fff;
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  opacity: 0.85;
  display: block;
}
.video-banner-style-2 .video-banner-title {
  color: #fff;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: var(--font-weight-bold);
}
.video-banner-style-2 .video-banner-des {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  opacity: 0.9;
}
.video-banner-style-2 .video-banner-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.video-banner-style-2 .video-banner-btns a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: var(--border-radius);
  transition: all var(--transition-300);
}
.video-banner-style-2 .video-banner-btns a:hover {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}

/* ---- RESPONSIVE ADJUSTMENTS ---- */

/* up to 1200px: slightly wider panel, less padding */
@media (max-width: 1200px) {
  .video-banner-style-2 .video-banner-inner {
    width: 45%;
    padding: 50px;
  }
}

/* up to 992px: even wider panel, still side‑anchored */
@media (max-width: 992px) {
  .video-banner-style-2 .video-banner-inner {
    width: 60%;
    padding: 40px;
  }
  .video-banner-style-2 .video-banner-title {
    font-size: 2.5rem;
  }
}

/* up to 768px: panel shifts further inward */
@media (max-width: 768px) {
  .video-banner-style-2 .video-banner-inner {
    width: 75%;
    right: 10%;
    padding: 30px;
  }
  .video-banner-style-2 .video-banner-title {
    font-size: 2rem;
  }
  .video-banner-style-2 .video-banner-des {
    font-size: 0.95rem;
  }
}
@media (max-width: 576px) {
  .video-banner-style-2 .video-banner-inner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(53, 142, 152, 0.85);
    border-top: 10px solid #000; /* if you still want the top border */
  }
  .video-banner-style-2 .video-banner-title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .video-banner-style-2 .video-banner-caption {
    font-size: 0.85rem;
  }
  .video-banner-style-2 .video-banner-des {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }
}














/*!
 |-----------------------------------------------------------------------------------------
 |
 |
 | Donation Form - Minimal - Start
 |
 |
 |-----------------------------------------------------------------------------------------
*/
.donation-form-minimal .donation-form-amounts-btns {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}
.donation-form-minimal .donation-form-amounts-btns .button {
  padding: 0 10px;
  margin-bottom: 10px;
}
.donation-form-minimal .donation-form-amounts-btns .button span {
  display: block;
  text-align: center;
  font-weight: var(--font-weight-semi-bold);
  transition: var(--transition-200);
}

.donation-form-minimal .donation-form-amounts-btns .button span {
  color: var(--white);
  background-color: var(--primary);
}
.donation-form-minimal .donation-form-amounts-btns .button:hover span, .donation-form-minimal .donation-form-amounts-btns .button.selected span {
  color: var(--white);
  background-color: var(--primary-6);
}
.donation-form-minimal .donation-form-amounts-btns .button.border span {
  color: var(--primary);
  border: 1px solid var(--primary);
  background-color: transparent;
}
.donation-form-minimal .donation-form-amounts-btns .button.border:hover span, .donation-form-minimal .donation-form-amounts-btns .button.border.selected span {
  color: var(--white);
  border-color: var(--primary);
  background-color: var(--primary);
}

.donation-form-minimal .donation-form-amounts-btns .button.round span {
  overflow: hidden;
  border-radius: 200px;
}
.donation-form-minimal .donation-form-amounts-btns .button.square span {
  overflow: hidden;
  border-radius: var(--border-radius);
}

.donation-form-minimal .donation-form-amounts-btns .button {
  width: 100%;
}
.donation-form-minimal .donation-form-amounts-btns .button.small {
  flex: 0 0 16.666666%;
  max-width: 16.666666%;
}
@media (max-width: 767px) {
  .donation-form-minimal .donation-form-amounts-btns .button.small {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}
@media (max-width: 575px) {
  .donation-form-minimal .donation-form-amounts-btns .button.small {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.donation-form-minimal .donation-form-amounts-btns .button.small span {
  padding: 18px;
}
.donation-form-minimal .donation-form-amounts-btns .button.medium {
  flex: 0 0 33.333333%;
  max-width: 100%;
  width: 100%;
}
@media (max-width: 575px) {
  .donation-form-minimal .donation-form-amounts-btns .button.medium {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.donation-form-minimal .donation-form-amounts-btns .button.medium span {
  font-size: 20px;
  padding: 30px;
  width: 100%;
  border-radius: 10px;
}
.donation-form-minimal .donation-form-amounts-btns .button.large {
  flex: 0 0 50%;
  max-width: 50%;
}
.donation-form-minimal .donation-form-amounts-btns .button.large span {
  font-size: 30px;
  padding: 60px;
}

.donation-form-minimal .donation-form-recurring table {
  margin-bottom: 0;
}

.donation-form-minimal .mwPayment-hint {
  display: none;
}

/*
 |-----------------------------------------------------------------------------------------
 |
 |
 | Donation Form - Minimal - End
 |
 |
 |-----------------------------------------------------------------------------------------
*/