*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #1d408a;
  --primary-dark: #132c61;
  --primary-light: #3a6fd8;
  --accent: #0693e3;
  --accent2: #2b3775;
  --red: #bb0909;
  --gold: #dfa719;
  --white: #ffffff;
  --off-white: #f1f3f9;
  --text: #1b1d1d;
  --text-muted: #6a6a6a;
  --border: #e7e6e6;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

/* SECTION COMMON */
section {
  padding: 100px 5%;
}

:root {
  --primary: #1d408a;
  --secondary: #bb0909;
  --light-color: #fffffe;
  --heading-color: #1b1d1d;
  --background: #ffffff;
  --background-alt: #f1f3f9;
  --foreground: #6a6a6a;
  --meta-color: #a6a3a3;
  --border-color: #e7e6e6;
  --vivid-cyan-blue: #0693e3;
  --pale-cyan-blue: #8ed1fc;
  --spacing-20: 0.44rem;
  --spacing-30: 0.67rem;
  --spacing-40: 1rem;
  --spacing-50: 1.5rem;
  --spacing-60: 2.25rem;
  --spacing-70: 3.38rem;
  --spacing-80: 5.06rem;
  --nav-height: 72px;
}
html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  color: var(--secondary);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Mona Sans", sans-serif;
  color: var(--heading-color);
  margin: 0;
}
p {
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  display: block;
}

/* HERO */
.hero-p {
  text-align: center;
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.hero-p h1 {
  text-align: center;
  font-size: 52px;
  font-weight: 700;
}

.hero-p p {
  max-width: 700px;
  margin: auto;
  color: #6b7280;
}

/* PROGRAM SECTION */
.program-section {
  padding-bottom: 80px;
}
.program-section p{
  text-align: justify;
  margin-right: 8px;
}

.program-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px;
  margin-bottom: 100px;
}

.program-item.reverse .program-image {
  order: -1;
}

.program-number {
  display: flex;
  justify-content: flex-end;
  font-size: clamp(36px, 5vw, 50px);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 20px;
  margin-right: 110px;
}
.program-number-2 {
  display: flex;
  justify-content: flex-end;
  font-size: clamp(36px, 5vw, 39px);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 20px;
  margin-right: 110px;
}

.garis-tengah {
  border-right: 4px solid;
}
.program-content h2 {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.3;
  margin-bottom: 30px;
}

.program-content p {
  color: #4b5563;
}

.program-image {
  position: relative;
  overflow: hidden;
  border-radius: 25px;

  margin-bottom: 20px;
}

.program-image img {
  width: 80%;
  max-width: 550px;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.program-image:hover img {
  transform: scale(1.08);
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 35px;
}

.overlay h3 {
  color: white;
  font-size: 32px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .program-content h2 {
    font-size: 28px;
  }

  .program-item.reverse .program-image {
    order: 0;
  }
}

/* ============================================================
       20. LIST BLOCK
       ============================================================ */
ol,
ul {
  box-sizing: border-box;
}
:root :where(.wp-block-list.has-background) {
  padding: 1.25em 2.375em;
}

/* ============================================================
       23. WP BLOCK LIBRARY / COMMON
       ============================================================ */
:root {
  --wp-block-synced-color: #7a00df;
  --wp-block-synced-color--rgb: 122, 0, 223;
  --wp-bound-block-color: var(--wp-block-synced-color);
  --wp-editor-canvas-background: #ddd;
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color--rgb: 0, 124, 186;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
  --wp-admin-border-width-focus: 2px;
}

:root {
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
}

/* ============================================================
       25. GLOBAL STYLES — DESIGN TOKENS & PRESETS
       ============================================================ */
:root {
  /* — Aspect ratios — */
  --wp--preset--aspect-ratio--square: 1;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--aspect-ratio--3-4: 3/4;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--aspect-ratio--2-3: 2/3;
  --wp--preset--aspect-ratio--16-9: 16/9;
  --wp--preset--aspect-ratio--9-16: 9/16;

  /* — Color palette — */
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--color--primary: #1d408a;
  --wp--preset--color--secondary: #bb0909;
  --wp--preset--color--light-color: #fffffe;
  --wp--preset--color--black-color: #c00d0d;
  --wp--preset--color--heading-color: #1b1d1d;
  --wp--preset--color--background: #ffffff;
  --wp--preset--color--background-alt: #f1f3f9;
  --wp--preset--color--foreground: #6a6a6a;
  --wp--preset--color--meta-color: #a6a3a3;
  --wp--preset--color--star-color: #0f0105;
  --wp--preset--color--border-color: #e7e6e6;
  --wp--preset--color--transparent: #ffffff00;

  /* — Gradients — */
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
    135deg,
    rgb(6, 147, 227) 0%,
    rgb(155, 81, 224) 100%
  );
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
    135deg,
    rgb(122, 220, 180) 0%,
    rgb(0, 208, 130) 100%
  );
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
    135deg,
    rgb(252, 185, 0) 0%,
    rgb(255, 105, 0) 100%
  );
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
    135deg,
    rgb(255, 105, 0) 0%,
    rgb(207, 46, 46) 100%
  );
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
    135deg,
    rgb(238, 238, 238) 0%,
    rgb(169, 184, 195) 100%
  );
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
    135deg,
    rgb(74, 234, 220) 0%,
    rgb(151, 120, 209) 20%,
    rgb(207, 42, 186) 40%,
    rgb(238, 44, 130) 60%,
    rgb(251, 105, 98) 80%,
    rgb(254, 248, 76) 100%
  );
  --wp--preset--gradient--blush-light-purple: linear-gradient(
    135deg,
    rgb(255, 206, 236) 0%,
    rgb(152, 150, 240) 100%
  );
  --wp--preset--gradient--blush-bordeaux: linear-gradient(
    135deg,
    rgb(254, 205, 165) 0%,
    rgb(254, 45, 45) 50%,
    rgb(107, 0, 62) 100%
  );
  --wp--preset--gradient--luminous-dusk: linear-gradient(
    135deg,
    rgb(255, 203, 112) 0%,
    rgb(199, 81, 192) 50%,
    rgb(65, 88, 208) 100%
  );
  --wp--preset--gradient--pale-ocean: linear-gradient(
    135deg,
    rgb(255, 245, 203) 0%,
    rgb(182, 227, 212) 50%,
    rgb(51, 167, 181) 100%
  );
  --wp--preset--gradient--electric-grass: linear-gradient(
    135deg,
    rgb(202, 248, 128) 0%,
    rgb(113, 206, 126) 100%
  );
  --wp--preset--gradient--midnight: linear-gradient(
    135deg,
    rgb(2, 3, 129) 0%,
    rgb(40, 116, 252) 100%
  );
  --wp--preset--gradient--primary-gradient: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 72%,
    rgb(0, 0, 0) 100%
  );
  --wp--preset--gradient--color-gradient: linear-gradient(
    135deg,
    rgb(181, 142, 103) 0%,
    rgb(122, 138, 153) 100%
  );

  /* — Font sizes — */
  --wp--preset--font-size--small: 14px;
  --wp--preset--font-size--medium: clamp(
    14px,
    0.875rem + ((1vw - 3.2px) * 0.366),
    20px
  );
  --wp--preset--font-size--large: clamp(
    15.747px,
    0.984rem + ((1vw - 3.2px) * 0.503),
    24px
  );
  --wp--preset--font-size--x-large: clamp(
    17.905px,
    1.119rem + ((1vw - 3.2px) * 0.616),
    28px
  );
  --wp--preset--font-size--x-small: 12px;
  --wp--preset--font-size--normal: clamp(
    14px,
    0.875rem + ((1vw - 3.2px) * 0.122),
    16px
  );
  --wp--preset--font-size--xx-large: clamp(
    20px,
    1.25rem + ((1vw - 3.2px) * 0.732),
    32px
  );
  --wp--preset--font-size--xxx-large: clamp(
    24.034px,
    1.502rem + ((1vw - 3.2px) * 0.974),
    40px
  );
  --wp--preset--font-size--jumbo: clamp(
    25.984px,
    1.624rem + ((1vw - 3.2px) * 1.099),
    44px
  );
  --wp--preset--font-size--mega: clamp(
    32.518px,
    2.032rem + ((1vw - 3.2px) * 1.554),
    58px
  );
  --wp--preset--font-size--giga: clamp(
    35.2px,
    2.2rem + ((1vw - 3.2px) * 1.756),
    64px
  );

  /* — Font families — */
  --wp--preset--font-family--albert-sans: "Albert Sans", sans-serif;
  --wp--preset--font-family--bricolage-grotesque: "Bricolage Grotesque",
    sans-serif;
  --wp--preset--font-family--dm-sans: "DM Sans", sans-serif;
  --wp--preset--font-family--dm-serif-display: "DM Serif Display", sans-serif;
  --wp--preset--font-family--funnel-display: "Funnel Display", sans-serif;
  --wp--preset--font-family--funnel-sans: "Funnel Sans", sans-serif;
  --wp--preset--font-family--host-grotesk: "Host Grotesk", sans-serif;
  --wp--preset--font-family--inter: "Inter", sans-serif;
  --wp--preset--font-family--plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;
  --wp--preset--font-family--outfit: "Outfit", sans-serif;
  --wp--preset--font-family--quicksand: "Quicksand", sans-serif;
  --wp--preset--font-family--oswald: "Oswald", sans-serif;
  --wp--preset--font-family--manrope: "Manrope", sans-serif;
  --wp--preset--font-family--mona-sans: "Mona Sans", sans-serif;
  --wp--preset--font-family--public-sans: "Public Sans", sans-serif;
  --wp--preset--font-family--tenor-sans: "Tenor Sans", sans-serif;

  /* — Spacing — */
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;

  /* — Shadows — */
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1),
    6px 6px rgba(0, 0, 0, 1);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);

  /* — Custom typography — */
  --wp--custom--typography--line-height--tiny: 1.15;
  --wp--custom--typography--line-height--small: 1.2;
  --wp--custom--typography--line-height--medium: 1.4;
  --wp--custom--typography--line-height--normal: 1.6;

  /* — Layout — */
  --wp--style--global--content-size: 980px;
  --wp--style--global--wide-size: 1960;
  --wp--style--block-gap: 24px;
}

/* ============================================================
       26. GLOBAL STYLES — BASE ELEMENTS
       ============================================================ */
:where(body) {
  margin: 0;
}

a:where(:not(.wp-element-button)) {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
:root :where(a:where(:not(.wp-element-button)):hover) {
  color: var(--wp--preset--color--secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  background-color: var(--wp--preset--color--transparent);
  color: var(--wp--preset--color--heading-color);
  font-family: var(--wp--preset--font-family--mona-sans);
  font-style: normal;
  font-weight: var(--wp--preset--font-weight--medium);
  line-height: 1.5;
}
h1 {
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 500;
  line-height: var(--wp--preset--line-height--normal);
  margin-bottom: var(--wp--preset--spacing--small);
}
h2 {
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 500;
  line-height: var(--wp--preset--line-height--normal);
  margin-top: var(--wp--preset--spacing--medium);
  margin-bottom: var(--wp--preset--spacing--x-small);
}
h3 {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500;
  line-height: var(--wp--preset--line-height--x-small);
  margin-top: var(--wp--preset--spacing--medium);
  margin-bottom: var(--wp--preset--spacing--x-small);
}
h4 {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
  line-height: var(--wp--preset--line-height--x-small);
  margin-top: var(--wp--preset--spacing--small);
  margin-bottom: var(--wp--preset--spacing--xx-small);
}

.header-program-1 {
  color: #a13635;
  z-index: 1;
}
.header-program-2 {
  display: inline-block;
  background-color: yellow;
  color: #000000;
  margin-top: 40px;
  margin-left: -15px;
  border-radius: 10px;
  padding: 10px;
  transform: translateY(-20px);
  z-index: 0;
  font-size: 45px !important;
  font-weight: 800 !important;
}


/* =========================================
   RESPONSIVE MOBILE
========================================= */
@media (max-width:768px){

  section{
    padding:60px 20px;
  }

  /* Hero */
  .hero-p{
    flex-direction:column;
    align-items:center;
    padding-top:30px;
    gap:0;
  }

  .hero-p h1{
    font-size:42px;
    line-height:1;
  }

  .header-program-2{
    margin:0;
    transform:translateY(-8px);
    font-size:34px !important;
  }

  /* Layout */
  .program-item{
    display:flex;
    flex-direction:column;
    gap:60px;
    margin-bottom:60px;
  }

  .program-content,
  .program-content-2{
    width:100%;
  }

  /* Hilangkan garis tengah */
  .garis-tengah{
    border:none;
  }

  /* Judul */
  .program-number,
  .program-number-2{
    justify-content:center;
    margin:0 0 10px;
    font-size:38px;
    text-align:center;
  }

  .program-content h2{
    text-align:center;
    font-size:22px;
    margin-bottom:24px;
  }

  /* Gambar */
  .program-image{
    display:flex;
    justify-content:center;
    margin-bottom:16px;
  }

  .program-image img{
    width:100%;
    max-width:100%;
    border-radius:18px;
  }

  /* Program kedua */
  .program-content-2 .program-number{
    margin-top:0 !important;
  }

  .program-content p,
  .program-content-2 p{
    margin-top:18px;
    text-align:justify;
    font-size:15px;
    line-height:1.8;
  }

}