/* =====================================================
   SITE-WIDE BACKGROUND IMAGE
   ===================================================== */
body {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.navbar-organization-title{
  color: #007ab8;

}

/* =====================================================
   NAVBAR — has background color
   ===================================================== */
.navigation {
  background-color: #fff;
}

/* =====================================================
   SECTION SIDE MARGINS — background peeks through sides
   Banner (.banner) and inner-page banners (.page-title)
   stay full-width; everything else gets pulled in.
   overflow-x: hidden prevents Bootstrap row negative margins
   from bleeding into the background strip.
   ===================================================== */
section:not(.banner):not(.page-title) {
  margin-left: 10rem;
  margin-right: 10rem;
  background-color: #fff;
  overflow-x: hidden;
}

/* Scale margins up so the background strip stays prominent on wider displays */
@media (min-width: 1920px) {
  section:not(.banner):not(.page-title) {
    margin-left: 14rem;
    margin-right: 14rem;
  }
}

@media (min-width: 2560px) {
  section:not(.banner):not(.page-title) {
    margin-left: 20rem;
    margin-right: 20rem;
  }
}

@media (min-width: 3200px) {
  section:not(.banner):not(.page-title) {
    margin-left: 26rem;
    margin-right: 26rem;
  }
}

/* Flatten the gray-bg tint on content sections — white is cleaner.
   Exclude .service so it can stay transparent. */
section.gray-bg:not(.banner):not(.page-title):not(.service) {
  background-color: #fff !important;
}

/* Featured services: transparent section so it floats on the bg image.
   Cards (.service-item) keep their own white background from novena.css. */
 section.features {
  background-color: transparent !important;
 }

section.service {
  background-color: transparent !important;
  margin-top: 2.5rem;
}

/* Cap service card width on large screens so they don't over-stretch */
@media (min-width: 2800px) {
  .service .service-item {
    max-width: 650px;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 3200px) {
  .service .service-item {
    max-width: 750px;
    min-height: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}


section.about, section.blog-wrap,
 section.careers ,section.contact-page
 ,section.faq , section.department-single{
  margin-top: 2.5rem;
  border-radius: 30px;

} 

/* Title row in featured services gets its own white background */
.service-title-row {
  /* background-color: #fff;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem; */
  color: white;
}

.section-title, .service-title h2{
  color: white;

}

/* Mobile: keep a small strip visible without squashing content */
@media (max-width: 576px) {
  section:not(.banner):not(.page-title) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* =====================================================
   FOOTER — brand gradient
   ===================================================== */
.footer-gradient {
  background: linear-gradient(90deg, #004e7c 0%, #007ab8 100%) !important;
  margin-top: 2.5rem;
}

.footer-gradient,
.footer-gradient h4,
.footer-gradient h6,
.footer-gradient p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.footer-gradient .widget h4 {
  color: #fff !important;
}

.footer-gradient .copyright,
.footer-gradient .copyright a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-gradient .footer-menu a,
.footer-gradient .footer-contact-block span,
.footer-gradient a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-gradient .footer-menu a:hover,
.footer-gradient a:hover {
  color: #fff !important;
  text-decoration: none;
}

.footer-gradient .footer-btm {
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.footer-gradient .widget .divider,
.footer-gradient .divider {
  background: rgba(255, 255, 255, 0.45) !important;
}

.footer-gradient .footer-socials li a {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.footer-gradient .footer-socials li a:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

.footer-gradient .backtop {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* =====================================================
   text-ratuwa
   ===================================================== */

/* CTA banner height scaling */
.cta-banner-section {
  padding: 60px 0;
}
@media (min-width: 1200px) {
  .cta-banner-section { padding: 80px 0; }
}
@media (min-width: 1400px) {
  .cta-banner-section { padding: 100px 0; }
}
@media (min-width: 1600px) {
  .cta-banner-section { padding: 130px 0; }
}
@media (min-width: 1920px) {
  .cta-banner-section { padding: 160px 0; }
}
@media (min-width: 2560px) {
  .cta-banner-section { padding: 200px 0; }
}
@media (min-width: 3200px) {
  .cta-banner-section { padding: 260px 0; }
}
/* Banner height scaling for wider screens */
@media (min-width: 1200px) {
  .banner {
    min-height: 520px;
  }
  .banner .block {
    padding: 80px 0px 140px;
  }
}

@media (min-width: 1400px) {
  .banner {
    min-height: 560px;
  }
  .banner .block {
    padding: 90px 0px 150px;
  }
}

@media (min-width: 1600px) {
  .banner {
    min-height: 680px;
  }
  .banner .block {
    padding: 110px 0px 180px;
  }
}

@media (min-width: 1920px) {
  .banner {
    min-height: 800px;
  }
  .banner .block {
    padding: 130px 0px 200px;
  }
}

@media (min-width: 2560px) {
  .banner {
    min-height: 1000px;
  }
  .banner .block {
    padding: 160px 0px 240px;
  }
}

@media (min-width: 3200px) {
  .banner {
    min-height: 1200px;
  }
  .banner .block {
    padding: 200px 0px 280px;
  }
}