@import url("services.css");

:root {
  --insurance-blue: #0758dc;
  --insurance-navy: #071f5c;
}

.insurance-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e4edf9;
  background: linear-gradient(105deg, #fff 0%, #fbfdff 45%, #edf5ff 100%);
}

.insurance-hero::after {
  position: absolute;
  right: -5rem;
  bottom: -8.4rem;
  width: 38rem;
  height: 14rem;
  border: 1.15rem solid var(--insurance-blue);
  border-left-color: transparent;
  border-radius: 50%;
  content: "";
  opacity: .95;
  transform: rotate(-11deg);
}

.insurance-bubble {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid #b8d5ff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--insurance-blue);
  box-shadow: 0 8px 20px rgba(8, 55, 135, .12);
}

.insurance-bubble svg {
  width: 1.35rem;
  height: 1.35rem;
}

.insurance-bubble--heart { top: 4rem; left: 2rem; }
.insurance-bubble--car { top: 4.5rem; right: .8rem; }
.insurance-bubble--family { bottom: 4rem; left: .5rem; }
.insurance-bubble--plane { right: -.2rem; bottom: 4rem; }

.insurance-faq summary::-webkit-details-marker { display: none; }
.insurance-faq details[open] summary svg { transform: rotate(45deg); }

@media (max-width: 640px) {
  .insurance-hero::after {
    right: -14rem;
    bottom: -9rem;
  }

  .insurance-bubble {
    width: 2.5rem;
    height: 2.5rem;
  }

  .insurance-bubble--heart { top: 1.25rem; left: .75rem; }
  .insurance-bubble--car { top: 1.5rem; right: .5rem; }
  .insurance-bubble--family { bottom: 1.25rem; left: .5rem; }
  .insurance-bubble--plane { right: .5rem; bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}