/* Start custom CSS for html, class: .elementor-element-72cb690 */.iup-page,
.iup-page *,
.iup-page *::before,
.iup-page *::after {
  margin: 0;
  /* Let CMS breath */
  padding: 0;
  /* We define padding explicitly below */
  box-sizing: border-box !important;
  /* Extremely critical for grid layouts so cards don't break width on Mobile */
}

html {
  scroll-behavior: smooth;
}

.iup-page {
  font-family: 'Inter', sans-serif !important;
  color: #1e1e1e !important;
  background: #fff !important;
  line-height: 1.6 !important;
  overflow-x: hidden !important;
}

.iup-page a {
  text-decoration: none !important;
  color: inherit !important;
}

.iup-page img {
  max-width: 100% !important;
  display: block !important;
}



/* ===== Hero Section ===== */
.hero {
  width: 100% !important;
  height: 297px !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* ===== Breadcrumb & Intro ===== */
.intro {
  background: #fff !important;
  padding: 50px 0 60px !important;
  text-align: center !important;
}

.intro .container {
  max-width: 1036px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.breadcrumbs a {
  color: #808080 !important;
  transition: color 0.2s ease !important;
}

.breadcrumbs a:hover {
  text-decoration: underline !important;
  color: #005cb0 !important;
}

.breadcrumbs .separator {
  color: #005cb0 !important;
}

.breadcrumbs .active {
  color: #005cb0 !important;
}

.intro .subtitle {
  color: #005cb0 !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.intro .title {
  font-size: 35px !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
  color: #1e1e1e !important;
}

.intro .description {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
  max-width: 1036px !important;
  margin: 0 auto !important;
}

/* ===== Section Titles (reusable) ===== */
.section-title {
  font-size: 35px !important;
  font-weight: 500 !important;
  text-align: center !important;
  color: #1e1e1e !important;
  margin-bottom: 24px !important;
}

.section-desc {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
  text-align: center !important;
  max-width: 1036px !important;
  margin: 0 auto 40px !important;
}

/* ===== Program Structure ===== */
.program-structure {
  background: #f2f9ff !important;
  padding: 70px 0 80px !important;
}

.program-structure .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.year-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.year-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: center !important;
}

.year-card-img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
}

.year-card-content {
  flex: 1 !important;
}

.year-card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
  margin-bottom: 4px !important;
}

.year-card-subtitle {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #005cb0 !important;
  margin-bottom: 12px !important;
}

.year-card-text {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #1e1e1e !important;
}

/* ===== Curriculum Structure Accordion ===== */
.curriculum {
  background: #fff !important;
  padding: 70px 0 80px !important;
}

.curriculum .container {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* ===== CURRICULUM HYBRID LAYOUT ===== */
/* Desktop: Show Tabs, Hide Accordion */
.curriculum-accordion-mobile {
  display: none !important;
}

.curriculum-tabs-desktop {
  display: block !important;
}

/* Mobile: Show Accordion, Hide Tabs */
@media (max-width: 991px) {
  .curriculum-tabs-desktop {
    display: none !important;
  }

  .curriculum-accordion-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
  }
}

/* ===== ACCORDION STYLING (Mobile Only) ===== */
.semester-details {
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.semester-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f2f9ff !important;
  color: #005cb0 !important;
  padding: 15px 25px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  list-style: none !important;
  border-radius: 10px !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

.semester-summary::-webkit-details-marker {
  display: none !important;
}

.semester-title {
  display: flex !important;
  align-items: center !important;
}

.semester-icon {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.semester-icon::before,
.semester-icon::after {
  content: "";
  position: absolute !important;
  background-color: currentColor !important;
  border-radius: 2px !important;
  transition: transform 0.3s ease !important;
}

.semester-icon::before {
  width: 12px !important;
  height: 2px !important;
}

.semester-icon::after {
  width: 2px !important;
  height: 12px !important;
}

.semester-details[open] .semester-summary {
  background: #005cb0 !important;
  color: #fff !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.semester-details[open] .semester-icon::after {
  transform: rotate(90deg) scaleY(0) !important;
}

.semester-content {
  background: transparent !important;
  border-radius: 0 0 10px 10px !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

/* ===== TABS STYLING (Desktop Only) ===== */
.curriculum-tabs-desktop {
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}

.tab-radio {
  display: none !important;
}

.tabs-header {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  margin: 0 auto 30px !important;
  max-width: 800px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #f2f9ff !important;
}

.tab-label {
  flex: 1 !important;
  text-align: center !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #005cb0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border-right: 1px solid #e0effc !important;
  user-select: none !important;
}

.tab-label:last-child {
  border-right: none !important;
}

.tab-label:hover {
  background: #e0effc !important;
}

/* Active Tab Styling */
#year1:checked~.tabs-header [for="year1"],
#year2:checked~.tabs-header [for="year2"],
#year3:checked~.tabs-header [for="year3"],
#year4:checked~.tabs-header [for="year4"] {
  background: #005cb0 !important;
  color: #fff !important;
}

/* Tab Panels */
.tab-panel {
  display: none !important;
  animation: fadeIn 0.4s ease !important;
}

#year1:checked~.year1-panel,
#year2:checked~.year2-panel,
#year3:checked~.year3-panel,
#year4:checked~.year4-panel {
  display: block !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Semesters Grid Side-by-Side */
.semesters-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  border: 1px solid #676767 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  align-items: stretch !important;
}

.semester-col {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Target WordPress wrappers and force them to grow */
.semester-col figure,
.semester-col .wp-block-table {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* Hide phantom empty paragraphs added by WordPress editor to prevent gaps */
.semester-col p {
  display: none !important;
}

.semester-col:first-child {
  border-right: 1px solid #676767 !important;
}

.semester-head {
  background: #005cb0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 12px 15px !important;
  border-bottom: 1px solid #676767 !important;
}

/* ========== CURRICULUM TABLE SHARED ========== */
.curriculum-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: -1px !important;
}

.curriculum-table thead th,
.curriculum-table tbody td {
  background: #fff !important;
  color: #444 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 10px 10px !important;
  border: 1px solid #676767 !important;
}

.curriculum-table thead th {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* Remove outer table borders so they don't double loop with the container borders */
.curriculum-table tr th:first-child,
.curriculum-table tr td:first-child {
  border-left: none !important;
}

.curriculum-table tr th:last-child,
.curriculum-table tr td:last-child {
  border-right: none !important;
}

.curriculum-table tr:first-child th {
  border-top: none !important;
}

/* For mobile accordion, remove bottom border as it perfectly fills the container. For desktop, let it draw so short tables look closed. */
.curriculum-accordion-mobile .curriculum-table tr:last-child td {
  border-bottom: none !important;
}

/* ========== ACCORDION TABLE BORDERS ========== */
.curriculum-accordion-mobile .semester-content {
  border-left: 1px solid #676767 !important;
  border-right: 1px solid #676767 !important;
  border-bottom: 1px solid #676767 !important;
  border-radius: 0 0 10px 10px !important;
}

/* Desktop Tabs table borders allowed to render natively */

.curriculum-table .col-no {
  width: 35px !important;
}

.curriculum-table .col-code {
  width: 80px !important;
}

.curriculum-table .col-name {
  width: auto !important;
  text-align: left !important;
}

.curriculum-table tbody td:nth-child(3) {
  text-align: left !important;
}

.curriculum-table .col-credit {
  width: 50px !important;
}

/* =================================================
   WORDPRESS P TAG & LINE-HEIGHT OVERRIDES FOR CARDS
================================================= */
.partner-card p,
.exchange-card p {
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

p.partner-card-name,
p.exchange-card-name,
.partner-card .partner-card-name,
.exchange-card .exchange-card-name {
  line-height: 1.2 !important;
  margin-bottom: 0px !important;
}

p.partner-card-country,
p.exchange-card-country,
.partner-card .partner-card-country,
.exchange-card .exchange-card-country {
  line-height: 1.2 !important;
  margin-top: 2px !important;
  margin-bottom: 16px !important;
}

.partner-card-details p:last-child,
.exchange-card-details p:last-child {
  margin-bottom: 0 !important;
}


/* ===== Double Degree Program ===== */
.double-degree {
  background: #f2f9ff !important;
  padding: 70px 0 80px !important;
}

.double-degree .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.partner-cards {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.partner-card {
  background: #fff !important;
  border-radius: 10px !important;
  height: auto !important;
  min-height: 300px !important;
  /* 4 Kolom di desktop */
  width: calc(25% - 15px) !important;
  min-width: 250px !important;
  padding: 20px 24px 24px !important;
  text-align: left !important;
}

.partner-card-logo {
  height: 57px !important;
  object-fit: contain !important;
  margin-bottom: 20px !important;
}

.partner-card-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
}

.partner-card-country {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
}

.partner-card-details {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
}

.partner-card-details .rank {
  font-style: italic !important;
}

.partner-card-details .program-type {
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.partner-card-details .cost-label {
  font-weight: 700 !important;
}

.cost-note {
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: #005cb0 !important;
  text-align: center !important;
  max-width: 1036px !important;
  margin: 30px auto 0 !important;
  line-height: 19px !important;
}


/* ===== Exchange Program ===== */
.exchange-program {
  background: #fff !important;
  padding: 70px 0 80px !important;
}

.exchange-program .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.exchange-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.exchange-card {
  background: #f2f9ff !important;
  border-radius: 10px !important;
  height: auto !important;
  min-height: 300px !important;
  width: calc(25% - 15px) !important;
  min-width: 250px !important;
  padding: 20px 24px 24px !important;
}

.exchange-card-logo {
  height: 57px !important;
  object-fit: contain !important;
  margin-bottom: 20px !important;
}

.exchange-card-name {
  font-size: 17px !important;
  font-weight: 700 !important;
}

.exchange-card-country {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
}

.exchange-card-details {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
}

.exchange-card-details .rank {
  font-style: italic !important;
}

.exchange-card-details .program-type {
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.exchange-card-details .cost-label {
  font-weight: 700 !important;
}


/* ===== Other Partners ===== */
.other-partners {
  background: #f2f9ff !important;
  padding: 50px 0 60px !important;
}

.other-partners .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.partner-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px 50px !important;
  margin-top: 30px !important;
}

.partner-logos img {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: grayscale(0) !important;
  /* Anti-aliasing / Sharpness Fix */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  transform: translateZ(0) !important;
}


/* ===== Career Pathways ===== */
.career-pathways {
  background: #fff !important;
  padding: 70px 0 80px !important;
}

.career-pathways .container {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.career-cards {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 40px !important;
}

.career-card {
  text-align: center !important;
  width: 200px !important;
}

.career-card-img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  margin: 0 auto 20px !important;
}

.career-card-content {
  flex: 1 !important;
}

.career-card-title {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #005cb0 !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.career-card-desc {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
}


/* ===== Why IUP ===== */
.why-iup {
  background: #f2f9ff !important;
  padding: 70px 0 80px !important;
}

.why-iup .container {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.why-cards {
  display: flex !important;
  gap: 30px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 40px !important;
}

.why-card {
  text-align: center !important;
  width: 230px !important;
}

.why-card-img {
  width: 141px !important;
  height: 141px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  margin: 0 auto 20px !important;
}

.why-card-content {
  flex: 1 !important;
}

.why-card-title {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #005cb0 !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}

.why-card-desc {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
}


/* ===== Alumni Testimonial ===== */
.alumni-testimonial {
  background: #fff !important;
  padding: 80px 0 !important;
}

.alumni-testimonial .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 50px !important;
}

.alumni-photo {
  width: 218px !important;
  height: 218px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.alumni-content {
  flex: 1 !important;
}

.alumni-quote {
  font-size: 30px !important;
  font-weight: 600 !important;
  color: #1e1e1e !important;
  margin-bottom: 24px !important;
  line-height: 1.3 !important;
}

.alumni-text {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
  margin-bottom: 8px !important;
}

.alumni-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
}


/* ===== Info Sections (Brochure, Admission, Discover) ===== */
.info-sections {
  padding: 60px 0 !important;
}

.info-sections.brochure-section {
  background: #fff !important;
}

.info-sections.admission-section {
  background: #fff !important;
}

.info-sections.discover-section {
  background: #fff !important;
}

.info-sections .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.info-block {
  display: flex !important;
  align-items: flex-start !important;
  gap: 50px !important;
  margin-bottom: 0px !important;
}

.info-block-img {
  width: 220px !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.info-block-img.round {
  border-radius: 50% !important;
  width: 224px !important;
  height: 224px !important;
}

.info-block-content {
  flex: 1 !important;
}

.info-block-label {
  font-size: 25px !important;
  font-weight: 600 !important;
  color: #005cb0 !important;
  margin-bottom: 12px !important;
}

.info-block-text {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1e1e1e !important;
  line-height: 27px !important;
  margin-bottom: 20px !important;
}

.btn-outline {
  display: inline-block !important;
  border: 1px solid #005cb0 !important;
  color: #005cb0 !important;
  padding: 8px 28px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  background: #fff !important;
}

.btn-outline:hover {
  background: #005cb0 !important;
  color: #fff !important;
}

/* Back to previous page button */
.back-section {
  text-align: center !important;
  padding: 30px 0 40px !important;
}

/* ===== Footer ===== */
.footer-top {
  width: 100% !important;
}

.footer-top img {
  width: 100% !important;
  display: block !important;
}

.footer-main {
  width: 100% !important;
}

.footer-main img {
  width: 100% !important;
  display: block !important;
}

/* ============================================
   RESPONSIVE DESIGN
   Desktop: > 1024px (default styles above)
   Tablet Landscape: 769px – 1024px
   Tablet Portrait: 577px – 768px
   Mobile: ≤ 576px
   ============================================ */

/* ---------- Tablet Landscape (≤ 1024px) ---------- */
@media (max-width: 1024px) {

  /* Hero */
  .hero {
    height: 220px !important;
  }

  /* Intro */
  .intro {
    padding: 40px 0 50px !important;
  }

  .intro .title {
    font-size: 30px !important;
  }

  .intro .description {
    font-size: 16px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 30px !important;
  }

  .section-desc {
    font-size: 16px !important;
  }

  /* Program Structure - 2x2 grid */
  .program-structure {
    padding: 50px 0 60px !important;
  }

  .year-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px 30px !important;
  }

  .year-card-text {
    max-width: 280px !important;
  }

  /* Curriculum */
  .curriculum {
    padding: 50px 0 60px !important;
  }

  .semester-summary {
    font-size: 15px !important;
    padding: 12px 20px !important;
  }

  .curriculum-table {
    font-size: 13px !important;
  }

  /* Partner & Exchange cards */
  .partner-cards {
    gap: 16px !important;
  }

  .exchange-cards {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }

  .partner-card {
    width: 240px !important;
  }

  /* Career Pathways - wrap nicely */
  .career-cards {
    gap: 24px !important;
  }

  .career-card {
    width: 180px !important;
  }

  .career-card-title {
    font-size: 22px !important;
  }

  /* Why IUP */
  .why-cards {
    gap: 24px !important;
  }

  .why-card {
    width: 210px !important;
  }

  .why-card-title {
    font-size: 22px !important;
  }

  /* Alumni */
  .alumni-testimonial .container {
    gap: 30px !important;
  }

  .alumni-quote {
    font-size: 26px !important;
  }

  .alumni-text {
    font-size: 15px !important;
  }

  /* Info blocks */
  .info-block {
    gap: 0 !important;
  }

  .info-block-img {
    width: 80px !important;
    height: 80px !important;
  }

  .info-block-img.round {
    width: 80px !important;
    height: 80px !important;
  }

  /* Partner logos */
  .partner-logos {
    gap: 30px 40px !important;
  }

  .partner-logos img {
    height: 50px !important;
  }
}

/* ---------- Tablet Portrait (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* Navbar */
  .navbar {
    height: 80px !important;
  }

  /* Hero */
  .hero {
    height: 180px !important;
  }

  /* Intro */
  .intro {
    padding: 30px 0 40px !important;
  }

  .intro .subtitle {
    font-size: 20px !important;
  }

  .intro .title {
    font-size: 26px !important;
  }

  .intro .description {
    font-size: 15px !important;
    line-height: 24px !important;
  }

  .breadcrumbs {
    font-size: 13px !important;
    flex-wrap: wrap !important;
  }

  /* Section titles */
  .section-title {
    font-size: 26px !important;
    margin-bottom: 16px !important;
  }

  .section-desc {
    font-size: 15px !important;
    line-height: 24px !important;
    margin-bottom: 30px !important;
  }

  /* Program Structure - 2 columns */
  .program-structure {
    padding: 40px 0 50px !important;
  }

  .year-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .year-card-img {
    width: 140px !important;
    height: 140px !important;
  }

  .year-card-title {
    font-size: 18px !important;
  }

  .year-card-subtitle {
    font-size: 20px !important;
  }

  .year-card-text {
    font-size: 15px !important;
    line-height: 24px !important;
    max-width: 100% !important;
  }

  /* Curriculum */
  .curriculum {
    padding: 40px 0 50px !important;
  }

  .semester-summary {
    font-size: 14px !important;
    padding: 10px 15px !important;
  }

  /* Table scroll horizontal */
  .semester-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .curriculum-table {
    font-size: 12px !important;
    width: 100% !important;
  }

  /* Partner & Exchange */
  .double-degree,
  .exchange-program {
    padding: 40px 0 50px !important;
  }

  .partner-cards,
  .exchange-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .exchange-card {
    padding: 20px 16px !important;
  }

  .exchange-card-logo {
    height: 48px !important;
    margin-bottom: 12px !important;
  }

  .exchange-card-name {
    font-size: 15px !important;
  }

  .exchange-card-country {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  .exchange-card-details {
    font-size: 13px !important;
  }

  /* Partner Cards */
  .partner-card {
    height: auto !important;
    padding: 20px 16px !important;
  }

  .partner-card-logo {
    height: 48px !important;
    margin-bottom: 12px !important;
  }

  .partner-card-name {
    font-size: 15px !important;
  }

  .partner-card-country {
    font-size: 14px !important;
    margin-bottom: 12px !important;
  }

  .partner-card-details {
    font-size: 13px !important;
  }

  .cost-note {
    font-size: 12px !important;
  }

  /* Career Pathways */
  .career-pathways {
    padding: 40px 0 50px !important;
  }

  .career-cards {
    gap: 20px !important;
    justify-content: center !important;
  }

  .career-card {
    width: calc(33.33% - 16px) !important;
    min-width: 150px !important;
  }

  .career-card-img {
    width: 120px !important;
    height: 120px !important;
  }

  .career-card-title {
    font-size: 18px !important;
  }

  .career-card-desc {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Why IUP - 2 per row */
  .why-iup {
    padding: 40px 0 50px !important;
  }

  .why-cards {
    gap: 24px !important;
  }

  .why-card {
    width: calc(50% - 16px) !important;
    min-width: 180px !important;
  }

  .why-card-img {
    width: 120px !important;
    height: 120px !important;
  }

  .why-card-title {
    font-size: 20px !important;
  }

  .why-card-desc {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Alumni */
  .alumni-testimonial {
    padding: 50px 0 !important;
  }

  .alumni-testimonial .container {
    flex-direction: row !important;
    text-align: left !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }

  .alumni-photo {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
  }

  .alumni-quote {
    font-size: 22px !important;
  }

  .alumni-text {
    font-size: 15px !important;
    line-height: 24px !important;
  }

  /* Info blocks - keep stacked style same as base */
  .info-sections {
    padding: 40px 0 !important;
  }

  .info-sections .container {
    gap: 16px !important;
  }

  .info-block {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  .info-block-img {
    width: 80px !important;
    height: 80px !important;
  }

  .info-block-img.round {
    width: 80px !important;
    height: 80px !important;
  }

  .info-block-label {
    font-size: 16px !important;
  }

  .info-block-text {
    font-size: 13px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
  }

  /* Other Partners */
  .other-partners {
    padding: 40px 0 50px !important;
  }

  .partner-logos {
    gap: 24px 30px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .partner-logos img {
    height: 45px !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
  }

  img.single-partner-logo {
    height: 55px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ---------- Mobile (≤ 576px) ---------- */
@media (max-width: 576px) {

  /* Navbar */
  .navbar {
    height: 60px !important;
  }

  /* Hero */
  .hero {
    height: 140px !important;
  }

  /* Intro */
  .intro {
    padding: 24px 0 30px !important;
  }

  .intro .subtitle {
    font-size: 17px !important;
  }

  .intro .title {
    font-size: 22px !important;
  }

  .intro .description {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .breadcrumb {
    font-size: 12px !important;
    gap: 4px !important;
  }

  .breadcrumb .active {
    font-size: 14px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  .section-desc {
    font-size: 14px !important;
    line-height: 22px !important;
    margin-bottom: 24px !important;
  }

  /* Program Structure - single column */
  .program-structure {
    padding: 30px 0 40px !important;
  }

  .year-cards {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .year-card-img {
    width: 120px !important;
    height: 120px !important;
  }

  /* Pisahkan year-card-title agar warnanya kembali hitam */
  .year-card-title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
    color: #1e1e1e !important;
  }

  .year-card-subtitle {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .year-card-text {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Curriculum */
  .curriculum {
    padding: 30px 0 40px !important;
  }

  .semester-summary {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  .curriculum-table thead th,
  .curriculum-table tbody td {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .curriculum-table .col-no {
    width: 30px !important;
  }

  .curriculum-table .col-code {
    width: 70px !important;
  }

  .curriculum-table .col-name {
    width: 150px !important;
  }

  .curriculum-table .col-credit {
    width: 40px !important;
  }

  /* Double Degree (2x1) & Exchange (2x2) */
  .double-degree,
  .exchange-program {
    padding: 30px 0 40px !important;
  }

  .partner-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .partner-card {
    width: calc(50% - 6px) !important;
    min-width: 140px !important;
    max-width: 100% !important;
    padding: 16px 10px !important;
    height: auto !important;
    overflow-wrap: break-word !important;
  }

  .partner-card-logo {
    height: 40px !important;
    margin-bottom: 12px !important;
  }

  .partner-card-name {
    font-size: 14px !important;
  }

  .partner-card-country {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  .partner-card-details {
    font-size: 11px !important;
  }

  .exchange-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .exchange-card {
    width: calc(50% - 6px) !important;
    min-width: 140px !important;
    padding: 16px 10px !important;
    overflow-wrap: break-word !important;
  }

  .exchange-card-logo {
    height: 40px !important;
    margin-bottom: 12px !important;
  }

  .exchange-card-name {
    font-size: 14px !important;
  }

  .exchange-card-country {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  .exchange-card-details {
    font-size: 11px !important;
  }

  .cost-note {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  /* Career & Why IUP (Mirrored style from Core Curriculum Pillars) */
  .career-pathways,
  .why-iup {
    padding: 30px 0 40px !important;
  }

  .year-cards,
  .career-cards,
  .why-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .year-card,
  .career-card,
  .why-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .year-card-img,
  .career-card-img,
  .why-card-img {
    width: 80px !important;
    height: 80px !important;
    margin: 0 16px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .year-card-content,
  .career-card-content,
  .why-card-content {
    flex: 1 !important;
  }

  /* Sisanya biarkan tetap biru */
  .career-card-title,
  .why-card-title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
    color: #005cb0 !important;
  }

  .career-card-desc,
  .why-card-desc {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 !important;
  }

  /* Alumni */
  .alumni-testimonial {
    padding: 30px 0 !important;
  }

  .alumni-photo {
    width: 80px !important;
    height: 80px !important;
  }

  .alumni-quote {
    font-size: 18px !important;
  }

  .alumni-text {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .alumni-name {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Info blocks */
  .info-sections {
    padding: 30px 0 !important;
  }

  .info-sections .container {
    gap: 16px !important;
  }

  .info-block {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .info-block-img {
    width: 80px !important;
    height: 80px !important;
    margin-right: 16px !important;
  }

  .info-block-img.round {
    width: 80px !important;
    height: 80px !important;
  }

  .info-block-label {
    font-size: 16px !important;
  }

  .info-block-text {
    font-size: 13px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
  }

  .btn-outline {
    font-size: 13px !important;
    padding: 7px 22px !important;
  }

  /* Back section */
  .back-section {
    padding: 20px 0 30px !important;
  }

  /* Other Partners (3x3 grid) */
  .other-partners {
    padding: 30px 0 40px !important;
  }

  .partner-logos {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 20px !important;
    justify-items: center !important;
  }

  .partner-logos img {
    height: 35px !important;
  }
}

/* ---------- Small Mobile (≤ 400px) ---------- */
@media (max-width: 400px) {
  .intro .title {
    font-size: 20px !important;
  }

  .section-title {
    font-size: 20px !important;
  }

  .career-card,
  .why-card {
    width: 100% !important;
    max-width: 280px !important;
  }

  .career-cards,
  .why-cards {
    flex-direction: column !important;
    align-items: center !important;
  }

  .alumni-quote {
    font-size: 16px !important;
  }
}

/* =================================================
   CONTACT & ADMISSION (Elementor + Theme Safe)
================================================= */

.contact-wrapper {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

.contact-wrapper .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* CARD */
.contact-us-che {
  background: #ffffff !important;
  padding: 36px 38px !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08) !important;
  transition: all .35s ease !important;
  width: 100% !important;
  margin: 0 !important;
}

/* hover */
.contact-us-che:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.13) !important;
}

/* spacing widget */
.contact-us-che .elementor-widget {
  margin-bottom: 18px !important;
}

/* =================================================
   TITLE (ICON BOX) (Actually just using text headers based on design)
================================================= */
.contact-us-che h3 {
  color: #000000 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* =================================================
   DIVIDER
================================================= */

.contact-us-che .elementor-divider-separator {
  border-top: 3px solid #1f5fbf !important;
  width: 100% !important;
  /* Make it span the width based on the design */
  margin-top: 8px !important;
  margin-bottom: 24px !important;
}

/* =================================================
   TEXT
================================================= */

.contact-us-che .elementor-text-editor {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #1e1e1e !important;
  margin-bottom: 24px !important;
}

.contact-us-che .elementor-text-editor strong {
  font-size: 15px !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

/* Contact Specific Text margin */
.contact-person-name {
  font-weight: 700 !important;
  color: #000000 !important;
  font-size: 15px !important;
  margin-bottom: 16px !important;
}

/* =================================================
   BUTTON RESET (very important)
   mengalahkan theme & global elementor
================================================= */

.contact-us-che .elementor-widget-button {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  /* Left aligned based on design */
  flex-direction: column !important;
  gap: 12px !important;
}

.contact-us-che .elementor-button,
.contact-us-che .elementor-button:link,
.contact-us-che .elementor-button:visited {
  background: #e7ecf2 !important;
  color: #1f5fbf !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  /* Fill container width */
  justify-content: center !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
}

/* icon */
.contact-us-che .elementor-button i,
.contact-us-che .elementor-button svg {
  color: #1f5fbf !important;
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* hover */
.contact-us-che .elementor-button:hover {
  background: #1f5fbf !important;
  color: #ffffff !important;
}

.contact-us-che .elementor-button:hover i,
.contact-us-che .elementor-button:hover svg {
  color: #ffffff !important;
}

/* mobile */
@media (max-width: 767px) {
  .contact-wrapper .elementor-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 0 15px !important;
    /* Match mobile container padding */
  }

  .contact-us-che {
    padding: 20px 14px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .contact-us-che h3 {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .contact-person-name {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .contact-us-che .elementor-text-editor {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  .contact-us-che .elementor-button {
    width: 100% !important;
    font-size: 11px !important;
    padding: 8px 6px !important;
    gap: 4px !important;
  }

  .contact-us-che .elementor-button i,
  .contact-us-che .elementor-button svg {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
  }
}

/* =================================================
   CURRICULUM TABS RESPONSIVE (MOBILE/TABLET)
================================================= */
@media (max-width: 991px) {
  .tabs-header {
    flex-wrap: wrap !important;
    border-radius: 8px !important;
  }

  .tab-label {
    flex: 1 1 50% !important;
    /* 2x2 grid for tabs */
    border-bottom: 1px solid #e0effc !important;
  }

  .tab-label:nth-child(2n) {
    border-right: none !important;
  }

  .semesters-row {
    grid-template-columns: 1fr !important;
  }

  .semester-col:first-child {
    border-right: none !important;
    border-bottom: 4px solid #e0effc !important;
    /* Visual separator between paired semesters */
  }
}

/* ===== Other Partners (Physics Specific Override) ===== */
.other-partners .partner-logos {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

.other-partners .partner-logos img {
  margin: 0 auto !important;
  display: block !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f8cbad4 *//* ===================================
   CLEAN PARTNER WRAPPER (RESPONSIVE)
=================================== */

/* Optional Scope to prevent global overrides */
.fti-partner-scope * {
    box-sizing: border-box !important;
}

.partner-wrapper {
    max-width: 1200px !important;
    margin: 70px auto !important;
    /* Center horizontally + vertical spacing */
    padding: 45px 40px !important;

    background: #ffffff !important;
    border-radius: 22px !important;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.07) !important;
    width: 100% !important;
}

/* 
   Center content - Adding true responsive flex grid support 
   for the Elementor container.
*/
.partner-wrapper .elementor-container {
    display: flex !important;
    flex-wrap: wrap !important;
    /* CRITICAL: Allows items to break to the next line on small screens */
    align-items: center !important;
    justify-content: center !important;
    /* Centers the whole block of logos */
    gap: 40px !important;
    /* Consistent spacing between logos without relying on margins */
    width: 100% !important;
}

/* Control column behavior so they don't break the container */
.partner-wrapper .elementor-column {
    text-align: center !important;
    flex: 0 0 auto !important;
    /* Stop logos from stretching out of proportion */
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    /* Remove default Elementor column padding to rely strictly on gap */
}

/* Ensure logos stay reasonably sized and maintain aspect ratio */
.partner-wrapper img {
    max-height: 70px !important;
    max-width: 100% !important;
    /* Ensures a logo won't overflow its container on tiny phones */
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* ===================================
   TABLET RESPONSIVE (< 1024px)
=================================== */
@media (max-width: 1024px) {
    .partner-wrapper {
        padding: 40px 30px !important;
        margin: 50px 20px !important;
    }

    .partner-wrapper .elementor-container {
        gap: 30px !important;
    }

    .partner-wrapper img {
        max-height: 60px !important;
    }
}

/* ===================================
   MOBILE RESPONSIVE (< 767px)
=================================== */
@media (max-width: 767px) {
    .partner-wrapper {
        padding: 20px 10px !important;
        /* Smaller padding to maximize horizontal space */
        margin: 30px 10px !important;
        border-radius: 12px !important;
        width: calc(100% - 20px) !important;
        /* Take up as much screen as possible */
    }

    .partner-wrapper .elementor-container {
        flex-wrap: nowrap !important;
        /* Force 1 strictly straight row */
        gap: 8px !important;
        /* Tiny gap so 6 logos fit side-by-side */
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Force columns to shrink down aggressively to fit */
    .partner-wrapper .elementor-column {
        width: auto !important;
        min-width: 0 !important;
        /* Crucial to allow shrinking below element's natural width */
        flex: 1 1 0 !important;
        /* Let all 6 columns distribute space equally */
        padding: 0 !important;
    }

    /* Keep images fully responsive to the tiny columns */
    .partner-wrapper img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 35px !important;
        /* Cap vertical height to avoid weird stretching */
        object-fit: contain !important;
    }
}/* End custom CSS */