@property --programmes-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #E8F4FC;
}

.field--name-field-other-side {
  display: none;
}

:root {
  --primary-color: #003EAB;
  --primary-light-color: #EBF9FF;
  --primary-color-title: #003798;
  --primary-color-text: #134C94;
  --secondary-color: #2e80be;
  --primary-color-hover: #88D3FF;
  /* mega menu */
  --background-medium-blue: #CBEFFF;
  --background-light-blue: #DAF4FD;
  /* programmes */
  --programmes-color: #E8F4FC;
  --programme-grey-color: #D4D4D4;
  /* footer copyright */
  --footer-copyright-blue: #00328B;
  /* color */
  --yellow-color: #FEBE35;
  --color-orange: #FA6D31;
  --color-orange2: #f66631;
  --color-light-orange: #FF8C5B;
  --color-deep-orange: #CC4C1D;
  --color-purple: #6A449B;

  --twocol-gap: 50px;
  --site-notice-h: 0px;

  /* background-color: oklch(from var(--programmes-color) 65.5% 0.145 h); */
  /* background-color: oklch(from var(--programmes-color) 90% 0.035 h); */
  /* background-color: oklch(from var(--programmes-color) 96.5% 0.015 h); */
}

.media-library-item__attributes {
  display: none;
}

/* Color Style *************************************************/
/* Verydeep > Rich > Deep > Regular > Light > Pale > Verylight */
.programmes-red-style {
  --programmes-color-style: #C91E01;
  --programmes-color-color: #DE2F11;
  --programmes-color-light: #E96954;
  --programmes-color-pale: #FFDBD3;
  --programmes-color-pale2: #ffcfc4;
  --programmes-color-verylight: #FFF3EE;
  --programmes-color-bright: #EF4123;
  --programmes-color-brick: #D6432A;
}

.programmes-blue-style {
  --programmes-color-style: #005694;
  --programmes-color-color: #003EAB;
  --programmes-color-light: #0264AB;
  --programmes-color-pale: #D2E7F8;
  --programmes-color-pale2: #badefb;
  --programmes-color-verylight: #E3F8FF;
  --programmes-color-bright: #519FDD;
  --programmes-color-brick: #003EAB;
}

.programmes-yellow-style {
  --programmes-color-style: #FEBE35;
  --programmes-color-color: #CC4C1D;
  --programmes-color-light: #F7C55A;
  --programmes-color-pale: #FFE09C;
  --programmes-color-pale2: #fdd57d;
  --programmes-color-verylight: #FFF1DA;
  --programmes-color-bright: #FFC96F;
  --programmes-color-brick: #FF971F;
}

.programmes-purple-style {
  --programmes-color-style: #6A449B;
  --programmes-color-color: #6A449B;
  --programmes-color-light: #896BC6;
  --programmes-color-pale: #EDD5FF;
  --programmes-color-pale2: #E8CAFF;
  --programmes-color-verylight: #F5F0FF;
  --programmes-color-bright: #8A60C1;
  --programmes-color-brick: #6A449B;
}

.programmes-green-style {
  --programmes-color-style: #1A8665;
  --programmes-color-color: #1A8665;
  --programmes-color-light: #38AC88;
  --programmes-color-pale: #B3EAD9;
  --programmes-color-pale2: #9edfcb;
  --programmes-color-verylight: #E6F6E8;
  --programmes-color-bright: #3DBB95;
  --programmes-color-brick: #1A8665;
}

.programmes-brown-style {
  --programmes-color-style: #A96148;
  --programmes-color-color: #A96148;
  --programmes-color-light: #C0825E;
  --programmes-color-pale: #FFE7D3;
  --programmes-color-pale2: #fbd8bb;
  --programmes-color-verylight: #FFF8EE;
  --programmes-color-bright: #8D5846;
  --programmes-color-brick: #AC6147;
}

/* system Css Document  ***************************************************/
/* :root {
  --bs-gutter-x: 100px;
} */
:root,
.container,
.container-fluid,
.index-banner-swiper-shell,
.index-banner-swiper,
.homepage-departments-section,
.explore-homepage-section,
.homepage-events-section,
.video-header-section,
/* .row.g-0 sets --bs-gutter-x: 0; restore on content columns so descendants can use it */
main .row.g-0>* {
  --bs-gutter-x: 60px;
}
.container .container {
  --bs-gutter-x: 0 !important;
} 

.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  max-width: none;
}

@media (min-width: 1200px) {

  :root,
  .container,
  .container-fluid,
  .index-banner-swiper-shell,
  .index-banner-swiper,
  .homepage-departments-section,
  .explore-homepage-section,
  .homepage-events-section,
  .video-header-section,
  main .row.g-0>* {
    --bs-gutter-x: 100px;
  }
}

@media (min-width: 1540px) {

  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1540px;
  }
}

@media (max-width: 767.98px) {

  :root,
  .container,
  .container-fluid,
  .index-banner-swiper-shell,
  .index-banner-swiper,
  .homepage-departments-section,
  .explore-homepage-section,
  .homepage-events-section,
  .video-header-section,
  main .row.g-0>* {
    --bs-gutter-x: 30px;
  }

  .container-sm,
  .container {
    max-width: 540px;
  }
}

p {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  line-height: 1.75;
}

main ul,
main ol:not(.breadcrumb) {
  margin-bottom: 20px;
}

main ul li,
main ol:not(.breadcrumb) li {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  line-height: calc(100% + 10px);
}

main ul li:not(:last-child),
main ol:not(.breadcrumb) li:not(:last-child) {
  margin-bottom: 5px;
}

main ul li::marker,
main ol:not(.breadcrumb) li::marker {
  color: var(--color-orange);
}

.mb-5 {
  margin-bottom: 50px !important;
}

/* Global CSS */
.footnote {
  margin-top: 38px;
  font-size: 15px;
  line-height: calc(100% + 10px);
}

/* Paragraph CSS ***********************************************/
.paragraph--type--body-content,
.paragraph--type--link,
.paragraph--type--card-list,
.paragraph--type--image-text-column,
.paragraph--type--bp-accordion,
.paragraph--type--alumni-sharing-card,
.paragraph--type--card-list-swiper,
.photo-gallery--style-carousel-full,
.photo-gallery--style-carousel-with-thumbnail,
.photo-gallery--style-carousel-full-image,
.paragraph--type--bp-tabs,
.paragraph--type--brochure,
.paragraph--type--timeline {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-0 .paragraph--type--body-content,
.pt-0 .paragraph--type--link,
.pt-0 .paragraph--type--card-list,
.pt-0 .paragraph--type--image-text-column,
.pt-0 .paragraph--type--bp-accordion,
.pt-0 .paragraph--type--alumni-sharing-card,
.pt-0 .paragraph--type--card-list-swiper,
.pt-0 .photo-gallery--style-carousel-full,
.pt-0 .photo-gallery--style-carousel-with-thumbnail,
.pt-0 .photo-gallery--style-carousel-full-image,
.pt-0 .paragraph--type--bp-tabs,
.pt-0 .paragraph--type--brochure,
.pt-0 .paragraph--type--timeline {
  padding-top: 0 !important;
}

.pb-0 .paragraph--type--body-content,
.pb-0 .paragraph--type--link,
.pb-0 .paragraph--type--card-list,
.pb-0 .paragraph--type--image-text-column,
.pb-0 .paragraph--type--bp-accordion,
.pb-0 .paragraph--type--alumni-sharing-card,
.pb-0 .paragraph--type--card-list-swiper,
.pb-0 .photo-gallery--style-carousel-full,
.pb-0 .photo-gallery--style-carousel-with-thumbnail,
.pb-0 .photo-gallery--style-carousel-full-image,
.pb-0 .paragraph--type--bp-tabs,
.pb-0 .paragraph--type--brochure,
.pb-0 .paragraph--type--timeline {
  padding-bottom: 0 !important;
}

.py-0 .paragraph--type--body-content,
.py-0 .paragraph--type--link,
.py-0 .paragraph--type--card-list,
.py-0 .paragraph--type--image-text-column,
.py-0 .paragraph--type--bp-accordion,
.py-0 .paragraph--type--alumni-sharing-card,
.py-0 .paragraph--type--card-list-swiper,
.py-0 .photo-gallery--style-carousel-full,
.py-0 .photo-gallery--style-carousel-with-thumbnail,
.py-0 .photo-gallery--style-carousel-full-image,
.py-0 .paragraph--type--bp-tabs,
.py-0 .paragraph--type--brochure,
.py-0 .paragraph--type--timeline {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.layout--twocol-section.layout--twocol-section--50-50 {
  --twocol-gap: 50px;
}

.paragraph--type--text-two-column .field--name-field-image-item {
  aspect-ratio: 8 / 5;
}

.paragraph h2,
.paragraph h3,
.paragraph h4 {
  color: var(--primary-color-title);
}

.paragraph h2,
.paragraph h3,
.paragraph h4 {
  margin-bottom: 30px;
}

.paragraph p:has(+ h2),
.paragraph p:has(+ h3),
.paragraph p:has(+ h4) {
  margin-bottom: 50px;
}

.page-node-type-programmes .paragraph p {
  font-size: 16px;
  line-height: 1.75;
}

.paragraph>.paragraph__column .field--type-text-long :last-child {
  margin-bottom: 0;
}

.paragraph>.paragraph__column .field--type-text-long p+.table {
  margin-top: 30px;
}

.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--text-two-column,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--programme-swiper,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--programme-table,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--academic-award,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--card-list-swiper,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph--type--body-content,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--link-card,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--card-list,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--alumni-sharing-card,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph.paragraph--type--bp-accordion,
.page-node-type-programmes .block-field-blocknodeprogrammesfield-paragraphs>div:last-child .paragraph--type--contact-card {
  padding-bottom: 0;
}

.page-node-type-programmes .pb-0>.paragraph.paragraph--type--bp-accordion {
  padding-bottom: 20px !important;
}

.page-node-type-programmes .has-background-color.pb-0+.has-background-color>.paragraph {
  padding-top: 50px;
}

.block-field-blocknodedepartmentsfield-paragraphs>div:has(.view-id-block_programmes_school_list) {
  position: relative;
  z-index: 1;
}

.block-field-blocknodedepartmentsfield-paragraphs .paragraph--type--bp-view {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 991.98px) {
  .paragraph h2 {
    margin-bottom: 20px;
  }
}

@media (max-width: 767.98px) {
  .block-field-blocknodedepartmentsfield-paragraphs .paragraph--type--bp-view {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* ==========================================================================
   Link Item Paragraph
   ========================================================================== */
.field--name-field-button-style,
.field--name-field-icon-position,
.field--name-field-link-color-style,
.field--name-field-button-large,
.paragraph--type--link-item > .paragraph__column > .field--name-field-popup-title,
.paragraph--type--link-item > .paragraph__column > .field--name-field-popup-content {
  display: none;
}

.paragraph--type--link>.paragraph__column {
  display: flex;
  flex-wrap: wrap;
  gap: 0 min(4.2vw, 80px);
  /* 水平間距 */
  align-items: center;
}

.paragraph--type--link-item .field--name-field-link .link-item__trigger {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
}

.paragraph--type--link-item.is-text-link {
  display: inline-block;
  margin-top: 30px;
}

.paragraph--type--link-item.is-text-link .field--name-field-link a,
.paragraph--type--link-item.is-text-link .field--name-field-link .link-item__trigger {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-weight: 700;
  line-height: calc(100% + 10px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.paragraph--type--link-item.is-text-link .field--name-field-link a:hover,
.paragraph--type--link-item.is-text-link .field--name-field-link .link-item__trigger:hover {
  text-decoration: underline;
}

/* Colors */
.paragraph--type--link-item.is-text-link.link-color-blue-text .field--name-field-link a,
.paragraph--type--link-item.is-text-link.link-color-blue-text .field--name-field-link .link-item__trigger {
  color: var(--primary-color);
}

.paragraph--type--link-item.is-text-link.link-color-black-text .field--name-field-link a,
.paragraph--type--link-item.is-text-link.link-color-black-text .field--name-field-link .link-item__trigger {
  color: #000;
}

/* Icon Base (Hidden by default) */
.paragraph--type--link-item.is-text-link .field--name-field-link a::after,
.paragraph--type--link-item.is-text-link .field--name-field-link a::before,
.paragraph--type--link-item.is-text-link .field--name-field-link .link-item__trigger::after,
.paragraph--type--link-item.is-text-link .field--name-field-link .link-item__trigger::before {
  content: '';
  display: none;
  /* 預設隱藏 */
  width: 24px;
  height: 24px;
  background-image: url('../images/icon/link_arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* No Icon Selected (Underline style) */
.paragraph--type--link-item.is-text-link:not(.icon-pos-left):not(.icon-pos-right) .field--name-field-link a,
.paragraph--type--link-item.is-text-link:not(.icon-pos-left):not(.icon-pos-right) .field--name-field-link .link-item__trigger {
  text-decoration: underline;
}

/* Icon Position: Right */
.paragraph--type--link-item.is-text-link.icon-pos-right .field--name-field-link a::after,
.paragraph--type--link-item.is-text-link.icon-pos-right .field--name-field-link .link-item__trigger::after {
  display: inline-block;
}

/* Icon Position: Left */
.paragraph--type--link-item.is-text-link.icon-pos-left .field--name-field-link a::before,
.paragraph--type--link-item.is-text-link.icon-pos-left .field--name-field-link .link-item__trigger::before {
  display: inline-block;
}

/* ==========================================================================
   Button Link Item Paragraph
   ========================================================================== */
.paragraph--type--link-item.is-button-link {
  display: inline-block;
  margin-top: 30px;
}

.paragraph--type--link-item.is-button-link .field--name-field-link a,
.paragraph--type--link-item.is-button-link .field--name-field-link .link-item__trigger {
  border-radius: 50px;
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
  transition: all 0.3s ease;
}

/* Button Sizes */
.paragraph--type--link-item.is-button-link.is-large-button .field--name-field-link a,
.paragraph--type--link-item.is-button-link.is-large-button .field--name-field-link .link-item__trigger {
  padding: 10px 30px;
  font-size: 22px;
  line-height: 28px;
}

.paragraph--type--link-item.is-button-link.is-small-button .field--name-field-link a,
.paragraph--type--link-item.is-button-link.is-small-button .field--name-field-link .link-item__trigger {
  padding: 8px 20px;
  font-size: 18px;
  line-height: 23px;
}

/* Button Arrow Icon */
.paragraph--type--link-item.is-button-link .field--name-field-link a::after,
.paragraph--type--link-item.is-button-link .field--name-field-link .link-item__trigger::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 16px;
  background: url(../images/icon/arrow_white_7x14.svg) center no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.paragraph--type--link-item.is-button-link .field--name-field-link a:hover::after,
.paragraph--type--link-item.is-button-link .field--name-field-link .link-item__trigger:hover::after {
  transform: translateX(5px);
}

/* Button Colors */
/* Orange Background */
.paragraph--type--link-item.is-button-link.link-color-orange-background .field--name-field-link a,
.paragraph--type--link-item.is-button-link.link-color-orange-background .field--name-field-link .link-item__trigger {
  background: linear-gradient(to right, #FFAD5B 0%, #FF5F1B 100%);
  /* Adjust gradient as needed */
}

/* Light Blue Background */
.paragraph--type--link-item.is-button-link.link-color-light-blue-background .field--name-field-link a,
.paragraph--type--link-item.is-button-link.link-color-light-blue-background .field--name-field-link .link-item__trigger {
  background-color: #88D3FF;
  color: #000;
  /* Text is black on light blue */
}

/* Change arrow color to black for light blue background */
.paragraph--type--link-item.is-button-link.link-color-light-blue-background .field--name-field-link a::after,
.paragraph--type--link-item.is-button-link.link-color-light-blue-background .field--name-field-link .link-item__trigger::after {
  background-image: url(../images/icon/arrow_black_7x14.svg);
}

/* Dark Blue Background */
.paragraph--type--link-item.is-button-link.link-color-dark-blue-background .field--name-field-link a,
.paragraph--type--link-item.is-button-link.link-color-dark-blue-background .field--name-field-link .link-item__trigger {
  background-color: var(--primary-color);
}

/* Link item popup modal */
.link-item-modal .modal-content {
  background-color: #EBF9FF;
  border: none;
  border-radius: 40px;
  overflow: hidden;
  overflow: visible;
  height: calc(100% - 65px);
  padding: 40px;
  margin-top: 65px;  
}
.link-item-modal .modal-header {  
  border-bottom: none;  
  align-items: flex-start;  
  padding: 0 0 20px;
}
.link-item-modal .modal-title {
  color: var(--primary-color-title);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: calc(100% + 8px);  
}
.link-item-modal .modal-header .btn-close {
  background: #FEBE35 url(../images/icon/modal_close_50x50.svg) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: -65px;
}
.link-item-modal .modal-body {  
  padding: 0 8px 0 0;
}
.link-item-modal .modal-body > .field {
  margin: 0;
}
.link-item-modal .modal-body .table-responsive {
  margin-top: 0.75rem;
}

@media (max-width: 1200px) {
  .link-item-modal .modal-dialog {
    max-width: calc(100% - 60px);
  }
}

@media (max-width: 767.98px) {  
  .link-item-modal .modal-dialog {
    max-width: calc(100% - 30px);
    height: calc(100% - 30px);
    min-height: calc(100% - 30px);
    margin: 15px;
  }
  .link-item-modal .modal-content {
    border-radius: 30px;
    padding: 20px;
  }  
}

/* ==========================================================================
   Card List Style: Images/videos with content (or 116)
   Card List Style: Images/videos with caption (117) Overrides
   ========================================================================== */
.card-list--style-116 .field--name-field-header,
.card-list--style-117 .field--name-field-header {
  color: var(--primary-color-title);
  font-size: var(--font-size-sm);
}

/* Card List Style 116 */
.field--name-field-card-style {
  display: none;
}

.card-list--style-116 .card-list-grid,
.card-list--style-117 .card-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;
}

@media (max-width: 991px) {

  .card-list--style-116 .card-list-grid,
  .card-list--style-117 .card-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {

  .card-list--style-116 .card-list-grid,
  .card-list--style-117 .card-list-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Container */
.card-list--style-116 .card-list-grid__item .paragraph--type--card-list-item,
.card-list--style-117 .card-list-grid__item .paragraph--type--card-list-item {
  background-color: #ffffff;
  border: unset;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
}

.card-list--style-116 .card-list-grid__item .paragraph--type--card-list-item .paragraph__column,
.card-list--style-117 .card-list-grid__item .paragraph--type--card-list-item .paragraph__column {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  margin-top: 0;
}

/* Image / Video Wrapper */
.card-list--style-116 .field--name-field-image,
.card-list--style-116 .field--name-field-video,
.card-list--style-116 .field--name-field-youtube,
.card-list--style-117 .field--name-field-image,
.card-list--style-117 .field--name-field-video,
.card-list--style-117 .field--name-field-youtube {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: block !important;
}

.card-list--style-116 .field--name-field-image img,
.card-list--style-116 .field--name-field-video video,
.card-list--style-116 .field--name-field-youtube iframe,
.card-list--style-116 .youtube-container,
.card-list--style-117 .field--name-field-image img,
.card-list--style-117 .field--name-field-video video,
.card-list--style-117 .field--name-field-youtube iframe,
.card-list--style-117 .youtube-container {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

/* Specific YouTube fixes */
.card-list--style-116 .field--name-field-youtube iframe,
.card-list--style-117 .field--name-field-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
}

.card-list--style-116 .youtube-container,
.card-list--style-117 .youtube-container {
  position: relative;
  padding-bottom: 0;
}

/* Title (Blue rounded pill overlapping the image) */
.card-list--style-116 .field--name-field-title,
.card-list--style-117 .field--name-field-title {
  background-color: var(--primary-color);
  border-radius: 0 20px 20px 0;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  align-self: flex-start;
  max-width: calc(100% - 35px);
  margin-top: -20px;
  margin-bottom: 10px;
  padding: 9px 20px;
  position: relative;
  transform: none;
}

.card-list--style-117 .field--name-field-title {
  background-color: #CDE8FF;
  color: #000;
  margin-bottom: 0;
}

/* Body Text */
.card-list--style-116 .field--name-bp-text,
.card-list--style-117 .field--name-bp-text {
  font-size: 16px;
  line-height: 1.6;
  padding: 0 20px;
  margin-left: 0 !important;
}

.card-list--style-116 .field--name-bp-text p,
.card-list--style-117 .field--name-bp-text p {
  margin-bottom: 0;
}

/* Hide exposed form on block_2 (used only for AJAX month filter) */
.view-display-id-block_2 .views-exposed-form {
  display: none;
}

.card-list--style-116 .card-list-item--has-image,
.card-list--style-116 .card-list-item--no-image {
  background-color: #ffffff;
  border: unset;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
}

.card-list--style-116 .card-list-item--has-image .paragraph__column,
.card-list--style-116 .card-list-item--no-image .paragraph__column {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
}

.card-list--style-116 .field--name-field-image,
.card-list--style-116 .field--name-field-video,
.card-list--style-116 .field--name-field-youtube {
  position: relative;
  margin-bottom: 0;
  width: 100%;
}

.card-list--style-116 .field--name-field-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
}

.card-list--style-116 .youtube-container {
  position: relative;
  padding-bottom: 0;
  /* Override default youtube-container padding */
}

.card-list--style-117 .field--name-bp-text {
  display: none !important;
}

/* ==========================================================================
   Card List Style: Card with icon (118)
   ========================================================================== */
.paragraph--type--card-list h2 {
  font-size: var(--font-size-md);
}
.paragraph--type--card-list.card-list--style-118 .card-list-item--has-image {
  border: #D9D9D9 1px solid;
  border-radius: 30px;
  height: 100%;
  padding: 20px;
}
.paragraph--type--card-list.card-list--style-118 .field--type-image {
  margin-bottom: 20px;
}
.paragraph--type--card-list.card-list--style-118 .field--type-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.paragraph--type--card-list.card-list--style-118 .field--name-field-title {
  font-size: 18px;
  font-weight: 700;
  line-height: calc(100% + 8px);
  margin-bottom: 5px;
}

@media (max-width: 767.98px) {
  .paragraph--type--card-list.card-list--style-118 .card-list-item--has-image {
    border-radius: 20px;
    padding: 15px;
  }
}

/* ==========================================================================
  Card List Style: (119) no-image styles
  ========================================================================== */
.paragraph--type--card-list.card-list--style-119 .card-list-item--no-image {
  border: var(--primary-color) 1px solid;
  border-radius: 30px;
  height: 100%;
  min-height: auto;
  padding: 30px;
}
.paragraph--type--card-list.card-list--no-image.card-list--style-119 .card-list-grid__item {
  padding-top: 0;
}
.paragraph--type--card-list.card-list--style-119 .card-list-item--no-image>.paragraph__column {
  margin-top: 0;
}
.paragraph--type--card-list.card-list--style-119 .card-list-item--no-image .field--name-field-title {
  color: #000;
  margin-bottom: 5px;
  padding: 0;
}
.paragraph--type--card-list.card-list--style-119 .card-list-item--no-image .field--type-text-long,
.paragraph--type--card-list.card-list--style-119 .card-list-item--no-image .field--type-text-long p {
  font-size: 16px;
  line-height: calc(100% + 10px);
}

@media (max-width: 767.98px) {
  .paragraph--type--card-list.card-list--style-119 .card-list-item--no-image {
    border-radius: 20px;
    padding: 15px;
  }
}

/* ==========================================================================
  Card List Style: (120) Card Title Above styles
  ========================================================================== */
.paragraph--type--card-list.card-list--style-120 .card-list-item--no-image {
  border-color: var(--primary-color);
}
.paragraph--type--card-list.card-list--style-120 .card-list-item--no-image .field--name-field-title {
  color: #000;
}
.paragraph--type--card-list.card-list--style-120 .card-list-item--no-image .field--type-text-long,
.paragraph--type--card-list.card-list--style-120 .card-list-item--no-image .field--type-text-long p {
  font-size: 16px;
  line-height: calc(100% + 10px);
}

/* ==========================================================================
  Card List Style: (121) Card swiper
  Card List — Card Carousel style (multi-card swiper)
  ========================================================================== */

.paragraph--type--card-list.card-list--style-121 .field--name-field-header {
  margin-bottom: 32px;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-section {
  overflow: hidden;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-swiper .swiper-wrapper {
  align-items: stretch;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-swiper .swiper-slide {
  height: auto;
}
.paragraph--type--card-list.card-list--style-121 .card-list-grid__item {
  height: 100%;
  padding-top: 0;
  padding-left: 11px;
}
.paragraph--type--card-list.card-list--style-121 .card-list-grid__item::before {
  background-color: var(--primary-color-title);
  border-radius: 5px;
  content: '';
  width: 5px;
  position: absolute;
  inset: 0 auto 0 0;
}
.paragraph--type--card-list.card-list--style-121 .swiper-slide:nth-child(even) .card-list-grid__item::before {
  background-color: #88D3FF;
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image {
  border: none;
  border-radius: 0 10px 10px 0;
  background: #F4F4F4;
  height: 100%;
  padding: 15px 22px 15px 17px;
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image>.paragraph__column,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image>.paragraph__column {
  margin-top: 0;
  height: 100%;
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image .field--name-field-image,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image .field--name-field-image,
.paragraph--type--card-list.card-list--style-121 .field--name-field-video,
.paragraph--type--card-list.card-list--style-121 .field--name-field-youtube {
  display: none;
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image .field--name-field-title,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image .field--name-field-title {
  background: transparent;
  color: var(--primary-color-title);
  font-size: 22px;
  font-weight: 700;
  line-height: calc(100% + 6px);
  display: block;
  margin-bottom: 5px;
  padding: 0;
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image .field--name-bp-text,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image .field--name-bp-text {
  color: var(--primary-color-title);
  font-size: 16px;
  line-height: calc(100% + 10px);
}
.paragraph--type--card-list.card-list--style-121 .card-list-item--no-image .field--name-bp-text p,
.paragraph--type--card-list.card-list--style-121 .card-list-item--has-image .field--name-bp-text p {
  color: var(--primary-color-title);
  font-size: 16px;
  line-height: calc(100% + 10px);
  margin: 0;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button {
  display: flex;
  gap: 20px;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-prev,
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-next {
  background: var(--primary-color) url(../images/icon/arrow_circle_white_40x40.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  color: #fff;
  width: 40px;
  height: 40px;
  margin: 0;
  position: static;
  transition: all 0.3s ease;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-prev svg,
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-next svg {
  display: none;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-prev {
  transform: scaleX(-1);
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-prev.swiper-button-disabled,
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.paragraph--type--card-list.card-list--style-121 .card-list-carousel-section--static .card-list-carousel-footer {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .paragraph--type--card-list.card-list--style-121 .field--name-field-header {
    margin-bottom: 24px;
  }

  .paragraph--type--card-list.card-list--style-121 .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-121 .card-list-item--has-image {
    padding: 24px 20px;
    min-height: 140px;
  }

  .paragraph--type--card-list.card-list--style-121 .card-list-carousel-footer {
    margin-top: 24px;
  }

  .paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-prev,
  .paragraph--type--card-list.card-list--style-121 .card-list-carousel-button-next {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Card List Style: Our Team (125)
   Scoped only to .card-list--style-125 — resets base card-list / no-image styles.
   ========================================================================== */
.paragraph--type--card-list.card-list--style-125 .field--name-field-header {
  text-align: center;
}
.paragraph--type--card-list.card-list--style-125 .card-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
}
.column-1>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
.column-2>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
.column-3>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
.column-4>.paragraph--type--card-list.card-list--style-125 .card-list-grid {
  grid-template-columns: repeat(2, 1fr);
}
.paragraph--type--card-list.card-list--style-125 .card-list-grid__item,
.paragraph--type--card-list.card-list--style-125.card-list--no-image .card-list-grid__item,
.paragraph--type--card-list.card-list--style-125.card-list--has-image .card-list-grid__item {
  padding-top: 0;
}
.paragraph--type--card-list.card-list--style-125 .card-list-grid__item:has(.field--name-field-link a) {
  cursor: pointer;
}
.paragraph--type--card-list.card-list--style-125 .card-list-grid__item .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image {
  background-color: #EBF9FF;
  border: none;
  border-radius: 20px;
  min-height: 0;
  height: 100%;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
}
.paragraph--type--card-list.card-list--style-125 .card-list-grid__item .paragraph--type--card-list-item>.paragraph__column,
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image>.paragraph__column,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image>.paragraph__column {
  margin-top: 0;
}
/* With link: reserve space for orange arrow */
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image:has(.field--name-field-link a)>.paragraph__column,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image:has(.field--name-field-link a)>.paragraph__column,
.paragraph--type--card-list.card-list--style-125 .card-list-grid__item .paragraph--type--card-list-item:has(.field--name-field-link a)>.paragraph__column {
  padding-right: 54px;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-image,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-image,
.paragraph--type--card-list.card-list--style-125 .field--name-field-video,
.paragraph--type--card-list.card-list--style-125 .field--name-field-youtube {
  display: none;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-title,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-title {
  background: transparent;
  color: #000;
  font-size: 22px;
  font-weight: 700;
  line-height: calc(100% + 6px);
  display: block;
  margin-bottom: 7px;
  padding: 0;
  position: relative;
  z-index: 1;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image:has(.field--name-field-link a) .field--name-field-title,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image:has(.field--name-field-link a) .field--name-field-title {
  pointer-events: none;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image:has(.field--name-field-link a) .field--name-bp-text,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image:has(.field--name-field-link a) .field--name-bp-text {
  pointer-events: none;
}
/* Spacer for arrow; the <a> stretches over the whole card (only when link exists) */
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-link,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-link {
  position: absolute;
  inset: 0;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-link:not(:has(a)),
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-link:not(:has(a)) {
  display: none;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-link a,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-link a {
  background: transparent;
  border-radius: 20px;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.paragraph--type--card-list.card-list--style-125 .card-list-item--no-image .field--name-field-link a::after,
.paragraph--type--card-list.card-list--style-125 .card-list-item--has-image .field--name-field-link a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: var(--color-orange) url(../images/icon/arrow_circle_white_34x34.svg) center no-repeat;
  transition: all 0.3s ease;
}

@media (max-width: 991.98px) {
  .paragraph--type--card-list.card-list--style-125 .card-list-grid,
  .column-1>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
  .column-2>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
  .column-3>.paragraph--type--card-list.card-list--style-125 .card-list-grid,
  .column-4>.paragraph--type--card-list.card-list--style-125 .card-list-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Card List Style: Our Team with image (126)
   Scoped only to .card-list--style-126 — resets base card-list styles.
   ========================================================================== */
.paragraph--type--card-list.card-list--style-126 .field--name-field-header {
  text-align: center;
}
.paragraph--type--card-list.card-list--style-126 .card-list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
}
.column-1>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
.column-2>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
.column-3>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
.column-4>.paragraph--type--card-list.card-list--style-126 .card-list-grid {
  grid-template-columns: repeat(4, 1fr);
}
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item,
.paragraph--type--card-list.card-list--style-126.card-list--no-image .card-list-grid__item,
.paragraph--type--card-list.card-list--style-126.card-list--has-image .card-list-grid__item {
  padding-top: 90px;
}
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:has(.field--name-field-link a) {
  cursor: pointer;
}
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image {
  background-color: #EBF9FF;
  border: none;
  border-radius: 20px;
  height: 100%;
  padding: 105px 26px 26px;
  position: relative;
  text-align: center;
  transition: all 0.3s ease;
}

/* Alternating row colours (4-col): rows 1,3… blue / rows 2,4… peach */
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .paragraph--type--card-list-item,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .card-list-item--has-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .card-list-item--has-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .card-list-item--has-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .card-list-item--has-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .card-list-item--no-image,
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .card-list-item--no-image {
  background-color: #FFF5EA;
}
.paragraph--type--card-list.card-list--style-126 .card-list-grid__item .paragraph--type--card-list-item>.paragraph__column,
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image>.paragraph__column,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image>.paragraph__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  padding: 0;
  height: 100%;
}
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-image,
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-image {
  display: block;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  z-index: 1;
  pointer-events: none;
}
.paragraph--type--card-list.card-list--style-126 .field--name-field-image .field__items,
.paragraph--type--card-list.card-list--style-126 .field--name-field-image .field__item,
.paragraph--type--card-list.card-list--style-126 .field--name-field-image .media,
.paragraph--type--card-list.card-list--style-126 .field--name-field-media-image {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.paragraph--type--card-list.card-list--style-126 .field--name-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.paragraph--type--card-list.card-list--style-126 .field--name-field-video,
.paragraph--type--card-list.card-list--style-126 .field--name-field-youtube {
  display: none;
}
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-title,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-title {
  background: transparent;
  font-size: 22px;
  font-weight: 700;
  line-height: calc(100% + 6px);
  margin-bottom: 10px;
}
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image:has(.field--name-field-link a) .field--name-field-title,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image:has(.field--name-field-link a) .field--name-field-title {
  pointer-events: none;
}

.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-bp-text,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-bp-text {
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image:has(.field--name-field-link a) .field--name-bp-text,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image:has(.field--name-field-link a) .field--name-bp-text {
  pointer-events: none;
}
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-bp-text p,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-bp-text p {
  color: #000;
  font-size: 16px;
  line-height: 22px;
}

/* Whole card is the link hit area only when a link exists */
.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-link,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-link {
  margin: 0;
  padding: 0;
  position: static;
}

.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-link:not(:has(a)),
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-link:not(:has(a)) {
  display: none;
}

.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-link a,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-link a {
  background: transparent;
  border-radius: 20px;
  text-indent: -9999px;
  text-decoration: none;
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inset: -90px 0 0;
  z-index: 2;
}

.paragraph--type--card-list.card-list--style-126 .card-list-item--no-image .field--name-field-link a::after,
.paragraph--type--card-list.card-list--style-126 .card-list-item--has-image .field--name-field-link a::after {
  content: none;
}

@media (max-width: 1200px) {
  .paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-1>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-2>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-3>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-4>.paragraph--type--card-list.card-list--style-126 .card-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Alternating rows for 2-col */
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+5) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+6) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+7) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(8n+8) .card-list-item--no-image {
    background-color: #EBF9FF;
  }

  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+4) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+5) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+6) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+4) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+5) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+6) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+5) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+6) .card-list-item--no-image {
    background-color: #FFF5EA;
  }
}

@media (max-width: 991.98px) {
  .paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-1>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-2>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-3>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-4>.paragraph--type--card-list.card-list--style-126 .card-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Alternating rows for 2-col */
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+4) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+5) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+6) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+4) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+5) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(6n+6) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+5) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+6) .card-list-item--no-image {
    background-color: #EBF9FF;
  }

  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--no-image {
    background-color: #FFF5EA;
  }
}

@media (max-width: 767px) {
  .paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-1>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-2>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-3>.paragraph--type--card-list.card-list--style-126 .card-list-grid,
  .column-4>.paragraph--type--card-list.card-list--style-126 .card-list-grid {
    grid-template-columns: 1fr;
  }

  /* Alternating cards for 1-col */
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+3) .card-list-item--no-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(4n+4) .card-list-item--no-image {
    background-color: #EBF9FF;
  }

  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(even) .paragraph--type--card-list-item,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(even) .card-list-item--has-image,
  .paragraph--type--card-list.card-list--style-126 .card-list-grid__item:nth-child(even) .card-list-item--no-image {
    background-color: #FFF5EA;
  }
}

/* Card List Carousel — prev / pause / next */
.card-list-carousel-section .card-list-carousel-button {
  align-items: center;
}
.card-list-carousel-section .card-list-carousel-button-prev,
.card-list-carousel-section .card-list-carousel-button-next {
  background-color: #003087;
  color: #fff;
}
.card-list-carousel-section .card-list-carousel-autoplay-toggle {
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #C3E4FF;
  cursor: pointer;
  transition: all 0.3s ease;
}
.card-list-carousel-section .card-list-carousel-autoplay-toggle .card-list-carousel-autoplay-toggle__icon--pause {
  background-color: var(--primary-color);
  mask: url(/themes/custom/i2_theme/images/icon/swiper_pause_40x40.svg) no-repeat center / contain;
  -webkit-mask: url(/themes/custom/i2_theme/images/icon/swiper_pause_40x40.svg) no-repeat center / contain;
  width: 40px;
  height: 40px;
}
.card-list-carousel-section .card-list-carousel-autoplay-toggle .card-list-carousel-autoplay-toggle__icon--play {
  background-color: var(--primary-color);
  mask: url(/themes/custom/i2_theme/images/icon/swiper_play_40x40.svg) no-repeat center / contain;
  -webkit-mask: url(/themes/custom/i2_theme/images/icon/swiper_play_40x40.svg) no-repeat center / contain;
  display: none;
  width: 40px;
  height: 40px;
}
.card-list-carousel-section .card-list-carousel-autoplay-toggle .card-list-carousel-autoplay-toggle__icon--play {
  display: none;
}
.card-list-carousel-section.is-autoplay-paused .card-list-carousel-autoplay-toggle .card-list-carousel-autoplay-toggle__icon--pause {
  display: none;
}
.card-list-carousel-section.is-autoplay-paused .card-list-carousel-autoplay-toggle .card-list-carousel-autoplay-toggle__icon--play {
  display: block;
}

/* ==========================================================================
   Image Text Column Paragraph
   ========================================================================== */
.paragraph--type--image-text-column .field--name-field-image,
.paragraph--type--image-text-column .field--name-field-image .field__items,
.paragraph--type--image-text-column .field--name-field-image .field__item,
.paragraph--type--image-text-column .field--name-field-image .media,
.paragraph--type--image-text-column .field--name-field-media-image {
  height: 100%;
}

.paragraph--type--image-text-column .field--name-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure the layout aligns properly */
.paragraph--type--image-text-column .layout--twocol-section {
  align-items: stretch;
  gap: 30px 50px;
}

/* Header style */
.paragraph--type--image-text-column .field--name-field-header {
  color: var(--primary-color-title);
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-bottom: 20px;
}

/* Body Text Style */
.paragraph--type--image-text-column .field--name-bp-text {
  font-size: 16px;
  line-height: 1.6;
}

/* Link Button style (Match the orange button) */
.paragraph--type--image-text-column .field--name-field-link {
  margin-top: 30px;
}
.paragraph--type--image-text-column .field--name-field-link a {
  background: linear-gradient(to right, #FFAD5B 0%, #FF5F1B 100%);
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.paragraph--type--image-text-column .field--name-field-link a::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 16px;
  background: url(../images/icon/arrow_white_7x14.svg) center no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.paragraph--type--image-text-column .field--name-field-link a:hover::after {
  transform: translateX(5px);
}

/* Image Text Column Paragraph - has background */
.paragraph--type--image-text-column.has-background>.paragraph__column {
  padding-top: 30px;
  padding-bottom: 30px;
}
.paragraph--type--image-text-column.has-background>.paragraph__column::before {
  background-color: #C3E4FF;
  border-radius: 50px;
  content: '';
  position: absolute;
  inset: 0 0 0 25%;
  z-index: 0;
}
.paragraph--type--image-text-column.has-background .layout--twocol-section {
  position: relative;
  z-index: 1;
}
.paragraph--type--image-text-column.has-background .layout--twocol-section .layout__region--second {
  padding: 10px 40px 10px 0;
}

/* ------------------------------------
   Variant: No Background (Image 2)
   ------------------------------------ */
.paragraph--type--image-text-column .block-field-blockparagraphimage-text-columnfield-has-background {
  display: none;
}
.paragraph--type--image-text-column .field--name-field-image img {
  border-radius: 30px;
  aspect-ratio: 16 / 10;
}

@media (max-width: 991.98px) {
  .paragraph--type--image-text-column.has-background>.paragraph__column {
    padding: 0;
  }
  .paragraph--type--image-text-column.has-background>.paragraph__column::before {
    border-radius: 30px;
    inset: calc(((100vw - 120px) * 0.625) - 50px) 0 0;
  }
  .paragraph--type--image-text-column.has-background .layout--twocol-section .layout__region--first {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }
  .paragraph--type--image-text-column.has-background .layout--twocol-section .layout__region--second {
    padding: 0 calc(var(--bs-gutter-x) * 0.5) 30px;
  }
}

@media (max-width: 767.98px) {
  .paragraph--type--image-text-column.has-background>.paragraph__column::before {
    top: calc(((100vw - 60px) * 0.625) - 50px);
  }
}

/* ==========================================================================
  Paragraph Body Content Table
  ========================================================================== */
.paragraph--type--body-content .table,
.link-item-modal .table {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
}
.paragraph--type--body-content .table> :not(caption)>*>*,
.link-item-modal .table> :not(caption)>*>* {
  border-bottom: none;
}
.paragraph--type--body-content .table thead th,
.link-item-modal .table thead th {
  background: var(--primary-color);
  color: #fff;
  font-size: 18px;
  line-height: calc(100% + 10px);
  white-space: nowrap;
  padding: 16px 20px;
}
.paragraph--type--body-content .table thead th *,
.link-item-modal .table thead th * {
  color: #fff;
  font-size: 18px;
  line-height: calc(100% + 10px);
}
.paragraph--type--body-content .table thead th:first-child,
.link-item-modal .table thead th:first-child {
  border-radius: 4px 0 0 4px;
  padding-left: 35px;
}
.paragraph--type--body-content .table thead th:last-child,
.link-item-modal .table thead th:last-child {
  border-radius: 0 4px 4px 0;
  padding-right: 30px;
}
.paragraph--type--body-content .table tbody td,
.link-item-modal .table tbody td,
.link-item-modal .table tbody th {
  background-color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  vertical-align: middle;
  white-space: nowrap;
  height: 60px;
  padding: 13px 20px;
}
.link-item-modal .table tbody th {
  font-weight: 700;
}
.paragraph--type--body-content .table tbody td p,
.link-item-modal .table tbody td p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.link-item-modal .table tbody th p {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.paragraph--type--body-content .table tbody tr:nth-child(even) td {
  background-color: var(--primary-light-color);
}
.link-item-modal .table tbody tr:nth-child(even) td,
.link-item-modal .table tbody tr:nth-child(even) th {
  background-color: #D2E7F8;
}
.paragraph--type--body-content .table tbody td:first-child,
.link-item-modal .table tbody td:first-child,
.link-item-modal .table tbody th:first-child {
  padding-left: 35px;
}
.paragraph--type--body-content .table tbody td:last-child,
.link-item-modal .table tbody td:last-child {
  padding-right: 30px;
}
.paragraph--type--body-content .table tbody td strong,
.link-item-modal .table tbody td strong,
.link-item-modal .table tbody th strong {
  font-size: 18px;
  line-height: calc(100% + 10px);
}
.paragraph--type--body-content .table tbody tr:has(td:first-child strong)~tr td:first-child:not(:has(strong)),
.link-item-modal .table tbody tr:has(td:first-child strong)~tr td:first-child:not(:has(strong)) {
  padding-left: 70px;
}

/* ==========================================================================
  Paragraph Brochure
  ========================================================================== */
.paragraph--type--brochure>.paragraph__column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 30px;  
  align-items: stretch;
}
.paragraph--type--brochure .brochure__header,
.paragraph--type--brochure .field--name-field-header {  
  font-size: var(--font-size-md);
  text-align: center;
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.paragraph--type--brochure .paragraph__column>div:has(.paragraph--type--brochure-item) {
  display: flex;  
  padding-top: 141px;
}
.paragraph--type--brochure-item {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.paragraph--type--brochure-item>.paragraph__column {
  height: 100%;
}
.paragraph--type--brochure-item .brochure-item {  
  background-color: var(--primary-light-color);
  border-radius: 20px;
  display: flex;
  flex-direction: column;  
  justify-content: flex-start;
  text-align: center;
  height: 100%;
  padding: 0 20px 37px;  
}
.paragraph--type--brochure-item .brochure-item__cover {
  position: relative;
  display: block;
  width: 200px;  
  margin: -141px auto 20px;
  line-height: 0;
  z-index: 1;
}
.paragraph--type--brochure-item .brochure-item__cover .field--name-field-cover,
.paragraph--type--brochure-item .brochure-item__cover .field__item,
.paragraph--type--brochure-item .brochure-item__cover a {
  display: block;
  width: 100%;
  line-height: 0;
}
.paragraph--type--brochure-item .brochure-item__cover img {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 282;
  object-fit: cover;
  object-position: center top;  
}
.paragraph--type--brochure-item .brochure-item__new {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;  
  line-height: 26px;    
  display: inline-block;  
  width: 50px;
  height: 50px;
  padding: 12px 0;
  pointer-events: none;
  position: absolute;
  top: -26px;
  right: -26px;
  z-index: 2;  
}
.paragraph--type--brochure-item .brochure-item__title {
  font-size: 22px;
  font-weight: 700;
  line-height: calc(100% + 6px);
  margin-bottom: 10px;  
}
.paragraph--type--brochure-item .brochure-item__text {
  margin-bottom: 18px;  
}
.paragraph--type--brochure-item .brochure-item__text .field--name-bp-text,
.paragraph--type--brochure-item .brochure-item__text .field--name-bp-text p {  
  line-height: 1.375;
}
.paragraph--type--brochure-item .brochure-item__date {
  display: inline-block;
  align-self: center;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 34px;
  background-color: #E6E6E6;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}
.paragraph--type--brochure-item .brochure-item__download {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.paragraph--type--brochure-item .brochure-item__download-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.paragraph--type--brochure-item .brochure-item__download-link {
  color: #000;
  font-weight: 600;
  font-size: 18px;  
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;  
}
.paragraph--type--brochure-item .brochure-item__download-link:hover,
.paragraph--type--brochure-item .brochure-item__download-link:focus {
  color: var(--primary-color);
  text-decoration: underline;  
}
.paragraph--type--brochure-item .brochure-item__download-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  
  gap: 10px;
}
.paragraph--type--brochure-item .brochure-item__download-pill {
  display: inline-block;
  text-align: center;
  padding: 5px 14px;
  border-radius: 34px;
  background-color: #88D3FF;  
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;  
  transition: all 0.3s ease;
}
.paragraph--type--brochure-item .brochure-item__download-pill:hover,
.paragraph--type--brochure-item .brochure-item__download-pill:focus {
  background-color: var(--primary-color);
  color: #fff;  
}
@media (max-width: 1200px) {
  .paragraph--type--brochure>.paragraph__column {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {  
  .paragraph--type--brochure>.paragraph__column {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
  Paragraph Timeline
  ========================================================================== */
.paragraph--type--timeline .field--name-field-background-color,
.paragraph--type--timeline .field--name-field-animation-style,
.paragraph--type--timeline .field--name-field-width-style {
  display: none;
}
.paragraph--type--timeline .timeline__header .field--name-field-header {
  font-size: var(--font-size-md);
  text-align: center;
}
.paragraph--type--timeline .timeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.paragraph--type--timeline .timeline__track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #CCCCCC;
  transform: translateX(-50%);
  z-index: 0;
}
.paragraph--type--timeline .timeline__track>div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Color themes: blue → orange → yellow */
.paragraph--type--timeline .timeline__track>div:nth-child(3n+1) {
  --timeline-date-bg: #003EAB;
  --timeline-date-color: #fff;
  --timeline-card-bg: #C3E4FF;
  --timeline-marker-bg: #3A9DD7;
}

.paragraph--type--timeline .timeline__track>div:nth-child(3n+2) {
  --timeline-date-bg: #E35C2A;
  --timeline-date-color: #fff;
  --timeline-card-bg: #FFF5EA;
  --timeline-marker-bg: #FA6D31;
}

.paragraph--type--timeline .timeline__track>div:nth-child(3n+3) {
  --timeline-date-bg: #FFD67D;
  --timeline-date-color: #000;
  --timeline-card-bg: #F4F4F4;
  --timeline-marker-bg: #FAB031;
}
.paragraph--type--timeline-item {
  width: 100%;
}
.paragraph--type--timeline-item .timeline-item {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  align-items: center;
  column-gap: 25px;
}
.paragraph--type--timeline-item .timeline-item__content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  background-color: var(--timeline-card-bg, #C3E4FF);
  border-radius: 20px;
  padding: 30px;  
}
.paragraph--type--timeline-item .timeline-item__marker {
  background-color: var(--timeline-marker-bg, #3A9DD7);
  border: #eee 7px solid;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;  
  flex-shrink: 0;
  z-index: 2;
}
.paragraph--type--timeline-item .timeline-item__marker-icon {  
  display: block;
  width: 34px;
  height: 34px;
  background: url(../images/icon/arrow_circle_down_white_34x34.svg) no-repeat;
  background-size: contain;  
}
.paragraph--type--timeline-item .timeline-item__date {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
}

/* Even rows: date left, content right */
.paragraph--type--timeline .timeline__track>div:nth-child(even) .timeline-item__content {
  grid-column: 3;
}
.paragraph--type--timeline .timeline__track>div:nth-child(even) .timeline-item__date {
  grid-column: 1;
  justify-self: end;
}
.paragraph--type--timeline-item .timeline-item__date .field--name-field-date,
.paragraph--type--timeline-item .timeline-item__date .field__item {
  margin: 0;
}
.paragraph--type--timeline-item .timeline-item__date time {    
  background-color: var(--timeline-date-bg, var(--primary-color, #003EAB));
  border-radius: 50%;
  color: var(--timeline-date-color, #fff);
  text-align: center;
  font-weight: 700;
  line-height: 1.267;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 158px;
  padding: 15px;
}
.paragraph--type--timeline-item .timeline-item__date .timeline-item__date-day {
  display: block;
  font-size: 30px;
}
.paragraph--type--timeline-item .timeline-item__date .timeline-item__date-year {
  display: block;
  font-size: 20px;  
}

.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text {
  margin: 0;
}

.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text>*:first-child {
  margin-top: 0;
}

.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text>*:last-child {
  margin-bottom: 0;
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text p {  
  line-height: calc(100% + 10px);
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text img {
  display: inline-block;
  width: calc(50% - 15px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: min(1.3vw, 20px);
  margin: 0 30px 30px 0;
  vertical-align: top;
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text img:nth-of-type(even) {
  margin-right: 0;
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text a {  
  background-color: var(--primary-color, #003EAB);
  border-radius: 50px;
  color: #fff;
  font-family: "Outfit", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 18px;  
  font-weight: 500;
  line-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text a::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 16px;
  background: url(../images/icon/arrow_white_7x14.svg) center no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text a:hover::after {
  transform: translateX(4px);
}
.paragraph--type--timeline-item .timeline-item__content .field--name-bp-text p:has(> a:only-child) {
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .paragraph--type--timeline-item .timeline-item__content .field--name-bp-text img {
    border-radius: 20px;
    width: 100%;
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  .paragraph--type--timeline .timeline__track {
    gap: 50px;
  }
  .paragraph--type--timeline .timeline__track::before {
    left: 165px;
  }
  .paragraph--type--timeline-item .timeline-item {    
    column-gap: 20px;
    grid-template-areas: 'timelineDate timelineMarker timelineContent';
    grid-template-columns: 120px 50px 1fr;
  }  
  .paragraph--type--timeline-item .timeline-item__date {
    grid-area: timelineDate;
  }
  .paragraph--type--timeline-item .timeline-item__date time {
    width: 120px;
    height: 120px;
  }
  .paragraph--type--timeline-item .timeline-item__date .timeline-item__date-day {
    font-size: 24px;
  }
  .paragraph--type--timeline-item .timeline-item__date .timeline-item__date-year {
    font-size: 18px;
  }
  .paragraph--type--timeline-item .timeline-item__marker {
    grid-area: timelineMarker;
  }
  .paragraph--type--timeline-item .timeline-item__content {
    grid-area: timelineContent;
  }  
}

@media (max-width: 575px) {
  .paragraph--type--timeline .timeline__track::before {
    left: 25px;
  }
  .paragraph--type--timeline-item .timeline-item {    
    column-gap: 15px;
    grid-template-areas: 'timelineMarker timelineDate' 'timelineMarker timelineContent';
    grid-template-columns: 50px 1fr;
  }
  .paragraph--type--timeline-item .timeline-item__date,
  .paragraph--type--timeline-item .timeline-item__content {    
    justify-self: center;
  }  
  .paragraph--type--timeline .timeline__track>div:nth-child(even) .timeline-item__date,
  .paragraph--type--timeline .timeline__track>div:nth-child(even) .timeline-item__content {
    grid-column: 2;
    justify-self: center;
  }
  .paragraph--type--timeline-item .timeline-item__content {
    text-align: center;
    padding: 80px 20px 20px;
  }
  .paragraph--type--timeline-item .timeline-item__date .field--name-field-date,
  .paragraph--type--timeline-item .timeline-item__date .field__item {
    margin-bottom: -50%;
  }  
}

/* section Quick Link CSS ***********************************************/
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-content {
  padding: 0;
}

.paragraph>.paragraph__column {
  padding: 0;
  margin: 0;
}

/* Header CSS ***********************************************/
header.header {
  background-color: #fff;
  position: fixed;
  inset: 35px 0 auto;
  z-index: 99;
  transition: all 0.3s ease;
}


main {
  padding-top: 155px;
  transition: all 0.3s ease;
}


header.header .navbar {
  padding: 12px calc((var(--bs-gutter-x) * 0.5) + 20px) 19px;
  position: relative;
  transition: all 0.3s ease;
}

header.header .header-left {
  margin-top: 7px;
  margin-right: auto;
  transition: all 0.3s ease;
}

header.header .navbar-toggler {
  border: none;
  margin-right: -7px;
  padding: 7px;
  transition: all 0.3s ease;
}

.scroll-fixed header.header .navbar-toggler {
  padding: 5px 7px;
}

header.header .navbar-toggler-icon {
  background-image: url(../images/icon/navbar_toggler_icon.svg);
}

header.header .region-nav-branding .section-logo a {
  display: block;
}

header.header .region-nav-branding .section-logo a img {
  display: block;
  width: auto;
  height: clamp(40px, 3.6vw, 60px);
  transition: all 0.3s ease;
}

.nav-main-content .offcanvas .offcanvas-body {
  flex-direction: column;
}

.nav-main-content .offcanvas .offcanvas-body .region-nav-additional {
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a {
  border-radius: 50%;
  color: var(--primary-color-text);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  padding: 0;
}

.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a.is-active,
.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a:hover,
.nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a:focus {
  background-color: var(--primary-color-hover);
}

header .social-media-section .content {
  display: flex;
  align-items: center;
}

header .social-media-section .content::before {
  background-color: #D5D5D5;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-left: 15px;
  margin-right: 24px;
}

header .social-media-section .content::after {
  background-color: #D5D5D5;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-left: 24px;
  margin-right: 24px;
}

header .social-media-section .content ul {
  line-height: 1;
  display: flex;
  gap: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

header .share-section,
header .search-section {
  line-height: 1;
  position: relative;
  margin-left: 24px;
  padding-left: 24px;
}

header .share-section::before,
header .search-section::before {
  background-color: #D5D5D5;
  content: '';
  display: block;
  width: 1px;
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
}

header .share-section .dropdown-toggle,
header .search-section .dropdown-toggle {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

header .share-section .dropdown-toggle::after,
header .search-section .dropdown-toggle::after {
  content: none;
}

header .share-section .dropdown-toggle img,
header .search-section .dropdown-toggle img {
  display: block;
}

header .share-section .dropdown-menu {
  background-color: var(--primary-light-color);
  border: none;
  border-radius: 10px;
  min-width: auto;
  margin-top: 5px;
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
}

header .share-section .dropdown-menu .dropdown-item {
  font-size: 18px;
  line-height: 28px;
  padding: 10px 15px;
}

header .share-section .dropdown-menu .dropdown-item img {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

header .share-section .dropdown-menu .dropdown-item:hover,
header .share-section .dropdown-menu .dropdown-item:focus {
  background: none;
  color: var(--primary-color-text);
}

/* main menu */
.nav-main-content .offcanvas .offcanvas-body .region-nav-main {
  display: flex;
}

/* Offcanvas section wrappers: keep desktop layout; hide mobile-only secondary */
.mobile-offcanvas__top,
.mobile-offcanvas__main {
  display: contents;
}

.mobile-offcanvas__secondary {
  display: none;
}

.mobile-offcanvas__close {
  background: var(--yellow-color) url(../images/icon/sidebar_menu_close_black.svg) center / 14px 14px no-repeat;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  opacity: 1;
  width: 36px;
  height: 36px;
  padding: 0;
}

.mobile-offcanvas__close img {
  display: none;
}

.mobile-offcanvas__close:hover,
.mobile-offcanvas__close:focus {
  opacity: 1;
  background-color: var(--yellow-color);
  box-shadow: none;
}

#block-i2-theme-applynow a {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  display: block;
  width: 156px;
  padding: 8px;
}

#block-i2-theme-applynow a::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 9px;
  height: 24px;
  margin-left: 12px;
}

/* scroll fixed */
.scroll-fixed header.header {
  top: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
}


.scroll-fixed header.header .navbar {
  padding-bottom: 12px;
}

.scroll-fixed header.header .header-left {
  margin-top: 0;
}

.scroll-fixed header.header .region-nav-branding .section-logo a img {
  height: 40px;
}

.scroll-fixed .nav-main-content .offcanvas .offcanvas-body .region-nav-additional {
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* Top Menu Mega Dropdown ***********************************************/
.header-quick-link {
  background-color: var(--primary-color);
  padding-left: calc((var(--bs-gutter-x) * 0.5) + 10px);
  padding-right: calc((var(--bs-gutter-x) * 0.5) + 10px);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: all 0.3s ease;
}


.header-quick-link #block-i2-theme-topmenuleft.contextual-region {
  position: initial;
}

.scroll-fixed .header-quick-link {
  top: -34px;
}


.header-quick-link .region-quick-link {
  justify-content: space-between;
  display: flex;
}

.header-quick-link .region-quick-link ul.navbar-nav {
  display: flex;
  flex-direction: unset;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-quick-link .region-quick-link ul.navbar-nav li a {
  font-size: 16px;
  line-height: 19px;
  color: #FFF;
  padding: 8px 10px;
}

.header-quick-link .navbar-nav>.nav-item {
  position: static;
}

.header-quick-link .navbar-nav>.nav-item>.dropdown-toggle::after {
  content: none;
}

.header-quick-link .navbar-nav>.nav-item>ul.top-menu-mega-panel {
  background-color: var(--programmes-color);
  border-radius: 0 0 40px 40px;
  list-style: none;
  column-count: 2;
  column-gap: 80px;
  display: none;
  min-width: 620px;
  top: 100%;
  margin: 0;
  padding: 35px 35px 25px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: calc((var(--bs-gutter-x) * 0.5) + 10px);
  z-index: 1050;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.header-quick-link .navbar-nav>.nav-item.is-open>ul.top-menu-mega-panel {
  display: block;
  opacity: 1;
  visibility: visible;
}

.header-quick-link .top-menu-mega__title {
  column-span: all;
  color: var(--primary-color);
  font-size: 30px;
  font-weight: 700;
  line-height: calc(100% + 8px);
  margin-bottom: 30px;
}

.header-quick-link .top-menu-mega-panel>.nav-item {
  break-inside: avoid;
  margin-bottom: 15px;
}

.header-quick-link .top-menu-mega-panel>.nav-item.other-side {
  break-before: column;
}

.header-quick-link #block-i2-theme-topmenuleft .top-menu-mega-panel .nav-link {
  display: inline-block;
  padding: 0;
  font-size: 18px;
  line-height: 23px;
  color: #161616;
  text-decoration: none;
}

.header-quick-link #block-i2-theme-topmenuleft .top-menu-mega-panel .nav-link:hover,
.header-quick-link #block-i2-theme-topmenuleft .top-menu-mega-panel .nav-link:focus {
  color: var(--primary-color);
}

/* Main navigation — multi-level dropend flyouts (any depth). */
@media (min-width: 1200px) {
  #block-i2-theme-main-navigation .dropdown-menu {
    overflow: visible;
  }

  #block-i2-theme-main-navigation .dropdown-menu .dropend {
    position: relative;
  }

  #block-i2-theme-main-navigation .dropdown-menu .dropend>.dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: 0;
  }

  #block-i2-theme-main-navigation .dropdown-menu .dropend:hover>.dropdown-menu,
  #block-i2-theme-main-navigation .dropdown-menu .dropend>.dropdown-toggle.show+.dropdown-menu {
    display: block;
  }

  #block-i2-theme-main-navigation .dropend>.dropdown-item.dropdown-toggle {
    position: relative;
    padding-right: 2rem;
  }

  #block-i2-theme-main-navigation .dropend>.dropdown-item.dropdown-toggle::after {
    position: absolute;
    right: 1rem;
    top: 50%;
    margin-left: 0;
    transform: translateY(-50%) rotate(-90deg);
    vertical-align: 0;
  }
}

@media (max-width: 1199.98px) {
  #block-i2-theme-main-navigation .dropdown-menu .dropend>.dropdown-menu {
    position: static;
    display: none;
    float: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
  }

  #block-i2-theme-main-navigation .dropdown-menu .dropend>.dropdown-toggle.show+.dropdown-menu {
    display: block;
  }

  #block-i2-theme-main-navigation .dropend>.dropdown-item.dropdown-toggle::after {
    margin-left: 0.5rem;
    vertical-align: middle;
  }
}

/* Main navigation mega menu ***********************************************/
#block-i2-theme-main-navigation,
#block-i2-theme-main-navigation .main-menu-nav,
.region-nav-main {
  position: static;
}

/* Desktop only: flatten offcanvas so mega menus can overflow the header */
@media (min-width: 992px) {

  header.header .nav-main-content,
  header.header .nav-main-content .offcanvas,
  header.header .nav-main-content .offcanvas .offcanvas-body {
    position: static;
    overflow: visible;
  }
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item {
  margin-right: min(1.6vw, 30px);
  padding-top: 0;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a {
  color: #000;
  font-size: 18px;
  line-height: 20px;
  text-decoration: none;
  display: block;
  padding: 10px;
  transition: color 0.2s ease;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a:hover,
#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a:focus {
  color: var(--primary-color-text);
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded {
  list-style: none;
  position: static;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item:not(.menu-item--expanded)>.menu-dropdown {
  display: none;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown {
  display: none;
  position: absolute;
  left: calc((var(--bs-gutter-x) * 0.5) + 20px);
  right: calc((var(--bs-gutter-x) * 0.5) + 20px);
  top: 100%;
  z-index: 1050;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open>.menu-dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
}

#block-i2-theme-main-navigation .main-menu-mega-panel {
  display: flex;
  align-items: start;
  margin: 0;
  padding: 24px 32px 32px;
}

#block-i2-theme-main-navigation .main-menu-mega__content--no-image {
  grid-column: 1 / -1;
}

#block-i2-theme-main-navigation .main-menu-mega__image {
  border-bottom-right-radius: 50px;
  flex: 0 0 auto;
  width: 40%;
  overflow: hidden;
}

#block-i2-theme-main-navigation .main-menu-mega__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 0 40px 0;
}

#block-i2-theme-main-navigation .main-menu-mega__title {
  color: var(--primary-color-title);
  font-size: 36px;
  font-weight: 700;
  line-height: calc(100% + 9px);
  margin-bottom: 30px;
}

#block-i2-theme-main-navigation .main-menu-mega__nav {
  position: relative;
}

#block-i2-theme-main-navigation .main-menu-mega__drill-header {
  margin-bottom: 30px;
}

/* #block-i2-theme-main-navigation .main-menu-mega__drill-header[hidden] {
  display: none !important;
} */
#block-i2-theme-main-navigation .main-menu-mega__back {
  display: none;
}

#block-i2-theme-main-navigation .main-menu-mega__subtitle {
  color: #000;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 34px;
  margin: 0;
  user-select: none;
}

#block-i2-theme-main-navigation .main-menu-mega__subtitle::before {
  background: var(--color-orange) url(../images/icon/mega_menu_arrow_back.svg) center center no-repeat;
  border-radius: 50%;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

#block-i2-theme-main-navigation .main-menu-mega__subtitle:hover,
#block-i2-theme-main-navigation .main-menu-mega__subtitle:focus {
  color: var(--primary-color);
}

#block-i2-theme-main-navigation .main-menu-mega__viewport {
  transition: opacity 0.2s ease;
}

#block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__viewport {
  opacity: 1;
}

#block-i2-theme-main-navigation .main-menu-mega__menu--hidden {
  display: none !important;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport .menu-dropdown {
  display: none;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu {
  column-count: 1;
  column-gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu:has(> .menu-item.other-side),
#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu:has(> .menu-item > a.other-side) {
  column-count: 2;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item {
  break-inside: avoid;
  margin-bottom: 15px;
  padding-top: 0;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item.menu-item--expanded {
  list-style: none;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item.other-side,
#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item:has(> a.other-side) {
  break-before: column;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item>a,
#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item>a {
  color: #161616;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  line-height: 23px;
  text-decoration: none;
}

#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item>a:hover,
#block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item>a:focus,
#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item>a:hover,
#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item>a:focus {
  color: var(--primary-color-text);
}

#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1 {
  column-count: 1;
  column-gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1:has(> .menu-item.other-side),
#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1:has(> .menu-item > a.other-side) {
  column-count: 2;
}

#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item {
  break-inside: avoid;
  margin-bottom: 4px;
}

#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item.other-side,
#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item:has(> a.other-side) {
  break-before: column;
}

#block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item--expanded>a::after,
#block-i2-theme-main-navigation .main-menu-mega__viewport .menu-item--expanded>a::after {
  background: url(../images/icon/mega_menu_arrow_orange.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 6px;
  height: 23px;
  margin-left: 10px;
}

/* Programmes mega menu — tab bar and panels */
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 30px;
  background-color: var(--background-medium-blue);
  border-radius: 999px;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  flex: 1 1 auto;
  margin: 0;
  padding: 8px 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab:hover,
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab:focus {
  color: var(--primary-color);
  outline: none;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab.is-active {
  background: #FF5F1B linear-gradient(to right, #FF5F1B 15%, #FFAD5B 86%);
  color: #fff;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab-panel[hidden] {
  display: none !important;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__tabs,
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__tab-panels {
  display: none !important;
}

/* Programmes mega menu — All Programmes / School links */
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__all-programmes:not(.main-menu-mega__all-programmes--drill):not(.main-menu-mega__school--drill) {
  display: none !important;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__drill-actions {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 25px;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__drill-actions:not([hidden]) {
  display: flex;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__all-programmes--drill,
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__school--drill {
  display: none;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__all-programmes--drill:not([hidden]),
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__content.is-drill-open .main-menu-mega__school--drill:not([hidden]) {
  display: inline-flex;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__all-programmes {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: none;
  display: inline-flex;
  gap: 10px;
  margin-top: 25px;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__drill-actions .main-menu-mega__all-programmes {
  margin-top: 0;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__all-programmes:hover,
#block-i2-theme-main-navigation .programmes-style .main-menu-mega__all-programmes:focus {
  color: var(--primary-color);
  text-decoration: underline;
  outline: none;
}

#block-i2-theme-main-navigation .programmes-style .main-menu-mega__all-programmes-icon {
  background: var(--primary-color) url(../images/icon/arrow_circle_24x24.svg) no-repeat;
  background-size: contain;
  display: block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* Footer CSS ***********************************************/
footer {
  background: linear-gradient(to bottom, #fff calc(100% - 227px), #E3F6FF calc(100% - 227px));
  margin-top: 150px;
  padding: 0 calc(var(--bs-gutter-x) * 0.5) 50px;
}

footer .footer-wrap {
  background: var(--primary-color-title) url(../images/footer/footer_pattern.png) 30% center no-repeat;
  background-size: auto 100%;
  border-radius: 50px;
}

footer .footer-content {
  padding: calc(var(--bs-gutter-x) * 0.5) calc(var(--bs-gutter-x) * 0.5) 24px;
}

footer .footer-content {
  display: flex;
  justify-content: space-between;
}

.section-footer-logo a {
  display: block;
}

.section-footer-logo a img {
  width: auto;
  height: 60px;
}

.region-footer-left {
  display: flex;
  width: calc(50% + (var(--bs-gutter-x) * 0.5));
  min-width: 700px;
}

footer #block-i2-theme-mainnavigation {
  width: 43.36%;
  min-width: 270px;
  margin-left: auto;
}

footer .menu {
  display: grid;
  /* 1. 限制總共只有 3 列 (rows)，高度根據內容自動調整 */
  grid-template-rows: repeat(3, auto);
  /* 2. 改變排列方向：先由上往下排，排滿 3 個後再往右邊新增一欄 */
  grid-auto-flow: column;
  /* 3. 設定欄寬 (結合你上一個問題的需求，這裡用 max-content 示範) */
  grid-template-columns: max-content max-content;
  gap: 18px;
  justify-content: space-between;
  margin-left: 0;
}

footer .menu .menu-item {
  padding: 0;
}

footer .menu .menu_link_content {
  display: none;
}

footer .menu .menu-item--collapsed {
  list-style: none;
}

footer .menu .menu-item a {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
}

.footer-social-media-section ul {
  display: flex;
  gap: 40px;
}

.footer-icon-section {
  margin-top: 70px;
}

.footer-icon-section ul {
  display: flex;
  gap: 30px;
}

footer .menu .menu-item {
  list-style: none;
}

footer .menu .menu-item a:hover,
footer .menu .menu-item a:focus,
.footer-social-media-section ul li a:hover,
.footer-social-media-section ul li a:focus {
  opacity: .8;
}

/* footer bottom */
.region-footer-bottom {
  padding: 0 20px 20px;
}

.footer-copyright {
  background-color: var(--footer-copyright-blue);
  border-radius: 60px;
  padding: 13px 30px;
}

.footer-copyright .content {
  color: #fff;
  font-size: 15px;
  line-height: 2;
  display: flex;
  justify-content: space-between;
}

.footer-copyright .content ul {
  display: flex;
  flex-wrap: wrap;
}

.footer-copyright .content ul li a {
  color: #fff;
}

.footer-copyright .content ul li a:hover,
.footer-copyright .content ul li a:focus {
  opacity: .8;
}

.footer-copyright .content ul li:not(:first-child)::before {
  content: '|';
  padding-left: 3px;
}

/* Site Notice Bar ***********************************************/
body.has-site-notice .messages-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
}

body.has-site-notice .messages-section .region-messages {
  display: flex;
  flex-direction: column;
}

body.has-site-notice .messages-section .region-messages>.block:not(#block-i2-theme-views-block-block-notice-block-1) {
  order: 2;
}

#block-i2-theme-views-block-block-notice-block-1 {
  position: relative;
  display: none;
  align-items: center;
  gap: 16px;
  min-height: 50px;
  margin: 0;
  padding-right: calc((var(--bs-gutter-x) * 0.5) + 20px);
  background: #FFB803;
  box-sizing: border-box;
}

body.has-site-notice #block-i2-theme-views-block-block-notice-block-1 {
  display: flex !important;
}

#block-i2-theme-views-block-block-notice-block-1>h2 {
  display: none;
}

#block-i2-theme-views-block-block-notice-block-1>div:not(.contextual) {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

#block-i2-theme-views-block-block-notice-block-1 .view {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#block-i2-theme-views-block-block-notice-block-1 .view-header {
  background: linear-gradient(to right, #FFDF9A00 0%, #FFDF9A 100%);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

#block-i2-theme-views-block-block-notice-block-1 .view-header>div {
  background: linear-gradient(to right, #FFEABC00 0%, #FFEABC 100%);
  clip-path: polygon(0 0, calc(100% - 30px) 0, calc(100% - 15px) 50%, calc(100% - 30px) 100%, 0 100%);
  color: #000;
  font-weight: 700;
  line-height: 1.25;
  min-width: 166px;
  padding: 15px 48px 15px calc((var(--bs-gutter-x) * 0.5) + 20px);
}

#block-i2-theme-views-block-block-notice-block-1 .view-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
  overflow: hidden;
}

#block-i2-theme-views-block-block-notice-block-1 .views-row {
  margin: 0;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-body {
  min-width: 0;
  overflow: hidden;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-field-publishing,
#block-i2-theme-views-block-block-notice-block-1 .views-field-field-unpublishing {
  display: none;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #111;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content>p {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

#block-i2-theme-views-block-block-notice-block-1 .site-notice__marquee-viewport {
  overflow: hidden;
  width: 100%;
}

#block-i2-theme-views-block-block-notice-block-1 .site-notice__marquee-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

#block-i2-theme-views-block-block-notice-block-1 .site-notice__marquee-item {
  flex-shrink: 0;
  padding-right: 48px;
  white-space: nowrap;
}

#block-i2-theme-views-block-block-notice-block-1 .site-notice__marquee-item p {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content.is-scrolling .site-notice__marquee-track {
  animation: site-notice-marquee var(--site-notice-marquee-duration, 20s) linear infinite;
}

#block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content.is-scrolling:hover .site-notice__marquee-track {
  animation-play-state: paused;
}

@keyframes site-notice-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--site-notice-marquee-distance, 100%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  #block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content.is-scrolling .site-notice__marquee-track {
    animation: none;
  }
}

#block-i2-theme-views-block-block-notice-block-1 .field-content a {
  color: inherit;
  text-decoration: underline;
}

#block-i2-theme-views-block-block-notice-block-1 .site-notice__close {
  background: #FFD67D url(../images/icon/close_circle_30x30.svg) no-repeat;
  background-size: contain;
  border: none;
  border-radius: 50%;
  color: #000;
  font-size: 20px;
  text-indent: -9999px;
  flex-shrink: 0;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

body.has-site-notice header.header {
  top: calc(var(--site-notice-h, 0px) + 35px);
}

body.has-site-notice main {
  padding-top: calc(155px + var(--site-notice-h, 0px));
}

.scroll-fixed.has-site-notice header.header {
  top: var(--site-notice-h, 0px);
}

body.has-site-notice .header-quick-link {
  top: var(--site-notice-h, 0px);
}

.scroll-fixed.has-site-notice .header-quick-link {
  top: calc(var(--site-notice-h, 0px) - 34px);
}

@media screen and (max-width: 1399.98px) {
  body.has-site-notice main {
    padding-top: calc(149px + var(--site-notice-h, 0px));
  }
}

@media screen and (max-width: 991.98px) {

  body.has-site-notice header.header,
  body.scroll-fixed.has-site-notice header.header {
    top: calc(var(--site-notice-h, 0px) + 6px);
  }

  #block-i2-theme-views-block-block-notice-block-1 {
    gap: 10px;
    padding: 8px calc(var(--bs-gutter-x) * 0.5) 8px 0;
  }

  #block-i2-theme-views-block-block-notice-block-1 .view {
    gap: 10px;
  }

  #block-i2-theme-views-block-block-notice-block-1 .view-header {
    font-size: 15px;
    padding: 6px 18px 6px 12px;
  }

  #block-i2-theme-views-block-block-notice-block-1 .views-field-body>.field-content {
    font-size: 13px;
  }

  body.has-site-notice .header-quick-link {
    top: var(--site-notice-h, 0px);
  }

  .scroll-fixed.has-site-notice .header-quick-link {
    top: var(--site-notice-h, 0px);
  }
}

/* Back to top button */
.sidebar-back-to-top {
  background: var(--yellow-color);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: fixed;
  right: 25px;
  bottom: 84px;
  z-index: 30;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
}

.sidebar-back-to-top:hover,
.sidebar-back-to-top:focus {
  background-color: var(--primary-color-hover);
}

/* Index Banner Swiper ***********************************************/
.index-banner-swiper-shell {
  position: relative;
  width: calc(100% - var(--bs-gutter-x));
  margin: 0 auto 100px;
}

.index-banner-swiper {
  border-radius: min(3vw, 50px);
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
}

.index-banner-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: auto;
}

.index-banner-swiper .swiper-slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

.index-banner-swiper .swiper-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

.index-banner-swiper .swiper-caption .field,
.index-banner-swiper .swiper-caption .field__item {
  margin: 0;
  padding: 0;
}

.index-banner-swiper .swiper-caption p {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.index-banner-swiper .swiper-caption p:last-child {
  margin-bottom: 0;
}

.index-banner-swiper .swiper-caption a {
  pointer-events: auto;
}

.index-banner-swiper .swiper-html {
  width: 100%;
}

.index-banner-swiper .swiper-html .field,
.index-banner-swiper .swiper-html .field__item {
  margin: 0;
  padding: 0;
}

.index-banner-swiper .swiper-html img {
  max-width: 100%;
  height: auto;
}

.index-banner-swiper .swiper-img,
.index-banner-swiper .swiper-video,
.index-banner-swiper .swiper-video .video-content {
  width: 100%;
  height: 100%;
}

.index-banner-swiper .swiper-img__mobile,
.index-banner-swiper .swiper-img__desktop {
  width: 100%;
  height: 100%;
}

.index-banner-swiper .swiper-img img,
.index-banner-swiper .swiper-video video {
  display: block;
  aspect-ratio: 1820 / 755;
  width: 100%;
  height: auto;
  object-fit: cover;
  pointer-events: none;
}

.index-banner-swiper .swiper-video video::-webkit-media-controls {
  display: none !important;
}

.index-banner-swiper .swiper-video .contextual {
  display: none;
}

.index-banner-swiper .swiper-video .media {
  width: 100%;
  height: 100%;
}

.index-banner-swiper .swiper-video .field {
  width: 100%;
  height: 100%;
}

.index-banner-swiper .swiper-video .field__item {
  width: 100%;
  height: 100%;
}

.index-banner-swiper-button-prev,
.index-banner-swiper-button-next {
  background: #fff url(../images/icon/arrow_circle_blue_60x60.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  color: var(--primary-color);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.index-banner-swiper-button-prev svg,
.index-banner-swiper-button-next svg {
  display: none;
}

.swiper-button-prev.index-banner-swiper-button-prev {
  left: 20px;
  transform: scaleX(-1);
}

.swiper-button-next.index-banner-swiper-button-next {
  right: 20px;
}

.index-banner-swiper-shell.index-banner-swiper--single .index-banner-swiper-button-prev,
.index-banner-swiper-shell.index-banner-swiper--single .index-banner-swiper-button-next {
  display: none;
}

.index-banner-swiper-controls {
  position: absolute;
  bottom: 22px;
  left: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 14px;
  background-color: #fff;
  border-radius: 30px;
}

.index-banner-swiper-pagination {
  position: static;
  width: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.index-banner-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  opacity: 1;
  background-color: #D9D9D9;
  transition: background-color 0.3s ease;
}

.index-banner-swiper-pagination .swiper-pagination-bullet-active {
  background-color: #FF7F4F;
}

.index-banner-swiper-autoplay-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.index-banner-swiper-autoplay-toggle:hover {
  background-color: var(--primary-color-title);
}

.index-banner-swiper-autoplay-toggle:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.index-banner-swiper-autoplay-toggle img {
  display: block;
  width: 22px;
  height: 22px;
}

.index-banner-swiper-autoplay-toggle .index-banner-swiper-autoplay-toggle__icon--play {
  display: none;
}

.index-banner-swiper-shell.is-autoplay-paused .index-banner-swiper-autoplay-toggle .index-banner-swiper-autoplay-toggle__icon--pause {
  display: none;
}

.index-banner-swiper-shell.is-autoplay-paused .index-banner-swiper-autoplay-toggle .index-banner-swiper-autoplay-toggle__icon--play {
  display: block;
}

.index-banner-swiper-shell.index-banner-swiper--single .index-banner-swiper-controls {
  display: none;
}

/* Homepage New List Swiper ***********************************************/
.block-field-blocknodehomepagefield-paragraphs>div:has(.view-block-homepage-new-list) {
  position: relative;
}

.block-field-blocknodehomepagefield-paragraphs>div:has(.view-block-homepage-new-list)::before {
  background-color: var(--background-light-blue);
  border-radius: 0 0 50px 50px;
  content: '';
  width: 71.5%;
  height: 350px;
  position: absolute;
  left: 0;
  top: calc(100% - 270px);
}

.container:has(.view-block-homepage-new-list) {
  max-width: 1600px;
}

.view-block-homepage-new-list .view-header h2 {
  color: var(--primary-color-title);
  font-size: var(--font-size-md);
  margin-bottom: 30px;
}

.homepage-new-list-swiper-section {
  position: relative;
  padding: 0 60px 40px;
}

.homepage-new-list-swiper-section::before {
  background: var(--primary-color-title) url(../images/background/home_news_pattern.png) no-repeat;
  background-size: cover;
  border-radius: 50px;
  content: '';
  position: absolute;
  inset: 62px 0 0 0;
  z-index: 0;
}

.homepage-new-list-swiper {
  position: relative;
  z-index: 1;
  overflow: visible;
  overflow: hidden;
}

.homepage-new-list-swiper .swiper-wrapper {
  align-items: stretch;
}

.homepage-new-list-swiper .swiper-slide {
  height: auto;
}

.homepage-new-list-swiper .swiper-slide .views-field,
.homepage-new-list-swiper .swiper-slide .views-field .field-content {
  height: 100%;
}

.homepage-new-list-swiper .news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.homepage-new-list-swiper .news-card .card-img-top {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.homepage-new-list-swiper .news-card .card-img-top img {
  display: block;
  aspect-ratio: 8 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: all 0.3s ease;
}

.homepage-new-list-swiper .news-card:hover .card-img-top img,
.homepage-new-list-swiper .news-card:focus .card-img-top img {
  transform: scale(1.1);
}

.homepage-new-list-swiper .news-card .card-body {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-optical-sizing: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 22px 18px;
  z-index: 1;
}

.homepage-new-list-swiper .news-card .card-tags {
  background: #88D3FF;
  border-radius: 24px;
  color: #161616;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: inline-block;
  margin-top: -12px;
  margin-bottom: 12px;
  padding: 0 16px;
}

.homepage-new-list-swiper .news-card .card-title {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(100% + 8px);
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 15px;
}

.homepage-new-list-swiper .news-card .card-title a {
  color: inherit;
  text-decoration: none;
}

.homepage-new-list-swiper .news-card .card-title a::before {
  content: '';
  position: absolute;
  inset: 0;
}

.homepage-new-list-swiper .news-card .card-title a:hover {
  color: var(--primary-color);
}

.homepage-new-list-swiper .news-card .card-date {
  margin-top: auto;
  font-size: 15px;
  line-height: 20px;
  color: #4A4A4A;
}

.homepage-new-list-swiper .news-card .card-date time {
  color: inherit;
}

.homepage-new-list-swiper-footer {
  min-height: 40px;
  margin-top: 40px;
  position: relative;
  bottom: auto;
  right: auto;
}

.homepage-new-list-swiper-button {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.homepage-new-list-swiper-button-prev,
.homepage-new-list-swiper-button-next {
  background: #fff url(../images/icon/arrow_circle_blue_60x60.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  color: var(--primary-color);
  width: 40px;
  height: 40px;
  margin: 0;
  position: static;
  transition: all 0.3s ease;
}

.homepage-new-list-swiper-button-prev svg,
.homepage-new-list-swiper-button-next svg {
  display: none;
}

.swiper-button-prev.homepage-new-list-swiper-button-prev {
  transform: scaleX(-1);
}

.homepage-new-list-swiper-button-prev.swiper-button-disabled,
.homepage-new-list-swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.homepage-new-list-swiper-section--static .homepage-new-list-swiper-button {
  display: none;
}

.homepage-new-list-swiper-section--static .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  transform: none !important;
}

.homepage-new-list-swiper-section--static .swiper-slide {
  flex: 1 1 0;
  width: auto;
  max-width: calc((100% - 84px) / 4);
  margin: 0 !important;
}

@media (max-width: 991.98px) {
  .homepage-new-list-swiper-section--static .swiper-wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }

  .homepage-new-list-swiper-section--static .swiper-slide {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 767.98px) {
  .homepage-new-list-swiper-section--static .swiper-slide {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.view-block-homepage-new-list .view-footer {
  position: absolute;
  left: 80px;
  bottom: 40px;
}

.view-block-homepage-new-list .view-footer a {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  display: block;
  width: 160px;
  padding: 8px;
}

.view-block-homepage-new-list .view-footer a::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 9px;
  height: 24px;
  margin-left: 12px;
}


/* Departments Homepage Swiper ***********************************************/
.homepage-departments-section {
  padding-top: 230px;
  padding-bottom: 80px;
}

.homepage-departments-section h2 {
  color: var(--primary-color-title);
  font-size: var(--font-size-md);
  margin-bottom: 214px;
}

.homepage-departments-section .layout--twocol-section {
  --twocol-gap: 50px;
}

.homepage-departments-section .layout--twocol-section>.column-33 {
  flex: 0 1 calc(30% - var(--twocol-gap) * 0.3);
  padding-left: calc((var(--bs-gutter-x) * 0.5) + 20px);
}

.layout--twocol-section.layout--twocol-section--50-50>.column-67 {
  flex: 0 1 calc(70% - var(--twocol-gap) * 0.7);
}

.homepage-departments-section .layout--twocol-section>.column-33 .field>h2 {
  max-width: 410px;
}

.homepage-departments-section .layout--twocol-section>.column-33 .field>p {
  padding-right: 15%;
}

.view-block-departments-list {
  overflow: hidden;
}

.departments-homepage-swiper-section {
  overflow: visible;
  padding-top: 290px;
  position: relative;
}

.departments-homepage-swiper.swiper {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.departments-homepage-swiper .swiper-wrapper {
  align-items: flex-end;
}

.departments-homepage-swiper .swiper-slide {
  width: 256px;
  height: auto;
  transition: transform 0.4s ease;
  transform-origin: center bottom;
}

.departments-card {
  --departments-card-color: transparent;
  background-color: var(--departments-card-color);
  border-radius: 30px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  display: block;
  overflow: hidden;
  /* aspect-ratio: unset; */
  height: 320px;
  margin-top: 14px;
  margin-bottom: 14px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.departments-homepage-swiper .swiper-slide-active .departments-card,
.departments-card:hover,
.departments-card:focus {
  height: 348px;
  margin-top: 0;
  margin-bottom: 0;
}

.departments-card::before {
  background: #fff url(../images/icon/arrow_circle_blue_30x30.svg) center / contain no-repeat;
  border-radius: 50%;
  border: #E5E5E5 1px solid;
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  opacity: 0;
  position: absolute;
  right: 12px;
  top: 13px;
  z-index: 2;
  transition: all 0.5s ease;
}

.departments-homepage-swiper .swiper-slide-active .departments-card::before,
.departments-card:hover::before,
.departments-card:focus::before {
  opacity: 1;
}

.departments-card .departments-card-image {
  border-radius: inherit;
  overflow: hidden;
}

/* 註冊變數，告訴瀏覽器這是一個「百分比」，這樣它才知道怎麼計算漸變 */
@property --mask-r {
  syntax: '<percentage>';
  /* 定義型別為百分比 */
  inherits: false;
  /* 是否繼承給子元素 */
  initial-value: 35%;
  /* 初始值 */
}

.departments-card .departments-card-image::before {
  /* background: linear-gradient(to bottom, #ef4123 0%, #ff8f7c 100%); */
  background: linear-gradient(to bottom,
      oklch(from var(--departments-card-color) calc(l) calc(c) h) 0%,
      oklch(from var(--departments-card-color) calc(l + 0.15) calc(c - 0.055) h) 100%);
  content: '';
  position: absolute;
  inset: 0;
  --mask-r: 35%;
  opacity: 1;
  mask: radial-gradient(circle at 50% 40%, transparent var(--mask-r), black var(--mask-r));
  -webkit-mask: radial-gradient(circle at 50% 40%, transparent var(--mask-r), black var(--mask-r));
  transition: --mask-r 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}

.departments-homepage-swiper .swiper-slide-active .departments-card .departments-card-image::before,
.departments-card:hover .departments-card-image::before,
.departments-card:focus .departments-card-image::before {
  --mask-r: 150%;
  opacity: 0;
}

.departments-card .departments-card-image img {
  display: block;
  width: 100%;
  height: auto;
}

.departments-card .title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* min-height: 34%; */
  padding: 30px 10px 37px;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.departments-card .title::before {
  content: '';
  /* 從頂部的顏色，向下漸變到透明 */
  background: linear-gradient(to top, var(--departments-card-color), transparent);
  opacity: 0;
  position: absolute;
  inset: 66% 0 0;
  z-index: -1;
  transition: all 0.5s ease;
}

.departments-homepage-swiper .swiper-slide-active .departments-card .title::before,
.departments-card:hover .title::before,
.departments-card:focus .title::before {
  opacity: 1;
}

.departments-card .title a {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.departments-card .title a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.departments-homepage-swiper-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.departments-homepage-swiper-autoplay-toggle {
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--primary-color);
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
}

.departments-homepage-swiper-autoplay-toggle img {
  display: block;
  width: 29px;
  height: 29px;
}

.departments-homepage-swiper-autoplay-toggle .departments-homepage-swiper-autoplay-toggle__icon--play {
  display: none;
}

.departments-homepage-swiper-section.is-autoplay-paused .departments-homepage-swiper-autoplay-toggle .departments-homepage-swiper-autoplay-toggle__icon--pause {
  display: none;
}

.departments-homepage-swiper-section.is-autoplay-paused .departments-homepage-swiper-autoplay-toggle .departments-homepage-swiper-autoplay-toggle__icon--play {
  display: block;
}

.departments-homepage-swiper-section--single .departments-homepage-swiper-autoplay-toggle {
  display: none;
}

.departments-homepage-swiper-button {
  display: flex;
  gap: 10px;
}

.departments-homepage-swiper-button-prev,
.departments-homepage-swiper-button-next {
  background: var(--primary-color) url(../images/icon/arrow_circle_white_40x40.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  color: #fff;
  width: 40px;
  height: 40px;
  margin: 0;
  position: static;
  transition: all 0.3s ease;
}

.departments-homepage-swiper-button-prev svg,
.departments-homepage-swiper-button-next svg {
  display: none;
}

.swiper-button-prev.departments-homepage-swiper-button-prev {
  left: 20px;
  transform: scaleX(-1);
}

.departments-homepage-swiper-button-prev.swiper-button-disabled,
.departments-homepage-swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Homepage Explore CIE ******************************************************/
.explore-homepage-section {
  padding-top: 80px;
  padding-bottom: 150px;
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.explore-homepage-section .layout--twocol-section {
  --twocol-gap: 40px;
}

.explore-homepage-section::before {
  background: url(../images/background/home_explore_cie_bg.jpg) no-repeat;
  background-position: left bottom;
  background-size: cover;
  border-radius: 0 0 100px 100px;
  content: '';
  position: absolute;
  inset: 0 0 0 calc(var(--bs-gutter-x) * 0.5);
}

.explore-homepage-section .paragraph--type--text-two-column .layout--twocol-section>.layout__region {
  position: relative;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:first-child .field--name-field-image-item {
  aspect-ratio: unset;
  overflow: visible;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:first-child .field--name-field-image-item img {
  border-radius: 0 50px 50px 0;
  width: min(63%, 549px);
  height: auto;
  position: relative;
}

.explore-homepage-section .layout__region--first .paragraph>.paragraph__column {
  position: initial;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item,
.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item {
  aspect-ratio: unset;
  overflow: visible;
  position: initial;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item img,
.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
  border-radius: 50px;
  width: clamp(140px, 30%, 240px);
  height: auto;
  z-index: 1;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item img {
  position: absolute;
  left: 40%;
  top: auto;
  bottom: -65px;
}

.explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
  left: auto;
  position: absolute;
  right: 10%;
  top: 10%;
}

.explore-homepage-section [data-parallax] {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .explore-homepage-section [data-parallax] {
    will-change: auto;
    transform: none !important;
  }
}

.explore-homepage-section .layout__region--second {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}

.explore-homepage-section .paragraph--type--text-two-column .layout--twocol-section>.layout__region--second>.block {
  justify-content: flex-start;
  row-gap: 67px;
}

.explore-homepage-section .paragraph--type--text-two-column .layout--twocol-section>.layout__region--second>.block>div {
  flex: 0 0 auto;
}

.explore-homepage-section h2 {
  color: var(--primary-color-title);
  font-size: clamp(36px, 3.3vw, 60px);
  width: 100%;
  margin-bottom: -20px;
}

.explore-homepage-section p {
  font-family: "Outfit", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 18px;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div {
  text-align: center;
  width: calc(33.33% - 12px);
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column .explore-item-number {
  flex-direction: column;
  align-items: center;
}

.explore-homepage-section .explore-item-number {
  color: var(--primary-color);
  gap: 5px;
}

.explore-homepage-section .explore-item-number .prefix,
.explore-homepage-section .explore-item-number .postscript {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(2) .explore-item-number .postscript,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(3) .explore-item-number .postscript,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(4) .explore-item-number .postscript {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(5) .explore-item-number .prefix {
  position: absolute;
  top: -18px;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(6) .explore-item-number,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number {
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number {
  gap: 0;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(6) .explore-item-number .prefix {
  font-weight: 700;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number .prefix,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number:has(.prefix) .postscript {
  font-size: clamp(36px, 3.3vw, 60px);
  font-weight: 700;
  line-height: 1.25;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number:has(.prefix) .postscript {
  margin-left: 5px;
}

.explore-homepage-section .explore-item-number .number {
  font-size: clamp(36px, 3.3vw, 60px);
  font-weight: 700;
  line-height: 1.25;
}

.explore-homepage-section .explore-item .introduction {
  margin-top: 5px;
}

.explore-homepage-section .explore-item .introduction p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(2) .explore-item .introduction {
  margin-top: 15px;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(2) .explore-item .introduction p {
  font-size: 16px;
  font-weight: 400;
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column .explore-item-number .number {
  color: var(--primary-color);
}

.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(2) .explore-item-number .number,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(3) .explore-item-number .number,
.explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(4) .explore-item-number .number {
  color: var(--color-orange2);
}

/* Homepage Events List Swiper ***********************************************/
.homepage-events-section {
  padding-top: 150px;
  padding-bottom: 80px;
  position: relative;
  z-index: 0;
}

.homepage-events-section::before {
  background: var(--primary-color-title) url(../images/background/homepage_events_bg.jpg) no-repeat;
  background-size: cover;
  border-bottom-right-radius: 50px;
  content: '';
  position: absolute;
  inset: -170px 50% 80px 0;
  z-index: 0;
}

.homepage-events-section::after {
  background-color: #FFF5EA;
  border-radius: 50px;
  content: '';
  position: absolute;
  inset: 220px calc(var(--bs-gutter-x) * 0.5) 0 33.33%;
  z-index: -1;
}

.view-block-events-homepage-list {
  display: flex;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.view-block-events-homepage-list .view-header {
  flex: 0 0 auto;
  width: 33.33%;
}

.view-block-events-homepage-list .events-list-header {
  padding: 25px 50px 25px min(23%, 146px);
}

.view-block-events-homepage-list .events-list-header h2 {
  color: #fff;
  font-size: var(--font-size-md);
  margin-bottom: 30px;
}

.view-block-events-homepage-list .events-list-header a {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  display: block;
  width: 168px;
  padding: 8px;
}

.view-block-events-homepage-list .events-list-header a::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 9px;
  height: 24px;
  margin-left: 12px;
}

.view-block-events-homepage-list .homepage-events-list-swiper-section {
  flex: 1 1 auto;
  width: 66.67%;
  overflow: visible;
  position: relative;
}

.homepage-events-list-swiper {
  min-height: 440px;
  padding-bottom: 33px;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.homepage-events-list-swiper .swiper-slide {
  height: auto;
  width: 350px;
  transition-property: transform, width;
  transition-duration: 0.2s;
}

.homepage-events-list-swiper .swiper-slide-active~.swiper-slide {
  transform: translateX(72px);
}

.homepage-events-list-swiper .swiper-slide>.views-field,
.homepage-events-list-swiper .swiper-slide>.views-field>.field-content {
  height: 100%;
}

.homepage-events-list-swiper .events-card {
  background: #fff;
  border: #C9DDE6 1px solid;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 100%;
  margin: 0;
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .swiper-slide-active .events-card {
  width: 422px;
}

.homepage-events-list-swiper .swiper-slide-active~.swiper-slide .events-card {
  height: calc(100% - 45px);
  margin-bottom: 45px;
}

.homepage-events-list-swiper .events-card .card-tags {
  background: var(--primary-color-hover);
  border-radius: 24px;
  color: #161616;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  padding: 2px 12px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.homepage-events-list-swiper .events-card .card-img-top {
  border-radius: 30px 30px 0 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.homepage-events-list-swiper .events-card .card-img-top img {
  display: block;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .events-card:hover .card-img-top img,
.homepage-events-list-swiper .events-card:focus .card-img-top img {
  transform: scale(1.1);
}

.homepage-events-list-swiper .events-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px 25px 0;
}

.homepage-events-list-swiper .events-card .card-title {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: calc(100% + 8px);
  color: #161616;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.homepage-events-list-swiper .events-card .card-title a {
  color: inherit;
  text-decoration: none;
}

.homepage-events-list-swiper .events-card .card-title a:hover {
  color: var(--primary-color);
}

.homepage-events-list-swiper .events-card .card-title a::before {
  content: '';
  position: absolute;
  inset: 0;
}

.homepage-events-list-swiper .events-card .card-time {
  margin-left: auto;
  margin-right: 2px;
  margin-top: auto;
  margin-bottom: -18px;
}

.homepage-events-list-swiper .events-card .card-time:not(.is-formatted) {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.homepage-events-list-swiper .card-time-badge {
  background-color: var(--primary-color-hover);
  border-radius: 60px;
  color: #000;
  text-align: center;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .swiper-slide-active .card-time-badge {
  min-width: 70px;
  height: 70px;
}

.homepage-events-list-swiper .card-time-badge .day {
  font-size: 22px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .card-time-badge .month {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .card-time-badge--range {
  width: 110px;
  flex-direction: row;
  flex-wrap: wrap;
}

.homepage-events-list-swiper .card-time-badge--range .range-start,
.homepage-events-list-swiper .card-time-badge--range .range-end {
  font-size: 22px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .card-time-badge--range .range-sep {
  font-size: 22px;
  font-weight: 500;
  margin-left: 5px;
  transition: all 0.3s ease;
}

.homepage-events-list-swiper .swiper-slide-active .card-time-badge .day,
.homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-start,
.homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-end,
.homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-sep {
  font-size: 24px;
}

.homepage-events-list-swiper .swiper-slide-active .card-time-badge .month {
  font-size: 16px;
}

.view-block-events-homepage-list .homepage-events-list-swiper-footer {
  display: flex;
  margin-bottom: 5px;
  padding-right: 21%;
  position: relative;
}

.homepage-events-list-swiper-button {
  display: flex;
  gap: 10px;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.homepage-events-list-swiper-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 298px;
  height: 298px;
  border-radius: 50%;
  background: #D1F0FF;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

.homepage-events-list-swiper-button:hover::before,
.homepage-events-list-swiper-button:focus::before {
  transform: translate(-50%, -50%) scale(1.2);
}

.homepage-events-list-swiper-button-prev,
.homepage-events-list-swiper-button-next {
  background: #fff url(../images/icon/arrow_circle_blue_60x60.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  color: var(--primary-color);
  width: 40px;
  height: 40px;
  margin: 0;
  position: static;
  transition: all 0.3s ease;
}

.swiper-button-prev.homepage-events-list-swiper-button-prev {
  transform: scaleX(-1);
}

.homepage-events-list-swiper-button-prev svg,
.homepage-events-list-swiper-button-next svg {
  display: none;
}

.homepage-events-list-swiper-button-prev.swiper-button-disabled,
.homepage-events-list-swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Homepage Video List Filter ***********************************************/
.homepage-video-section {
  padding-top: 80px;
  padding-bottom: 150px;
}

.homepage-video-section .container {
  max-width: none;
}

.view-block-homepage-video-list .view-filters {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.video-header-section h2 {
  color: var(--primary-color-title);
  font-size: var(--font-size-md);
  margin-bottom: 30px;
}

.video-header-filter {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, #FF804B 15%, #FFA850 86%) border-box;
  border: 1px solid transparent;
  /* Make the real border invisible */
  border-radius: 60px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  padding: 9px 12px;
}

.video-filter-toggle {
  display: none;
}

.video-filter-menu {
  display: contents;
}

.video-filter-btn {
  background-color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #343434;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.video-filter-btn:hover,
.video-filter-btn:focus {
  color: var(--primary-color-text);
}

.video-filter-btn.is-active,
.video-filter-btn.is-active:hover,
.video-filter-btn.is-active:focus {
  background: linear-gradient(to right, #FFAD5B 15%, #FF5F1B 85%);
  color: #fff;
  padding: 8px 20px;
}

@media (max-width: 991.98px) {
  .video-header-filter {
    display: block;
    position: relative;
    width: 100%;
    max-width: 340px;
    gap: 0;
    padding: 0;
    z-index: 5;
  }

  .video-filter-toggle {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 60px;
    color: #1a2744;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    padding: 12px 44px 12px 20px;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .video-filter-toggle::after {
    background: url(../images/icon/arrow_tab.svg) no-repeat;    
    content: "";
    width: 12px;
    height: 7px;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
  }

  .video-header-filter.is-open .video-filter-toggle::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .video-filter-menu {
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(to right, #FF804B 15%, #FFA850 86%) border-box;
    border: 1px solid transparent;
    border-radius: 24px;
    display: none;
    flex-direction: column;
    gap: 4px;
    left: 0;
    margin-top: 8px;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 10;
  }

  .video-header-filter.is-open .video-filter-menu {
    display: flex;
  }

  .video-filter-btn {
    padding: 10px 16px;
    text-align: center;
    width: 100%;
  }

  .video-filter-btn.is-active,
  .video-filter-btn.is-active:hover,
  .video-filter-btn.is-active:focus {
    padding: 10px 16px;
  }
}

/* Homepage Video Featured Player *******************************************/
.video-header-section {
  text-align: center;
}

.video-header-section .content {
  background-color: #F4F4F4;
  border-radius: 50px;
  margin-top: -35px;
  padding: 75px calc(var(--bs-gutter-x) * 0.5) 102px;
}

.featured-video-title {
  color: var(--primary-color-title);
  font-size: 22px;
  font-weight: 700;
  line-height: calc(100% + 10px);
  text-align: center;
  margin-bottom: 40px;
}

.featured-video-player {
  background-color: #000;
  border-radius: 30px;
  aspect-ratio: 16 / 9;
  max-width: 850px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.featured-video-player iframe,
.featured-video-player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.featured-video-player .video-cover {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-video-player .video-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Homepage Video List Swiper ***********************************************/
.homepage-video-list-swiper-section {
  text-align: center;
  margin-top: -62px;
  position: relative;
}

.homepage-video-list-swiper-controls {
  position: relative;
}

.homepage-video-list-swiper-section--carousel .homepage-video-list-swiper-controls {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1320px;
  /* 1320 track + arrows + gaps */
  margin-left: auto;
  margin-right: auto;
}

.homepage-video-list-swiper-section--carousel .homepage-video-list-swiper {
  flex: 1 1 auto;
  min-width: 0;
  /* Fits 5 slides at ≥1400 (spaceBetween 30). Do not use min(100%, …) here:
     percentage max-width inside shrink-wrap flex collapses the track to 0. */
  max-width: 1360px;
}

.homepage-video-list-swiper {
  overflow: hidden;
}

.homepage-video-list-swiper .swiper-wrapper {
  align-items: stretch;
}

.homepage-video-list-swiper .swiper-slide {
  height: auto;
}

.homepage-video-list-swiper .views-field,
.homepage-video-list-swiper .field-content {
  margin: 0;
  padding: 0;
}

.homepage-video-list-swiper .views-field-field-video {
  display: none;
}

.homepage-video-list-swiper .field--name-field-media-video-file {
  display: none;
}

.homepage-video-list-swiper .card-video {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.homepage-video-list-swiper .video-cover {
  border: transparent 2px solid;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.homepage-video-list-swiper .card-video.is-active .video-cover,
.homepage-video-list-swiper .card-video:not(.is-active) .video-cover:hover,
.homepage-video-list-swiper .card-video:not(.is-active) .video-cover:focus {
  border-color: var(--yellow-color);
}

.homepage-video-list-swiper .video-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: all 0.3s ease;
}

.homepage-video-list-swiper .card-video:not(.is-active) .video-cover:hover img,
.homepage-video-list-swiper .card-video:not(.is-active) .video-cover:focus img {
  transform: scale(1.12);
}

.homepage-video-list-swiper .video-title {
  color: #000;
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  margin-top: 16px;
  padding: 0 10px;
}

.swiper-button-prev.homepage-video-list-swiper-button-prev,
.swiper-button-next.homepage-video-list-swiper-button-next {
  background: #fff url(../images/icon/arrow_circle_blue_60x60.svg) no-repeat;
  background-size: contain;
  border: #E5E5E5 1px solid;
  border-radius: 50%;
  color: var(--primary-color);
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 41px 0 0;
  position: static;
  transition: all 0.3s ease;
}

.swiper-button-prev.homepage-video-list-swiper-button-prev {
  transform: scaleX(-1);
}

.homepage-video-list-swiper-button-prev svg,
.homepage-video-list-swiper-button-next svg {
  display: none;
}

.homepage-video-list-swiper-button-prev.swiper-button-disabled,
.homepage-video-list-swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.homepage-video-list-swiper-section--static .homepage-video-list-swiper-controls {
  display: inline-flex;
  gap: 10px;
}

.homepage-video-list-swiper-section--static .swiper-wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1220px;
  gap: 30px;
}

.homepage-video-list-swiper-section--static .swiper-slide {
  flex: 0 1 auto;
  width: auto;
  max-width: 220px;
}

/* Life at CIE — parallax collage (adapted from HTML prototype for Drupal DOM) */
.life-at-cie {
  background-image: url(../images/background/life_at_cie_bg.svg);
  background-position: center bottom;
  background-size: min(75.7%, 1442px) auto;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: min(42vw, 800px);
  display: block;
  overflow-x: clip;
  overflow-y: visible;
}

.life-at-cie .paragraph--type--homepage-image,
.life-at-cie .paragraph__column {
  position: static;
  margin: 0;
  padding: 0;
  height: 100%;
}

.life-at-cie .field--name-field-image {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.life-at-cie .field--name-field-image .field__item {
  position: absolute;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.life-at-cie .field--name-field-image .field__item img {
  position: absolute;
  display: block;
  max-width: none;
}

.life-at-cie [data-parallax] {
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform;
}

.life-at-cie [data-parallax].parallax-visible {
  opacity: 1;
}

/* img01 */
.life-at-cie .field--name-field-image .field__item:nth-child(1) {
  left: -3.4%;
  top: 7vw;
}

.life-at-cie .field--name-field-image .field__item:nth-child(1) img {
  border-radius: 30px;
  width: min(15.33vw, 292px);
}

/* img02 */
.life-at-cie .field--name-field-image .field__item:nth-child(2) {
  left: 7%;
  top: 27vw;
}

.life-at-cie .field--name-field-image .field__item:nth-child(2) img {
  border-radius: 30px;
  width: min(11.3vw, 215px);
}

/* img03 */
.life-at-cie .field--name-field-image .field__item:nth-child(3) {
  left: 22%;
  top: 10.3vw;
}

.life-at-cie .field--name-field-image .field__item:nth-child(3) img {
  border-radius: 50px;
  width: min(16.65vw, 317px);
}

/* img04 */
.life-at-cie .field--name-field-image .field__item:nth-child(4) {
  right: 46.5%;
  top: 0.5vw;
}

.life-at-cie .field--name-field-image .field__item:nth-child(4) img {
  border-radius: 30px;
  width: min(16.49vw, 314px);
}

/* img05 */
.life-at-cie .field--name-field-image .field__item:nth-child(5) {
  right: 24.5%;
  top: 13.5vw;
  z-index: 1;
}

.life-at-cie .field--name-field-image .field__item:nth-child(5) img {
  border-radius: 30px;
  width: min(14.4vw, 274px);
}

/* img06 */
.life-at-cie .field--name-field-image .field__item:nth-child(6) {
  right: 14.5%;
  top: 28.5vw;
}

.life-at-cie .field--name-field-image .field__item:nth-child(6) img {
  border-radius: 30px;
  width: min(10.66vw, 203px);
}

/* img07 */
.life-at-cie .field--name-field-image .field__item:nth-child(7) {
  right: 13%;
  top: 0;
}

.life-at-cie .field--name-field-image .field__item:nth-child(7) img {
  border-radius: 50px;
  width: min(17.7vw, 337px);
}


/* Breadcrumb ******************************************************/
.block-system-breadcrumb-block {
  padding-top: 30px;
  padding-bottom: 30px;
}

.block-system-breadcrumb-block .breadcrumb {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 0;
  line-height: 19px;
}

.block-system-breadcrumb-block .breadcrumb>li {
  flex: 0 0 auto;
}

.block-system-breadcrumb-block .breadcrumb>li>a,
.block-system-breadcrumb-block .breadcrumb>li>span {
  color: #A9A9A9;
  font-size: 15px;
  line-height: 19px;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 15px;
}

.breadcrumb-item+.breadcrumb-item::before {
  border-left: #A9A9A9 1px solid;
  content: '';
  height: 16px;
  margin-top: 2px;
  margin-bottom: 1px;
  padding-right: 15px;
}

/* Breadcrumb sits under the blue block, beside the hanging image. */
.basic-banner:has(.banner-section-1) .block-system-breadcrumb-block,
.basic-banner:has(.banner-section-true) .block-system-breadcrumb-block,
.page-node-type-office .block-system-breadcrumb-block,
.page-node-type-sub-office-page .block-system-breadcrumb-block {
  position: relative;
  z-index: 0;
  margin-bottom: 80px;
  padding: 30px var(--bs-gutter-x);
}

.basic-banner:has(.banner-section-1) .breadcrumb,
.basic-banner:has(.banner-section-true) .breadcrumb {
  --bs-breadcrumb-divider: '|';
  margin-bottom: 0;
}

.basic-banner:has(.banner-section-1) .breadcrumb .breadcrumb-item:last-child,
.basic-banner:has(.banner-section-true) .breadcrumb .breadcrumb-item:last-child {
  font-weight: 700;
  color: #333;
}

/* Programmes page sidebar */
.section-programmes-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  --programmes-sidebar-width: 60px;
  --programmes-sidebar-panel-width: min(50vw, 228px);
}

.section-programmes-sidebar .content {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: visible;
}

.section-programmes-sidebar .programmes-sidebar-button {
  position: relative;
  z-index: 2;
  width: var(--programmes-sidebar-width);
  min-height: 400px;
  background: var(--programmes-color);
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.section-programmes-sidebar .sidebar-open,
.section-programmes-sidebar .sidebar-sleek .prev,
.section-programmes-sidebar .sidebar-sleek .next,
.section-programmes-sidebar .sidebar-close {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

.section-programmes-sidebar .sidebar-open {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-programmes-sidebar .sidebar-sleek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.section-programmes-sidebar .sidebar-sleek img.prev {
  transform: rotate(-360deg);
}

.section-programmes-sidebar .sidebar-sleek img.next {
  transform: rotate(180deg);
}

.section-programmes-sidebar .programmes-sidebar-content {
  background: #fff;
  border: 1px solid var(--programmes-color);
  border-left: none;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: min(60vh, 580px);
  opacity: 0;
  visibility: hidden;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-12px);
  width: var(--programmes-sidebar-panel-width);
  z-index: 3;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.section-programmes-sidebar.is-open .programmes-sidebar-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.section-programmes-sidebar.is-open .programmes-sidebar-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.section-programmes-sidebar .sidebar-close {
  background: var(--programmes-color);
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: absolute;
  top: -1px;
  right: -50px;
}

.section-programmes-sidebar .programmes-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  padding-right: 4px;
  flex: 1 1 auto;
}

.section-programmes-sidebar .programmes-sidebar-nav a {
  font-size: 16px;
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  line-height: 1.375;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.section-programmes-sidebar .programmes-sidebar-nav a:hover,
.section-programmes-sidebar .programmes-sidebar-nav a:focus {
  color: var(--primary-color);
}

.section-programmes-sidebar .programmes-sidebar-nav a.is-active {
  color: var(--primary-color);
  font-weight: 700;
  padding-left: 12px;
}

.section-programmes-sidebar .programmes-sidebar-nav a.is-active::before {
  background: var(--color-orange);
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  border-radius: 4px;
}

.section-programmes-sidebar .programmes-sidebar-apply {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 40px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 20px;
}

.section-programmes-sidebar .programmes-sidebar-apply::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 9px;
  height: 20px;
  margin-left: 10px;
}

.section-programmes-sidebar .programmes-sidebar-apply[hidden] {
  display: none;
}

/* programmes color style */
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-open {
  background: url(../images/icon/sidebar_menu_open_black.svg) center center no-repeat;
}

.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .prev {
  background: url(../images/icon/sidebar_menu_button_black.svg) center center no-repeat;
}

.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .next {
  background: url(../images/icon/sidebar_menu_button_next_black.svg) center center no-repeat;
}

.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-open img,
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .prev img,
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .next img,
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-close img {
  opacity: 0;
}

.page-node-type-programmes.programmes-red-style .section-programmes-sidebar .sidebar-close,
.page-node-type-programmes.programmes-blue-style .section-programmes-sidebar .sidebar-close,
.page-node-type-programmes.programmes-purple-style .section-programmes-sidebar .sidebar-close,
.page-node-type-programmes.programmes-green-style .section-programmes-sidebar .sidebar-close,
.page-node-type-programmes.programmes-brown-style .section-programmes-sidebar .sidebar-close {
  background: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-close {
  background: var(--programmes-color-style) url(../images/icon/sidebar_menu_close_black.svg) center center no-repeat;
}

.page-node-type-programmes.programmes-red-style .section-programmes-sidebar .programmes-sidebar-content,
.page-node-type-programmes.programmes-blue-style .section-programmes-sidebar .programmes-sidebar-content,
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .programmes-sidebar-content,
.page-node-type-programmes.programmes-purple-style .section-programmes-sidebar .programmes-sidebar-content,
.page-node-type-programmes.programmes-green-style .section-programmes-sidebar .programmes-sidebar-content,
.page-node-type-programmes.programmes-brown-style .section-programmes-sidebar .programmes-sidebar-content {
  border-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-red-style .section-programmes-sidebar .programmes-sidebar-button,
.page-node-type-programmes.programmes-blue-style .section-programmes-sidebar .programmes-sidebar-button,
.page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .programmes-sidebar-button,
.page-node-type-programmes.programmes-purple-style .section-programmes-sidebar .programmes-sidebar-button,
.page-node-type-programmes.programmes-green-style .section-programmes-sidebar .programmes-sidebar-button,
.page-node-type-programmes.programmes-brown-style .section-programmes-sidebar .programmes-sidebar-button {
  background: var(--programmes-color-style);
}

/* Programmes Details */
.page-node-type-programmes .details-content {
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
  margin-top: 50px;
  margin-bottom: 80px;
  padding-bottom: 50px;
}

.page-node-type-programmes .details-content::before {
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
  /* background-color: oklch(from var(--programmes-color) 65.5% 0.145 h); */
  /* background-color: oklch(from var(--programmes-color) 96.5% 0.015 h); */
  border-radius: 50px;
  content: '';
  position: absolute;
  inset: 0 calc(var(--bs-gutter-x) * 0.5) 0 max(calc(50% - 720px), calc(var(--bs-gutter-x) * 0.5));
  z-index: -1;
}

.page-node-type-programmes .details-content::after {
  background-color: oklch(from var(--programmes-color) 88.5% 0.065 h);
  border-top-left-radius: 175px;
  border-bottom-left-radius: 175px;
  content: '';
  display: block;
  width: 175px;
  height: 350px;
  position: absolute;
  right: calc(var(--bs-gutter-x) * 0.5);
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--second {
  padding-right: calc((var(--bs-gutter-x) * 0.5) + 20px);
  padding-top: 50px;
}

.page-node-type-programmes .details-content .layout__region--first .field--name-field-images img {
  aspect-ratio: 9 / 5;
  object-fit: cover;
  border-bottom-right-radius: 50px;
  margin-top: -50px;
}

.page-node-type-programmes .details-content .layout__region--second .block,
.page-node-type-programmes .details-content .layout__region--second .block * {
  min-width: 0;
  max-width: 100%;
}

.page-node-type-programmes .field--name-field-reduce-the-font-size {
  display: none;
}

.page-node-type-programmes .field--name-title,
.page-node-type-programmes .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes .details-content .layout__region--second h1 {
  font-weight: 700;
  color: var(--programmes-color);
  margin-bottom: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-node-type-programmes .field--name-title {
  font-size: var(--font-size-lg);
}

.page-node-type-programmes .field--name-title.reduce-the-font-size {
  font-size: var(--font-size-md);
}

.page-node-type-programmes .details-content .layout__region--second .programmes-tags {
  display: inline-block;
  border: 1px solid var(--programmes-color);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  padding: 1px 15px;
  color: var(--programmes-color);
  margin-bottom: 20px;
}

.page-node-type-programmes .field--name-field-course-name {
  color: var(--programmes-color);
  font-size: var(--font-size-sm);
  line-height: calc(100% + 8px);
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Programme detail: icon tags + CEF code row */
.page-node-type-programmes .details-content .programmes-detail-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px 10px;
  margin-bottom: 40px;
}

.page-node-type-programmes .details-content .programmes-detail-tags-row > .block {
  margin: 0;
}

.page-node-type-programmes .details-content .programmes-detail-tags-row .field--name-field-programme-tag,
.page-node-type-programmes .details-content .programmes-detail-tags-row .field--name-field-programme-tag .field__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.page-node-type-programmes .details-content .programmes-detail-tags-row .field--name-field-programme-tag .field__item,
.page-node-type-programmes .details-content .programmes-detail-tags-row .programmes-detail-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.page-node-type-programmes .details-content .programmes-detail-tags-row .programmes-detail-tag img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.page-node-type-programmes .details-content .programmes-detail-tags-row .field--name-field-cef-number,
.page-node-type-programmes .details-content .programmes-detail-tags-row .field--name-field-cef-number .field__item {
  color: #000;
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 18px;    
  margin: 0;
}

.page-node-type-programmes .details-content .programmes-meta-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 80px;
  margin-bottom: 50px;
}

.page-node-type-programmes .details-content .programmes-meta-fields .field__label {
  color: #000;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 5px;
}

.page-node-type-programmes .details-content .programmes-meta-fields .field__item {
  color: #000;
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  font-size: 18px;
}

.page-node-type-programmes .details-content .programmes-resource-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.page-node-type-programmes .details-content .programmes-resource-fields>div {
  position: relative;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field__label {
  border-radius: 40px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  padding: 8px 26px;
  background-color: var(--programmes-color);
}

.page-node-type-programmes .details-content .programmes-resource-fields .field--name-field-online-application .field__label {
  background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  display: block;
  min-width: 220px;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field--name-field-online-application .field__label::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
  content: '';
  vertical-align: top;
  display: inline-block;
  width: 9px;
  height: 24px;
  margin-left: 10px;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field__item {
  position: absolute;
  inset: 0;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field__item span.file {
  background-image: unset !important;
  width: 100%;
  height: 100%;
  padding: 0;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field__item .contextual-region {
  position: initial;
}

.page-node-type-programmes .details-content .programmes-resource-fields .field__item a {
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  inset: 0;
}

.page-node-type-programmes .paragraph.paragraph--type--programme-table {
  padding-top: 30px;
}

/* Programme Table */
.page-node-type-programmes .table {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
}

.page-node-type-programmes .table> :not(caption)>*>* {
  border-bottom: none;
}

.page-node-type-programmes .table thead th {
  background: var(--programmes-color);
  color: #fff;
  font-size: 18px;
  line-height: calc(100% + 10px);
  padding: 16px 20px;
}

.page-node-type-programmes .table thead th * {
  color: #fff;
  font-size: 18px;
  line-height: calc(100% + 10px);
}

.page-node-type-programmes .table thead th:first-child {
  border-radius: 4px 0 0 4px;
  padding-left: 35px;
}

.page-node-type-programmes .table thead th:last-child {
  border-radius: 0 4px 4px 0;
}

.page-node-type-programmes .table tbody td {
  background-color: #FAFAFA;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  vertical-align: middle;
  white-space: nowrap;
  height: 60px;
  padding: 13px 20px;
}

.page-node-type-programmes .table tbody td p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.page-node-type-programmes .table tbody tr:nth-child(even) td {
  background-color: oklch(from var(--programmes-color) 96.5% 0.015 h);
}

.page-node-type-programmes .table tbody td:first-child {
  padding-left: 35px;
}

.page-node-type-programmes .table tbody td strong {
  font-size: 18px;
  line-height: calc(100% + 10px);
}

.page-node-type-programmes .table tbody tr:has(td:first-child strong)~tr td:first-child:not(:has(strong)) {
  padding-left: 70px;
}

.page-node-type-programmes .table tbody td:not(:first-child) {
  width: 9%;
}

.page-node-type-programmes .table tbody td:not(:last-child) a {
  color: var(--programmes-color);
  display: inline-block;
}

.page-node-type-programmes .table tbody td:not(:last-child) a::after {
  background: var(--programmes-color) url(../images/icon/arrow_circle_24x24.svg) no-repeat;
  border-radius: 50%;
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  vertical-align: top;
}

.page-node-type-programmes .table tbody td:last-child a {
  background-color: var(--primary-color);
  mask: url(/themes/custom/i2_theme/images/icon/arrow_circle_down_mask_34x34.svg) no-repeat center / contain;
  -webkit-mask: url(/themes/custom/i2_theme/images/icon/arrow_circle_down_mask_34x34.svg) no-repeat center / contain;
  border-radius: 50%;
  display: block;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  width: 34px;
  height: 34px;
  margin-left: auto;
}

/* BP Accordion — More Information and Enquiries */
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list .accordion-item {
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list .accordion-item:not(:last-child) {
  border-bottom: 1px solid #BEBEBE;
}
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button::before {
  background: url(../images/icon/accordion_collapse_black.svg) no-repeat;
  background-size: contain;
}
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button.collapsed::before {
  background: url(../images/icon/accordion_expand_black.svg) no-repeat;
  background-size: contain;
}
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list .accordion-button {
  color: var(--bs-accordion-btn-color);
}
.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after {
  background-color: var(--programmes-color);
}

.page-node-type-programmes .paragraph--type--bp-accordion .table thead th:last-child {
  padding-right: 35px;
}

.page-node-type-programmes .paragraph--type--bp-accordion .table tbody td {
  background-color: #fff;
  width: auto;
}

.page-node-type-programmes .table tbody tr:nth-child(even) td {
  background-color: #F4F4F4;
}

.page-node-type-programmes .paragraph--type--bp-accordion .table tbody td:has(.media-library-item__preview-wrapper)>* {
  display: inline-block;
}

.page-node-type-programmes .paragraph--type--bp-accordion .table tbody td .media-library-item__preview-wrapper {
  margin-left: 10px;
}

.page-node-type-programmes .paragraph--type--bp-accordion .table tbody td:first-child {
  width: 13.5%;
}

.page-node-type-programmes .paragraph--type--bp-accordion .table tbody td:last-child {
  width: 1%;
  text-align: right;
  padding-right: 35px;
}

/* Card List Swiper */
.page-node-type-programmes .dial-up .card-list-swiper::after {
  background: var(--programmes-color);
}
.page-node-type-programmes .tone-down .card-list-swiper::after {
  background-color: oklch(from var(--programmes-color) 96.5% 0.015 h);
}
.page-node-type-programmes .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes .card-list-swiper .card-list-item__content .field--name-bp-text p {
  color: #fff;
}
.page-node-type-programmes .tone-down .card-list-swiper .card-list-item__content .field--name-field-title {
  color: var(--programmes-color);
}
.page-node-type-programmes .tone-down .card-list-swiper .card-list-item__content .field--name-bp-text p {
  color: #000;
}
.page-node-type-programmes .card-list-swiper-button-prev,
.page-node-type-programmes .card-list-swiper-button-next {
  background-color: var(--programmes-color);
}

/* Programme courses (export-hydrated accordion table) */
.page-node-type-programmes .accordion-body.has-programme-courses .programme-courses-summary {
  margin-bottom: 0;
}

.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__remark {
  margin-top: 20px;
  font-size: 0.95em;
}

.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__remark .field--name-field-course-remark p {
  margin: 0 0 0.75em;
}

.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__remark .field--name-field-course-remark p:last-child {
  margin-bottom: 0;
}

.page-node-type-programmes .accordion-body.has-programme-courses .paragraph--type--courses-remark {
  margin-top: 20px;
}

.page-node-type-programmes .paragraph--type--courses-remark.programme-courses-remark-ready>.paragraph__column {
  display: block;
}

.page-node-type-programmes .programme-courses-remark {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.page-node-type-programmes .programme-courses-remark__icons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 2px;
  min-width: 1.25em;
}

.page-node-type-programmes .programme-courses-remark__marker {
  line-height: 1.2;
  font-weight: 700;
  color: inherit;
}

.page-node-type-programmes .programme-courses-remark__marker .field--name-field-remark,
.page-node-type-programmes .programme-courses-remark__marker .field__item {
  margin: 0;
}

.page-node-type-programmes .programme-courses-remark__marker p {
  display: inline;
  margin: 0;
}

.page-node-type-programmes .programme-courses-remark__marker img,
.page-node-type-programmes .programme-courses-remark__marker .media img {
  display: block;
  width: auto;
  max-width: 40px;
  max-height: 34px;
}

.page-node-type-programmes .programme-courses-remark__cef {
  display: block;
  width: 40px;
  height: auto;
}

.page-node-type-programmes .programme-courses-remark__new {
  display: block;
  width: 32px;
  height: 31px;
}

.page-node-type-programmes .programme-courses-remark__content {
  flex: 1 1 auto;
  min-width: 0;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text {
  margin: 0;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text p {
  margin: 0 0 0.75em;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text p:last-child {
  margin-bottom: 0;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text ul li {
  position: relative;
  padding-left: 1.1em;
  margin-bottom: 0.35em;
}

.page-node-type-programmes .programme-courses-remark__content .field--name-bp-text ul li::before {
  content: '*';
  position: absolute;
  left: 0;
  top: 0;
}

.page-node-type-programmes .programme-courses-table tbody tr.programme-courses-category td {
  font-weight: 700;
  padding-top: 14px;
  padding-bottom: 14px;
}

.page-node-type-programmes .programme-courses-table tbody tr.programme-courses-category td:first-child {
  padding-left: 35px;
}

.page-node-type-programmes .programme-courses-table tbody tr.programme-courses-row td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.page-node-type-programmes .programme-courses-table tbody tr.programme-courses-row td:first-child {
  padding-left: 35px;
  white-space: nowrap;
}

/* Override global table zebra — alternate via .is-alt from JS.
   Bootstrap cells use transparent --bs-table-bg + inset box-shadow, so parent
   peach shows through unless we set bg vars, background-color, and box-shadow. */
.page-node-type-programmes .programme-courses-table {
  --bs-table-bg: #fff;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
}

.page-node-type-programmes .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-red-style .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-blue-style .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-yellow-style .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-purple-style .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-green-style .programme-courses-table tbody tr td,
.page-node-type-programmes.programmes-brown-style .programme-courses-table tbody tr td,
.page-node-type-programmes .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-red-style .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-blue-style .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-yellow-style .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-purple-style .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-green-style .programme-courses-table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-brown-style .programme-courses-table tbody tr:nth-child(even) td {
  --bs-table-bg: #fff;
  --bs-table-accent-bg: transparent;
  background-color: #fff !important;
  box-shadow: none !important;
}

.page-node-type-programmes .programme-courses-table tbody tr.is-alt td {
  --bs-table-bg: #F4F4F4;
  background-color: #F4F4F4 !important;
  box-shadow: none !important;
}

.page-node-type-programmes.programmes-red-style .programme-courses-table tbody tr.is-alt td,
.page-node-type-programmes.programmes-blue-style .programme-courses-table tbody tr.is-alt td,
.page-node-type-programmes.programmes-yellow-style .programme-courses-table tbody tr.is-alt td,
.page-node-type-programmes.programmes-purple-style .programme-courses-table tbody tr.is-alt td,
.page-node-type-programmes.programmes-green-style .programme-courses-table tbody tr.is-alt td,
.page-node-type-programmes.programmes-brown-style .programme-courses-table tbody tr.is-alt td {
  --bs-table-bg: var(--programmes-color-verylight);
  background-color: var(--programmes-color-verylight) !important;
  box-shadow: none !important;
}

.page-node-type-programmes .programme-courses-table .programme-courses-title {
  vertical-align: middle;
}

.page-node-type-programmes .programme-courses-table .programme-courses-aim-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-node-type-programmes .programme-courses-table .programme-courses-aim-trigger:hover,
.page-node-type-programmes .programme-courses-table .programme-courses-aim-trigger[aria-expanded="true"] {
  color: var(--programmes-color-color);
}

.page-node-type-programmes .programme-courses-table .programme-courses-quote {
  display: inline-flex;
  align-items: center;
  margin-left: 3px;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: var(--programmes-color-color, #C91E01);
}

.page-node-type-programmes .programme-courses-table .programme-courses-link-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
  line-height: 0;
  background-color: var(--programmes-color-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.page-node-type-programmes .programme-courses-table .programme-courses-link-icon::after {
  display: none !important;
  content: none !important;
}

.page-node-type-programmes .programme-courses-table .programme-courses-link-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.page-node-type-programmes .programme-courses-table .programme-courses-new {
  display: inline-block;
  width: 32px;
  height: 31px;
  margin-left: 10px;
  vertical-align: middle;
}

.page-node-type-programmes .programme-courses-table .programme-courses-cef {
  display: inline-block;
  width: 40px;
  height: auto;
  margin-left: 10px;
  vertical-align: middle;
}

/* Programme courses aims / objectives popover */
.programme-courses-popover {
  position: absolute;
  z-index: 1080;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  background: #fff;
}

.programme-courses-popover[hidden] {
  display: none !important;
}

.programme-courses-popover__caret {
  position: absolute;
  top: 28px;
  left: -10px;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--programmes-color-style, #C91E01);
}

.programme-courses-popover.is-left .programme-courses-popover__caret {
  left: auto;
  right: -10px;
  border-right: 0;
  border-left: 10px solid #fff;
  filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.08));
}

.programme-courses-popover.is-below .programme-courses-popover__caret,
.programme-courses-popover.is-above .programme-courses-popover__caret {
  left: 28px;
  right: auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  filter: none;
  transform: none;
}

.programme-courses-popover.is-below .programme-courses-popover__caret {
  top: -10px;
  border-top: 0;
  border-bottom: 10px solid var(--programmes-color-style, #C91E01);
}

.programme-courses-popover.is-above .programme-courses-popover__caret {
  top: auto;
  bottom: -10px;
  border-bottom: 0;
  border-top: 10px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}

.programme-courses-popover__header {
  background: var(--programmes-color-style, #C91E01);
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.programme-courses-popover__header p {
  margin: 0;
  color: #fff;
}

.programme-courses-popover__header p+p {
  margin-top: 4px;
  font-weight: 600;
}

.programme-courses-popover__body {
  background: #fff;
  color: #333;
  padding: 16px 18px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  line-height: 1.6;
  max-height: min(50vh, 360px);
  overflow-y: auto;
}

.programme-courses-popover__body p {
  margin: 0 0 0.75em;
}

.programme-courses-popover__body p:last-child {
  margin-bottom: 0;
}

.page-node-type-programmes.programmes-yellow-style .programme-courses-popover__header,
.page-node-type-programmes.programmes-yellow-style .programme-courses-popover__header p {
  color: #000;
}

.page-node-type-programmes.programmes-yellow-style .programme-courses-popover__caret {
  border-right-color: var(--programmes-color-style);
}

/* CEF Note */
.cef-note-section .field--type-text-long {
  background: url(../images/icon/cef_logo_40x33.png) left top no-repeat;
  padding-left: 60px;
}

/* Alumni Sharing Card — shared chrome */
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next {
  background-color: var(--programmes-color, var(--primary-color));
}
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle {
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
}
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play {
  background-color: var(--programmes-color, var(--primary-color));
}
/* Alumni Sharing Card — side-image layout (field-image present) */
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote {
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
}
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after {
  background-color: var(--programmes-color, var(--primary-color));
}

/* programmes color style *************************************/
.page-node-type-programmes.programmes-red-style .details-content::before,
.page-node-type-programmes.programmes-blue-style .details-content::before,
.page-node-type-programmes.programmes-yellow-style .details-content::before,
.page-node-type-programmes.programmes-purple-style .details-content::before,
.page-node-type-programmes.programmes-green-style .details-content::before,
.page-node-type-programmes.programmes-brown-style .details-content::before {
  background-color: var(--programmes-color-pale);
}

.page-node-type-programmes.programmes-red-style .details-content::after,
.page-node-type-programmes.programmes-blue-style .details-content::after,
.page-node-type-programmes.programmes-yellow-style .details-content::after,
.page-node-type-programmes.programmes-purple-style .details-content::after,
.page-node-type-programmes.programmes-green-style .details-content::after,
.page-node-type-programmes.programmes-brown-style .details-content::after {
  background-color: var(--programmes-color-pale2);
}

.page-node-type-programmes.programmes-red-style .details-content .layout__region--second .programmes-tags,
.page-node-type-programmes.programmes-blue-style .details-content .layout__region--second .programmes-tags,
.page-node-type-programmes.programmes-yellow-style .details-content .layout__region--second .programmes-tags,
.page-node-type-programmes.programmes-purple-style .details-content .layout__region--second .programmes-tags,
.page-node-type-programmes.programmes-green-style .details-content .layout__region--second .programmes-tags,
.page-node-type-programmes.programmes-brown-style .details-content .layout__region--second .programmes-tags {
  border-color: var(--programmes-color-color);
  color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .field--name-title,
.page-node-type-programmes.programmes-red-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-red-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-red-style .field--name-field-course-name,
.page-node-type-programmes.programmes-blue-style .field--name-title,
.page-node-type-programmes.programmes-blue-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-blue-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-blue-style .field--name-field-course-name,
.page-node-type-programmes.programmes-yellow-style .field--name-title,
.page-node-type-programmes.programmes-yellow-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-yellow-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-yellow-style .field--name-field-course-name,
.page-node-type-programmes.programmes-purple-style .field--name-title,
.page-node-type-programmes.programmes-purple-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-purple-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-purple-style .field--name-field-course-name,
.page-node-type-programmes.programmes-green-style .field--name-title,
.page-node-type-programmes.programmes-green-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-green-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-green-style .field--name-field-course-name,
.page-node-type-programmes.programmes-brown-style .field--name-title,
.page-node-type-programmes.programmes-brown-style .details-content .layout__region--second .block-field-blocknodeprogrammestitle,
.page-node-type-programmes.programmes-brown-style .details-content .layout__region--second h1,
.page-node-type-programmes.programmes-brown-style .field--name-field-course-name {
  color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .details-content .programmes-resource-fields .field__label,
.page-node-type-programmes.programmes-blue-style .details-content .programmes-resource-fields .field__label,
.page-node-type-programmes.programmes-purple-style .details-content .programmes-resource-fields .field__label,
.page-node-type-programmes.programmes-green-style .details-content .programmes-resource-fields .field__label,
.page-node-type-programmes.programmes-brown-style .details-content .programmes-resource-fields .field__label {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .details-content .programmes-resource-fields .field__label {
  background-color: var(--programmes-color-style);
  color: #000;
}

.page-node-type-programmes.programmes-yellow-style .details-content .programmes-resource-fields .field--name-field-online-application .field__label {
  color: #fff;
}

.page-node-type-programmes.programmes-red-style .has-background-color,
.page-node-type-programmes.programmes-blue-style .has-background-color,
.page-node-type-programmes.programmes-yellow-style .has-background-color,
.page-node-type-programmes.programmes-purple-style .has-background-color,
.page-node-type-programmes.programmes-green-style .has-background-color,
.page-node-type-programmes.programmes-brown-style .has-background-color {
  background-color: var(--programmes-color-verylight) !important;
}

/* Academic Award */
.page-node-type-programmes.programmes-red-style .paragraph--type--academic-award-item,
.page-node-type-programmes.programmes-blue-style .paragraph--type--academic-award-item,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--academic-award-item,
.page-node-type-programmes.programmes-purple-style .paragraph--type--academic-award-item,
.page-node-type-programmes.programmes-green-style .paragraph--type--academic-award-item,
.page-node-type-programmes.programmes-brown-style .paragraph--type--academic-award-item {
  background-color: var(--programmes-color-verylight);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--academic-award-item .number,
.page-node-type-programmes.programmes-blue-style .paragraph--type--academic-award-item .number,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--academic-award-item .number,
.page-node-type-programmes.programmes-purple-style .paragraph--type--academic-award-item .number,
.page-node-type-programmes.programmes-green-style .paragraph--type--academic-award-item .number,
.page-node-type-programmes.programmes-brown-style .paragraph--type--academic-award-item .number {
  color: var(--programmes-color-color);
}

/* Programme Table */
.page-node-type-programmes.programmes-red-style .table thead th,
.page-node-type-programmes.programmes-blue-style .table thead th,
.page-node-type-programmes.programmes-yellow-style .table thead th,
.page-node-type-programmes.programmes-purple-style .table thead th,
.page-node-type-programmes.programmes-green-style .table thead th,
.page-node-type-programmes.programmes-brown-style .table thead th {
  background: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .table thead th,
.page-node-type-programmes.programmes-yellow-style .table thead th * {
  color: #000;
}

.page-node-type-programmes.programmes-red-style .table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-blue-style .table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-yellow-style .table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-purple-style .table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-green-style .table tbody tr:nth-child(even) td,
.page-node-type-programmes.programmes-brown-style .table tbody tr:nth-child(even) td {
  background-color: var(--programmes-color-verylight);
}

.page-node-type-programmes.programmes-red-style .table tbody td:not(:last-child) a,
.page-node-type-programmes.programmes-blue-style .table tbody td:not(:last-child) a,
.page-node-type-programmes.programmes-yellow-style .table tbody td:not(:last-child) a,
.page-node-type-programmes.programmes-purple-style .table tbody td:not(:last-child) a,
.page-node-type-programmes.programmes-green-style .table tbody td:not(:last-child) a,
.page-node-type-programmes.programmes-brown-style .table tbody td:not(:last-child) a {
  color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .table tbody td:not(:last-child) a::after,
.page-node-type-programmes.programmes-blue-style .table tbody td:not(:last-child) a::after,
.page-node-type-programmes.programmes-yellow-style .table tbody td:not(:last-child) a::after,
.page-node-type-programmes.programmes-purple-style .table tbody td:not(:last-child) a::after,
.page-node-type-programmes.programmes-green-style .table tbody td:not(:last-child) a::after,
.page-node-type-programmes.programmes-brown-style .table tbody td:not(:last-child) a::after {
  background: var(--programmes-color-color) url(../images/icon/arrow_circle_24x24.svg) no-repeat;
}

.page-node-type-programmes.programmes-red-style .table tbody td:last-child a,
.page-node-type-programmes.programmes-blue-style .table tbody td:last-child a,
.page-node-type-programmes.programmes-yellow-style .table tbody td:last-child a,
.page-node-type-programmes.programmes-purple-style .table tbody td:last-child a,
.page-node-type-programmes.programmes-green-style .table tbody td:last-child a,
.page-node-type-programmes.programmes-brown-style .table tbody td:last-child a {
  background-color: var(--programmes-color-color);
}

/* Accordion */
.page-node-type-programmes.programmes-red-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button,
.page-node-type-programmes.programmes-blue-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button,
.page-node-type-programmes.programmes-purple-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button,
.page-node-type-programmes.programmes-green-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button,
.page-node-type-programmes.programmes-brown-style .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button {
  color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after,
.page-node-type-programmes.programmes-blue-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after,
.page-node-type-programmes.programmes-purple-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after,
.page-node-type-programmes.programmes-green-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after,
.page-node-type-programmes.programmes-brown-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .paragraph--type--bp-accordion .bp-accordion__list .accordion-button::after {
  background-color: var(--programmes-color-color);
}

.page-node-type-programmes .paragraph--type--bp-accordion .bp-accordion__list:has(.table) .accordion-button::after {
  background-color: #FFD67D;
}

/* Text Two Column paragraph — 4:3 ratio (padding-top fallback + native aspect-ratio) */
.page-node-type-programmes.programmes-red-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-red-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span,
.page-node-type-programmes.programmes-blue-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-blue-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span,
.page-node-type-programmes.programmes-yellow-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-yellow-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span,
.page-node-type-programmes.programmes-purple-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-purple-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span,
.page-node-type-programmes.programmes-green-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-green-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span,
.page-node-type-programmes.programmes-brown-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-brown-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span {
  background: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link a,
.page-node-type-programmes.programmes-yellow-style .block-field-blockparagraphtext-two-columnfield-left-content .paragraph--type--image-item .field--name-field-link span {
  color: #000;
}

/* Card List Swiper */
.page-node-type-programmes.programmes-red-style .card-list-swiper::after,
.page-node-type-programmes.programmes-red-style .dial-up .card-list-swiper::after,
.page-node-type-programmes.programmes-blue-style .card-list-swiper::after,
.page-node-type-programmes.programmes-blue-style .dial-up .card-list-swiper::after,
.page-node-type-programmes.programmes-yellow-style .card-list-swiper::after,
.page-node-type-programmes.programmes-yellow-style .dial-up .card-list-swiper::after,
.page-node-type-programmes.programmes-purple-style .card-list-swiper::after,
.page-node-type-programmes.programmes-purple-style .dial-up .card-list-swiper::after,
.page-node-type-programmes.programmes-green-style .card-list-swiper::after,
.page-node-type-programmes.programmes-green-style .dial-up .card-list-swiper::after,
.page-node-type-programmes.programmes-brown-style .card-list-swiper::after,
.page-node-type-programmes.programmes-brown-style .dial-up .card-list-swiper::after {
  background: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-yellow-style .card-list-swiper .card-list-item__content .field--name-bp-text p {
  color: #000;
}

.page-node-type-programmes.programmes-red-style .tone-down .card-list-swiper::after,
.page-node-type-programmes.programmes-blue-style .tone-down .card-list-swiper::after,
.page-node-type-programmes.programmes-yellow-style .tone-down .card-list-swiper::after,
.page-node-type-programmes.programmes-purple-style .tone-down .card-list-swiper::after,
.page-node-type-programmes.programmes-green-style .tone-down .card-list-swiper::after,
.page-node-type-programmes.programmes-brown-style .tone-down .card-list-swiper::after {
  background: var(--programmes-color-verylight);
}

.page-node-type-programmes.programmes-red-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-blue-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-yellow-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-purple-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-green-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title,
.page-node-type-programmes.programmes-brown-style .tone-down .card-list-swiper .card-list-item__content .field--name-field-title {
  color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-red-style .card-list-swiper-button-next,
.page-node-type-programmes.programmes-blue-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-blue-style .card-list-swiper-button-next,
.page-node-type-programmes.programmes-purple-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-purple-style .card-list-swiper-button-next,
.page-node-type-programmes.programmes-green-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-green-style .card-list-swiper-button-next,
.page-node-type-programmes.programmes-brown-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-brown-style .card-list-swiper-button-next {
  background: var(--programmes-color-style) url(../images/icon/arrow_circle_white_40x40.svg) no-repeat;
}

.page-node-type-programmes.programmes-yellow-style .card-list-swiper-button-prev,
.page-node-type-programmes.programmes-yellow-style .card-list-swiper-button-next {
  background: var(--programmes-color-color) url(../images/icon/arrow_circle_white_40x40.svg) no-repeat;
}

/* Link Card */
.page-node-type-programmes.programmes-red-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a,
.page-node-type-programmes.programmes-blue-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a,
.page-node-type-programmes.programmes-yellow-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a,
.page-node-type-programmes.programmes-purple-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a,
.page-node-type-programmes.programmes-green-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a,
.page-node-type-programmes.programmes-brown-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a {
  background: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .block-field-blocknodeprogrammesfield-paragraphs>div:not(.default-style) .paragraph--type--link-card .field--name-field-card-link a {
  color: #000;
}

.page-node-type-programmes.programmes-yellow-style .paragraph--type--link-card .field--name-field-card-link a::before {
  background-image: url(/themes/custom/i2_theme/images/icon/arrow_black_7x14.svg);
}

/* Card List — no-image variant (design: bordered card, title on border) */
.page-node-type-programmes.programmes-red-style .paragraph--type--card-list .card-list-item--no-image,
.page-node-type-programmes.programmes-blue-style .paragraph--type--card-list .card-list-item--no-image,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--card-list .card-list-item--no-image,
.page-node-type-programmes.programmes-purple-style .paragraph--type--card-list .card-list-item--no-image,
.page-node-type-programmes.programmes-green-style .paragraph--type--card-list .card-list-item--no-image,
.page-node-type-programmes.programmes-brown-style .paragraph--type--card-list .card-list-item--no-image {
  border-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title,
.page-node-type-programmes.programmes-blue-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title,
.page-node-type-programmes.programmes-purple-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title,
.page-node-type-programmes.programmes-green-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title,
.page-node-type-programmes.programmes-brown-style .paragraph--type--card-list .card-list-item--no-image .field--name-field-title {
  color: var(--programmes-color-color);
}

/* Alumni Sharing Card — side-image layout (field-image present) */
.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote {
  background-color: var(--programmes-color-pale);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout--with-image .alumni-sharing-item__quote .field--name-field-introduction::after {
  background-color: var(--programmes-color-color);
}

/* Alumni Sharing Card — shared chrome */
.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next {
  background-color: var(--programmes-color-color);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle {
  background-color: var(--programmes-color-pale);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-programmes.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-programmes.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-programmes.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-programmes.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play {
  background-color: var(--programmes-color-style);
}

.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play {
  background-color: var(--programmes-color-color);
}

/* Contact Card */
.page-node-type-programmes.programmes-red-style .paragraph--type--contact-item,
.page-node-type-programmes.programmes-blue-style .paragraph--type--contact-item,
.page-node-type-programmes.programmes-yellow-style .paragraph--type--contact-item,
.page-node-type-programmes.programmes-purple-style .paragraph--type--contact-item .page-node-type-programmes.programmes-green-style .paragraph--type--contact-item,
.page-node-type-programmes.programmes-brown-style .paragraph--type--contact-item {
  border-color: var(--programmes-color-style);
}

/* Hide the empty custom block the user added in the content region */
/* We don't hide it anymore because we are moving elements into it via JS */
/* .page-node-type-office .details-content .layout__region--content > .block-block-content {
  display: none;
} */

/* Ensure parent containers allow protrusion */
.page-node-type-office .details-content,
.page-node-type-office .layout__region--content,
.page-node-type-office .block-block-content,
.page-node-type-sub-office-page .details-content,
.page-node-type-sub-office-page .layout__region--content,
.page-node-type-sub-office-page .block-block-content {
  overflow: visible;
}

/* ==========================================================================
Departments / Office School Section Banner
========================================================================== */
.page-node-type-departments .details-content,
.page-node-type-departments .layout__region--content,
.page-node-type-departments .block-block-content {
  overflow: visible;
}

.office-school-section {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  position: relative;
  z-index: 1;
}

/* ---- Entrance motion (after #loader is gone) ---- */
.office-school-section.is-animatable:not(.is-revealed) .content-left .image,
.office-school-section.is-animatable:not(.is-revealed) .content-left .title,
.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li,
.office-school-section.is-animatable:not(.is-revealed) .menu-section {
  opacity: 0;
  will-change: transform, opacity;
}

.office-school-section.is-animatable:not(.is-revealed) .content-left .image {
  transform: scale(1.12);
}

.office-school-section.is-animatable:not(.is-revealed) .content-left .title {
  transform: translateY(36px);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(1) {
  transform: scale(0.55) rotate(-8deg);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(2) {
  transform: translateY(-40px);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(3) {
  transform: translateX(40px) scale(1.08);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(4) {
  transform: translateX(-36px);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(5) {
  transform: scale(0.7) rotate(6deg);
}

.office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li:nth-child(6) {
  transform: translateY(40px) scale(0.85);
}

.office-school-section.is-animatable:not(.is-revealed) .menu-section {
  transform: translateY(100%);
}

.office-school-section.is-animatable.is-revealed .content-left .image,
.office-school-section.is-animatable.is-revealed .content-left .title,
.office-school-section.is-animatable.is-revealed .content-right>ul>li,
.office-school-section.is-animatable.is-revealed .menu-section {
  opacity: 1;
  transform: none;
}

.office-school-section.is-animatable.is-revealed .content-left .image {
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.05s;
}

.office-school-section.is-animatable.is-revealed .content-left .title {
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.35s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li {
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(1) {
  transition-delay: 0.18s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(2) {
  transition-delay: 0.28s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(3) {
  transition-delay: 0.38s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(4) {
  transition-delay: 0.48s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(5) {
  transition-delay: 0.58s;
}

.office-school-section.is-animatable.is-revealed .content-right>ul>li:nth-child(6) {
  transition-delay: 0.68s;
}

.office-school-section.is-animatable.is-revealed .menu-section {
  transition: opacity 0.3s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {

  .office-school-section.is-animatable:not(.is-revealed) .content-left .image,
  .office-school-section.is-animatable:not(.is-revealed) .content-left .title,
  .office-school-section.is-animatable:not(.is-revealed) .content-right>ul>li,
  .office-school-section.is-animatable:not(.is-revealed) .menu-section {
    opacity: 1;
    transform: none;
  }

  .office-school-section.is-animatable.is-revealed .content-left .image,
  .office-school-section.is-animatable.is-revealed .content-left .title,
  .office-school-section.is-animatable.is-revealed .content-right>ul>li,
  .office-school-section.is-animatable.is-revealed .menu-section {
    transition: none;
  }
}

.office-school-section .content {
  background-image: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 50%, #FF7F4F 50%, #FF7F4F 100%),
    linear-gradient(to top, var(--primary-color) 0%, var(--primary-color) 50%, #FF7F4F 50%, #FF7F4F 100%);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 50px 100%;
  padding: 0 calc(var(--bs-gutter-x) * 0.5);
  display: flex;
  align-items: stretch;
  gap: 0;
  /* min-height: 420px; */
}

.office-school-section .content-left {
  flex: 1 1 auto;
  width: calc(100% - 660px);
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.office-school-section .content-left .image {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  transform-origin: center center;
}

.office-school-section .content-left .image .block-field-blocknodedepartmentsfield-banner,
.office-school-section .content-left .image .block-field-blocknodedepartmentsfield-banner-mobile-image,
.office-school-section .content-left .image .field--name-field-banner,
.office-school-section .content-left .image .field--name-field-banner-mobile-image,
.office-school-section .content-left .image .field__item,
.office-school-section .content-left .image .media {
  height: 100%;
  margin: 0;
}

.office-school-section .content-left .image img {
  width: 100%;
  height: 100%;
  /* min-height: 420px; */
  object-fit: cover;
  display: block;
}

/* Desktop (≥992px): show field-banner; hide mobile banner (also hide while still outside the section). */
.block-field-blocknodedepartmentsfield-banner-mobile-image {
  display: none;
}

.office-school-section .content-left .image .block-field-blocknodedepartmentsfield-banner,
.office-school-section .content-left .image .field--name-field-banner {
  display: block;
}

.office-school-section .content-left .image .block-field-blocknodedepartmentsfield-banner-mobile-image,
.office-school-section .content-left .image .field--name-field-banner-mobile-image {
  display: none;
}

/* Title overlay with department color gradient */
.office-school-section .content-left .title {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  padding: 40px 40px 30px;
  background: linear-gradient(to top,
      oklch(from var(--programmes-color) 62.5% 0.225 h) 0%,
      transparent 100%);
}

.office-school-section .content-left .title::before {
  content: 'School of';
  display: block;
  color: #fff;
  font-size: calc(var(--font-size-sm) - 2px);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.office-school-section .content-left .title h1,
.office-school-section .content-left .title h2,
.office-school-section .content-left .title .field--name-title {
  color: #fff;
  font-size: var(--font-size-lg);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0;
}

.office-school-section .content-left .title .block,
.office-school-section .content-left .image .block {
  margin: 0;
}

/* Right collage grid */
.office-school-section .content-right {
  flex: 0 0 auto;
  width: min(40%, 660px);
  min-width: 0;
  overflow: hidden;
}

.office-school-section .content-right>ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  /* min-height: 420px; */
  gap: 0;
}

.office-school-section .content-right>ul>li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  transform-origin: center center;
}

.office-school-section .content-right>ul>li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom menu bar */
.office-school-section .menu-section {
  background: var(--programmes-color);
  border-bottom-left-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: var(--bs-gutter-x);
  position: relative;
  z-index: 5;
}

.office-school-section .menu-section .block,
.office-school-section .menu-section .field {
  margin: 0;
  width: auto;
  max-width: 100%;
}

.office-school-section .office-school-submenu {
  width: auto;
}

/* Mobile Amazon-style drawer; hidden on desktop */
.office-school-section .office-school-submenu__drawer {
  display: none;
}

.office-school-section .office-school-submenu__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  list-style: none;
  margin: 0;
  padding: 11px 0;
}

.office-school-section .office-school-submenu__list>li,
.office-school-section .menu-section .office-menu-item {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: auto;
  display: flex;
  align-items: center;
}

.office-school-section .office-school-submenu__list>.office-menu-item.has-children {
  position: relative;
  display: block;
  align-items: initial;
}

.office-school-section .office-menu-item__link,
.office-school-section .office-menu-item__label {
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 15px;
  cursor: pointer;
}

.office-school-section .office-menu-item__link:hover {
  color: #fff;
  text-decoration: underline;
}

.office-school-section .office-menu-item__link.is-active,
.office-school-section .office-menu-item.is-active>.office-menu-item__link,
.office-school-section .office-menu-item.is-active>.office-menu-item__label {
  border-radius: 999px;
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
  color: #000;
  text-decoration: none;
}

.office-school-section .office-menu-item.is-active.has-children>.office-menu-item__link::after,
.office-school-section .office-menu-item.is-active.has-children>.office-menu-item__label::after {
  background-color: #000;
}

.office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
.office-school-section .office-menu-item.has-children>.office-menu-item__label::after {
  background-color: #fff;
  mask: url(/themes/custom/i2_theme/images/icon/submenu-arrow-mask.svg) no-repeat center / contain;
  -webkit-mask: url(/themes/custom/i2_theme/images/icon/submenu-arrow-mask.svg) no-repeat center / contain;
  content: '';
  display: inline-block;
  width: 14px;
  height: 24px;
  margin-left: 8px;
  vertical-align: top;
}

/* Reserve pill size always so menu-section height does not jump on hover */
.office-school-section .office-menu-item.has-children>.office-menu-item__link,
.office-school-section .office-menu-item.has-children>.office-menu-item__label {
  border-radius: 999px;
  background: transparent;
}

/* Pill fill only when open / hovered / focused */
.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label {
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
  color: #000;
  text-decoration: none;
}

.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link:hover,
.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label:hover {
  text-decoration: none;
}

.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link::after,
.office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label::after {
  background-color: #000;
}

.office-school-section .office-school-menu-home__link {
  background: url(../images/icon/school_home.svg) center no-repeat;
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  display: block;
  min-width: 54px;
  height: 38px;
  padding: 7px 15px;
  text-indent: -9999px;
  overflow: hidden;
}

.office-school-section .office-submenu__list--nested {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  margin: 0;
  /* Transparent hover bridge so the pointer can reach the panel without losing :hover */
  padding: 21px 0 0;
  list-style: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.office-school-section .office-submenu__list--nested>.office-menu-item {
  display: block;
  width: 100%;
  flex: none;
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
  position: relative;
  z-index: 1;
}

.office-school-section .office-submenu__list--nested>.office-menu-item:first-child {
  border-radius: 20px 20px 0 0;
}

.office-school-section .office-submenu__list--nested>.office-menu-item:last-child {
  border-radius: 0 0 20px 20px;
}

.office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after {
  background-color: oklch(from var(--programmes-color) 65.5% 0.145 h);
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  inset: auto 20px 0;
}

.office-school-section .office-submenu__list--nested .office-menu-item__link,
.office-school-section .office-submenu__list--nested .office-menu-item__label {
  color: #000;
  text-decoration: none;
  padding: 15px 20px;
}

.office-school-section .office-menu-item.has-children:hover>.office-submenu__list--nested,
.office-school-section .office-menu-item.has-children:focus-within>.office-submenu__list--nested,
.office-school-section .office-menu-item.has-children.is-open>.office-submenu__list--nested {
  display: flex;
}

/* School ***************************************************/
.page-node-type-departments .block-field-blocknodedepartmentsfield-color,
.page-node-type-departments .block-field-blocknodedepartmentsfield-departments-color-tags {
  display: none;
}

.page-node-type-departments .school-about-section {
  margin-top: 50px;
  margin-bottom: 80px;
}

.page-node-type-departments .school-about-section .block-field-blocknodedepartmentsfield-about-image img {
  border-radius: 0 50px 50px 0;
}

.page-node-type-departments .school-about-section .layout__region--second {
  max-width: 745px;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}

.page-node-type-departments .field--name-field-media-image,
.page-node-type-departments .field--name-field-media-image img {
  width: 100%;
}

.page-node-type-departments .school-about-section .school-about-title {
  color: #000;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.25;
}

.page-node-type-departments .school-about-section .field--name-title {
  color: var(--programmes-color);
  font-size: var(--font-size-lg);
  margin-bottom: 30px;
}

.page-node-type-departments .school-about-section .field--name-field-about-text :last-child {
  margin-bottom: 0;
}

.page-node-type-departments .school-about-section .field--name-field-about-text p {
  line-height: calc(100% + 10px);
}

/* Hide unwanted elements for Programmes View */
.block-field-blocknodedepartmentsfield-school,
.view-id-block_programmes_school_list .form-item-field-school-target-id,
.view-id-block_programmes_school_list .form-item-field-related-school-id,
.view-id-block_programmes_school_list #edit-actions,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-field-school-target-id,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-field-related-school-id,
form[id^="views-exposed-form-block-programmes-school-list"] #edit-actions {
  display: none !important;
}

/* Hide What's New School filter on departments (auto-applied via JS) */
.page-node-type-departments form[id^="views-exposed-form-block-homepage-new-list"],
.view-id-block_homepage_new_list .form-item-field-related-school-id,
.view-id-block_homepage_new_list .form-item-field-school-target-id,
.view-id-block_homepage_new_list #edit-actions,
form[id^="views-exposed-form-block-homepage-new-list"] .form-item-field-related-school-id,
form[id^="views-exposed-form-block-homepage-new-list"] .form-item-field-school-target-id,
form[id^="views-exposed-form-block-homepage-new-list"] #edit-actions {
  display: none !important;
}

/* Programmes View Filter Bar */
.view-id-block_programmes_school_list .view-header h2 {
  color: var(--primary-color);
  font-size: var(--font-size-md);
  text-align: center;
}

.view-id-block_programmes_school_list .view-filters,
form[id^="views-exposed-form-block-programmes-school-list"] {
  margin-bottom: 30px;
}

.view-id-block_programmes_school_list .form--inline,
form[id^="views-exposed-form-block-programmes-school-list"] .form--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.view-id-block_programmes_school_list .form--inline::after,
form[id^="views-exposed-form-block-programmes-school-list"] .form--inline::after {
  content: none;
}

/* Filter by → Study Level dropdown */
.school-programmes-filter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 5;
}

.school-programmes-filter__label {
  flex: 0 0 auto;
  color: #161616;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.school-programmes-filter__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 220px;
  width: 300px;
  padding: 9px 20px;
  border: 1px solid #BEBEBE;
  border-radius: 50px;
  background: #fff;
  color: #4A4A4A;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.school-programmes-filter__toggle:focus-visible {
  outline: 2px solid var(--programmes-color);
  outline-offset: 2px;
}

.school-programmes-filter__toggle-text {
  flex: 1 1 auto;
  min-width: 0;
}

.school-programmes-filter__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 9px;
  background: url(../images/icon/select_arrow_black_7x14.svg) center no-repeat;
  transition: transform 0.2s ease;
}

.school-programmes-filter.is-open .school-programmes-filter__chevron {
  transform: rotate(180deg);
}

.school-programmes-filter__panel {
  background: #fff;
  border: #BEBEBE 1px solid;
  border-radius: 30px;
  text-align: center;
  width: 300px;
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 20px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
}

.school-programmes-filter__panel[hidden] {
  display: none !important;
}

.school-programmes-filter__group+.school-programmes-filter__group {
  margin-top: 25px;
}

.school-programmes-filter__group-title {
  color: #161616;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  text-align: left;
  margin-bottom: 15px;
}

.school-programmes-filter__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.school-programmes-filter__checkbox {
  color: #161616;
  font-size: 18px;
  line-height: 23px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.school-programmes-filter__checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: #f56a35;
  cursor: pointer;
}

.school-programmes-filter__clear {
  background: transparent;
  border: 0;
  color: #003798;
  font-size: 18px;
  line-height: 23px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 15px auto 0;
  padding: 0;
}

.school-programmes-filter__clear:hover,
.school-programmes-filter__clear:focus-visible {
  text-decoration: underline;
}

.school-programmes-filter__clear-icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.school-programmes-filter__clear-icon::before,
.school-programmes-filter__clear-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #003EAB;
  border-radius: 1px;
}

.school-programmes-filter__clear-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.school-programmes-filter__clear-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.school-programmes-filter__source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.school-programmes-filter__native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.view-id-block_programmes_school_list .school-programmes-empty {
  color: #4A4A4A;
  font-size: 16px;
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 24px 0;
  text-align: center;
}

/* Card / List view toggle */
.school-programmes-view-toggle {
  background: #fff;
  border: 1px solid #BEBEBE;
  border-radius: 40px;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px;
}

.school-programmes-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #bebebe;
  cursor: pointer;
  line-height: 0;
}

.school-programmes-view-toggle__btn+.school-programmes-view-toggle__btn {
  border-left: 1px solid #BEBEBE;
}

.school-programmes-view-toggle__btn.is-active {
  color: var(--programmes-color);
}

.school-programmes-view-toggle__btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.school-programmes-view-toggle__btn:focus-visible {
  outline: 2px solid var(--programmes-color);
  outline-offset: -2px;
}

.view-id-block_programmes_school_list .form-item,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.view-id-block_programmes_school_list .form-item label,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item label {
  flex: 0 0 auto;
}

.view-id-block_programmes_school_list .form-item-title label,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-title label {
  display: none;
}

.view-id-block_programmes_school_list .form-select,
.view-id-block_programmes_school_list .form-text,
form[id^="views-exposed-form-block-programmes-school-list"] .form-select,
form[id^="views-exposed-form-block-programmes-school-list"] .form-text {
  background-color: #fff;
  border-radius: 50px;
  border: 1px solid #BEBEBE;
  box-shadow: none;
  color: #4A4A4A;
  line-height: 20px;
  width: 300px;
  padding: 9px 20px;
}

.view-id-block_programmes_school_list .form-select,
form[id^="views-exposed-form-block-programmes-school-list"] .form-select {
  appearance: none;
  background: #fff url(../images/icon/select_arrow_black_7x14.svg) right 16px center no-repeat;
  cursor: pointer;
  padding-right: 40px;
}

.view-id-block_programmes_school_list .form-item-title,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-title {
  position: relative;
}

.view-id-block_programmes_school_list .form-item-title input,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-title input {
  padding-right: 40px;
}

.view-id-block_programmes_school_list .form-item-title input::placeholder,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-title input::placeholder {
  color: #4A4A4A;
}

.view-id-block_programmes_school_list .form-item-title::after,
form[id^="views-exposed-form-block-programmes-school-list"] .form-item-title::after {
  background: url(../images/icon/search_20x20.svg) center no-repeat;
  content: "";
  width: 20px;
  height: 20px;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

/* Programmes View Grid & Cards */
.view-id-block_programmes_school_list .view-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
}

.view-id-block_programmes_school_list .views-row {
  margin: 0;
}

.view-id-block_programmes_school_list .views-row>.views-field,
.view-id-block_programmes_school_list .views-row>.views-field>.field-content {
  height: 100%;
}

.view-id-block_programmes_school_list .school-card {
  background: #fff;
  border: none;
  border-radius: 30px;
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  position: relative;
}

.view-id-block_programmes_school_list .card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.view-id-block_programmes_school_list .card-education-level {
  border-radius: 50px;
  color: #161616;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: inline-block;
  padding: 0 16px;
  margin-bottom: 15px;
}

.view-id-block_programmes_school_list .card-education-level.level-diploma,
.view-id-block_programmes_school_list .card-education-level-84 {
  background-color: #FFD67D;
}

.view-id-block_programmes_school_list .card-education-level.level-associate,
.view-id-block_programmes_school_list .card-education-level-85 {
  background-color: #FFB99B;
}

.view-id-block_programmes_school_list .card-education-level.level-degree,
.view-id-block_programmes_school_list .card-education-level-86 {
  background-color: #88D3FF;
}

.view-id-block_programmes_school_list .card-education-level.level-higher,
.view-id-block_programmes_school_list .card-education-level-138 {
  background-color: #FAC1F3;
}

.view-id-block_programmes_school_list .card-title {
  font-size: 18px;
  font-weight: 500;
  line-height: calc(100% + 8px);
  margin-bottom: 15px;
  color: #161616;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.view-id-block_programmes_school_list .card-title a {
  color: inherit;
  text-decoration: none;
}

.view-id-block_programmes_school_list .card-title a:hover {
  color: var(--primary-color);
}

/* Card view: study mode top-right */
.view-id-block_programmes_school_list:not(.is-list-view) .card-mode-study {
  display: block;
  position: absolute;
  top: 22px;
  right: 20px;
  margin: 0;
  color: #4A4A4A;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.view-id-block_programmes_school_list:not(.is-list-view) .card-education-level {
  max-width: calc(100% - 90px);
}

/* Card view: programme tag icons under title */
.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag {
  display: block;
  width: 100%;
  margin: 0;
}

.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list,
.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #F0F0F0;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  list-style: none;
}

.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list li::marker,
.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list li::before {
  content: none;
  display: none;
}

.view-id-block_programmes_school_list:not(.is-list-view) .programme-tag .item-list li img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* List view: icons inline beside programme name (design) */
.view-id-block_programmes_school_list.is-list-view .card-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 0;
}

.view-id-block_programmes_school_list.is-list-view .card-title a {
  flex: 0 1 auto;
  min-width: 0;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  vertical-align: middle;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list,
.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list li {
  background: transparent;
  border: 1px solid #F0F0F0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;  
  list-style: none;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list li::marker,
.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list li::before {
  content: none;
  display: none;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag .item-list li img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.view-id-block_programmes_school_list.is-list-view .programme-tag .school-programme-tag--134 img {
  width: 26px;
  height: 25px;
}

.view-id-block_programmes_school_list .card-level {
  margin-top: auto;
}

.view-id-block_programmes_school_list .card-level .item-list ol,
.view-id-block_programmes_school_list .card-level .item-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.view-id-block_programmes_school_list .card-level .item-list li {
  background-color: #fff;
  border: 1px solid oklch(from var(--programmes-color) 90% 0.035 h);
  border-radius: 24px;
  color: var(--programmes-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  padding: 0 15px;
}

/* List header + row arrow: hidden in card view */
.school-programmes-list-header,
.view-id-block_programmes_school_list .school-card__arrow {
  display: none;
}

/* School programmes icon legend (Views Footer text area) */
.view-id-block_programmes_school_list .view-footer {
  margin-top: 20px;
}

.view-id-block_programmes_school_list .view-footer > .text-formatted,
.view-id-block_programmes_school_list .view-footer > .field,
.view-id-block_programmes_school_list .view-footer > .field__item,
.view-id-block_programmes_school_list .view-footer > p {
  margin: 0;
}

.view-id-block_programmes_school_list .view-footer p:empty {
  display: none;
}

.view-id-block_programmes_school_list .school-programmes__legend,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0;
  width: 100%;
}

.view-id-block_programmes_school_list .school-programmes__legend-item,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.view-id-block_programmes_school_list .school-programmes__legend-icon,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #E5E5E5;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.view-id-block_programmes_school_list .school-programmes__legend-icon img,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend-icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.view-id-block_programmes_school_list .school-programmes__legend-icon--new img,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend-icon--new img {
  width: 26px;
  height: 25px;
}

.view-id-block_programmes_school_list .school-programmes__legend-label,
.view-id-block_programmes_school_list .view-footer .school-programmes__legend-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #4A4A4A;
}
.view-id-block_programmes_school_list .view-footer .programme-search__legend {
  justify-content: flex-start;
  gap: 20px 50px;
}
.view-id-block_programmes_school_list .view-footer .programme-search__legend .programme-search__legend-icon {
  width: 50px;
  height: 50px;
}

/* Wrapper for list header + rows (mobile layout target) */
.view-id-block_programmes_school_list .school-programmes-list-wrap {
  font-family: "Open Sans", "Noto Sans TC", "Noto Sans SC", Arial, sans-serif;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* List view layout */
.view-id-block_programmes_school_list.is-list-view .school-programmes-list-header {
  background: var(--programmes-color);
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) 150px 110px 132px 34px;
  gap: min(4.5%, 60px);
  min-width: 930px;
  margin-bottom: 10px;
  padding: 13px 20px 13px 35px;
}

.view-id-block_programmes_school_list.is-list-view .view-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.view-id-block_programmes_school_list.is-list-view .views-row {
  width: 100%;
}

.view-id-block_programmes_school_list.is-list-view .school-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 150px 110px 132px 34px;
  align-items: center;
  gap: min(4.5%, 60px);
  min-width: 930px;
  padding: 10px 20px 10px 35px;
  border-radius: 4px;
}

.view-id-block_programmes_school_list.is-list-view .card-content {
  display: contents;
}

.view-id-block_programmes_school_list.is-list-view .card-title {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  order: 1;
  margin: 0;
}

.view-id-block_programmes_school_list.is-list-view .card-education-level {
  order: 2;
  margin: 0;
  justify-self: start;
}

.view-id-block_programmes_school_list.is-list-view .card-mode-study {
  display: block;
  order: 3;
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.view-id-block_programmes_school_list.is-list-view .card-level {
  order: 4;
  margin: 0;
}

.view-id-block_programmes_school_list.is-list-view .card-level .item-list ol,
.view-id-block_programmes_school_list.is-list-view .card-level .item-list ul {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

.view-id-block_programmes_school_list.is-list-view .card-level .item-list li {
  color: #333;
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
}

.view-id-block_programmes_school_list.is-list-view .school-card__arrow {
  border-radius: 50%;
  background: url("../images/icon/arrow_white_7x14.svg") center no-repeat;
  background-color: var(--programmes-color);
  text-decoration: none;
  display: block;
  width: 34px;
  height: 34px;
  order: 5;
}

/* School News */
.school-news-section {
  position: relative;
}

.school-news-section::before {
  background-color: oklch(from var(--programmes-color) 90% 0.035 h);
  border-radius: 0 50px 50px 0;
  content: '';
  width: 71.4%;
  height: 350px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.page-node-type-departments .homepage-new-list-swiper .news-card .card-tags {
  background-color: #FFD67D;
}

.page-node-type-departments .view-block-homepage-new-list .view-footer a {
  background: oklch(from var(--programmes-color) 90% 0.035 h);
  color: #000;
}

.page-node-type-departments .view-block-homepage-new-list .view-footer a::after {
  background: url(../images/icon/arrow_black_7x14.svg) center center no-repeat;
}

/* Alumni Sharing */
.page-node-type-departments .paragraph--type--alumni-sharing-card .field--name-field-header {
  color: var(--primary-color-title);
  font-size: var(--font-size-md);
}

/* programmes color style *************************************/
.page-node-type-departments.programmes-red-style .office-school-section .content-left .title,
.page-node-type-departments.programmes-blue-style .office-school-section .content-left .title,
.page-node-type-departments.programmes-yellow-style .office-school-section .content-left .title,
.page-node-type-departments.programmes-purple-style .office-school-section .content-left .title,
.page-node-type-departments.programmes-green-style .office-school-section .content-left .title,
.page-node-type-departments.programmes-brown-style .office-school-section .content-left .title {
  background: linear-gradient(to top,
      var(--programmes-color-bright) 0%,
      transparent 100%);
}

.page-node-type-departments.programmes-red-style .office-school-section .menu-section,
.page-node-type-departments.programmes-blue-style .office-school-section .menu-section,
.page-node-type-departments.programmes-yellow-style .office-school-section .menu-section,
.page-node-type-departments.programmes-purple-style .office-school-section .menu-section,
.page-node-type-departments.programmes-green-style .office-school-section .menu-section,
.page-node-type-departments.programmes-brown-style .office-school-section .menu-section {
  background-color: var(--programmes-color-style);
}

.page-node-type-departments.programmes-yellow-style .office-school-section .office-school-menu-home__link {
  background: url(../images/icon/school_home_black.svg) center no-repeat;
  background-position: left 15px center;
  color: #000;
}

.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item__link,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item__label {
  color: #000;
}

.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after {
  background-color: #000;
}

.page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label,
.page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label,
.page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label,
.page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label,
.page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__link,
.page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children:is(:hover, :focus-within, .is-open)>.office-menu-item__label {
  background-color: var(--programmes-color-pale);
}

.page-node-type-departments.programmes-red-style .office-school-section .office-submenu__list--nested>.office-menu-item,
.page-node-type-departments.programmes-blue-style .office-school-section .office-submenu__list--nested>.office-menu-item,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-submenu__list--nested>.office-menu-item,
.page-node-type-departments.programmes-purple-style .office-school-section .office-submenu__list--nested>.office-menu-item,
.page-node-type-departments.programmes-green-style .office-school-section .office-submenu__list--nested>.office-menu-item,
.page-node-type-departments.programmes-brown-style .office-school-section .office-submenu__list--nested>.office-menu-item {
  background-color: var(--programmes-color-pale);
}

.page-node-type-departments.programmes-red-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after,
.page-node-type-departments.programmes-blue-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after,
.page-node-type-departments.programmes-yellow-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after,
.page-node-type-departments.programmes-purple-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after,
.page-node-type-departments.programmes-green-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after,
.page-node-type-departments.programmes-brown-style .office-school-section .office-submenu__list--nested>.office-menu-item:not(:last-child)::after {
  background-color: var(--programmes-color-light);
  opacity: .3;
}

.page-node-type-departments.programmes-red-style .school-about-section .field--name-title,
.page-node-type-departments.programmes-blue-style .school-about-section .field--name-title,
.page-node-type-departments.programmes-yellow-style .school-about-section .field--name-title,
.page-node-type-departments.programmes-purple-style .school-about-section .field--name-title,
.page-node-type-departments.programmes-green-style .school-about-section .field--name-title,
.page-node-type-departments.programmes-brown-style .school-about-section .field--name-title {
  color: var(--programmes-color-color);
}

.page-node-type-departments.programmes-red-style .school-programmes-view-toggle__btn.is-active,
.page-node-type-departments.programmes-blue-style .school-programmes-view-toggle__btn.is-active,
.page-node-type-departments.programmes-yellow-style .school-programmes-view-toggle__btn.is-active,
.page-node-type-departments.programmes-purple-style .school-programmes-view-toggle__btn.is-active,
.page-node-type-departments.programmes-green-style .school-programmes-view-toggle__btn.is-active,
.page-node-type-departments.programmes-brown-style .school-programmes-view-toggle__btn.is-active {
  color: var(--programmes-color-color);
}

.page-node-type-departments.programmes-red-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li,
.page-node-type-departments.programmes-blue-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li,
.page-node-type-departments.programmes-yellow-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li,
.page-node-type-departments.programmes-purple-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li,
.page-node-type-departments.programmes-green-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li {
  border-color: var(--programmes-color-pale);
  color: var(--programmes-color-color);
}

.page-node-type-departments.programmes-brown-style .view-id-block_programmes_school_list:not(.is-list-view) .card-level .item-list li {
  border-color: var(--programmes-color-pale);
  color: #856234;
}

.page-node-type-departments.programmes-red-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header,
.page-node-type-departments.programmes-blue-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header,
.page-node-type-departments.programmes-yellow-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header,
.page-node-type-departments.programmes-purple-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header,
.page-node-type-departments.programmes-green-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header,
.page-node-type-departments.programmes-brown-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header {
  background-color: var(--programmes-color-style);
}

.page-node-type-departments.programmes-yellow-style .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header {
  color: #000;
}

.page-node-type-departments.programmes-red-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow,
.page-node-type-departments.programmes-blue-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow,
.page-node-type-departments.programmes-purple-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow,
.page-node-type-departments.programmes-green-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow,
.page-node-type-departments.programmes-brown-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow {
  background-color: var(--programmes-color-style);
}

.page-node-type-departments.programmes-yellow-style .view-id-block_programmes_school_list.is-list-view .school-card__arrow {
  background: url(../images/icon/arrow_black_7x14.svg) center no-repeat;
  background-color: var(--programmes-color-style);
}

.page-node-type-departments.programmes-red-style .has-background-color,
.page-node-type-departments.programmes-blue-style .has-background-color,
.page-node-type-departments.programmes-yellow-style .has-background-color,
.page-node-type-departments.programmes-purple-style .has-background-color,
.page-node-type-departments.programmes-green-style .has-background-color,
.page-node-type-departments.programmes-brown-style .has-background-color {
  background-color: var(--programmes-color-verylight) !important;
}

.page-node-type-departments.programmes-red-style .school-news-section::before,
.page-node-type-departments.programmes-blue-style .school-news-section::before,
.page-node-type-departments.programmes-yellow-style .school-news-section::before,
.page-node-type-departments.programmes-purple-style .school-news-section::before,
.page-node-type-departments.programmes-green-style .school-news-section::before,
.page-node-type-departments.programmes-brown-style .school-news-section::before {
  background-color: var(--programmes-color-pale);
}

.page-node-type-departments.programmes-red-style .view-block-homepage-new-list .view-footer a {
  background: var(--programmes-color-color);
  color: #fff;
}

.page-node-type-departments.programmes-red-style .view-block-homepage-new-list .view-footer a::after {
  background: url(../images/icon/arrow_white_7x14.svg) center center no-repeat;
}

.page-node-type-departments.programmes-blue-style .view-block-homepage-new-list .view-footer a {
  background: #88D3FF;
}

.page-node-type-departments.programmes-yellow-style .view-block-homepage-new-list .view-footer a {
  background: #FEBE35;
}

.page-node-type-departments.programmes-purple-style .view-block-homepage-new-list .view-footer a,
.page-node-type-departments.programmes-green-style .view-block-homepage-new-list .view-footer a,
.page-node-type-departments.programmes-brown-style .view-block-homepage-new-list .view-footer a {
  background-color: var(--programmes-color-pale);
}

.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote {
  background-color: var(--programmes-color-verylight);
}

.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::before,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-item__layout .alumni-sharing-item__quote .field--name-field-introduction::after {
  background: var(--programmes-color-color);
}

.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-prev,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-button-next {
  background: var(--programmes-color-color) url(../images/icon/arrow_circle_white_40x40.svg) no-repeat;
}

.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle {
  background-color: var(--programmes-color-pale);
}

.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-red-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-blue-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-yellow-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-purple-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-green-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--pause,
.page-node-type-departments.programmes-brown-style .paragraph--type--alumni-sharing-card .alumni-sharing-swiper-autoplay-toggle .alumni-sharing-swiper-autoplay-toggle__icon--play {
  background: var(--programmes-color-color);
}

/* Banner section-1 (field-full-banner = False)
   Class banner-section-1 is added on .banner-section.
   Blue text block + overlapping image that hangs below (protrudes). */
.basic-banner:has(.banner-section-1),
.basic-banner:has(.banner-section-1) .layout__region,
.basic-banner:has(.banner-section-1) .block-block-content,
.basic-banner:has(.banner-section-1) .field--name-body {
  overflow: visible;
}

.banner-section {
  position: relative;
  z-index: 1;
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}
.banner-section.banner-section-1:not(.has-no-image) {
  border-right: #88D3FF calc(var(--bs-gutter-x) * 0.5) solid;  
}

.banner-section .content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: #003eab url('../images/background/basic_banner_pattern.jpg') center center no-repeat;
  background-size: auto 100%;
  border-radius: 50px 0 0 50px;
}

.banner-section.banner-section-1 .content {
  align-items: stretch;
}

.banner-section.banner-section-1 .content>.title {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 40px 40px 48px;
  color: #fff;
  z-index: 1;
}

.banner-section.banner-section-1 .content>.title .field--name-title {
  color: #fff;
  font-size: var(--font-size-lg);
  display: block;
  margin-bottom: 20px;  
}

.banner-section.banner-section-1 .content>.title .field--name-field-banner-content {
  font-size: 15px;
  font-weight: 400;
  line-height: 19px;
  color: #fff;
}

.banner-section.banner-section-1 .content>.title .field--name-field-banner-content p {
  margin: 0;
  font-size: 15px;
  line-height: 19px;
  color: #fff;
}

.banner-section.banner-section-1:not(.has-no-image) .content>.image {
  flex: 0 0 auto;
  width: min(50%, 858px);
  position: relative;
  z-index: 2;
  margin-bottom: -55px;
  aspect-ratio: 858 / 483;
}

.banner-section.banner-section-1.has-no-image .content>.image {
  display: none;
}

.banner-section.banner-section-1.has-no-image .content {
  border-radius: 50px 0 0 50px;
  min-height: 428px;
}

.banner-section.banner-section-1.has-no-image .content>.title {
  flex: 1 1 100%;
  padding-right: 50px;
  align-items: center;
  text-align: center;
}

.banner-section.banner-section-1 .content>.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 50px 50px;
}

/* Banner section-true (field-full-banner = True)
   Full width image background with bottom gradient and text at the bottom. */
.basic-banner:has(.banner-section-true),
.basic-banner:has(.banner-section-true) .layout__region,
.basic-banner:has(.banner-section-true) .block-block-content,
.basic-banner:has(.banner-section-true) .field--name-body {
  overflow: visible;
}

.banner-section.banner-section-true .content {
  background: none;
  border-radius: 0;
  align-items: stretch;
  position: relative;
  min-height: 500px;
}

.banner-section.banner-section-true .content>.title {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 48px 48px 60px 48px;
  color: #fff;
  z-index: 2;
}

.banner-section.banner-section-true .content>.title .field--name-title {
  display: block;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
}

.banner-section.banner-section-true .content>.title .field--name-field-banner-content {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.banner-section.banner-section-true .content>.title .field--name-field-banner-content p {
  margin: 0;
  font-size: 15px;
  color: #fff;
}

.banner-section.banner-section-true .content>.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.banner-section.banner-section-true .content>.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-bottom-left-radius: 50px;
}

/* ≥992px: hide mobile banner img. Must beat .banner-section-true .image img. */
@media (min-width: 992px) {

  .banner-section.banner-section-1 .content>.image img.banner-mobile-image,
  .banner-section.banner-section-true .content>.image img.banner-mobile-image {
    display: none;
  }
}

.banner-section.banner-section-true .content>.image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 83, 203, 0) 0%, rgba(0, 83, 203, 0.8) 100%);
  border-bottom-left-radius: 50px;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .banner-section.banner-section-true .content {
    min-height: 400px;
  }

  .banner-section.banner-section-true .content>.title {
    padding: 32px 24px 40px 24px;
  }

  .banner-section.banner-section-true .content>.image img,
  .banner-section.banner-section-true .content>.image::after {
    border-bottom-left-radius: 20px;
  }
}

.banner-section.banner-section-true.has-no-image .content>.image {
  display: none;
}

.banner-section.banner-section-true.has-no-image .content>.title {
  flex: 1 1 100%;
  padding-right: 48px;
  align-items: center;
  text-align: center;
  justify-content: center;
}

/* ==========================================================================
/* Admission Index
========================================================================== */
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper-shell {
  margin-bottom: 80px;
}
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64%, rgba(0, 0, 0, 0.60) 80%);
  justify-content: flex-end;
  padding: calc(var(--bs-gutter-x) * 0.5);
}
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption h2 {
  color: #fff;
  font-size: min(4.2vw, 80px);  
  line-height: 1.2625;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption a {
  background: linear-gradient(to left, #FF5F1B 15%, #FFAD5B 86%);
  border-radius: 60px;
  color: #fff;
  font-size: 24px;
  line-height: 33px;
  text-align: center;
  text-shadow: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 250px;  
  padding: 16px;
}
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption a::before {
  background: url(../images/icon/admissions_apply_now.png) no-repeat;
  background-size: contain;
  content: '';
  width: 46px;
  height: 33px;
}
.page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption a::after {
  background: url(../images/icon/arrow_white_7x14.svg) no-repeat;
  content: '';
  width: 9px;
  height: 16px;
}

/* Departments list — block_2 mockup (centered podium) ************************/
.block-field-blocknodehomepagefield-paragraphs>div:has(.view-display-id-block_2)>.container {
  --bs-gutter-x: 0;  
}
.block-field-blocknodehomepagefield-paragraphs>div:has(.view-display-id-block_2) + div .paragraph--type--body-content {
  padding-top: 50px;
}
.view-display-id-block_2 {      
  position: relative;
}
.view-display-id-block_2::before {  
  background: linear-gradient(to bottom, transparent 55%, #C4EAFF 90%);
  border-radius: 1440px;
  content: '';
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  bottom: 105px;
  z-index: -1;
}
.view-display-id-block_2 .departments-homepage-swiper-section {
  overflow: hidden;
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 60px;  
  position: relative;
}
.view-display-id-block_2 .departments-homepage-swiper.swiper {
  overflow: visible;
  padding-left: 0;
  z-index: 1;
}
.view-display-id-block_2 .departments-homepage-swiper .swiper-wrapper {
  align-items: flex-end;
}
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide {
  width: auto;
  height: auto;  
  transform: scale(0.79) translateY(53.16%);  
  transform-origin: center center;
  transition: transform 0.45s ease;  
  z-index: 1;  
}

/* Left: smaller + lower */
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev {
  opacity: 1;
  transform: scale(0.79) translateY(26.58%);
  z-index: 2;
}
/* Center: largest */
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 3;
}
/* Right: smaller + higher */
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next {
  opacity: 1;
  transform: scale(0.79) translateY(-26.58%);
  z-index: 2;
}
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next + .swiper-slide {
  transform: scale(0.79) translateY(-53.16%);
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card {  
  background-color: transparent;
  border-radius: 30px;
  box-shadow: none;
  display: flex;
  aspect-ratio: 398 / 527;
  height: 100% !important;
  margin: 0 auto;
  padding: 25px 30px;
  opacity: 0;
  transition: all 0.3s ease;
}
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev .departments-card,
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card,
.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next .departments-card {
  opacity: 1;
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card::after {  
  background: linear-gradient(140deg, #88D3FF 22%, #FFFCEC 83%);    
  border-radius: 30px;
  display: block;
  content: '';
  position: absolute;
  inset: 58px 0 0;
  z-index: -2;
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-red::after {
  background: linear-gradient(140deg, #FFA293 22%, #FFF8E7 83%);
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-blue::after {
  background: linear-gradient(140deg, #88D3FF 22%, #FFFCEC 83%); 
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-yellow::after {
  background: linear-gradient(140deg, #FFDE98 22%, #FFFCEC 83%); 
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-purple::after {
  background: linear-gradient(140deg, #CDB7F9 22%, #FFF8E7 83%); 
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-green::after {
  background: linear-gradient(140deg, #8BDFC5 22%, #FFFCEC 83%); 
}
.view-display-id-block_2 .departments-homepage-swiper .departments-card-brown::after {
  background: linear-gradient(140deg, #FFD3B1 22%, #FFFCEC 83%); 
}

.view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card {  
  margin: 0 auto;
}
.view-display-id-block_2 .departments-card::before {
  display: none;
}
.view-display-id-block_2 .departments-card .departments-card-image {
  border-radius: 0;
  height: 100%;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.view-display-id-block_2 .departments-card .departments-card-image::before {
  display: none;
}
.view-display-id-block_2 .departments-card .departments-card-image img {
  width: 100%;
  height: auto;  
  object-fit: contain;
  object-position: center bottom;
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  transform: translateX(-50%);  
}
.view-display-id-block_2 .departments-card .title {  
  text-align: left;
  display: block;
  margin-top: auto;
  padding: 0;  
  position: static;
}
.view-display-id-block_2 .departments-card .title::before {
  display: none;
}
.view-display-id-block_2 .departments-card .title a {
  color: var(--primary-color-title);
  filter: none;
  font-size: calc(var(--font-size-md) - 4px);
  line-height: var(--font-size-md);
  font-weight: 700;  
  text-shadow: none;
}
.view-display-id-block_2 .departments-homepage-swiper-footer {
  justify-content: center;
  margin-top: 65px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  .block-field-blocknodehomepagefield-paragraphs>div:has(.view-display-id-block_2)>.container {  
    max-width: none;
  }
  .view-display-id-block_2::before {
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* @media screen and (max-width: 1399.98px) {
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide {
    transform: scale(0.78) translateY(24px);
    width: auto;
  }
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev {
    transform: scale(0.78) translateY(48px);
  }
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active {
    transform: scale(1.08) translateY(0);
  }
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next {
    transform: scale(0.8) translateY(-32px);
  }
  .view-display-id-block_2 .departments-card,
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card,
  .view-display-id-block_2 .departments-card:hover,
  .view-display-id-block_2 .departments-card:focus {
    height: 340px;
  }
}
@media screen and (max-width: 1199.98px) {
  .view-display-id-block_2 .departments-homepage-swiper-section {
    padding-top: 180px;
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide {
    transform: scale(0.8) translateY(20px);
    width: auto;
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev {
    transform: scale(0.8) translateY(40px);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active {
    transform: scale(1.06) translateY(0);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next {
    transform: scale(0.82) translateY(-28px);
  }

  .view-display-id-block_2 .departments-card,
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card,
  .view-display-id-block_2 .departments-card:hover,
  .view-display-id-block_2 .departments-card:focus {
    height: 320px;
  }

  .view-display-id-block_2 .departments-card .title a {
    font-size: 16px;
    min-height: 0;
  }
}

@media screen and (max-width: 991.98px) {
  
  .view-display-id-block_2 .departments-homepage-swiper-section {
    padding-top: 140px;
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide {
    transform: scale(0.86) translateY(14px);
    width: auto;
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev {
    transform: scale(0.86) translateY(32px);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active {
    transform: scale(1.05) translateY(0);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next {
    transform: scale(0.88) translateY(-20px);
  }

  .view-display-id-block_2 .departments-card,
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card,
  .view-display-id-block_2 .departments-card:hover,
  .view-display-id-block_2 .departments-card:focus {
    height: 340px;
  }
}

@media screen and (max-width: 575.98px) {
  .view-display-id-block_2 .departments-homepage-swiper.swiper {
    padding-left: 0;
  }

  .view-display-id-block_2 .departments-homepage-swiper-section {
    padding-top: 110px;
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide {
    transform: scale(0.9) translateY(10px);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-prev {
    transform: scale(0.9) translateY(24px);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active {
    transform: scale(1.04) translateY(0);
  }

  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-next {
    transform: scale(0.92) translateY(-14px);
  }

  .view-display-id-block_2 .departments-card,
  .view-display-id-block_2 .departments-homepage-swiper .swiper-slide-active .departments-card,
  .view-display-id-block_2 .departments-card:hover,
  .view-display-id-block_2 .departments-card:focus {
    height: 320px;
  }

  .view-display-id-block_2 .departments-card .title a {
    font-size: 16px;
  }
} */

/**************************************************************/
/* Media Query ************************************************/
@media screen and (min-width: 992px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
  }

  #block-i2-theme-main-navigation .programmes-style>.menu-dropdown {
    transition: --programmes-color 0.3s ease;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown::before {
    background-color: var(--programmes-color);
    background-image: linear-gradient(to bottom, #FF7F4F 40%, #0060B7 40%, #0060B7 80%, #FFD67D 80%);
    background-position: right center;
    background-size: 10px 100%;
    background-repeat: no-repeat;
    border-bottom-left-radius: 50px;
    content: '';
    position: absolute;
    inset: 0 0 0 240px;
    z-index: -1;
    transition: background-color 0.3s ease;
  }

  #block-i2-theme-main-navigation .main-menu-mega-panel {
    margin-bottom: 40px;
    padding: 0 calc(var(--bs-gutter-x) * 0.5) 0 0;
  }

  #block-i2-theme-main-navigation .main-menu-mega-panel .main-menu-mega__content {
    background-color: var(--programmes-color);
    flex: 1 1 auto;
    padding-top: 30px;
    padding-left: 30px;
    transition: background-color 0.3s ease;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded>.menu-dropdown:has(.menu-level-2 a:hover) {
    --programmes-background-color-lv1: oklch(from var(--programmes-color) calc(l + 0.5) calc(c - 0.08) h);
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded>.menu-dropdown:has(.menu-level-2 a:hover)::before {
    background-color: var(--programmes-background-color-lv1);
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: var(--programmes-background-color-lv1);
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-red-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-red-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-red-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-red-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #FFF3EE;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-blue-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-blue-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-blue-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-blue-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #E3F8FF;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-yellow-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-yellow-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-yellow-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-yellow-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #FFF1DA;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-purple-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-purple-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-purple-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-purple-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #F5F0FF;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-green-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-green-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-green-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-green-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #E6F6E8;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.programmes-brown-style-menu>.menu-dropdown::before,
  #block-i2-theme-main-navigation .programmes-brown-style-menu .main-menu-mega-panel .main-menu-mega__content,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-brown-style-menu>.menu-dropdown:has(.menu-level-2 a:hover)::before,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.programmes-brown-style-menu>.menu-dropdown:has(.menu-level-2 a:hover) .main-menu-mega-panel .main-menu-mega__content {
    background-color: #FFF8EE;
  }

  #block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item--expanded>.menu-dropdown {
    display: none;
  }
}

@media screen and (min-width: 1400px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-mega-panel {
    width: 100%;
    margin-bottom: 60px;
  }

  #block-i2-theme-main-navigation .main-menu-mega-panel .main-menu-mega__content {
    padding-left: 40px;
    padding-top: 40px;
  }
}

@media screen and (min-width: 1500px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-mega-panel .main-menu-mega__content {
    padding-left: 50px;
    padding-top: 50px;
  }
}

@media screen and (max-width: 1699.98px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-mega__image {
    width: 35%;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown::before {
    left: 12%;
  }

  #block-i2-theme-main-navigation .main-menu-mega__title {
    font-size: 34px;
  }

  /* Programmes mega menu — tab bar and panels */
  #block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab {
    font-size: 16px;
  }

  /* Homepage Explore CIE ******************************************************/
  .explore-homepage-section .layout__region--first.column-50 {
    flex: 0 1 calc(40% - var(--twocol-gap) * 0.4);
  }

  .explore-homepage-section .layout__region--first.column-50>.block>div {
    justify-content: center;
  }

  .explore-homepage-section .layout__region--second.column-50 {
    flex: 0 1 calc(60% - var(--twocol-gap) * 0.6);
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item img,
  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
    border-radius: 40px;
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
    right: 0;
  }

  /* Homepage Events List Swiper ***********************************************/
  .view-block-events-homepage-list .events-list-header {
    padding: 25px 50px 25px 20%;
  }
}

@media screen and (max-width: 1599.98px) {

  /* Programmes page sidebar */
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-open,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .prev,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .next {
    background-size: 24px auto;
  }

  .section-programmes-sidebar .programmes-sidebar-button {
    --programmes-sidebar-width: 46px;
    min-height: 300px;
  }

  .section-programmes-sidebar .programmes-sidebar-button img {
    width: 24px;
    height: auto;
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content .layout__region--first {
    flex: 0 1 calc(45% - var(--twocol-gap) / 2);
  }

  .page-node-type-programmes .details-content .layout__region--second {
    flex: 0 1 calc(55% - var(--twocol-gap) / 2);
  }
}

@media screen and (max-width: 1499.98px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-mega__image {
    width: 32%;
  }

  /* Homepage Video List Swiper ***********************************************/
  .homepage-video-list-swiper-section--carousel .homepage-video-list-swiper-controls {
    max-width: 1056px;
    /* 1056 track + arrows + gaps */
  }

  .homepage-video-list-swiper-section--carousel .homepage-video-list-swiper {
    flex: 1 1 auto;
    min-width: 0;
    /* Fits 4 slides at 1200–1399 (spaceBetween 24); still OK for 5 at 1400–1499. */
    max-width: 1220px;
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content .programmes-meta-fields .field__label {
    font-size: 20px;
  }

  .page-node-type-programmes .details-content .programmes-meta-fields .field__item {
    font-size: 16px;
  }

  .page-node-type-programmes .details-content .programmes-resource-fields .field__label {
    font-size: 16px;
  }
}

@media screen and (max-width: 1399.98px) {

  /* Header CSS ***********************************************/
  main {
    padding-top: 149px;
  }


  /* nav main menu */
  .region-nav-main .nav-level-0>.nav-item {
    margin-right: 20px;
  }

  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a {
    font-size: 16px;
    line-height: 18px;
    padding: 8px;
  }

  #block-i2-theme-applynow a {
    font-size: 16px;
    line-height: 22px;
    width: 133px;
    padding: 6px 8px;
  }

  #block-i2-theme-applynow a::after {
    height: 22px;
  }

  #block-i2-theme-main-navigation .main-menu-mega__image {
    width: 35%;
  }

  /* Programmes mega menu — tab bar and panels */
  #block-i2-theme-main-navigation .programmes-style .main-menu-mega__tab {
    line-height: 20px;
    max-width: 25%;
    padding: 6px 16px;
  }

  /* Footer CSS ***********************************************/
  .region-footer-left {
    min-width: auto;
    width: 58%;
  }

  .footer-copyright .content {
    font-size: 14px;
  }

  /* Departments Homepage Swiper ***********************************************/
  /* .homepage-departments-section .layout--twocol-section>.column-33 {
    flex: 0 1 calc(35% - var(--twocol-gap) * 0.35);
  }

  .layout--twocol-section.layout--twocol-section--50-50>.column-67 {
    flex: 0 1 calc(65% - var(--twocol-gap) * 0.65);
  }

  .departments-homepage-swiper .swiper-slide {
    width: 240px;
  }

  .departments-card {
    height: 300px;
  }

  .departments-homepage-swiper .swiper-slide-active .departments-card,
  .departments-card:hover,
  .departments-card:focus {
    height: 328px;
  } */

  /* Homepage Events List Swiper ***********************************************/
  .view-block-events-homepage-list .events-list-header {
    padding: 25px 50px 25px 16%;
  }

  .homepage-events-list-swiper {
    min-height: 400px;
  }

  .homepage-events-list-swiper .swiper-slide {
    height: auto;
    width: 300px;
  }

  .homepage-events-list-swiper .swiper-slide-active~.swiper-slide {
    transform: translateX(62px);
  }

  .homepage-events-list-swiper .events-card {
    width: 300px;
  }

  .homepage-events-list-swiper .swiper-slide-active .events-card {
    width: 362px;
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content .programmes-resource-fields>div:first-child {
    margin-right: calc(100% - 220px);
  }

  .page-node-type-programmes .details-content .programmes-resource-fields .field__label {
    text-align: center;
    min-width: 220px;
  }
}

@media screen and (max-width: 1299.98px) {

  /* Header CSS ***********************************************/
  /* nav main menu */
  .region-nav-main .nav-level-0>.nav-item {
    margin-right: 10px;
  }

  /* Footer CSS ***********************************************/
  .footer-copyright .content {
    flex-direction: column;
    gap: 5px;
  }
}

@media screen and (max-width: 1199.98px) {

  /* Footer CSS ***********************************************/
  .region-footer-left {
    flex-direction: column;
    row-gap: 30px;
  }

  footer #block-i2-theme-mainnavigation {
    width: 100%;
    margin-left: 0;
  }

  footer .menu {
    grid-template-columns: 50% 50%;
  }

  .footer-social-media-section ul img {
    width: 26px;
    height: auto;
  }

  .footer-icon-section {
    margin-top: 60px;
  }

  .footer-icon-section ul img {
    width: auto;
    height: 70px;
  }

  /* Departments Homepage Swiper ***********************************************/
  .homepage-departments-section .layout--twocol-section>.column-33 {
    flex: 0 1 calc(40% - var(--twocol-gap) * 0.4);
  }

  .layout--twocol-section.layout--twocol-section--50-50>.column-67 {
    flex: 0 1 calc(60% - var(--twocol-gap) * 0.6);
  }

  .departments-homepage-swiper .swiper-slide {
    width: 224px;
  }

  .departments-card {
    height: 280px;
  }

  .departments-homepage-swiper .swiper-slide-active .departments-card,
  .departments-card:hover,
  .departments-card:focus {
    height: 308px;
  }

  .departments-card .title a {
    font-size: 18px;
    min-height: 44px;
  }

  /* Homepage Explore CIE ******************************************************/
  .explore-homepage-section::before {
    border-radius: 0 0 80px 80px;
  }

  .explore-homepage-section .layout__region--first.column-50 {
    flex: 0 1 calc(30% - var(--twocol-gap) * 0.3);
  }

  .explore-homepage-section .layout__region--second.column-50 {
    flex: 0 1 calc(70% - var(--twocol-gap) * 0.7);
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:first-child .field--name-field-image-item img {
    width: 100%;
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item img,
  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
    border-radius: 30px;
    width: 130px;
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
    display: none;
  }

  /* Homepage Events List Swiper ***********************************************/
  .view-block-events-homepage-list .events-list-header {
    padding: 25px 50px 25px calc(var(--bs-gutter-x) * 0.5);
  }

  .homepage-events-list-swiper {
    min-height: 351px;
  }

  .homepage-events-list-swiper .swiper-slide {
    height: auto;
    width: 220px;
  }

  .homepage-events-list-swiper .swiper-slide-active~.swiper-slide {
    transform: translateX(44px);
  }

  .homepage-events-list-swiper .events-card {
    width: 220px;
  }

  .homepage-events-list-swiper .swiper-slide-active .events-card {
    width: 264px;
  }

  .homepage-events-list-swiper .events-card .card-tags {
    font-size: 14px;
  }

  .homepage-events-list-swiper .events-card .card-body {
    padding: 20px 20px 0;
  }

  .homepage-events-list-swiper .events-card .card-title {
    font-size: 16px;
    -webkit-line-clamp: 3;
  }

  .homepage-events-list-swiper .card-time-badge {
    min-width: 50px;
    height: 50px;
  }

  .homepage-events-list-swiper .swiper-slide-active .card-time-badge {
    min-width: 60px;
    height: 60px;
  }

  .homepage-events-list-swiper .card-time-badge .day,
  .homepage-events-list-swiper .card-time-badge--range .range-start,
  .homepage-events-list-swiper .card-time-badge--range .range-end,
  .homepage-events-list-swiper .card-time-badge--range .range-sep {
    font-size: 18px;
  }

  .homepage-events-list-swiper .swiper-slide-active .card-time-badge .day,
  .homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-start,
  .homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-end,
  .homepage-events-list-swiper .swiper-slide-active .card-time-badge--range .range-sep {
    font-size: 20px;
  }

  .homepage-events-list-swiper .card-time-badge .month,
  .homepage-events-list-swiper .swiper-slide-active .card-time-badge .month {
    font-size: 14px;
  }

  /* Homepage Video List Swiper ***********************************************/
  .homepage-video-list-swiper-section--carousel .homepage-video-list-swiper-controls {
    max-width: 788px;
    /* 788 track + arrows + gaps */
  }

  /* Programmes page sidebar */
  .section-programmes-sidebar {
    --programmes-sidebar-width: 40px;
  }

  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-open,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .prev,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .next {
    background-size: 22px auto;
  }

  .section-programmes-sidebar .programmes-sidebar-button {
    padding: 15px 4px;
  }

  .section-programmes-sidebar .programmes-sidebar-button img {
    width: 22px;
  }

  .section-programmes-sidebar .sidebar-close {
    width: 40px;
    height: 40px;
    right: -40px;
  }

  .section-programmes-sidebar .sidebar-close img {
    width: 20px;
  }

  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-close {
    background-size: 20px;
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content {
    flex-wrap: wrap;
  }

  .page-node-type-programmes .details-content::before {
    border-radius: 0 50px 50px 0;
    left: 0;
  }

  .page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--first {
    flex: 0 1 70%;
  }

  .page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--second {
    flex: 0 1 100%;
    padding-left: calc((var(--bs-gutter-x) * 0.5) + 20px);
    padding-top: 0;
  }

  /* ==========================================================================
  Departments / Office School Section Banner
  ========================================================================== */
  /* School ***************************************************/
  /* Programmes View Grid & Cards */
  /* List view layout */
  .view-id-block_programmes_school_list.is-list-view .school-programmes-list-header {
    gap: 30px;
  }

  .view-id-block_programmes_school_list.is-list-view .school-card {
    gap: 30px;
  }
}

@media screen and (max-width: 1179.98px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown::before {
    left: 0;
  }

  #block-i2-theme-main-navigation .main-menu-mega__image {
    display: none;
  }
}

@media screen and (max-width: 1099.98px) {

  /* Header CSS ***********************************************/
  /* Main navigation mega menu ***********************************************/
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item {
    margin-right: 0.5vw;
  }

  /* ==========================================================================
  Departments / Office School Section Banner
  ========================================================================== */
  .office-school-section .content-left .title h1,
  .office-school-section .content-left .title h2,
  .office-school-section .content-left .title .field--name-title {
    font-size: 32px;
  }

  /* School ***************************************************/
  /* Programmes View Grid & Cards */
  .view-id-block_programmes_school_list.is-card-view .view-content,
  .view-id-block_programmes_school_list:not(.is-list-view) .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 991.98px) {

  /* Header CSS ***********************************************/
  main {
    padding-top: 81px;
  }

  header.header,
  .scroll-fixed header.header {
    top: 6px;
  }

  header.header .navbar {
    padding: 13px calc(var(--bs-gutter-x) * 0.5);
    position: relative;
    transition: all 0.3s ease;
  }

  header.header .header-left {
    margin-top: 0;
  }

  header.header .region-nav-branding .section-logo a img {
    height: 44px;
  }

  /* Top Menu Mega Dropdown ***********************************************/
  .header-quick-link {
    min-height: 6px;
  }

  .header-quick-link>.region-quick-link {
    display: none;
  }

  .scroll-fixed .header-quick-link {
    top: 0;
  }

  .header-quick-link .navbar-nav>.nav-item>ul.top-menu-mega-panel {
    position: static;
    left: auto;
    right: auto;
    margin-top: 4px;
    padding: 16px 20px 20px;
    border-radius: 12px;
    column-count: 1;
  }

  .header-quick-link .top-menu-mega-panel>.nav-item.other-side {
    break-before: auto;
  }

  .header-quick-link .top-menu-mega__title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  /* Mobile offcanvas panel ***********************************************/
  /* Lock page scroll while the menu is open; only the panel should scroll. */
  html:has(#navbarSupportedContent.show),
  html:has(#navbarSupportedContent.showing),
  body:has(#navbarSupportedContent.show),
  body:has(#navbarSupportedContent.showing),
  html.mobile-offcanvas-open,
  body.mobile-offcanvas-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Offcanvas lives inside header; raise stacking so it sits above the backdrop. */
  body:has(#navbarSupportedContent.show) header.header,
  body:has(#navbarSupportedContent.showing) header.header {
    z-index: 1046;
  }

  header.header .nav-main-content {
    position: static;
  }

  header.header .nav-main-content .offcanvas.offcanvas-end {
    --bs-offcanvas-width: min(360px, 85vw);
    --bs-offcanvas-bg: transparent;
    --bs-offcanvas-border-width: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    color: #fff;
    background:
      linear-gradient(180deg, rgba(0, 62, 171, 0.92) 0%, rgba(0, 50, 139, 0.96) 55%, #002a75 100%),
      url(../images/background/home_news_pattern.png) center top / cover no-repeat,
      var(--primary-color);
    border: none;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
  }

  header.header .nav-main-content .offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    padding: 16px 16px 0;
    border: none;
    background: transparent;
    /* Full-width overlay sits above the language row; let clicks pass through. */
    pointer-events: none;
  }

  header.header .nav-main-content .offcanvas .offcanvas-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "lang lang lang"
      "font share search"
      "nav nav nav"
      "apply apply apply"
      "social social social"
      "secondary secondary secondary";
    align-content: start;
    gap: 0;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 16px 0 0;
    -webkit-overflow-scrolling: touch;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__close {
    background: var(--yellow-color) url(../images/icon/sidebar_menu_close_black.svg) center / 14px 14px no-repeat;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    filter: none;
    opacity: 1;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    pointer-events: auto;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__close:hover,
  header.header .nav-main-content .offcanvas .mobile-offcanvas__close:focus {
    opacity: 1;
    background-color: var(--yellow-color);
    box-shadow: none;
  }

  header.header .nav-main-content .offcanvas .offcanvas-body .mobile-offcanvas__top,
  header.header .nav-main-content .offcanvas .offcanvas-body .mobile-offcanvas__main,
  header.header .nav-main-content .offcanvas .offcanvas-body .mobile-offcanvas__top .region-nav-additional,
  header.header .nav-main-content .offcanvas .offcanvas-body .mobile-offcanvas__main .region-nav-main {
    display: contents;
  }

  header.header .nav-main-content .offcanvas .offcanvas-body .region-nav-additional {
    height: auto;
    margin: 0;
    justify-content: unset;
    align-items: unset;
  }

  .scroll-fixed .nav-main-content .offcanvas .offcanvas-body .region-nav-additional {
    height: auto;
    margin: 0;
    overflow: visible;
  }

  /* Language + close clearance */
  header.header .nav-main-content .offcanvas #block-i2-theme-languageswitcher-2 {
    grid-area: lang;
    padding: 0 56px 12px 20px;
  }

  .nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul {
    align-items: center;
    gap: 10px;
  }

  .nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    height: 34px;
    width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a.is-active,
  .nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a:hover,
  .nav-main-content .offcanvas .offcanvas-body .region-nav-additional .language-switcher-language-url ul a:focus {
    background-color: var(--primary-color-hover);
    color: var(--primary-color-text);
  }

  /* Tools row */
  header.header .nav-main-content .offcanvas #block-i2-theme-enlargefont {
    grid-area: font;
    justify-self: center;
    padding: 8px 0 18px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-share {
    grid-area: share;
    justify-self: center;
    padding: 8px 0 18px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-search {
    grid-area: search;
    justify-self: center;
    padding: 8px 0 18px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-enlargefont,
  header.header .nav-main-content .offcanvas #block-i2-theme-share,
  header.header .nav-main-content .offcanvas #block-i2-theme-search {
    position: relative;
    margin: 0;
    padding-left: 0;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-enlargefont::before,
  header.header .nav-main-content .offcanvas #block-i2-theme-share::before,
  header.header .nav-main-content .offcanvas #block-i2-theme-search::before,
  header.header .nav-main-content .offcanvas .share-section::before,
  header.header .nav-main-content .offcanvas .search-section::before,
  header.header .nav-main-content .offcanvas .social-media-section .content::before,
  header.header .nav-main-content .offcanvas .social-media-section .content::after {
    display: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-enlargefont,
  header.header .nav-main-content .offcanvas #block-i2-theme-share {
    border-right: 1px solid rgba(255, 255, 255, 0.45);
  }

  header.header .nav-main-content .offcanvas .share-section,
  header.header .nav-main-content .offcanvas .search-section {
    margin: 0;
    padding: 0;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-enlargefont img,
  header.header .nav-main-content .offcanvas .share-section .dropdown-toggle img,
  header.header .nav-main-content .offcanvas .search-section .dropdown-toggle img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }

  /* Main nav — accordion (Fig 3) + nested drill inside white card */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation {
    grid-area: nav;
    width: 100%;
    padding: 8px 0 8px;
  }

  header.header .nav-main-content .offcanvas .region-nav-main {
    display: contents;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item {
    margin-right: 0;
    width: 100%;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    padding: 12px 24px 12px 44px;
    position: relative;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item>a:focus {
    color: var(--primary-color-hover);
  }

  /* L0 left caret: down when closed, up when open */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>a::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/icon/mega_menu_arrow_orange.svg) center / contain no-repeat;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open>a::before {
    transform: rotate(-90deg);
  }

  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown {
    position: static;
    left: auto;
    right: auto;
    margin-top: 0;
    width: 100%;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open>.menu-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    padding: 0 20px 12px;
  }

  /* White rounded submenu card */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open>.menu-dropdown .main-menu-mega-panel {
    display: block;
    background: #fff;
    border-radius: 18px;
    padding: 16px 20px 18px;
    gap: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__image,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__title {
    display: none !important;
  }

  /* Nested drill back row inside white card */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__drill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__drill-header[hidden] {
    display: none !important;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__back {
    display: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__subtitle {
    color: #161616;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 34px;
    margin: 0;
    user-select: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__subtitle::before {
    background: var(--color-orange) url(../images/icon/mega_menu_arrow_back.svg) center center no-repeat;
    border-radius: 50%;
    content: '';
    vertical-align: top;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 10px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__subtitle:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__subtitle:focus {
    color: var(--primary-color);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__nav,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport {
    width: 100%;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1 {
    column-count: 1;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Level-1 / drilled links — dark text on white card */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport a,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content a {
    color: #161616;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    display: block;
    padding: 10px 0;
    text-decoration: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport a:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content a:hover {
    color: var(--primary-color);
  }

  /* Expanded L1: right orange chevron (drill affordance) */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport .menu-item--expanded>a {
    font-weight: 500;
    padding-right: 28px;
    position: relative;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport .menu-item--expanded>a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/icon/mega_menu_arrow_orange.svg) center / contain no-repeat;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__viewport .menu-item--expanded>a::before {
    content: none;
    display: none;
  }

  /*
   * Nested drill (Fig 1 / sub level 3): full blue panel —
   * About title + orange back + white links; no white card; hide L0 siblings.
   */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0:has(.is-drill-open)>.menu-item:not(.is-open) {
    display: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open:has(.is-drill-open)>a {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    padding: 8px 24px 16px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open:has(.is-drill-open)>a::before {
    display: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open:has(.is-drill-open)>.menu-dropdown {
    padding: 0 24px 8px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded.is-open:has(.is-drill-open)>.menu-dropdown .main-menu-mega-panel {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__subtitle {
    color: #fff;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__subtitle:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__subtitle:focus {
    color: var(--primary-color-hover);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__viewport a {
    color: rgba(255, 255, 255, 0.95);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__viewport a:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open a:hover {
    color: var(--primary-color-hover);
  }

  /* Keep right chevron for further expandable children while drilled */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-mega__content.is-drill-open .main-menu-mega__viewport .menu-item--expanded>a {
    color: #fff;
  }

  /* Programmes (special): pills on blue + separate school card (Fig 3) */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.is-open>.menu-dropdown {
    padding: 0 20px 12px;
  }

  /* Beat generic white-card specificity */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.is-open>.menu-dropdown .main-menu-mega-panel {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.menu-item--expanded.is-open>.menu-dropdown .main-menu-mega-panel .main-menu-mega__content {
    background: transparent;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tabs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab {
    flex: 0 0 auto;
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: var(--background-medium-blue, #CBEFFF);
    color: var(--primary-color-text, #134C94);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    padding: 12px 18px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab:focus {
    color: var(--primary-color-text, #134C94);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab.is-active {
    background: linear-gradient(270deg, #FF5F1B 15%, #FFAD5B 86%);
    color: #fff;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panels {
    width: 100%;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel:not([hidden]) {
    background: #fff;
    border-radius: 18px;
    padding: 8px 18px 12px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel .field__label,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel .field--name-field-related-school,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel .field--name-field-programmes-tags {
    display: none !important;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel>.menu>.menu-item>a {
    color: #161616;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    padding: 12px 28px 12px 0;
    position: relative;
    display: block;
    text-decoration: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel>.menu>.menu-item>a:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel>.menu>.menu-item>a:focus {
    color: var(--primary-color);
  }

  /* Design: right chevron on every school row */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel>.menu>.menu-item>a::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/icon/mega_menu_arrow_orange.svg) center / contain no-repeat;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__tab-panel>.menu>.menu-item>a::before {
    content: none;
    display: none;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__all-programmes--root {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
    gap: 12px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__all-programmes--root:hover,
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__all-programmes--root:focus {
    color: var(--primary-color-hover);
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style .main-menu-mega__all-programmes--root .main-menu-mega__all-programmes-icon {
    background: var(--primary-color-hover, #88D3FF) url(../images/icon/arrow_circle_blue_30x30.svg) center / 26px 26px no-repeat;
    width: 26px;
    height: 26px;
  }

  /* Programmes drill: hide root All Programmes (tabs already hidden) */
  header.header .nav-main-content .offcanvas #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.programmes-style.is-open:has(.is-drill-open) .main-menu-mega__all-programmes--root {
    display: none !important;
  }

  #block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item.other-side,
  #block-i2-theme-main-navigation .main-menu-mega__viewport ul.menu>.menu-item:has(> a.other-side),
  #block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item.other-side,
  #block-i2-theme-main-navigation .main-menu-mega__content .menu-level-1>.menu-item:has(> a.other-side) {
    break-before: auto;
  }

  /* Apply Now */
  header.header .nav-main-content .offcanvas #block-i2-theme-applynow {
    grid-area: apply;
    display: flex;
    justify-content: center;
    padding: 20px 24px 12px;
  }

  header.header .nav-main-content .offcanvas #block-i2-theme-applynow a {
    width: min(220px, 100%);
  }

  /* Social under Apply Now */
  header.header .nav-main-content .offcanvas #block-i2-theme-socialmedia {
    grid-area: social;
    display: flex;
    justify-content: center;
    padding: 8px 24px 24px;
  }

  header.header .nav-main-content .offcanvas .social-media-section .content {
    justify-content: center;
  }

  header.header .nav-main-content .offcanvas .social-media-section .content ul {
    gap: 22px;
    padding: 0;
  }

  header.header .nav-main-content .offcanvas .social-media-section .content ul img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(24%) saturate(1200%) hue-rotate(176deg) brightness(104%) contrast(98%);
  }

  /* Secondary quick links (Prospective Students / Notices / Giving) */
  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary {
    grid-area: secondary;
    display: block;
    align-self: stretch;
    width: 100%;
    margin-top: 8px;
    padding: 20px 24px 28px;
    background: var(--footer-copyright-blue);
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>a {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 0;
    text-decoration: none;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>a:hover,
  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>a:focus {
    color: var(--primary-color-hover);
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>.dropdown-toggle::after,
  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>ul,
  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary .region-quick-link ul.navbar-nav>.nav-item>ul.top-menu-mega-panel {
    display: none !important;
  }

  header.header .nav-main-content .offcanvas .mobile-offcanvas__secondary #block-i2-theme-topmenuright {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  /* Footer CSS ***********************************************/
  footer .footer-wrap {
    border-radius: 40px;
  }

  footer .footer-content {
    flex-direction: column;
    row-gap: 80px;
    padding: 30px 20px;
  }

  .region-footer-left {
    width: 100%;
  }

  .footer-social-media-section ul img {
    width: 30px;
  }

  .footer-icon-section {
    margin-top: 50px;
  }

  .footer-copyright {
    border-radius: 20px;
    padding: 15px;
  }

  .footer-copyright .content {
    gap: 30px;
  }

  /* Index Banner Swiper ***********************************************/
  .index-banner-swiper .swiper-img img,
  .index-banner-swiper .swiper-video video,
  .index-banner-swiper .swiper-img--has-mobile img {
    aspect-ratio: 800 / 600;
  }

  .index-banner-swiper .swiper-caption {
    padding: 16px;
  }

  .index-banner-swiper .swiper-caption p {
    margin-bottom: 12px;
    font-size: 28px;
  }

  .swiper-button-prev.index-banner-swiper-button-prev,
  .swiper-button-next.index-banner-swiper-button-next {
    display: none;
  }

  .index-banner-swiper-controls {
    transform: translateX(-50%);
    left: 50%;
    bottom: -15px;
  }

  /* Homepage New List Swiper ***********************************************/
  .homepage-new-list-swiper-section {
    padding: 0 40px 40px;
  }

  .view-block-homepage-new-list .view-header h2 {
    margin-bottom: 20px;
  }

  .view-block-homepage-new-list .view-footer {
    left: 60px;
  }

  /* Homepage Video Featured Player *******************************************/
  .featured-video-title {
    margin-bottom: 30px;
  }

  /* News / E-newsletters List ***********************************************/
  .view-block-new-list .views-infinite-scroll-content-wrapper,
  .view-block-new-list .view-content:not(:has(.views-infinite-scroll-content-wrapper)),
  .view-block-e-newsletters-list .views-infinite-scroll-content-wrapper,
  .view-block-e-newsletters-list .view-content:not(:has(.views-infinite-scroll-content-wrapper)) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .view-block-new-list .views-row:first-child .news-card,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card {
    flex-direction: column;
    border-radius: 24px;
  }

  .view-block-new-list .views-row:first-child .news-card .card-img-top,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-img-top {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .view-block-new-list .views-row:first-child .news-card .card-img-top img,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-img-top img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .view-block-new-list .views-row:first-child .news-card .card-body,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-body {
    padding: 24px 28px 28px;
  }

  .view-block-new-list .views-row:first-child .news-card .card-title,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-title {
    font-size: 22px;
  }

  /* Departments Homepage Swiper ***********************************************/
  .homepage-departments-section {
    background-image: var(--section-background-mobile-image);
    background-size: 100% auto;
    padding-top: 118vw;
    padding-bottom: 60px;
  }

  .homepage-departments-section.has-background-image {
    background-position: center top -20vw;
  }

  .homepage-departments-section .layout--twocol-section {
    --twocol-gap: 20px;
  }

  .homepage-departments-section .layout--twocol-section>.column-33 {
    flex: 0 1 100%;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  .layout--twocol-section.layout--twocol-section--50-50>.column-67 {
    flex: 0 1 100%;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }

  .homepage-departments-section h2 {
    margin-bottom: 20px;
  }

  .departments-homepage-swiper-section {
    padding-top: 0;
  }

  .departments-homepage-swiper .swiper-slide {
    width: 300px;
  }

  .departments-card {
    height: 380px;
  }

  .departments-homepage-swiper .swiper-slide-active .departments-card,
  .departments-card:hover,
  .departments-card:focus {
    height: 408px;
  }

  .departments-card::before {
    width: 36px;
    height: 36px;
  }

  .departments-card .title a {
    font-size: 22px;
  }

  /* Homepage Explore CIE ******************************************************/
  .explore-homepage-section {
    padding-top: 60px;
    padding-bottom: 120px;
  }

  .explore-homepage-section::before {
    background: url(../images/background/home_explore_cie_bg_mob.jpg) no-repeat;
    background-position: left bottom;
    background-size: cover;
    border-radius: 0 0 0 80px;
    inset: 0;
  }

  .explore-homepage-section .layout--twocol-section {
    --twocol-gap: 28.75vw;
  }

  .explore-homepage-section .layout__region--first.column-50,
  .explore-homepage-section .layout__region--second.column-50 {
    flex: 0 1 100%;
  }

  .explore-homepage-section .layout__region--second {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:first-child .field--name-field-image-item img {
    width: 60%;
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(2) .field--name-field-image-item img {
    width: 30%;
    left: 25%;
    bottom: -19%;
  }

  .explore-homepage-section .layout__region--first .paragraph--type--image>.paragraph__column>div:nth-child(3) .field--name-field-image-item img {
    display: block;
    width: 30%;
    right: calc(var(--bs-gutter-x) * 0.5);
    top: 50%;
  }

  .explore-homepage-section h2 {
    text-align: center;
  }

  .explore-homepage-section .explore-item-number .number,
  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number .prefix,
  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number:has(.prefix) .postscript {
    font-size: 45px;
  }

  /* Homepage Events List Swiper ***********************************************/
  .homepage-events-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .homepage-events-section::before {
    right: 0;
    bottom: 0;
  }

  .homepage-events-section::after {
    content: none;
  }

  .view-block-events-homepage-list {
    flex-direction: column;
  }

  .view-block-events-homepage-list .view-header {
    width: 100%;
    padding: 0 calc(var(--bs-gutter-x) * 0.5);
  }

  .view-block-events-homepage-list .homepage-events-list-swiper-section {
    width: 100%;
    padding: 0 0 0 calc(var(--bs-gutter-x) * 0.5);
  }

  .view-block-events-homepage-list .events-list-header {
    padding: 0;
  }

  .view-block-events-homepage-list .events-list-header h2 {
    margin-bottom: 20px;
  }

  .view-block-events-homepage-list .events-list-header a {
    position: absolute;
    bottom: -70px;
  }

  .view-block-events-homepage-list .homepage-events-list-swiper-footer {
    margin-bottom: 0;
    padding: 0;
  }

  .homepage-events-list-swiper-button::before {
    content: none;
  }

  .homepage-events-list-swiper-button {
    margin-left: 0;
  }

  /* Homepage Video List Filter ***********************************************/
  .video-header-section h2 {
    margin-bottom: 20px;
  }

  /* Homepage Video List Swiper ***********************************************/
  .homepage-video-list-swiper-section--carousel .homepage-video-list-swiper-controls {
    max-width: 544px;
    /* 544 track + arrows + gaps */
  }

  /* Life at CIE — parallax collage (adapted from HTML prototype for Drupal DOM) */
  .life-at-cie {
    background-image: url(../images/background/life_at_cie_bg_mob.svg);
    background-position: center center;
    background-size: 47.8%;
    height: 172vw;
  }

  /* img01, img03 */
  .life-at-cie .field--name-field-image .field__item:nth-child(1),
  .life-at-cie .field--name-field-image .field__item:nth-child(3) {
    left: auto;
    top: auto;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(1) img,
  .life-at-cie .field--name-field-image .field__item:nth-child(3) img {
    display: none;
  }

  /* img02 */
  .life-at-cie .field--name-field-image .field__item:nth-child(2) {
    left: calc(100% - (min(32.25vw, 215px) * 0.9));
    top: 55vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(2) img {
    width: min(32.25vw, 215px);
  }

  /* img04 */
  .life-at-cie .field--name-field-image .field__item:nth-child(4) {
    left: 30px;
    right: auto;
    top: 13vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(4) img {
    width: min(42.5vw, 250px);
  }

  /* img05 */
  .life-at-cie .field--name-field-image .field__item:nth-child(5) {
    left: 9%;
    right: auto;
    top: 72vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(5) img {
    border-radius: 20px;
    width: min(18vw, 274px);
  }

  /* img06 */
  .life-at-cie .field--name-field-image .field__item:nth-child(6) {
    left: calc(100% - min(35vw, 203px) - 30px);
    right: auto;
    top: 131vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(6) img {
    width: min(35vw, 203px);
  }

  /* img07 */
  .life-at-cie .field--name-field-image .field__item:nth-child(7) {
    left: -8%;
    right: auto;
    top: 88vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(7) img {
    border-radius: 30px;
    width: min(45vw, 280px);
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--first {
    flex: 0 1 75%;
  }

  /* ==========================================================================
  Departments / Office School Section Banner
  ========================================================================== */
  .page-node-type-departments .details-content+div .block-system-breadcrumb-block {
    padding-top: 20px;
    padding-bottom: 90px;
  }

  .office-school-section .content {
    background-image: none;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  .office-school-section .content-left {
    border-radius: 40px 0 0 40px;
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
  }

  .office-school-section .content-right {
    display: none;
  }

  /* Mobile (<992px): show field-banner-mobile-image; hide desktop banner.
     Fallback: if no mobile field, keep desktop banner visible. */
  .office-school-section .content-left .image:has(.block-field-blocknodedepartmentsfield-banner-mobile-image) .block-field-blocknodedepartmentsfield-banner,
  .office-school-section .content-left .image:has(.field--name-field-banner-mobile-image) .field--name-field-banner {
    display: none;
  }

  .office-school-section .content-left .image .block-field-blocknodedepartmentsfield-banner-mobile-image,
  .office-school-section .content-left .image .field--name-field-banner-mobile-image {
    display: block;
  }

  .office-school-section .content-left .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    height: auto;
    min-height: calc((100vw - 30px) * 0.234);
    padding: 15px 30px;
    position: relative;
    background: linear-gradient(to right,
        oklch(from var(--programmes-color) 57.5% 0.19 h) 64.8%,
        oklch(from var(--programmes-color) 65.5% 0.145 h) 64.8%,
        oklch(from var(--programmes-color) 65.5% 0.145 h) 82.4%,
        oklch(from var(--programmes-color) 57.5% 0.19 h) 82.4%);
  }

  .office-school-section .content-left .title::before {
    font-size: 20px;
  }

  .office-school-section .content-left .title h1,
  .office-school-section .content-left .title h2,
  .office-school-section .content-left .title .field--name-title {
    font-size: 30px;
  }

  /* Bottom menu bar */
  .office-school-section .menu-section {
    background: none !important;
    border-bottom-left-radius: 0;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 79px);
  }

  .office-school-section .office-school-submenu__list {
    align-items: normal;
    justify-content: normal;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 calc(var(--bs-gutter-x) * 0.5) 0 0;
  }

  .office-school-section .office-menu-item__link,
  .office-school-section .office-menu-item__label {
    border: var(--programmes-color) 1px solid;
    border-radius: 50px;
    color: var(--programmes-color);
    padding: 12px 20px;
  }

  .office-school-section .office-menu-item__link:hover {
    color: var(--programmes-color);
    text-decoration: none;
  }

  /* Pill fill only when open / hovered / focused */
  .office-school-section .office-school-menu-home__link {
    background-color: var(--programmes-color);
    background-position: left 15px center;
    border-radius: 50px;
    color: #fff;
    text-indent: 0;
    padding: 12px 20px 12px 44px;
    height: auto;
  }

  .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .office-school-section .office-menu-item.has-children>.office-menu-item__label::after {
    background-color: var(--programmes-color);
  }

  /* Amazon-style submenu drawer under the pill row */
  .office-school-section .office-school-submenu {
    display: block;
  }

  /* Never open nested dropdown inside the scrolling pill row */
  .office-school-section .office-school-submenu__list>.office-menu-item.has-children>.office-submenu__list--nested,
  .office-school-section .office-menu-item.has-children:hover>.office-submenu__list--nested,
  .office-school-section .office-menu-item.has-children:focus-within>.office-submenu__list--nested,
  .office-school-section .office-menu-item.has-children.is-open>.office-submenu__list--nested {
    display: none !important;
  }

  .office-school-section .office-school-submenu__drawer {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    width: calc(100% + (var(--bs-gutter-x) * 0.5));
    margin-top: 12px;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    padding: 20px calc(var(--bs-gutter-x) * 0.5);
    position: relative;
    z-index: 30;
  }

  .office-school-section .office-school-submenu.is-open .office-school-submenu__drawer:not([hidden]) {
    display: block;
  }

  .office-school-section .office-school-submenu__drawer[hidden] {
    display: none !important;
  }

  .office-school-section .office-school-submenu__drawer-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
  }

  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested {
    align-items: center;
    background: transparent;
    box-shadow: none;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    left: auto;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
    position: static;
    top: auto;
    width: 100%;
    z-index: auto;
  }

  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested>.office-menu-item {
    background: transparent;
    border-radius: 0;
    display: block;
    flex: 0 0 auto;
    position: static;
    width: auto;
  }

  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested>.office-menu-item:first-child,
  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested>.office-menu-item:last-child {
    border-radius: 0;
  }

  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested>.office-menu-item:not(:last-child)::after {
    display: none;
  }

  .office-school-section .office-school-submenu__drawer .office-menu-item__link,
  .office-school-section .office-school-submenu__drawer .office-menu-item__label {
    background-color: #fff;
    border: var(--programmes-color) 1px solid;
    border-radius: 50px;
    color: var(--programmes-color);
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    white-space: nowrap;
  }

  .office-school-section .office-school-submenu__drawer .office-menu-item__link:hover {
    color: var(--programmes-color);
    text-decoration: none;
  }

  /* Active parent pill while drawer is open */
  .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label {
    /* background-color: var(--programmes-color-pale); */
    background-color: oklch(from var(--programmes-color) 90% 0.035 h);
    border-color: var(--programmes-color);
    color: var(--programmes-color);
  }

  .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after {
    background-color: var(--programmes-color);
    transform: rotate(180deg);
    transform-origin: center;
  }

  /* School ***************************************************/
  .page-node-type-departments .school-about-section .layout__region--first {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  .page-node-type-departments .school-about-section .layout__region--second {
    max-width: none;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }

  /* Card / List view toggle */
  .school-programmes-filter__toggle,
  .school-programmes-filter__panel,
  .view-id-block_programmes_school_list .form-select,
  .view-id-block_programmes_school_list .form-text,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-select,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-text {
    width: 240px;
  }

  /* School News */
  .school-news-section::before {
    width: 85%;
  }

  /* programmes color style *************************************/
  .page-node-type-departments.programmes-red-style .office-school-section .content-left .title,
  .page-node-type-departments.programmes-blue-style .office-school-section .content-left .title,
  .page-node-type-departments.programmes-yellow-style .office-school-section .content-left .title,
  .page-node-type-departments.programmes-purple-style .office-school-section .content-left .title,
  .page-node-type-departments.programmes-green-style .office-school-section .content-left .title,
  .page-node-type-departments.programmes-brown-style .office-school-section .content-left .title {
    background: linear-gradient(to right,
        var(--programmes-color-brick) 64.8%,
        var(--programmes-color-light) 64.8%,
        var(--programmes-color-light) 82.4%,
        var(--programmes-color-brick) 82.4%);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-submenu__list--nested>.office-menu-item,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-submenu__list--nested>.office-menu-item,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-submenu__list--nested>.office-menu-item,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-submenu__list--nested>.office-menu-item,
  .page-node-type-departments.programmes-green-style .office-school-section .office-submenu__list--nested>.office-menu-item,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-submenu__list--nested>.office-menu-item {
    background-color: transparent;
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item__label,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item__label,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item__label,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item__label,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item__label,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item__link,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item__label {
    border-color: var(--programmes-color-color);
    color: var(--programmes-color-color);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children>.office-menu-item__link::after,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children>.office-menu-item__label::after {
    background-color: var(--programmes-color-color);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item__link:hover,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item__link:hover,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item__link:hover,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item__link:hover,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item__link:hover,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item__link:hover {
    color: var(--programmes-color-color);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-school-menu-home__link,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-school-menu-home__link,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-school-menu-home__link,
  .page-node-type-departments.programmes-green-style .office-school-section .office-school-menu-home__link,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-school-menu-home__link {
    background-color: var(--programmes-color-color);
  }

  .page-node-type-departments.programmes-yellow-style .office-school-section .office-school-menu-home__link {
    background-color: var(--programmes-color-style);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label {
    background-color: var(--programmes-color-pale);
    border-color: var(--programmes-color-color);
    color: var(--programmes-color-color);
  }

  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-red-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-blue-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-yellow-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-purple-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-green-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__link::after,
  .page-node-type-departments.programmes-brown-style .office-school-section .office-menu-item.has-children.is-open>.office-menu-item__label::after {
    background-color: var(--programmes-color-color);
  }

  /* Banner section-1 (field-full-banner = False)
   Class banner-section-1 is added on .banner-section.
   Blue text block + overlapping image that hangs below (protrudes). */
  .banner-section.banner-section-1:not(.has-no-image) {
    border-right: none;
  }
  .banner-section.banner-section-1:not(.has-no-image) .content {
    border-radius: 30px 0 0 30px;
    flex-direction: column-reverse;    
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.image {
    width: 100%;    
    margin-bottom: 0;
    padding-left: 30px;
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.image img {
    border-radius: 0 0 30px 30px;
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.title {
    width: 100%;
    padding: 30px;
  }
  .banner-section.banner-section-1.has-no-image .content {
    background-size: auto 75%;
    background-position-y: bottom;
    border-radius: 40px 0 0 40px;
    min-height: 356px;
  }  
  .banner-section.banner-section-1.has-no-image .content>.title {
    padding: 40px;
    margin-right: 0;
  }
  .banner-section.banner-section-1::after {
    width: 48px;
    border-radius: 0 28px 28px 0;
  }

  /* Mobile (<992px): show banner-mobile-image; hide desktop banner.
     Fallback: if no mobile img, keep desktop banner visible. */
  .banner-section.banner-section-1 .content>.image:has(img.banner-mobile-image)>img:not(.banner-mobile-image),
  .banner-section.banner-section-true .content>.image:has(img.banner-mobile-image)>img:not(.banner-mobile-image),
  .banner-section .content>.image:has(img.banner-mobile-image) .field--name-field-banner {
    display: none;
  }

  .banner-section.banner-section-1 .content>.image img.banner-mobile-image,
  .banner-section.banner-section-true .content>.image img.banner-mobile-image {
    display: block;
  }

  /* ==========================================================================
  /* Admission Index
  ========================================================================== */
  .page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption {    
    padding: calc(var(--bs-gutter-x) * 0.5);
    padding-bottom: calc((var(--bs-gutter-x) * 0.5) + 15px);
  }
  .page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption h2 {
    font-size: 48px;
  }
  .page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption a {
    font-size: 20px;
    line-height: 26px;
    padding: 12px;
    min-width: 220px;
  }
  .page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption a::before {    
    width: 36px;
    height: 26px;
  }
}

@media screen and (max-width: 767.98px) {

  /* Index Banner Swiper ***********************************************/
  .index-banner-swiper-shell {
    margin: 0 auto 60px;
  }

  /* Homepage Explore CIE ******************************************************/
  .explore-homepage-section::before {
    border-radius: 0 0 0 60px;
  }

  .explore-homepage-section h2 {
    margin-bottom: -30px;
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column {
    row-gap: 50px;
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div {
    width: calc(50% - 12px);
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(6) .explore-item-number {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number {
    margin-top: 25px;
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(4) .explore-item-number .number {
    color: var(--primary-color);
  }

  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(6) .explore-item-number *,
  .explore-homepage-section .paragraph--type--explore>.paragraph__column>div:nth-child(7) .explore-item-number * {
    color: var(--color-orange2);
  }

  /* Homepage New List Swiper ***********************************************/
  .block-field-blocknodehomepagefield-paragraphs>div:has(.view-block-homepage-new-list)::before {
    top: calc(100% - 290px);
  }

  .homepage-new-list-swiper-section {
    padding: 0 15px 30px;
  }

  .homepage-new-list-swiper-footer {
    margin-top: 30px;
    margin-bottom: 70px;
  }

  .homepage-new-list-swiper-button {
    justify-content: center;
  }

  .view-block-homepage-new-list .view-footer {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
  }

  /* Homepage Video List Filter ***********************************************/
  .homepage-video-section {
    padding-bottom: 120px;
  }

  .homepage-video-section .container {
    --bs-gutter-x: 0;
  }

  /* Homepage Video Featured Player *******************************************/
  .video-header-section .content {
    border-radius: 30px;
  }

  /* Homepage Video List Swiper ***********************************************/
  .homepage-video-list-swiper-section {
    margin-top: -43px;
  }

  .swiper-button-prev.homepage-video-list-swiper-button-prev,
  .swiper-button-next.homepage-video-list-swiper-button-next {
    margin-top: 23px;
  }

  .homepage-video-list-swiper-section--carousel .homepage-video-list-swiper-controls {
    max-width: 424px;
    /* 544 track + arrows + gaps */
  }

  /* Life at CIE — parallax collage (adapted from HTML prototype for Drupal DOM) */
  /* img02 */
  .life-at-cie .field--name-field-image .field__item:nth-child(2) img {
    border-radius: 20px;
    min-width: 129px;
  }

  /* img04 */
  .life-at-cie .field--name-field-image .field__item:nth-child(4) {
    left: 15px;
    top: 0;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(4) img {
    border-radius: 20px;
    min-width: 170px;
  }

  /* img05 */
  .life-at-cie .field--name-field-image .field__item:nth-child(5) {
    top: 68vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(5) img {
    min-width: 80px;
  }

  /* img06 */
  .life-at-cie .field--name-field-image .field__item:nth-child(6) {
    left: calc(100% - 155);
    top: 136vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(6) img {
    min-width: 140px;
  }

  /* img07 */
  .life-at-cie .field--name-field-image .field__item:nth-child(7) {
    left: -10%;
    top: 82vw;
  }

  .life-at-cie .field--name-field-image .field__item:nth-child(7) img {
    min-width: 180px;
  }

  /* Programmes page sidebar */
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-open,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .prev,
  .page-node-type-programmes.programmes-yellow-style .section-programmes-sidebar .sidebar-sleek .next {
    background-size: 20px auto;
  }

  .section-programmes-sidebar .programmes-sidebar-button {
    min-height: 240px;
    top: 25%;
  }

  .section-programmes-sidebar .programmes-sidebar-button img {
    width: 20px;
  }

  /* Programmes Details */
  .page-node-type-programmes .details-content {
    margin-bottom: 60px;
  }

  .page-node-type-programmes .details-content::after {
    top: 70%;
  }

  .page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--first {
    flex: 0 1 100%;
    padding-right: var(--bs-gutter-x);
  }

  .page-node-type-programmes .details-content.layout--twocol-section.layout--twocol-section--50-50>.layout__region--second {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
  }

  .page-node-type-programmes .details-content .programmes-meta-fields {
    gap: 30px 40px;
  }

  .page-node-type-programmes .details-content .programmes-resource-fields {
    flex-direction: column;
  }

  .page-node-type-programmes .details-content .programmes-resource-fields>div {
    width: 100%;
  }

  .page-node-type-programmes .details-content .programmes-resource-fields>div:first-child {
    margin-right: 0;
  }

  /* ==========================================================================
  Departments / Office School Section Banner
  ========================================================================== */
  .office-school-section .content-left {
    border-radius: 20px 0 0 20px;
  }

  /* Mobile (<992px): show field-banner-mobile-image; hide desktop banner.
     Fallback: if no mobile field, keep desktop banner visible. */
  .office-school-section .content-left .title {
    padding: 14px 20px;
  }

  /* Never open nested dropdown inside the scrolling pill row */
  .office-school-section .office-school-submenu__drawer .office-submenu__list--nested>.office-menu-item {
    flex: 1 0 auto;
  }

  .office-school-section .office-school-submenu__drawer .office-menu-item__link {
    text-align: center;
  }

  /* School ***************************************************/
  .page-node-type-departments .school-about-section {
    flex-direction: column-reverse;
    margin-bottom: 60px;
  }

  .page-node-type-departments .school-about-section .block-field-blocknodedepartmentsfield-about-image img {
    border-radius: 0 30px 30px 0;
  }

  .page-node-type-departments .school-about-section .field--name-title {
    margin-bottom: 20px;
  }

  .page-node-type-departments .school-about-section .field--name-field-about-text p {
    font-size: 18px;
  }

  /* Card / List view toggle */
  .view-id-block_programmes_school_list .view-filters,
  form[id^="views-exposed-form-block-programmes-school-list"] {
    margin-bottom: 40px;
  }

  .view-id-block_programmes_school_list .form-item,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-item {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .view-id-block_programmes_school_list .form-item label,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-item label {
    font-size: 18px;
  }

  .view-id-block_programmes_school_list .form-select,
  .view-id-block_programmes_school_list .form-text,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-select,
  form[id^="views-exposed-form-block-programmes-school-list"] .form-text {
    font-size: 18px;
    width: 100%;
    padding: 14px 20px;
  }

  /* Programmes View Filter Bar */
  .view-id-block_programmes_school_list .form--inline,
  form[id^="views-exposed-form-block-programmes-school-list"] .form--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .school-programmes-filter {
    flex-wrap: wrap;
    width: 100%;
  }

  .school-programmes-filter__toggle {
    font-size: 18px;
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
  }

  .school-programmes-filter__panel {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .school-programmes-view-toggle {
    align-self: flex-end;
    margin: 0 auto;
  }

  /* Programmes View Grid & Cards */
  .view-id-block_programmes_school_list.is-card-view .view-content,
  .view-id-block_programmes_school_list:not(.is-list-view) .view-content {
    grid-template-columns: repeat(1, 1fr);
  }
  .view-id-block_programmes_school_list .school-card {
    padding: 20px 15px;
  }
  .view-id-block_programmes_school_list .card-education-level {
    font-size: 16px;
    line-height: 26px;
  }
  .view-id-block_programmes_school_list .card-level .item-list ol,
  .view-id-block_programmes_school_list .card-level .item-list ul {
    gap: 6px;
  }
  .view-id-block_programmes_school_list .card-level .item-list li {
    font-size: 16px;
    line-height: 26px;
  }
  .view-id-block_programmes_school_list .school-programmes__legend,
  .view-id-block_programmes_school_list .view-footer .school-programmes__legend {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }
  .view-id-block_programmes_school_list .school-programmes__legend-item,
  .view-id-block_programmes_school_list .view-footer .school-programmes__legend-item {
    width: 100%;
  }
  .view-id-block_programmes_school_list .school-programmes__legend-icon,
  .view-id-block_programmes_school_list .view-footer .school-programmes__legend-icon {
    width: 32px;
    height: 32px;
  }
  .view-id-block_programmes_school_list .school-programmes__legend-icon img,
  .view-id-block_programmes_school_list .view-footer .school-programmes__legend-icon img {
    width: 20px;
    height: 20px;
  }
  .view-id-block_programmes_school_list .school-programmes__legend-label,
  .view-id-block_programmes_school_list .view-footer .school-programmes__legend-label {
    font-size: 13px;
  }

  /* School News */
  .school-news-section::before {
    border-radius: 0 30px 30px 0;
    width: calc(100% - 50px);
  }

  /* Banner section-1 (field-full-banner = False)
   Class banner-section-1 is added on .banner-section.
   Blue text block + overlapping image that hangs below (protrudes). */
  .banner-section.banner-section-1:not(.has-no-image) .content {
    border-radius: 20px 0 0 20px;    
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.image {    
    padding-left: 20px;
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.image img {
    border-radius: 0 0 20px 20px;
  }
  .banner-section.banner-section-1:not(.has-no-image) .content>.title {    
    padding: 30px 20px;
  }  
  .banner-section.banner-section-1.has-no-image .content {
    background-position-x: left 25%;
    background-size: auto 50%;
    border-radius: 20px 0 0 20px;
  }  

  .basic-banner:has(.banner-section-1) .block-system-breadcrumb-block,
  .basic-banner:has(.banner-section-true) .block-system-breadcrumb-block,
  .page-node-type-office .block-system-breadcrumb-block,
  .page-node-type-sub-office-page .block-system-breadcrumb-block {
    max-width: 100%;
    margin-bottom: 20px;
    padding: 20px 15px;
  }

  /* ==========================================================================
  /* Admission Index
  ========================================================================== */
  .page-node-type-homepage:not(.path-frontpage) .index-banner-swiper .swiper-caption h2 {
    font-size: 34px;
  }
}

@media screen and (max-width: 575.98px) {

  /* News / E-newsletters List ***********************************************/
  .view-block-new-list .views-infinite-scroll-content-wrapper,
  .view-block-new-list .view-content:not(:has(.views-infinite-scroll-content-wrapper)),
  .view-block-e-newsletters-list .views-infinite-scroll-content-wrapper,
  .view-block-e-newsletters-list .view-content:not(:has(.views-infinite-scroll-content-wrapper)) {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .view-block-new-list .news-card,
  .view-block-e-newsletters-list .e-newsletters-card {
    border-radius: 20px;
  }

  .view-block-new-list .news-card .card-body,
  .view-block-e-newsletters-list .e-newsletters-card .card-body {
    padding: 14px 16px 16px;
  }

  .view-block-new-list .news-card .card-title,
  .view-block-e-newsletters-list .e-newsletters-card .card-title {
    font-size: 16px;
  }

  .view-block-new-list .views-row:first-child .news-card,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card {
    border-radius: 20px;
  }

  .view-block-new-list .views-row:first-child .news-card .card-body,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-body {
    padding: 20px;
  }

  .view-block-new-list .views-row:first-child .news-card .card-title,
  .view-block-e-newsletters-list .views-row:first-child .e-newsletters-card .card-title {
    font-size: 20px;
  }

  /* Departments Homepage Swiper ***********************************************/
  .homepage-departments-section {
    padding-top: 142.5vw;
  }

  .homepage-departments-section.has-background-image {
    background-position: center top;
  }

  .layout--twocol-section.layout--twocol-section--50-50>.column-67 {
    padding-left: 0;
  }

  .departments-homepage-swiper.swiper {
    padding-left: calc(50% - 150px);
  }

  .departments-homepage-swiper-footer {
    justify-content: center;
    margin-top: 30px;
  }

  .departments-homepage-swiper-autoplay-toggle {
    width: 40px;
    height: 40px;
  }

  .departments-homepage-swiper-autoplay-toggle img {
    width: 14px;
    height: 14px;
  }

  /* Homepage Events List Swiper ***********************************************/
  .homepage-events-section {
    padding-top: 60px;
    padding-bottom: 130px;
  }

  .view-block-events-homepage-list .homepage-events-list-swiper-section {
    padding: 0 calc(var(--bs-gutter-x) * 0.5);
  }

  .view-block-events-homepage-list .events-list-header h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .view-block-events-homepage-list .events-list-header a {
    left: 50%;
    transform: translateX(-50%);
  }

  .homepage-events-list-swiper .swiper-slide,
  .homepage-events-list-swiper .events-card,
  .homepage-events-list-swiper .swiper-slide-active .events-card {
    width: 100%;
  }

  .homepage-events-list-swiper .swiper-slide-active~.swiper-slide {
    transform: none;
  }

  .view-block-events-homepage-list .homepage-events-list-swiper-footer {
    justify-content: center;
  }
}

@media screen and (max-width: 454.98px) {

  /* Footer CSS ***********************************************/
  footer {
    margin-top: 120px;
  }

  .footer-social-media-section ul {
    justify-content: center;
    gap: 15%;
  }

  .footer-icon-section ul {
    justify-content: space-between;
  }

  /* Homepage Video List Swiper ***********************************************/
  .swiper-button-next.homepage-video-list-swiper-button-next {
    position: absolute;
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Main navigation — multi-level dropend flyouts (any depth). */
  #block-i2-theme-main-navigation .programmes-style>.menu-dropdown,
  #block-i2-theme-main-navigation .main-menu-nav.menu-level-0>.menu-item--expanded>.menu-dropdown::before,
  #block-i2-theme-main-navigation .main-menu-mega-panel .main-menu-mega__content {
    transition: none;
  }

  /* Life at CIE — parallax collage (adapted from HTML prototype for Drupal DOM) */
  .life-at-cie [data-parallax] {
    opacity: 1;
    transition: none;
    will-change: auto;
    transform: none !important;
  }
}

/* Popup Notice Modal ***********************************************/
#block-i2-theme-views-block-block-pop-up-notice-block-1>h2,
.popup-notice-view>h2 {
  display: none;
}

.popup-notice-modal .views-field-field-publishing,
.popup-notice-modal .views-field-field-unpublishing {
  display: none;
}

.popup-notice-modal .modal-dialog {
  max-width: min(680px, 90vw);
  margin: 1.75rem auto;
  max-height: calc(100dvh - 3.5rem);
}

.popup-notice-modal .modal-content {
  position: relative;
  max-height: calc(100dvh - 3.5rem);
  border: none;
  border-radius: 36px;
  background: #F4F7FA;
  box-shadow: 0 16px 48px rgba(0, 45, 122, 0.18);
  /* Keep visible so yellow close can overlap the corner; body scrolls instead. */
  overflow: visible;
}

.popup-notice-modal.modal-dialog-scrollable .modal-content,
.popup-notice-modal .modal-dialog-scrollable .modal-content {
  overflow: visible;
  max-height: calc(100dvh - 3.5rem);
}

.popup-notice-modal .modal-body {
  max-height: calc(100dvh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 48px 48px 44px;
}

.popup-notice-modal .views-row {
  margin: 0;
}

.popup-notice-modal .views-row+.views-row {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(19, 76, 148, 0.12);
}

.popup-notice-swiper-section {
  width: 100%;
}

.popup-notice-swiper-section .views-row+.views-row {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.popup-notice-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.popup-notice-swiper-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.popup-notice-swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.popup-notice-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: rgba(0, 62, 171, 0.25);
  opacity: 1;
}

.popup-notice-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary-color, #003EAB);
}

.popup-notice-swiper-button-prev,
.popup-notice-swiper-button-next {
  position: static;
  width: 36px;
  height: 36px;
  margin: 0;
  background: var(--primary-color, #003EAB) url('../images/icon/arrow_circle_white_40x40.svg') center / 20px 20px no-repeat;
  border-radius: 50%;
}

.popup-notice-swiper-button-prev {
  transform: scaleX(-1);
}

.popup-notice-swiper-button-prev::after,
.popup-notice-swiper-button-next::after {
  content: none;
}

.popup-notice-swiper-button-prev.swiper-button-disabled,
.popup-notice-swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
}

.popup-notice-modal .views-field-body>.field-content {
  color: var(--primary-color-text, #134C94);
}

.popup-notice-modal .views-field-body>.field-content h2 {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary-color-title, #003798);
}

.popup-notice-modal .views-field-body>.field-content p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--primary-color-text, #134C94);
}

.popup-notice-modal .views-field-body>.field-content p:last-child {
  margin-bottom: 0;
  margin-top: 28px;
}

.popup-notice-modal .views-field-body>.field-content a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary-color, #003EAB);
  text-decoration: none;
}

.popup-notice-modal .views-field-body>.field-content a:hover,
.popup-notice-modal .views-field-body>.field-content a:focus {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.popup-notice-modal .views-field-body>.field-content a::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: url('../images/icon/link_arrow.svg') center / contain no-repeat;
}

.popup-notice-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--yellow-color, #FEBE35);
  color: #111;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.popup-notice-modal__close::before {
  content: '\00d7';
}

.popup-notice-modal__close:hover,
.popup-notice-modal__close:focus {
  background: #ffc94a;
  outline: none;
}

@media screen and (max-width: 767.98px) {
  .popup-notice-modal .modal-dialog {
    max-width: calc(100% - 32px);
    margin: 1.25rem auto;
    max-height: calc(100dvh - 2.5rem);
  }

  .popup-notice-modal .modal-content,
  .popup-notice-modal .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 2.5rem);
  }

  .popup-notice-modal .modal-body {
    max-height: calc(100dvh - 2.5rem);
    padding: 36px 28px 32px;
  }

  .popup-notice-modal .views-field-body>.field-content h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .popup-notice-modal .views-field-body>.field-content p {
    font-size: 15px;
  }

  .popup-notice-modal__close {
    top: -10px;
    right: -6px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* Events Calendar List ***************************************************/

/* Exposed filter bar (Filter by / Sort by) — events calendar + news list */
.view-block-events-calendar-list .views-exposed-form.events-calendar-filters--enhanced,
.view-block-new-list .views-exposed-form.events-calendar-filters--enhanced,
.view-block-articles-list .views-exposed-form.events-calendar-filters--enhanced,
.view-block-e-newsletters-list .views-exposed-form.events-calendar-filters--enhanced {
  margin-bottom: 30px;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form--inline,
.view-block-new-list .events-calendar-filters--enhanced .form--inline,
.view-block-articles-list .events-calendar-filters--enhanced .form--inline,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  float: none;
  clear: none;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form--inline::after,
.view-block-new-list .events-calendar-filters--enhanced .form--inline::after,
.view-block-articles-list .events-calendar-filters--enhanced .form--inline::after,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form--inline::after {
  display: none;
}

.view-block-events-calendar-list .events-calendar-filters__filter,
.view-block-events-calendar-list .events-calendar-filters__sort,
.view-block-new-list .events-calendar-filters__filter,
.view-block-articles-list .events-calendar-filters__filter,
.view-block-e-newsletters-list .events-calendar-filters__filter,
.view-block-new-list .events-calendar-filters__sort,
.view-block-articles-list .events-calendar-filters__sort,
.view-block-e-newsletters-list .events-calendar-filters__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.view-block-events-calendar-list .events-calendar-filters__label,
.view-block-new-list .events-calendar-filters__label,
.view-block-articles-list .events-calendar-filters__label,
.view-block-e-newsletters-list .events-calendar-filters__label {
  flex: 0 0 auto;
  margin: 0;
  color: #161616;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form-item,
.view-block-new-list .events-calendar-filters--enhanced .form-item,
.view-block-articles-list .events-calendar-filters--enhanced .form-item,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-item {
  float: none;
  margin: 0;
  padding: 0;
}

.view-block-events-calendar-list .events-calendar-filters__native-hidden,
.view-block-new-list .events-calendar-filters__native-hidden,
.view-block-articles-list .events-calendar-filters__native-hidden,
.view-block-e-newsletters-list .events-calendar-filters__native-hidden {
  display: none !important;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form-select,
.view-block-events-calendar-list .events-calendar-filters--enhanced .form-control,
.view-block-events-calendar-list .events-calendar-filters--enhanced input[name="title"],
.view-block-new-list .events-calendar-filters--enhanced .form-select,
.view-block-articles-list .events-calendar-filters--enhanced .form-select,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-select,
.view-block-new-list .events-calendar-filters--enhanced .form-control,
.view-block-articles-list .events-calendar-filters--enhanced .form-control,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-control,
.view-block-new-list .events-calendar-filters--enhanced input[name="title"],
.view-block-articles-list .events-calendar-filters--enhanced input[name="title"],
.view-block-e-newsletters-list .events-calendar-filters--enhanced input[name="title"] {
  width: min(25vw, 300px);  
  max-width: 100%;    
  padding: 8px 40px 8px 20px;
  border: 1px solid #E0E0E0;
  border-radius: 50px;
  background-color: #fff;
  color: #161616;
  font-size: 16px;
  line-height: 22px;
  box-shadow: none;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form-select,
.view-block-new-list .events-calendar-filters--enhanced .form-select,
.view-block-articles-list .events-calendar-filters--enhanced .form-select,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23161616' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  appearance: none;
  cursor: pointer;
}

.view-block-events-calendar-list .events-calendar-filters--enhanced .form-select:focus,
.view-block-events-calendar-list .events-calendar-filters--enhanced .form-control:focus,
.view-block-events-calendar-list .events-calendar-filters--enhanced input[name="title"]:focus,
.view-block-new-list .events-calendar-filters--enhanced .form-select:focus,
.view-block-articles-list .events-calendar-filters--enhanced .form-select:focus,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-select:focus,
.view-block-new-list .events-calendar-filters--enhanced .form-control:focus,
.view-block-articles-list .events-calendar-filters--enhanced .form-control:focus,
.view-block-e-newsletters-list .events-calendar-filters--enhanced .form-control:focus,
.view-block-new-list .events-calendar-filters--enhanced input[name="title"]:focus,
.view-block-articles-list .events-calendar-filters--enhanced input[name="title"]:focus,
.view-block-e-newsletters-list .events-calendar-filters--enhanced input[name="title"]:focus {
  border-color: #c8c8c8;
  box-shadow: none;
  outline: none;
}

.view-block-events-calendar-list .events-calendar-filters__search-wrap,
.view-block-new-list .events-calendar-filters__search-wrap,
.view-block-articles-list .events-calendar-filters__search-wrap,
.view-block-e-newsletters-list .events-calendar-filters__search-wrap {
  position: relative;
  display: block;
  width: min(25vw, 300px);  
  max-width: 100%;
}

.view-block-events-calendar-list .events-calendar-filters__search-wrap::after,
.view-block-new-list .events-calendar-filters__search-wrap::after,
.view-block-articles-list .events-calendar-filters__search-wrap::after,
.view-block-e-newsletters-list .events-calendar-filters__search-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  background: url('/themes/custom/i2_theme/images/icon/filters_search.svg') center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

/* .view-block-events-calendar-list .events-calendar-filters__search-wrap input[name="title"],
.view-block-new-list .events-calendar-filters__search-wrap input[name="title"],
.view-block-articles-list .events-calendar-filters__search-wrap input[name="title"],
.view-block-e-newsletters-list .events-calendar-filters__search-wrap input[name="title"] {
  width: 100%;
  padding-right: 44px;
} */

@media (max-width: 991.98px) {

  /* Categories → Sort → Search */
  .view-block-events-calendar-list .events-calendar-filters--enhanced .form--inline,
  .view-block-new-list .events-calendar-filters--enhanced .form--inline,
    .view-block-articles-list .events-calendar-filters--enhanced .form--inline,
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form--inline {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "flabel ftags"
      "slabel ssort"
      "search search";
    align-items: center;
    gap: 12px;
  }

  .view-block-events-calendar-list .events-calendar-filters__filter,
  .view-block-events-calendar-list .events-calendar-filters__sort,
  .view-block-new-list .events-calendar-filters__filter,
  .view-block-articles-list .events-calendar-filters__filter,
  .view-block-e-newsletters-list .events-calendar-filters__filter,
  .view-block-new-list .events-calendar-filters__sort,
    .view-block-articles-list .events-calendar-filters__sort,
  .view-block-e-newsletters-list .events-calendar-filters__sort {
    display: contents;
    width: auto;
  }

  .view-block-events-calendar-list .events-calendar-filters__filter > .events-calendar-filters__label,
  .view-block-new-list .events-calendar-filters__filter > .events-calendar-filters__label,
    .view-block-articles-list .events-calendar-filters__filter > .events-calendar-filters__label,
  .view-block-e-newsletters-list .events-calendar-filters__filter > .events-calendar-filters__label {
    grid-area: flabel;
  }

  .view-block-events-calendar-list .events-calendar-filters--enhanced .form-item-field-tags-id,
  .view-block-new-list .events-calendar-filters--enhanced .form-item-field-tags-id,
    .view-block-articles-list .events-calendar-filters--enhanced .form-item-field-tags-id,
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form-item-field-tags-id {
    grid-area: ftags;
    min-width: 0;
  }

  .view-block-events-calendar-list .events-calendar-filters__sort > .events-calendar-filters__label,
  .view-block-new-list .events-calendar-filters__sort > .events-calendar-filters__label,
    .view-block-articles-list .events-calendar-filters__sort > .events-calendar-filters__label,
  .view-block-e-newsletters-list .events-calendar-filters__sort > .events-calendar-filters__label {
    grid-area: slabel;
  }

  .view-block-events-calendar-list .events-calendar-filters__sort > .form-item,
  .view-block-new-list .events-calendar-filters__sort > .form-item,
    .view-block-articles-list .events-calendar-filters__sort > .form-item,
  .view-block-e-newsletters-list .events-calendar-filters__sort > .form-item {
    grid-area: ssort;
    min-width: 0;
  }

  .view-block-events-calendar-list .events-calendar-filters--enhanced .form-item-title,
  .view-block-new-list .events-calendar-filters--enhanced .form-item-title,
    .view-block-articles-list .events-calendar-filters--enhanced .form-item-title,
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form-item-title {
    grid-area: search;
    min-width: 0;
  }

  .view-block-events-calendar-list .events-calendar-filters--enhanced .form-select,
  .view-block-events-calendar-list .events-calendar-filters--enhanced .form-control,
  .view-block-events-calendar-list .events-calendar-filters--enhanced input[name="title"],
  .view-block-events-calendar-list .events-calendar-filters__search-wrap,
  .view-block-new-list .events-calendar-filters--enhanced .form-select,
  .view-block-articles-list .events-calendar-filters--enhanced .form-select,
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form-select,
  .view-block-new-list .events-calendar-filters--enhanced .form-control,
  .view-block-articles-list .events-calendar-filters--enhanced .form-control,
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form-control,
  .view-block-new-list .events-calendar-filters--enhanced input[name="title"],
  .view-block-articles-list .events-calendar-filters--enhanced input[name="title"],
  .view-block-e-newsletters-list .events-calendar-filters--enhanced input[name="title"],
  .view-block-new-list .events-calendar-filters__search-wrap,
  .view-block-articles-list .events-calendar-filters__search-wrap,
  .view-block-e-newsletters-list .events-calendar-filters__search-wrap {
    width: 100%;
    min-width: 0;
  }

  .view-block-events-calendar-list .events-calendar-filters__filter .form-item,
  .view-block-events-calendar-list .events-calendar-filters__sort .form-item,
  .view-block-new-list .events-calendar-filters__filter .form-item,
  .view-block-articles-list .events-calendar-filters__filter .form-item,
  .view-block-e-newsletters-list .events-calendar-filters__filter .form-item,
  .view-block-new-list .events-calendar-filters__sort .form-item,
  .view-block-articles-list .events-calendar-filters__sort .form-item,
  .view-block-e-newsletters-list .events-calendar-filters__sort .form-item {
    flex: 1 1 auto;
  }

  /* E-newsletters: no Categories — Filter by + Search, then Sort */
  .view-block-e-newsletters-list .events-calendar-filters--enhanced .form--inline {
    grid-template-areas:
      "flabel search"
      "slabel ssort";
  }
}

/* Press release list — Filter by + Search only */
.view-block-press-release-list .views-exposed-form.events-calendar-filters--enhanced {
  margin-bottom: 28px;
}

.view-block-press-release-list .events-calendar-filters--enhanced .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 24px;
  float: none;
  clear: none;
}

.view-block-press-release-list .events-calendar-filters--enhanced .form--inline::after {
  display: none;
}

.view-block-press-release-list .events-calendar-filters__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.view-block-press-release-list .events-calendar-filters__label {
  flex: 0 0 auto;
  margin: 0;
  color: #161616;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.view-block-press-release-list .events-calendar-filters--enhanced .form-item {
  float: none;
  margin: 0;
  padding: 0;
}

.view-block-press-release-list .events-calendar-filters__native-hidden {
  display: none !important;
}

.view-block-press-release-list .events-calendar-filters--enhanced .form-control,
.view-block-press-release-list .events-calendar-filters--enhanced input[name="title"] {
  width: 300px;
  max-width: 100%;
  min-width: 0;
  height: 44px;
  padding: 8px 40px 8px 20px;
  border: 1px solid #E0E0E0;
  border-radius: 50px;
  background-color: #fff;
  color: #161616;
  font-size: 16px;
  line-height: 1.2;
  box-shadow: none;
}

.view-block-press-release-list .events-calendar-filters--enhanced .form-control:focus,
.view-block-press-release-list .events-calendar-filters--enhanced input[name="title"]:focus {
  border-color: #c8c8c8;
  box-shadow: none;
  outline: none;
}

.view-block-press-release-list .events-calendar-filters__search-wrap {
  position: relative;
  display: block;
  width: 300px;
  max-width: 100%;
}

.view-block-press-release-list .events-calendar-filters__search-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  background: url('/themes/custom/i2_theme/images/icon/filters_search.svg') center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.view-block-press-release-list .events-calendar-filters__search-wrap input[name="title"] {
  width: 100%;
  padding-right: 44px;
}

@media (max-width: 767.98px) {
  .view-block-press-release-list .events-calendar-filters--enhanced .form--inline {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "flabel search";
    align-items: center;
    gap: 12px;
  }

  .view-block-press-release-list .events-calendar-filters__filter {
    display: contents;
    width: auto;
  }

  .view-block-press-release-list .events-calendar-filters__filter > .events-calendar-filters__label {
    grid-area: flabel;
  }

  .view-block-press-release-list .events-calendar-filters--enhanced .form-item-title {
    grid-area: search;
    min-width: 0;
  }

  .view-block-press-release-list .events-calendar-filters--enhanced .form-control,
  .view-block-press-release-list .events-calendar-filters--enhanced input[name="title"],
  .view-block-press-release-list .events-calendar-filters__search-wrap {
    width: 100%;
    min-width: 0;
  }
}


/* Teaching Areas Paragraph Styling */

/* Make paragraph__column the grid container */
.paragraph--type--teaching-areas {
  margin-top: 80px;
  margin-bottom: 80px;
}

.paragraph--type--teaching-areas>.paragraph__column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  row-gap: 20px;
}

/* Header and intro text span full width */
.paragraph--type--teaching-areas .field--name-field-header,
.paragraph--type--teaching-areas .field--name-field-text {
  grid-column: 1 / -1;
}

/* Header Styling */
.paragraph--type--teaching-areas .field--name-field-header {
  color: var(--primary-color-title);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.paragraph--type--teaching-areas .field--name-field-text {
  font-size: 18px;
  color: #000;
  /* row-gap is 20px; pull up so space to first card row is 10px (design) */
  margin-bottom: -10px;
}

/* Individual Card Item Wrapper (the divs around each item) */
.paragraph--type--teaching-areas .paragraph__column>div:not(.field) {
  display: flex;
}

/* Individual Card Styling */
.paragraph--type--teaching-areas-item {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-orange);
  border-radius: 30px;
  padding: 24px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.paragraph--type--teaching-areas-item .field--name-field-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.paragraph--type--teaching-areas-item .field--name-bp-text {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
}

.paragraph--type--teaching-areas-item .field--name-bp-text p {
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .paragraph--type--teaching-areas .paragraph__column {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .paragraph--type--teaching-areas .paragraph__column {
    grid-template-columns: 1fr;
  }
}

/* List Animation */
.people-group,
.people-subgroup {
  animation: fadeIn 0.4s ease-out forwards;
}

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

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

/* Responsive */
@media (max-width: 991px) {
  .people-section .content {
    flex-direction: column;
  }

  .people-section .content-filer {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .people-card-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .people-card-name {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* Office Banner Section */
.office-banner-section {
  position: relative;
  z-index: 1;
  padding: 12px calc((var(--bs-gutter-x) * 0.5) + 20px) 19px;
}

.office-banner-section .content {
  display: flex;
  align-items: flex-start;
  /* Do not stretch, let left side keep its height */
  height: 500px;
  /* Fix height so breadcrumb doesn't move when menu expands */
}

.office-banner-section .content-left {
  flex: 1 1 58%;
  position: relative;
  min-width: 0;
  /* Prevent flex overflow */
}

.office-banner-section .content-left .image {
  width: 100%;
  height: 100%;
}

.office-banner-section .content-left .image .block-field-blocknodeofficefield-banner {
  height: 100%;
}

.office-banner-section .content-left .image img {
  width: 100%;
  height: 500px;
  /* Fixed height so it doesn't collapse */
  object-fit: cover;
  border-radius: 0 0 0 50px;
  display: block;
}

/* Add gradient overlay to image for text readability */
.office-banner-section .content-left .image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  border-radius: 0 0 0 50px;
  pointer-events: none;
}

.office-banner-section .content-left .title {
  position: absolute;
  bottom: 40px;
  left: 50px;
  color: #fff;
  z-index: 2;
}

.office-banner-section .content-left .title h1,
.office-banner-section .content-left .title h2,
.office-banner-section .content-left .title .field--name-title {
  font-size: 42px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.office-banner-section .content-right {
  flex: 0 0 42%;
  background: var(--primary-color-title, #0046ad) url('../images/footer/footer_pattern.png') right center no-repeat;
  background-size: auto 100%;
  border-radius: 0 50px 50px 50px;
  /* Top-right, bottom-right, bottom-left */
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
  min-height: 550px;
  /* Protrude 50px below the 500px container */
  z-index: 2;
  /* Ensure it stays above other elements */
}

/* Watermark */
.office-banner-section .content-right::after {
  content: 'Student Affairs';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 80px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

/* Submenu Links */
.office-banner-section .office-submenu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.office-banner-section .office-submenu__list--nested {
  padding-left: 20px;
  margin-top: 16px;
  gap: 16px;
  display: none;
  /* Hide nested menu by default */
}

.office-banner-section .office-menu-item.is-open>.office-submenu__list--nested {
  display: flex;
  /* Show nested menu when open */
}

.office-banner-section .office-menu-item {
  margin: 0;
  padding: 0;
}

.office-banner-section .office-menu-item__label,
.office-banner-section .office-menu-item__link {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 400;
  user-select: none;
}

.office-banner-section .office-menu-item__link:hover {
  color: var(--yellow-color, #f5d76e);
}

.office-banner-section .office-menu-item__link.is-active,
.office-banner-section .office-menu-item.is-active>.office-menu-item__link,
.office-banner-section .office-menu-item.is-active>.office-menu-item__label,
.office-banner-section .office-menu-item__label.is-active {
  color: var(--yellow-color, #f5d76e);
}

.office-banner-section .office-menu-item.has-children>.office-menu-item__label::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.office-banner-section .office-menu-item.has-children.is-open>.office-menu-item__label::after {
  transform: rotate(90deg);
  /* Rotate arrow when open */
}

/* 4. Breadcrumb */
.page-node-type-office .block-system-breadcrumb-block,
.page-node-type-sub-office-page .block-system-breadcrumb-block {
  margin-top: 20px;
  /* Adjusted for protrusion */
  padding-left: 50px;
  position: relative;
  z-index: 1;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
  .office-banner-section .content {
    flex-direction: column;
    height: auto;
  }

  .office-banner-section .content-left,
  .office-banner-section .content-right {
    flex: none;
    width: 100%;
  }

  .office-banner-section .content-left .image img {
    border-radius: 50px 50px 0 0;
    min-height: 300px;
    height: auto;
  }

  .office-banner-section .content-right {
    border-radius: 0 0 50px 50px;
    padding: 40px 30px;
    min-height: auto;
  }

  .office-banner-section .content-right::after {
    writing-mode: horizontal-tb;
    top: auto;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
    font-size: 50px;
  }

  .page-node-type-office .block-system-breadcrumb-block,
  .page-node-type-sub-office-page .block-system-breadcrumb-block {
    padding-left: 20px;
  }
}