/* Homepage why-choose-us section */
#services {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(13, 91, 199, 0.09), transparent 34%),
    linear-gradient(135deg, #eef5fd 0%, #f7faff 55%, #edf4fc 100%);
}

#services::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -120px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(13, 91, 199, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(13, 91, 199, 0.025),
    0 0 0 110px rgba(13, 91, 199, 0.015);
  pointer-events: none;
}

#services .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.65fr);
  gap: 62px;
  align-items: center;
}

#services .section-title {
  margin: 0;
  text-align: left;
}

#services .section-title .small-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #d4e3f5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0b4da2;
  font-size: 12px;
  letter-spacing: 1.35px;
}

#services .section-title .small-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e31d2b;
  box-shadow: 0 0 0 4px rgba(227, 29, 43, 0.1);
}

#services .section-title h2 {
  margin: 18px 0 0;
  color: #101d35;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.4px;
}

#services .section-description {
  margin: 18px 0 0;
  color: #617086;
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
}

#services .section-title .line {
  width: 64px;
  height: 4px;
  margin: 22px 0 0;
  background: linear-gradient(90deg, #073b8f, #e31d2b);
}

.why-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 12px 17px;
  border: 1px solid #073b8f;
  border-radius: 10px;
  background: #073b8f;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 10px 22px rgba(7, 59, 143, 0.18);
  transition: transform 180ms ease, background-color 180ms ease;
}

.why-contact-link:hover {
  color: #fff;
  background: #062f72;
  transform: translateY(-2px);
}

#services .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

#services .row > * {
  width: auto;
  padding: 0;
}

#services .why-box {
  position: relative;
  height: 100%;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(211, 224, 240, 0.95);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
  box-shadow: 0 8px 24px rgba(7, 29, 73, 0.055);
  backdrop-filter: blur(8px);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

#services .why-box::after {
  position: absolute;
  top: 17px;
  right: 18px;
  color: #dce7f4;
  font-size: 29px;
  line-height: 1;
  font-weight: 800;
}

#services .row > :nth-child(1) .why-box::after { content: "01"; }
#services .row > :nth-child(2) .why-box::after { content: "02"; }
#services .row > :nth-child(3) .why-box::after { content: "03"; }
#services .row > :nth-child(4) .why-box::after { content: "04"; }
#services .row > :nth-child(5) .why-box::after { content: "05"; }
#services .row > :nth-child(6) .why-box::after { content: "06"; }

#services .why-box:hover {
  transform: translateY(-5px);
  border-color: #bfd2e9;
  box-shadow: 0 18px 38px rgba(7, 29, 73, 0.11);
}

#services .why-box i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 17px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0d5bc7, #073b8f);
  color: #fff;
  font-size: 21px;
  box-shadow: 0 8px 17px rgba(7, 59, 143, 0.18);
  transition: transform 200ms ease;
}

#services .why-box:hover i {
  transform: rotate(-4deg) scale(1.06);
}

#services .why-box h5 {
  max-width: 190px;
  margin: 0 0 8px;
  color: #14233a;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 760;
}

#services .why-box p {
  max-width: 230px;
  margin: 0;
  color: #69778b;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  #services {
    padding: 80px 0;
  }

  #services .container {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  #services .section-title {
    max-width: 690px;
  }
}

@media (max-width: 575.98px) {
  #services {
    padding: 70px 0;
  }

  #services .section-title h2 {
    font-size: 34px;
    letter-spacing: -0.8px;
  }

  #services .row {
    grid-template-columns: 1fr;
  }

  #services .why-box {
    min-height: 0;
    padding: 20px;
  }
}