/* Full Side Image and Content Multi CTA Hero
   Desktop frame: 1440px
   Content 600 / Gap 100 / Image 640 → with left pad 100
*/

.full-side-image-and-content-multi-cta-hero {
  width: 100%;
  background-color: #143830;
  box-sizing: border-box;
}

.full-side-image-and-content-multi-cta-hero *,
.full-side-image-and-content-multi-cta-hero *::before,
.full-side-image-and-content-multi-cta-hero *::after {
  box-sizing: border-box;
}

.full-side-image-and-content-multi-cta-hero .section-inner {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.full-side-image-and-content-multi-cta-hero .image-column {
  width: 100%;
  order: -1;
  overflow: hidden;
}

.full-side-image-and-content-multi-cta-hero .image-desktop {
  display: none;
}

.full-side-image-and-content-multi-cta-hero .image-mobile {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.full-side-image-and-content-multi-cta-hero .content-column {
  width: 100%;
  padding: 24px 20px 40px;
}

.full-side-image-and-content-multi-cta-hero .content-inner {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 32px;
}

.full-side-image-and-content-multi-cta-hero .section-heading {
  margin: 0;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 46px;
  font-weight: 500;
  font-style: italic;
  line-height: 54px;
  text-align: center;
  text-transform: capitalize;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper,
.full-side-image-and-content-multi-cta-hero .details-wrapper p,
.full-side-image-and-content-multi-cta-hero .details-wrapper li,
.full-side-image-and-content-multi-cta-hero .details-wrapper a,
.full-side-image-and-content-multi-cta-hero .details-wrapper strong,
.full-side-image-and-content-multi-cta-hero .details-wrapper em,
.full-side-image-and-content-multi-cta-hero .details-wrapper ul,
.full-side-image-and-content-multi-cta-hero .details-wrapper ol {
  margin: 0;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper a {
  text-decoration: underline;
  color: inherit;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper strong {
  font-weight: 600;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper > * + * {
  margin-top: 12px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper > *:first-child {
  margin-top: 0;
}

/* Callout = blockquote */
.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote {
  background: #f2f2f2;
  padding: 12px 16px;
  display: flex;
  flex-flow: row nowrap;
  gap: 16px;
  margin: 0;
  border-radius: 2px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote::before {
  content: "";
  width: 4px;
  max-width: 4px;
  flex-shrink: 0;
  align-self: stretch;
  background: #126b57;
  border-radius: 0;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote,
.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote p,
.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote * {
  color: #020202;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper blockquote p {
  margin: 0;
}

/* Checkmark bullets */
.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checked,
.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checkmark {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 6px;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checked li,
.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checkmark li {
  position: relative;
  padding-left: 30px;
  color: #ffffff;
}

.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checked li::before,
.full-side-image-and-content-multi-cta-hero .details-wrapper ul.checkmark li::before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* Figma Frame 1521: yellow circle with cut-out check (evenodd) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM16.345 10.8066C16.7055 10.4461 16.7055 9.86161 16.345 9.50113C15.9845 9.14065 15.4001 9.14065 15.0396 9.50113L11.298 13.2427L9.47692 11.8769C9.06908 11.571 8.4905 11.6537 8.18462 12.0615C7.87873 12.4694 7.96139 13.048 8.36923 13.3538L10.8308 15.2C11.1983 15.4756 11.7125 15.4391 12.0373 15.1143L16.345 10.8066Z' fill='%23EEC433'/%3E%3C/svg%3E");
}

.full-side-image-and-content-multi-cta-hero .button-wrapper {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  gap: 6px;
}

.full-side-image-and-content-multi-cta-hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 24px 32px;
  border-radius: 200px;
  border: 1px solid transparent;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.full-side-image-and-content-multi-cta-hero .btn-yellow {
  background-color: #eec433;
  border-color: #eec433;
  color: #020202;
}

.full-side-image-and-content-multi-cta-hero .btn-yellow:hover {
  opacity: 0.75;
  color: #020202;
  text-decoration: none;
}

.full-side-image-and-content-multi-cta-hero .btn-whatsapp {
  background-color: #25d366;
  border-color: #25d366;
  color: #020202;
}

.full-side-image-and-content-multi-cta-hero .btn-whatsapp:hover {
  opacity: 0.85;
  color: #020202;
  text-decoration: none;
}

.full-side-image-and-content-multi-cta-hero .whatsapp-icon {
  display: flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.full-side-image-and-content-multi-cta-hero .whatsapp-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.full-side-image-and-content-multi-cta-hero .button-arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

/* Tablet: mobile layout, desktop fonts */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .full-side-image-and-content-multi-cta-hero .content-column {
    padding: 24px 5.3333% 40px;
  }

  .full-side-image-and-content-multi-cta-hero .section-heading {
    font-size: 68px;
    line-height: 76px;
  }

  .full-side-image-and-content-multi-cta-hero .button-wrapper {
    flex-flow: row wrap;
  }

  .full-side-image-and-content-multi-cta-hero .btn {
    width: auto;
  }
}

/* Desktop */
@media screen and (min-width: 1024px) {
  .full-side-image-and-content-multi-cta-hero .section-inner {
    flex-flow: row nowrap;
    align-items: stretch;
    /* Content area after 100px left pad ≈ 1340px: gap 100 → 7.4627% */
    gap: 7.4627%;
    padding: 5.5556% 0 5.5556% 6.9444%;
  }

  .full-side-image-and-content-multi-cta-hero .content-column {
    /* 600 / 1340 */
    width: 44.7761%;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .full-side-image-and-content-multi-cta-hero .content-inner {
    width: 100%;
    min-height: 460px;
    justify-content: center;
  }

  .full-side-image-and-content-multi-cta-hero .section-heading {
    font-size: 68px;
    line-height: 76px;
    text-align: left;
  }

  .full-side-image-and-content-multi-cta-hero .image-column {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    min-height: 460px;
    border-radius: 60px 0 0 60px;
  }

  .full-side-image-and-content-multi-cta-hero .image-desktop {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 460px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 60px 0 0 60px;
  }

  .full-side-image-and-content-multi-cta-hero .image-mobile {
    display: none;
  }

  .full-side-image-and-content-multi-cta-hero .button-wrapper {
    flex-flow: row wrap;
    align-items: flex-start;
  }

  .full-side-image-and-content-multi-cta-hero .btn {
    width: auto;
  }
}
