:root {
  --brand-blue: #2b77a1;
  --brand-blue-dark: #1f5977;
  --brand-accent: #e7f2f8;
  --brand-grey: #6c757d;
}

/* General */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
.section-title {
  color: var(--brand-blue);
  text-align: center;
  font-weight: 700;
}
a {
  color: var(--brand-blue);
}
a:hover {
  color: var(--brand-blue-dark);
}

.mh-1 {
  max-height: 140px;
}
.w-85 {
  width: 85% !important;
}

/* Full-width responsive banner */
.hero-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Responsive height with cropping */
.hero-image {
  width: 100%;
  height: 40vh; /* responsive height: 40% of viewport */
  min-height: 250px; /* ensures it doesn�t get too short */
  max-height: 600px; /* optional, prevent it from being too tall */
  object-fit: cover; /* crops top/bottom if needed */
  display: block;
}

/* Overlay pinned to bottom 40% */
.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; /* bottom 40% of banner */
  background: rgba(102, 211, 250, 0.6); /* semi-transparent #66d3fa */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
}

.hero-overlay h2 {
  color: #fff;
  margin: 0;
  font-size: 2rem;
}

/* Topbar */
.topbar {
  /*background: #f8f9fa;*/
}
.topbar a {
  color: #6c757d;
}

/* Navbar */
.navbar .brand-text {
  letter-spacing: 1px;
}
.navbar .btn-primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.navbar .btn-primary:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}
.navbar-logo img {
  max-height: 8rem;
}

/* Hero */
.hero-carousel .carousel-item img {
  max-height: 560px;
  object-fit: cover;
}
.overlay-gradient {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 58, 83, 0.55) 80%
  );
}
.hero-carousel .carousel-caption {
  bottom: 2.5rem;
}
.hero-carousel .carousel-caption h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Position logo so it overlaps carousel */
.logo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(
    0%
  ); /* adjust this to control how much overlaps carousel */
  z-index: 100;
  display: block;
}

/* Style the logo image */
.logo-overlay img {
  max-width: 300px;
  width: 100%;
  height: auto;
  /*filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.4));*/
}

/* Responsive tweak for smaller screens */
@media (max-width: 576px) {
  .logo-overlay {
    transform: translateY(30%);
  }

  .logo-overlay img {
    max-width: 200px;
  }
}

/* Intro */
.intro .btn-primary {
  padding: 0.8rem 1.4rem;
}

/* Services */
.service-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-card .service-icon {
  font-size: 2rem;
  color: var(--brand-blue);
}
.service-card p {
  flex-grow: 1;
}
.service-card .btn {
  background: #f4ede6;
  border: 0;
  color: #7b6b5d;
  margin-top: auto;
}
.service-card .btn:hover {
  background: #eadfce;
  color: #5f4f40;
}

/* Projects */
.project-snippet img {
  object-fit: cover;
}
.project-snippet p {
  color: #333;
}

/* What we do list */
.what-we-do .list-checks {
  list-style: none;
  padding: 0;
  margin: 0;
}
.what-we-do .list-checks li {
  /*padding:.55rem 0;*/
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 18px;
}
.what-we-do .list-checks h1 {
  margin-top: -1.5rem;
}
/*.what-we-do .list-checks i { color:#20c997; font-size:1.25rem; margin-top:.15rem; }*/
.what-we-do .list-checks i {
  color: #20c997;
}

/* Testimonials */
.testimonials .blockquote {
  font-size: 1.1rem;
}
.testimonials .carousel-indicators button {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

/* Footer 
.footer{background:linear-gradient(180deg, #f8f9fb, #f3f5f7);}*/

.footer-text,
.footer-text a,
.footer-text a:hover,
.footer-text a:visited {
  color: #b6b6b6;
  text-decoration: none;
}
.footer-text-bold {
  color: #6e6e6e;
}

/* Custom */
.brand-blue {
  color: var(--brand-blue) !important;
}

.background-brand-blue {
  background-color: var(--brand-blue);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero-carousel .carousel-item img {
    max-height: 420px;
  }
  .navbar .btn-primary {
    padding: 0.5rem 0.9rem;
  }
}
@media (max-width: 767.98px) {
  .hero-carousel .carousel-caption {
    bottom: 1.25rem;
  }
  .hero-carousel .carousel-caption h1 {
    font-size: 1.25rem;
  }
  .service-card .service-icon {
    font-size: 1.6rem;
  }
  .intro p.lead {
    font-size: 1rem;
  }
  .section-title {
    font-size: 1.35rem;
  }
  .project-snippet img {
    width: 96px;
    height: 64px;
  }
}