@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap&subset=latin");

:root {
  --color-text-default: #1d1d1d;
  --color-text-secondary: #f5821f;
  --color-text-primary: var(--primary-color);
  --lighter: oklch(
    from var(--primary-color) clamp(0, l + 0.22, 1) calc(c * 0.9) h
  );
  --primary-50: oklch(from var(--primary-color) l c h / 0.5);
  --darker: oklch(
    from var(--primary-color) clamp(0, l - 0.22, 1) calc(c * 0.92) h
  );
  --light: #fff;
  --opacity-value: 0.5;
}

body {
  font-family: "Inter", sans-serif;
  font-size: inherit;
  line-height: inherit;
  color: white;
}

h2 {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 500 !important;
  color: #fff;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

p {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.nero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  text-align: left;
  width: 100%;
  margin-bottom: 50px;
  position: relative;
  z-index: 50;
  background-color: var(--light);
}

.zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* Push zero_group to bottom */
  text-align: left;
  z-index: 10;
  width: 100%;
  height: 30vh; /* Give it height so flex-end works */
  position: relative;
}

/* zero group, title, and subtitle styles from styles.css */
.zero-title {
  font-family: "Figtree", sans-serif;
  font-size: clamp(4rem, calc(7vw + 1rem), 8.5rem);
  font-weight: 700 !important;
  text-align: left;
  line-height: clamp(5rem, calc(6vw + 1rem), 8.5rem);
  max-inline-size: 16ch;
  text-wrap: pretty;
  color: var(--primary-color);
  width: 100%;
  margin: 0 0 0 -4px;
  padding-inline: 2.4vw;
  padding-block: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  word-break: break-word;
}

.zero-subtitle {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.1rem, calc(1.5vw + 1.5rem), 6.5rem);
  font-weight: 700 !important;
  text-align: left;
  line-height: clamp(1rem, calc(1.5vw + 0.5rem), 6.5rem);
  color: var(--secondary-color);
  width: 100%;
  padding: 0 2.6vw 25px 2.6vw;
  opacity: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-wrap: pretty;
  animation: subaFade 6s ease-in-out both;
  animation-delay: 3s;
  animation-range: entry 0% cover 50%;
  animation-timeline: view();
}

.subT {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  text-align: left;
  line-height: 2.1;
  color: var(--secondary-color);
  width: 100%;
  padding: 70px 0px 5px 0;
  opacity: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-wrap: pretty;
}

.parent {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(9, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 150px;
  width: 100%;
}

.mono3 .mono--bw,
.mono4 .mono--bw,
.mono7 .mono--bw {
  /* filter: grayscale(100%);*/
}

.mono1 {
  grid-area: 1 / 1 / 10 / 3;
  background-color: aqua;
  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/e0604751-99eb-4625-b4ea-1d388367f78e");
  background-size: cover;
  background-position: 55% 5%;
  min-width: 370px;
}
.mono2 {
  grid-area: 7 / 3 / 10 / 8;
  background-color: rgb(136, 98, 158);
  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/71b3aea1-79c7-4b11-a9bd-f133489390bc");
  background-size: cover;
}
.mono3 {
  grid-area: 5 / 8 / 10 / 10;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/61cc76e1-fee5-41c0-9624-aeb4e1e97030");
  background-size: cover;
  background-position: 20% 25%;
}
.mono4 {
  grid-area: 1 / 10 / 10 / 11;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/50fce719-65ed-4774-8ba4-9d70e84a3cde");
  background-size: cover;
  background-position: 60% 50%;
  min-width: 270px;
}
.mono5 {
  grid-area: 1 / 8 / 5 / 10;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/3ec55981-0d9c-48bd-9099-11efa3900f70");
  background-position: 50% 50%;
  background-size: cover;
}
.mono6 {
  grid-area: 4 / 3 / 7 / 8;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/8efa3c8a-304e-4040-a688-3f60149853c1");
  background-size: cover;
  background-position: 50% 50%;
}
.mono7 {
  grid-area: 1 / 3 / 4 / 5;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/13f8b8f1-1db2-435f-9df2-d0e88907a930");
  background-size: cover;
}
.mono8 {
  grid-area: 1 / 5 / 4 / 8;

  background-image: url("https://www.avdistrict.org/fs/resource-manager/view/cb04296b-295e-40a1-b74f-18583d9cbae1");
  background-size: cover;
}

.mono2 {
  position: relative;
  overflow: hidden;
}

.mono2 .mono-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-strobe {
  color: #ffffff; /* Text fill color */
  -webkit-text-stroke: 2px var(--primary-color); /* Width and color of the outline */
  animation: textColorChange 6s ease both;
  animation-delay: 6s;
  animation-range: entry 0% cover 50%;
  animation-timeline: view();
}

.sideChick {
  position: relative;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  /*   padding-inline: clamp(1.9rem, 3rem - 2vw, 2.9rem); */
  background-color: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  overflow: hidden; /* masks media */
  opacity: 1;
  transform: translateY(80px);
  animation: sideChickRise 0.8s var(--custom-easing) both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

#pMsg .sideChick {
  padding-inline: clamp(1.9rem, 3rem - 2vw, 2.9rem);
}

.sideChick--video .sideChick__media > video {
  filter: brightness(0.9);
}

.sideChick__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}

.sideChick__heading {
  font-size: clamp(1.6rem, 0.9vw + 1.3rem, 2.2rem);
  font-weight: 500;
  color: var(--light);
  padding-block: 0 0rem;
  margin: 0px 0 25px 0;
  text-wrap: balance;
}

#scVideo .sideChick__heading {
  font-weight: 500;
  margin-bottom: 25px;
  border-radius: 12px;
}

#scVideo .sideChick__content {
  padding-top: 50px;
}

#scVideo .sideChick__body {
  font-weight: 500;
  font-size: 1rem;
  margin: 3px 0 38px 0;
}

#scVideo {
  max-width: 100vw;
  border-radius: 0px;
}

.contextual-links {
  text-decoration: underline solid var(--secondary-color) 1px;
  text-underline-offset: 0.18rem;
  text-decoration-skip-ink: auto;
  font-weight: var(--font-normal);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.contextual-links:hover {
  /* Hover State */
  color: var(--primary-color); /* Orange text on hover */
  text-decoration: underline solid var(--primary-color) 1px;
}

.inContext {
  text-decoration: underline solid var(--primary-color) 1px;
  text-underline-offset: 0.18rem;
  text-decoration-skip-ink: auto;
  max-inline-size: 50ch;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

.inContext:hover {
  text-decoration: underline solid var(--secondary-color) 1px;
  cursor: pointer;
}

.sideChick__cta {
  display: inline-flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  gap: 10px;
  padding: 8px 25px;
  margin: 40px 0 0px -8px;
  border-radius: 999px;
  background-color: var(--primary-color);
  color: white;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.sideChick__cta:hover {
  background-color: var(--secondary-color);
  color: white;
}

.sideChick__cta:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
}

.sideChick__heading--cta {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
  margin-left: 0;
}

.sideChick__heading--cta .sideChick__cta {
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.sideChick__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sideChick__media > img,
.sideChick__media > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sideChick--video .sideChick__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 84, 165, 0.3),
    rgba(8, 84, 165, 0.5)
  );
  pointer-events: none;
}

.sideChick__content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 18px 2.8vw 30px 2.4vw;
  min-height: 100%;
  max-width: 1280px;
  z-index: 1;
  align-self: center;
  box-sizing: border-box;
}

#pMsg .sideChick__content {
  @media (width <= 999px) {
    padding: 18px 1.5vw 30px 1.5vw;
  }

  @media (width >= 1730px) {
    max-width: 100%;
  }
}

.sideChick__content .alignLeft {
  padding: 0px 0 0px 4px;
}

p + h1 {
  margin-top: 0px;
}

h1 {
  margin-bottom: 0px;
  color: var(--primary-color, #0c4b90);
}
.blanco {
  color: #fff;
  font-size: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);

  margin-bottom: 15px;
}
.gladys {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.low_holder {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: center;
  gap: 26px;
  margin: 0px 0 15px 0;
  margin-left: 0;
}
.low-btn {
  display: inline-flex;
  place-items: center;
  gap: 0.65rem;
  font-weight: 400;
  font-size: 1rem;
  corner-shape: squircle;
  border-radius: 50px;
  padding: 7.5px 25px;
  margin: 0px 0 0px -9px;
  color: white;
  background-color: none;
  border: 1.5px solid var(--primary-color);
  text-decoration: none;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  z-index: 100;
  transform: translateY(0px);
  transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease,
    transform 0.3s ease;
}

/* .low-btn:after { 
  content: "arrow_forward";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  font-size: 1.3rem;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  place-items: center;
  padding-block: 0.2vw;
} */

.low-btn:hover {
  border-color: #fff;
  background-color: none;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 1);
}

@keyframes btnMover {
  from {
    transform: translateY(0px);
    opacity: 0;
  }
  to {
    transform: translateY(30vh);
    opacity: 1;
  }
}

.box_title {
  opacity: 1;
  text-align: left;
  font-size: 3rem;
  line-height: 3.2rem;
  max-inline-size: 14ch;
  font-weight: 700;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-wrap: pretty;
  color: var(--secondary-color);
}

#cards .cards__cta {
  margin-top: auto;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

#cards .cards__cta .btn-culture {
  margin-left: 0;
}

#cards .cards__accent-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 550px;
  padding: 14px 14px 54px 24px;

  box-sizing: border-box;
}

#cards .cards__accent-row--icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-height: 40px;
  font-size: 122rem;
}

.material-symbols-outlined.logo_box {
  padding: 9px;
  border: 0px solid white;
  border-radius: 8px;
  color: var(--primary-color);
  background-color: white;
  align-self: flex-end;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

/* on hover of the parent card */
.content.ray-item:hover .material-symbols-outlined.logo_box {
  background-color: var(--primary-color);
  color: white;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined {
  font-size: 1.6rem;
}

#cards .cards__accent-row--spacer {
  flex: 1;
}

.cards__accent-row--title {
  font-size: 2.3rem;
  line-height: 2.9rem;
  font-weight: 900;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  padding-top: 0px;
  margin: auto 0 0 0;
  -webkit-text-stroke: 0px var(--primary-color);
  text-shadow: 0px 0px 50px rgba(166, 8, 115, 0.9);
}

.cards__accent-row--subtitle {
  font-size: 1.2rem;
  line-height: 2rem;
}

#cards .cards__accent-row--title,
#cards .cards__accent-row--subtitle {
  text-align: left;
}

.btn-culture {
  /* Default State */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 17px 8px 21px;
  margin: 35px 0px;
  border: 1.5px solid var(--secondary-color);
  border-radius: 50px;
  margin-left: -10px;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1rem;
  background-color: rgba(255, 255, 255, 0);
  transition: border-color 0.2s ease, transform 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

.btn-culture::after {
  content: "arrow_forward";
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 1.2rem;
  line-height: 1;
}

.btn-culture:hover {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: white;
}

.nero {
  height: 90vh;
}

.dateToday {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
}

.currentPeriod {
  margin: 0 0 50px 0px;
  height: 60px;
}

.period {
  padding: 15px 25px;
  margin: 0 0 0px 14px;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  font-size: 2.4rem;
}

.pm {
  border-radius: 0px;
  margin: 0 0 275px 0;
}

.roon {
  border-radius: 12px;
}

#cards .sideChick__content,
#zg4 .sideChick__content {
  padding: 0px 2.4vw;
}

#cards .sideChick__columns {
  display: grid;
  gap: 38px;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#zg4 .sideChick__columns {
  display: grid;
  gap: 38px;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

#cards {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 790px;
}

#zg4 .sideChick__column {
  height: 150px;
  width: 100%;
}

#zg4 .parent {
  height: 800px;
}

.sideChick .pm {
  z-index: 100;
}

#cards .sideChick__column--accent {
  --accent-border-width: clamp(1px, 0.5vw, 2.5px);
  --glow-speed: 3s;
  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4),
    var(--clr-5), var(--clr-1);
  position: relative;
  padding: var(--accent-border-width);
  border-radius: 24px;
  border: var(--accent-border-width) solid transparent;
  background: linear-gradient(var(--accent-surface, transparent) 0 0)
      padding-box,
    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  animation: glow var(--glow-speed) linear infinite;
}

#cards .sideChick__accent,
#zg4 .sideChick__accent {
  flex: 1 1 auto;
  width: 100%;
  border-radius: calc(24px - var(--accent-border-width, 4px));
  overflow: hidden;
  backdrop-filter: blur(6px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100%;
}

#cards .sideChick__accent--one {
  background-image: linear-gradient(
      150deg,
      rgba(8, 84, 165, 0.3),
      rgba(8, 84, 165, 0.6)
    ),
    url("https://www.avdistrict.org/uploaded/av-prod/animation/4L4A1882.png");
}

#cards .sideChick__accent--two {
  background-image: linear-gradient(
      150deg,
      rgba(8, 84, 165, 0.3),
      rgba(8, 84, 165, 0.6)
    ),
    url("https://www.avdistrict.org/uploaded/av-prod/animation/MIK20077.png");
}

#cards .sideChick__accent--three {
  background-image: linear-gradient(
      150deg,
      rgba(8, 84, 165, 0.3),
      rgba(8, 84, 165, 0.6)
    ),
    url("https://www.avdistrict.org/uploaded/av-prod/animation/MIK20077.png");
}

.sideChick__accent--one:hover,
.sideChick__accent--two:hover,
.sideChick__accent--three:hover {
  cursor: pointer;
}

.sideChick__accent--one:hover .logo_box,
.sideChick__accent--two:hover .logo_box,
.sideChick__accent--three:hover .logo_box {
  background-color: rgba(255, 255, 255, 1);
  color: #003ca6;
}

.sideChick__accent--one:hover,
.sideChick__accent--two:hover {
  background-color: rgba(255, 255, 255, 1);
}

@media (max-width: 960px) {
  .zero-subtitle {
    /* font-size: 2.4rem;
    line-height: 2.4; */
  }

  #cards .sideChick__content {
    /* padding: 48px 32px; */
  }

  #cards .sideChick__columns {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }

  #cards .sideChick__accent {
    min-height: 200px;
  }
}

@media (min-width: 1780px) {
}

@keyframes glow {
  to {
    --glow-deg: 270deg;
  }
}

.zero_group {
  opacity: 1;
  width: 100%;
  max-width: 1280px;
}

.gladys {
  margin-top: 20px;
}

#pMsg {
  max-width: 95vw;
  border-radius: 12px;
  margin-bottom: 30px;
  font-size: 1rem; /* base text size */
  line-height: 1.6;
}

#insideAVHS .sideChick__body {
  text-shadow: 2px 2px 6px #003da646;
}

#insideAVHS .sideChick__content {
  padding: 100px 2.8vw 120px 2.8vw;
}

#insideAVHS {
  min-height: 80vh;
}

#pMsg .sideChick pm {
  max-width: 100vw;

  @media (width <= 999px) {
    padding-left: 35px;
  }
}

.sideChick__accent sideChick__accent--two {
  opacity: 0;
}

.every {
  font-size: 12rem;
  color: black;
  line-height: 5rem;
}

.left-part h1 {
  margin: 0;
  color: var(--primary-color);
  font-size: 3rem;
  line-height: 3rem;
}

.typed-fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.typed-cursor {
  display: none !important;
}

#fsEl_92011 {
  visibility: hidden;
  display: none;
}

.fsElement {
  margin-bottom: 0px;
}

body:not(.fsComposeMode) #fsFooter .footer-note {
  visibility: hidden;
}

#fsPoweredByFinalsite {
  visibility: hidden;
}

svg {
  width: 25px;
}

/* css slider */
.slider {
  height: 1000px;
  margin-top: 0px;
  position: relative;
  border: 1px 0 1px 0;
}
.slider .list .item {
  position: absolute;
  inset: 0 0 0 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
}
.slider .list .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider .list .item::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.slider .list .item .content {
  position: absolute;
  left: 0%;
  top: 5%;
  width: 50rem;
  max-width: 100%;
  z-index: 1;
}
.slider .list {
  max-width: 1280px;
}
.spot {
  font-size: 1.25rem;
  line-height: 1.2rem;
  /* max-inline-size: 120ch; */
  text-wrap: pretty;
  width: 100%;
}

#shot {
  font-size: 1.3rem;
  line-height: 1.7rem;
  font-weight: 400;
  max-inline-size: 40ch;
  text-wrap: pretty;
  color: white;
}

.slider .list .item .content p.spot {
  line-height: 1.8rem;
  color: #333;
  text-wrap: pretty;
  max-inline-size: 130ch;
}

.slider .list .item .content p:nth-child(1) {
  text-transform: uppercase;
  letter-spacing: 0px;
}
.slider .list .item .content h2 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 3rem;
  margin: 0 20px 0 0px;
  text-wrap: pretty;
  max-inline-size: 29ch;
}
.slider .list .item.active {
  opacity: 1;
  z-index: 10;
}
@keyframes showContent {
  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3),
.slider .list .item.active p:nth-child(4) {
  transform: translateY(30px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent 0.5s 0.7s ease-in-out 1 forwards;
}
.slider .list .item.active h2 {
  animation-delay: 0.75s;
}
.slider .list .item.active p:nth-child(3) {
  animation-duration: 0.31s;
}
.arrows {
  position: absolute;
  top: 10%;
  right: 50px;
  z-index: 100;
  display: none;
  pointer-events: none;
}
.arrows button {
  background-color: var(--secondary-color);
  border: none;
  font-family: monospace;
  font-weight: var(--medium);
  width: 40px;
  height: 40px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  color: white;
  transition: 0.5s;
}
.arrows button:hover {
  background-color: var(--primary-color);
  color: white;
}
.thumbnail {
  position: absolute;
  top: 340px;
  z-index: 11;
  display: flex;
  gap: 60px;
  width: 100%;
  height: 560px;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: auto;
  justify-content: left;
  padding-top: 30px;
}
.thumbnail::-webkit-scrollbar {
  width: 0;
}
.thumbnail .item {
  width: 270px;
  height: 405px;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  overflow: visible;
  border-radius: 10px;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-color: purple;
  --spotlight-radius: 180;
}
.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0px solid var(--primary-color);
  border-radius: 10px;
  position: relative;
  box-shadow: none;
  z-index: 1;
  transition: filter 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  display: block;
  box-sizing: border-box;
}
.thumbnail .item.active {
  transform: scale(1.05);
}
.thumbnail .item.active img {
  border: 2px solid var(--primary-color);
}
.thumbnail .item::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  background: radial-gradient(
    circle at var(--spotlight-x) var(--spotlight-y),
    purple 0%,
    purple 5%,
    transparent calc(var(--spotlight-radius) * 1.2px)
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.thumbnail .item:hover::before,
.thumbnail .item:focus-within::before {
  opacity: 1;
}

.thumbnail .item .content {
  position: absolute;
  inset: 10px 10px 10px 10px;
  color: white;
  font-size: 2.2rem;
  font-weight: 500;
}
@media screen and (max-width: 678px) {
  .thumbnail {
    justify-content: start;
  }

  .arrows {
    top: 10%;
  }
}

.ray {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2.5rem; /* Adds space between the items */
}

.ray-item {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 1rem;
  flex: 1 1 100%;
  padding: 0px 0rem 20px 30px;
  color: #fff;
  z-index: 10;
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}

body:not(.fsComposeMode) #fsFooter {
  border-top: 0px solid #e5e5e5;
}

#highLights {
  z-index: 0;
}

#fsEl_64919,
.nav-social .fsNavLevel1 {
  visibility: hidden;
}

#pMsg-grid-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 90px auto;
  gap: 0px;
  padding: 0 30px;
}

#pMsg-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#pMsg-menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#pMsg-menu li {
  margin-left: 20px;
}

#pMsg-menu li a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
}

#pMsg-menu li:last-child a {
  margin-right: 0;
}

#pMsg-content {
  grid-column: 1 / -1;
  width: 100%;
}

/* .home:not(.fsComposeMode) .home-hero-school > header .fsElementHeaderContent {
  margin-top: 0px;
}

.home:not(.fsComposeMode)
  .home-hero-school
  > header
  .fsElementHeaderContent
  ul.flatten
  li {
  font-size: 3.45rem;
  line-height: 60px;
  font-weight: 400;
}

.home:not(.fsComposeMode)
  .home-hero-school
  > header
  .fsElementHeaderContent
  ul
  li {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0), -2px 2px 0 rgba(0, 0, 0, 0),
    -2px 2px 0 rgba(0, 0, 0, 0.5), 2px -2px 0 rgba(0, 0, 0, 0);
}

.home:not(.fsComposeMode)
  .home-hero-school
  > header
  .fsElementHeaderContent
  ul.flatten
  li:not(:last-child) {
  margin-right: 72px; 
  }*/