body {
  font-family: "Heebo", sans-serif !important;
  margin-bottom: 0;
}
.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 100vh; */
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 40px;
  /* padding-block: 16px; */
  background-color: #ffffff;
}

.page-header-logo {
  height: auto;
  object-fit: contain;
}

.page-header-logo-ivrit {
  width: 260px;
}

.page-header-logo-atzmi,
.page-header-logo-academy {
  width: 100px;
}

.hero-section {
  width: 100%;
  min-height: 500px;
  background-image: url("/wp-content/plugins/pages/assets/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 40%;
}

/* same 30px gap inside the groups as between them, so desktop spacing is unchanged.
   width: 100% keeps percentage widths inside (like .hero-button) relative to .hero-content */
.hero-text,
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

/* the max-widths decide where these wrap - no <br> in the markup */
.hero-title {
  font-family: "Heebo", sans-serif !important;
  max-width: 340px;
  text-align: center;
}

.hero-subtitle {
  font-family: "Heebo", sans-serif !important;
  max-width: 430px;
  font-size: 18px;
  text-align: center;
}

.hero-button {
  display: flex;
  /* align-items: center; */
  background-color: #07a39b;
  width: auto;
  gap: 10px;
  color: white;
  border: none;
  border-radius: 100px;
  padding-inline: 30px;
  padding-block: 10px;
  font-size: 16px;
}

.hero-button:hover {
  cursor: pointer;
  background-color: #06827c;
}

.hero-button-arrow {
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.hero-certificate {
  font-family: "Heebo", sans-serif !important;
  max-width: 420px;
  text-align: center;
}

.hero-button:hover .hero-button-arrow {
  animation: hero-arrow-nudge 1.2s ease-in-out infinite;
}

@keyframes hero-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-button:hover .hero-button-arrow {
    animation: none;
  }
}

.quiz-section {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background-color: #f6fbfa;
}

/* decorative half circle on the left edge, above the bottom corner */
.quiz-section::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 50px;
  z-index: -1;
  width: 170px;
  height: 340px;
  background-color: #e5f7f2;
  border-radius: 0 170px 170px 0;
  pointer-events: none;
}

.quiz-mini-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  color: #07a39b;
}

.quiz-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  color: #1b3a6b;
  margin-top: 8px;
  margin-bottom: 0;
}

.quiz-track-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.quiz-track-button {
  font-family: "Heebo", sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  color: #1b3a6b;
  background-color: #ffffff;
  border: 1px solid #e1ecea;
  border-radius: 12px;
  padding-inline: 22px;
  padding-block: 18px;
  min-width: 155px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.quiz-track-button:hover {
  border-color: #07a39b;
}

.quiz-track-button.active {
  color: #ffffff;
  background-color: #07a39b;
  border-color: #07a39b;
  box-shadow: 0 6px 16px rgba(7, 163, 155, 0.25);
}

.quiz-track-button.active:hover {
  background-color: #06827c;
  border-color: #06827c;
}

.quiz-card {
  font-family: "Heebo", sans-serif !important;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  margin-top: 28px;
  padding-inline: 28px;
  padding-block: 20px;
  background-color: #ffffff;
  border: 1px solid #e8f0ef;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(27, 58, 107, 0.08);
  text-align: right;
}

.quiz-card [hidden] {
  display: none !important;
}

.quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.quiz-topic {
  font-weight: 600;
  color: #07a39b;
}

.quiz-counter {
  color: #6b7a90;
}

.quiz-question {
  font-family: "Heebo", sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  color: #1b3a6b;
  margin-top: 16px;
  margin-bottom: 20px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1b3a6b;
  cursor: pointer;
}

.quiz-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #07a39b;
  cursor: pointer;
}

.quiz-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.quiz-nav-button {
  font-family: "Heebo", sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  border-radius: 100px;
  padding-inline: 24px;
  padding-block: 6px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.quiz-next-button,
.quiz-end-button {
  margin-inline-start: auto;
  color: #ffffff;
  background-color: #07a39b;
  border: 1px solid #07a39b;
}

.quiz-next-button:hover,
.quiz-end-button:hover {
  background-color: #06827c;
  border-color: #06827c;
}

/* same teal, just faded. comes after the hover rule, so hovering a disabled button changes nothing */
.quiz-next-button:disabled {
  background-color: #07a39b;
  border-color: #07a39b;
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz-result {
  font-size: 16px;
  line-height: 1.7;
  color: #1b3a6b;
  margin-top: 16px;
  margin-bottom: 0;
  font-weight: bold;
}

.quiz-prev-button {
  color: #07a39b;
  background-color: #ffffff;
  border: 1px solid #07a39b;
}

.quiz-prev-button:hover {
  background-color: #f6fbfa;
}

.quiz-skip {
  cursor: pointer;
  font-family: "Heebo", sans-serif !important;
  font-size: 22px;
  font-weight: bold;
  color: #1b3a6b;
  text-align: center;
  margin-top: 24px;
}

.quiz-skip-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quiz-skip-arrow {
  vertical-align: middle;
}

.quiz-skip:hover .quiz-skip-arrow {
  animation: quiz-skip-arrow-nudge 1.2s ease-in-out infinite;
}

@keyframes quiz-skip-arrow-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-skip:hover .quiz-skip-arrow {
    animation: none;
  }
}

.info-section {
  font-family: "Heebo", sans-serif !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding-block: 40px;
  background-color: #ffffff;
  border-inline: 1px solid #e8f0ef;
  text-align: center;
}

.info-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  color: #1b3a6b;
  max-width: 560px;
  margin: 0;
}

.info-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}

.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 275px;
  padding-inline: 16px;
  padding-block: 20px;
  background-color: #ffffff;
  border: 1px solid #e8f0ef;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(27, 58, 107, 0.06);
}

.info-card-icon {
  width: 65px;
  /* height: 48px; */
  object-fit: contain;
}

/* cards 1 and 3 start by floating down, card 2 starts by floating up */
.info-card:nth-child(odd) .info-card-icon {
  animation: info-icon-float-down 3s ease-in-out infinite;
}

.info-card:nth-child(even) .info-card-icon {
  animation: info-icon-float-up 3s ease-in-out infinite;
}

@keyframes info-icon-float-down {
  0%,
  100% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(6px);
  }
}

@keyframes info-icon-float-up {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* mobile versions of the same float, sideways */
@keyframes info-icon-float-start {
  0%,
  100% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-6px);
  }
}

@keyframes info-icon-float-end {
  0%,
  100% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-card .info-card-icon {
    animation: none;
  }
}

.info-card-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 17px;
  font-weight: 700;
  color: #1b3a6b;
  margin-top: 0;
  margin-bottom: 0;
}

.info-card-text {
  font-size: 13px;
  font-weight: bold;
  color: #6b7a90;
  margin-top: 10px;
  margin-bottom: 0;
}

.info-highlight {
  font-size: 15px;
  font-weight: 700;
  color: #1b3a6b;
  background-color: #e3f5f3;
  border-radius: 12px;
  padding-inline: 20px;
  padding-block: 12px;
  margin-top: 32px;
  margin-bottom: 0;
}

.course-section {
  font-family: "Heebo", sans-serif !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 60px;
  padding-block: 15px;
  background-color: #1d4280;
  color: #ffffff;
}

/* decorative ring at the bottom corner */
.course-section::after {
  content: "";
  position: absolute;
  /* pushed deep into the corner so the arc stays clear of the long footer text */
  right: -120px;
  bottom: -140px;
  width: 200px;
  height: 200px;
  border: 22px solid #07a39b;
  border-radius: 50%;
  pointer-events: none;
}

.course-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

/* the HTML order (details, footer, testimonial) is the mobile order,
   desktop places each item explicitly. in RTL column 1 is on the right */
.course-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 36px;
  align-items: center;
  width: 100%;
}

.course-details {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}

.course-date {
  font-size: 25px;
  font-weight: 700;
  margin: 0;
}

.course-date-mobile {
  display: none;
}

.course-meetings {
  font-size: 17px;
  margin: 0;
}

.course-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.course-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 10px;
  padding-block: 20px;
  background-color: #ffffff;
  border-radius: 14px;
  color: #1b3a6b;
  text-align: center;
}

.course-stat-number {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  direction: ltr;
}

.course-stat-label {
  font-size: 13px;
  font-weight: bold;
}

.course-testimonial {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding-inline: 40px;
  padding-block: 28px;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  color: #1b3a6b;
  text-align: center;
  /* align-self: end; */
}

.course-testimonial::before,
.course-testimonial::after {
  position: absolute;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #f4b63f;
}

.course-testimonial::before {
  content: "\201D";
  top: 44px;
  right: 14px;
}

.course-testimonial::after {
  content: "\201E";
  bottom: 36px;
  left: 14px;
}

.course-testimonial-title {
  font-size: 16px;
  font-weight: 700;
  color: #07a39b;
}

/* every quote sits in the same grid cell, so the box is as tall as the longest one */
.course-testimonial-slides {
  display: grid;
  width: 100%;
  overflow: hidden;
}

/* waiting slides sit off to the left. no transition here, so a slide that just left
   jumps back to the left instantly (clipped by the overflow) instead of crossing the card */
.course-testimonial-text {
  grid-area: 1 / 1;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  transform: translateX(-100%);
  transition: none;
}

/* RTL: the next quote enters from the left, the current one exits to the right */
.course-testimonial-text.is-active {
  transform: translateX(0);
  transition: transform 0.6s ease;
}

.course-testimonial-text.is-leaving {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .course-testimonial-text.is-active,
  .course-testimonial-text.is-leaving {
    transition: none;
  }
}

/* spans the whole row and centers, so it sits under the middle column without wrapping */
.course-footer {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background-color: #07a39b;
  border-radius: 10px;
  padding-inline: 28px;
  padding-block: 12px;
}

.form-section {
    position: relative;
  font-family: "Heebo", sans-serif !important;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 60px;
  padding-block: 48px;
  background-color: #f6fbfa;
  text-align: right;
}

.form-title {
  font-family: "Heebo", sans-serif !important;
  font-size: 32px;
  font-weight: 700;
  color: #1b3a6b;
  margin: 0;
}

.form-subtitle {
  font-size: 17px;
  color: #6b7a90;
  margin-top: 0;
  margin-bottom: 0;
}

.form-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 20px;
  /* start, so an error message grows downwards and the inputs in the row stay aligned */
  align-items: start;
  margin-top: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-input::placeholder {
  color: #6b7a90;
  opacity: 1;
}

.form-input {
  font-family: "Heebo", sans-serif !important;
  font-size: 15px;
  color: #1b3a6b;
  box-sizing: border-box;
  height: 44px;
  padding-inline: 14px;
  background-color: #ffffff;
  border: 1px solid #e1ecea;
  border-radius: 10px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

/* browsers force tel inputs to LTR, which pushes the Hebrew placeholder to the left */
.form-input[type="tel"] {
  direction: rtl;
  text-align: right;
}

.form-input:focus {
  outline: none;
  border-color: #07a39b;
  box-shadow: 0 0 0 3px rgba(7, 163, 155, 0.15);
}

.form-input.invalid {
  border-color: #d93f3f;
}

.form-input.invalid:focus {
  border-color: #d93f3f;
  box-shadow: 0 0 0 3px rgba(217, 63, 63, 0.15);
}

.form-error {
  font-size: 12px;
  color: #d93f3f;
}

/* takes no space while there is no message */
.form-error:empty {
  display: none;
}

.form-submit {
  font-family: "Heebo", sans-serif !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #07a39b;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-submit:hover {
  background-color: #06827c;
}

.form-submit:disabled {
  background-color: #07a39b;
  opacity: 0.6;
  cursor: wait;
}

.form-status {
  font-size: 18px;
  font-weight: 600;
  color: #07a39b;
  margin-top: 12px;
  margin-bottom: 0;
}

.form-status{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.93);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    display: flex;
}

/* takes no space while there is no message */
.form-status:empty {
  display: none;
}

.form-status.error {
  color: #d93f3f;
}

.site-footer {
  font-family: "Heebo", sans-serif !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  background-color: #000000;
  font-size: 13px;
  color: #ffffff;
}

/* flex, so the link is exactly the logo's size with no baseline gap under it */
.site-footer a {
  display: flex;
}

.site-footer-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* sized here, not inline, so the mobile block can change the height */
.form-iframe {
  width: 100%;
  height: 400px;
  border: none;
}

/* ======================= Mobile ======================= */
@media (max-width: 768px) {
  body {
    margin-top: unset;
  }

  /* ----- form iframe ----- */
  .form-iframe {
    height: 600px;
  }

  /* ----- hero ----- */
  .hero-section {
    display: flex;
    flex-direction: column;
    background-image: url("/wp-content/plugins/pages/assets/hero-bg-mobile.png");
    height: 650px;
  }

  /* fill the section height so text sits at the top and actions at the bottom */
  .hero-content {
    flex: 1;
    justify-content: space-between;
    /* gap: 300px; */
    width: 100%;
    box-sizing: border-box;
    padding-inline: 20px;
    padding-bottom: 30px;
  }

  .hero-text{
    gap: unset;
  }

  .hero-button {
    width: auto;
  }

  /* certificate above the button */
  .hero-actions {
    flex-direction: column-reverse;
  }

  /* ----- course ----- */
  .course-date-desktop {
    display: none;
  }

  .course-date-mobile {
    display: block;
  }

  .course-section {
    padding-inline: 15px;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 10px;
  }

  .course-content {
    grid-template-columns: 1fr;
  }

  /* back to HTML order: details, footer, testimonial */
  .course-details,
  .course-footer,
  .course-testimonial {
    grid-column: auto;
    grid-row: auto;
  }

  .course-details {
    text-align: center;
  }

  .course-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-footer {
    justify-self: stretch;
    padding-inline: 10px;
  }

  /* ----- form ----- */
  .form-fields {
    grid-template-columns: 1fr;
  }

  .page-header {
    padding-inline: unset;
    padding-block: unset;
  }
  /* same proportions as desktop, scaled down */
  .page-header-logo-ivrit {
    width: 210px;
  }

  .page-header-logo-atzmi,
  .page-header-logo-academy {
    width: 70px;
  }

  .info-section {
    padding-inline: 15px;
  }

  /* same float, sideways: cards 1 and 3 start moving right to left, card 2 the other way */
  .info-card:nth-child(odd) .info-card-icon {
    animation-name: info-icon-float-start;
  }

  .info-card:nth-child(even) .info-card-icon {
    animation-name: info-icon-float-end;
  }

  .course-section::after {
    right: -70px;
    bottom: -150px;
  }

  .quiz-section::before {
    bottom: unset;
    top: 50px;
  }

  .quiz-card {
    padding-inline: 12px;
  }

  .quiz-track-button {
    width: 70%;
    font-size: 18px;
    padding-inline: 20px;
    padding-block: 16px;
  }

  .form-section {
    padding-inline: 10px;
  }

  .form-title {
    font-size: 28px;
    text-align: center;
  }

  .form-subtitle {
    text-align: center;
  }

  .form-fields {
    padding-inline: 40px;
  }
}