/* =========================
   COLOR PALETTE
   ========================= */
:root {
  --kale: #173B3F;
  --opal: #B0D6CE;
  --offwhite: #E7F2F0;
  --emerald: #56C870;
  --charcoal: #333333;
  --white: #ffffff;
}

/* =========================
   BASE
   ========================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  padding-top: 100px; /* space for the fixed 100px-tall header */
}

a {
  color: var(--kale);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover {
  color: var(--emerald);
}

.section {
  padding: 80px 0;
}
.bg-offwhite {
  background: var(--offwhite);
}
.text-kale {
  color: var(--kale) !important;
}
.shadow-soft {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06) !important;
}
.rounded-14 {
  border-radius: 14px !important;
}

/* =========================
   NAVBAR / HEADER
   ========================= */

/* fixed navbar spans full width, tall enough for logo */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;  /* matches body padding-top */
  z-index: 1030;
}

/* base navbar styling and transitions */
.navbar {
  padding: 1rem 1rem;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}

/* brand container */
.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  letter-spacing: .5px;
  font-weight: 600;
}

/* logo image */
.logo {
  flex-shrink: 0;            /* never shrink in flex container */
  width: 180px;              /* reserved display width */
  height: 60px;              /* reserved display height */
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.35));
}

/* keep logo same on mobile */
@media (max-width: 767px) {
  .logo {
    width: 180px;
    height: 60px;
  }
}

/* transparent versus solid navbar on scroll */
.nav-transparent {
  background: rgba(23,59,63,.65);
  backdrop-filter: blur(8px);
}
.nav-solid {
  background: var(--kale);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

/* link and dropdown styling */
.navbar-dark .nav-link {
  color: #e7f2f0;
  font-weight: 500;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: var(--emerald);
}
.navbar-dark .dropdown-menu {
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: .5rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.dropdown-item {
  font-size: .9rem;
}
.dropdown-item:hover {
  background: var(--offwhite);
  color: var(--kale);
}
.navbar-dark .dropdown-toggle::after {
  border-top-color: #e7f2f0;
}

/* =========================
   HERO SLIDER
   ========================= */
.hero .carousel-item {
  height: 80vh;
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(23,59,63,.55);
}
.hero .carousel-caption {
  bottom: 20%;
  z-index: 3;
}
.shape-divider-bottom {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 80px;
  background: url('assets/images/shape-bottom.svg') no-repeat center bottom/cover;
  z-index: 2;
}

/* =========================
   SERVICE CARDS (ICON STYLE)
   ========================= */
/* generic icon-style cards */
.service-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 32px 28px 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: all .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 22px rgba(0,0,0,.09);
}
.service-card .icon-wrap {
  width: 58px;
  height: 58px;
  background: var(--opal);
  color: var(--kale);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.service-card h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.service-card p {
  margin-bottom: 0;
  font-size: .9rem;
  color: #555;
}
.service-card a.stretched-link {
  font-weight: 500;
  color: var(--emerald);
}

/* =========================
   SERVICE CARDS (IMAGE STYLE)
   ========================= */
.service-card-img {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.service-card-img .img-wrap {
  height: 180px;
  overflow: hidden;
}
.service-card-img .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.service-card-img:hover .img-wrap img {
  transform: scale(1.08);
}
.service-card-img .content {
  padding: 22px 24px 32px;
}
.service-card-img h4 {
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--kale);
}
.service-card-img p {
  margin-bottom: 0;
  font-size: .92rem;
  color: #555;
}
.service-card-img a.stretched-link {
  margin-top: 12px;
  display: inline-block;
  font-weight: 500;
  color: var(--emerald);
}

/* =========================
   WHY LIST
   ========================= */
.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1rem;
}
.why-list i {
  color: var(--emerald);
  font-size: 1.1rem;
  line-height: 1.2;
}
/* Projects grid */
.project-card {
  transition:transform .25s,box-shadow .25s;
}
.project-card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}

/* Make sure modals scroll on small screens */
.modal-body { max-height:75vh; overflow-y:auto; }

/* Utility tweaks (already in your style.css) */
.img-thumbnail { object-fit:cover; }
@media (max-width:767px){
  .project-card img { height:160px; }
}

/* =========================
   TESTIMONIALS
   ========================= */
.testimonial {
  max-width: 560px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  margin: auto;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.testimonial p {
  font-size: 1rem;
  color: #555;
}
.testimonial span {
  font-size: .85rem;
  color: #888;
}
/* =========================
   CAROUSEL CONTROLS – make arrows emerald
   ========================= */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  /* adjust these until you get the exact green you want */
  filter: invert(44%) sepia(74%) saturate(423%) hue-rotate(94deg) brightness(95%) contrast(88%);
}
/* =========================
   CTA
   ========================= */
.cta-section {
  background: var(--kale);
  padding: 90px 0;
}

/* =========================
   BUTTONS
   ========================= */
.btn-emerald {
  background: var(--emerald);
  border: none;
  color: #fff;
}
.btn-emerald:hover {
  background: #3fae50;
  color: #fff;
}

/* =========================
   WHATSAPP FLOAT
   ========================= */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: var(--emerald);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: background .2s;
}
.whatsapp-float:hover {
  background: #3fae50;
}

/* =========================
   FOOTER & STACKING FIX
   ========================= */
footer {
  position: relative;
  z-index: 10;
  background: var(--kale);
  color: #fff;
}

/* ensure hero layers under footer */
.hero,
.hero .carousel,
.hero .carousel-item {
  position: relative;
  z-index: 1;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991px) {
  .hero .carousel-caption {
    bottom: 15%;
  }
}
@media (max-width: 767px) {
  .hero .carousel-item {
    height: 65vh;
  }
  .hero .carousel-caption {
    bottom: 12%;
  }
  .section {
    padding: 60px 0;
  }
  .navbar {
    padding: .75rem .75rem;
  }
  body {
    padding-top: 100px; /* keep enough space for header */
  }
  .logo {
    width: 180px;
    height: 60px;
  }
}
/* =========================
   FORCE‑SHOW WHATSAPP FLOAT
   ========================= */
.whatsapp-float {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--emerald) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 28px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
  z-index: 9999 !important;
}
.whatsapp-float:hover {
  background: #3fae50 !important;
}

#testimonials .card {
  border-radius: 1rem;
}
#testimonials h2 {
  font-weight: 600;
}