@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  --bg-dark: oklch(0.1 0.025 264);
  --bg: oklch(0.15 0.025 264);
  --bg-light: oklch(0.2 0.025 264);
  --text: oklch(0.96 0.05 264);
  --text-muted: oklch(0.76 0.05 264);
  --highlight: oklch(0.5 0.05 264);
  --border: oklch(0.4 0.05 264);
  --border-muted: oklch(0.3 0.05 264);
  --primary: oklch(0.76 0.1 264);
  --secondary: oklch(0.7603 0.1006 55.07);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
  --text-fea: oklch(0.7623 0.0491 231.84);
}
/* Starts Bento Container */

.highlight-bento-container {
  /* width: 100vw; */
  height: 35vh;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  padding: 10% 8%;
  gap: 5em;
  justify-content: center;
}
.highlight-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.highlight-text h1 {
  font-size: 4em;
  line-height: 1;
}
.highlight-text h3 {
  font-size: 2em;
}
.grad-teks {
  background: linear-gradient(270deg, #2fffdc 10%, #87ff38 100%);
  background-clip: text;
  color: transparent;
}
.highlight-grid {
  flex: 1;
  height: 25.5rem;
  display: flex;
  gap: 1em;
}
.grid-button {
  display: flex;
  gap: 1em;
}
.highlight-button {
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-size: 1.2em;
  font-weight: 600;
  transition: 0.2s ease-in-out;
  cursor: pointer;
}
.highlight-button:nth-child(1) {
  border: 2px solid transparent;
  background-color: white;
  color: black;
}
.highlight-button:hover {
  background-color: rgb(19, 19, 19);
  color: white;
}
.grid-left {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.grid-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.box {
  flex: 1;
  border-radius: 1em;
  gap: 1em;
  transition: 0.2s ease-in-out;
  display: flex;
}
.inner-box {
  flex: 1;
  border-radius: 1em;
  overflow: hidden;
  opacity: 0.8;
  transition: 0.2s ease-in-out;
}
.grid-left .inner-box:nth-of-type(1) {
  flex: 2;
}
.grid-left .box:nth-of-type(2) .inner-box:nth-of-type(2) {
  flex: 3;
}
.grid-left .box:nth-of-type(3) .inner-box {
  flex: 1;
}
.inner-box:hover {
  transform: scale(1.02);
  opacity: 1;
}
.grid-right .box {
  opacity: 0.8;
}
.grid-left .box:hover,
.grid-right .box:hover {
  transform: scale(1.02);
  opacity: 1;
  cursor: pointer;
}
.highlight-grid img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.grid-right .box {
  overflow: hidden;
}
/* Ends Bento Container */

/* Starts Modal Overlay */
.modal {
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 102;
  width: 80dvw;
  height: 90dvh;
  background-color: var(--border-muted);
  /* background-color: #2fffdc; */
}
/* .hidden {
  display: none;
} */
.photo-container {
  flex: 1;
  background-color: var(--bg);
}
.text-container {
  flex: 1;
  margin: 0 1rem;
}
.photo-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.judul-modal {
  border-bottom: 2px solid #ffffff68;
  padding: 1rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.judul-modal p,
.teks-modal p {
  font-size: 0.9rem;
}
.teks-modal {
  margin-top: 1rem;
  margin-left: 0.75rem;
  margin-right: 1rem;
}
.modal-logo {
  height: 6%;
  width: 6%;
  display: flex;
  align-items: center;
}
.modal-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.close-modal {
  position: absolute;
  top: -2rem;
  right: -5rem;
  font-size: 3rem;
  cursor: pointer;
  border: none;
  background: none;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.close-modal:hover {
  opacity: 0.7;
}
.overlay-modal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 101;
}
.photo-navigations {
  position: absolute;
  width: 98%;
  top: 20%;
  left: 1%;
  display: flex;
  z-index: 3;
  transform: translateY(30dvh);
}
.next-photo {
  position: absolute;
  right: 1%;
  /* top: 0%; */
}
.prev-photo {
  position: absolute;
  left: 1%;
  /* top: 0%; */
}
.material-symbols-outlined {
  background-color: transparent;
  /* padding: 0.2rem; */
  /* border-radius: 20px; */
  cursor: pointer;
}
.next-photo,
.prev-photo {
  background-color: var(--highlight);
  border-radius: 50%;
  border-color: transparent;
  display: flex;
  bottom: 0;
  transition: 0.2s ease-out;
  opacity: 0.7;
}
.next-photo:hover,
.prev-photo:hover {
  background-color: var(--border);
  opacity: 0.8;
}
.next-photo.swiper-button-disabled,
.prev-photo.swiper-button-disabled {
  /* visibility: hidden;
  pointer-events: none; */
  display: none;
}
/* Ends Modal Overlay */
.photo-slide {
  position: relative;
  width: 99.86%;
  height: 100%;
  display: flex;
}
.photo-slide::before {
  position: absolute;
  width: 99.86%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.sports-slide:nth-child(1)::before {
  background-image: url("sports/photo-1.jpg");
}
.sports-slide:nth-child(2)::before {
  background-image: url("sports/photo-2.jpg");
}
.sports-slide:nth-child(3)::before {
  background-image: url("sports/photo-3.jpg");
}
.sports-slide:nth-child(4)::before {
  background-image: url("sports/photo-4.jpg");
}
.sports-slide:nth-child(5)::before {
  background-image: url("sports/photo-5.jpg");
}
.sports-slide:nth-child(6)::before {
  background-image: url("sports/photo-6.jpg");
}
.sports-slide:nth-child(7)::before {
  background-image: url("sports/photo-7.jpg");
}

.nus-slide:nth-child(1)::before {
  background-image: url(nus/photo-1.jpg);
}
.nus-slide:nth-child(2)::before {
  background-image: url(nus/photo-2.jpg);
}
.nus-slide:nth-child(3)::before {
  background-image: url(nus/photo-3.jpg);
}
.nus-slide:nth-child(4)::before {
  background-image: url(nus/photo-4.jpg);
}
.nus-slide:nth-child(5)::before {
  background-image: url(nus/photo-5.jpg);
}
.nus-slide:nth-child(6)::before {
  background-image: url(nus/photo-6.jpg);
}
.nus-slide:nth-child(7)::before {
  background-image: url(nus/photo-7.jpg);
}
.nus-slide:nth-child(8)::before {
  background-image: url(nus/photo-8.jpg);
}

.rohis-slide:nth-child(1)::before {
  background-image: url(rohis/photo-1.jpg);
}
.rohis-slide:nth-child(2)::before {
  background-image: url(rohis/photo-2.jpg);
}
.rohis-slide:nth-child(3)::before {
  background-image: url(rohis/photo-3.jpg);
}
.rohis-slide:nth-child(4)::before {
  background-image: url(rohis/photo-4.jpg);
}

.deutsch-slide:nth-child(1)::before {
  background-image: url(deutsch/photo-1.jpg);
}
.deutsch-slide:nth-child(2)::before {
  background-image: url(deutsch/photo-2.jpg);
}
.deutsch-slide:nth-child(3)::before {
  background-image: url(deutsch/photo-3.jpg);
}
.deutsch-slide:nth-child(4)::before {
  background-image: url(deutsch/photo-4.jpg);
}

.danus-slide:nth-child(1)::before {
  background-image: url(danus/photo-1.jpg);
}
.danus-slide:nth-child(2)::before {
  background-image: url(danus/photo-2.jpg);
}
.danus-slide:nth-child(3)::before {
  background-image: url(danus/photo-3.jpg);
}

.ayimun-slide:nth-child(1)::before {
  background-image: url(ayimun/photo-1.jpg);
}
.ayimun-slide:nth-child(2)::before {
  background-image: url(ayimun/photo-2.jpg);
}
.ayimun-slide:nth-child(3)::before {
  background-image: url(ayimun/photo-3.jpg);
}
.ayimun-slide:nth-child(4)::before {
  background-image: url(ayimun/photo-4.jpg);
}

.robotic-slide:nth-child(1)::before {
  background-image: url(robotic/photo-1.jpg);
}
.robotic-slide:nth-child(2)::before {
  background-image: url(robotic/photo-2.jpg);
}
.robotic-slide:nth-child(3)::before {
  background-image: url(robotic/photo-3.jpg);
}
.robotic-slide:nth-child(4)::before {
  background-image: url(robotic/photo-4.jpg);
}
.robotic-slide:nth-child(5)::before {
  background-image: url(robotic/photo-5.jpg);
}

.academic-slide:nth-child(1)::before {
  background-image: url(academic/photo-1.jpg);
}
.academic-slide:nth-child(2)::before {
  background-image: url(academic/photo-2.jpg);
}
.academic-slide:nth-child(3)::before {
  background-image: url(academic/photo-3.jpg);
}
.academic-slide:nth-child(4)::before {
  background-image: url(academic/photo-4.jpg);
}
.academic-slide:nth-child(5)::before {
  background-image: url(academic/photo-5.jpg);
}

.swiper-pagination-bullets {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.swiper-pagination-bullet {
  background-color: #cccccc !important; /* Ganti dengan warna abu-abu atau yang Anda mau */
  opacity: 0.5 !important; /* Pastikan opacity 1 agar warnanya solid */
  width: 6px !important;
  height: 6px !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--secondary) !important;
  opacity: 0.8 !important;
  width: 9px !important;
  height: 9px !important;
}
.modal-hidden {
  display: none !important;
}
.button-modal {
  display: flex;
  position: absolute;
  z-index: 103;
  bottom: 42%;
  background-color: transparent;
  border: none;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
}
.prev-modal {
  right: 93%;
}
.next-modal {
  left: 93%;
}
.button-modal .material-symbols-outlined {
  font-size: 3rem;
}
/* Starts Modal Grid */
.bento-2 {
  margin-top: 3rem;
}
/* Ends Modal Grid */
/* Starts Bento 2/academic */
.highlight-grid-academic {
  flex: 1;
  height: 25.5rem;
  display: flex;
  gap: 1em;
  /* overflow: hidden; */
}
.highlight-grid-academic img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.highlight-grid-academic .box-academic {
  flex: 1;
  border-radius: 1em;
  gap: 1em;
  transition: 0.2s ease-in-out;
  display: flex;
}
.grid-left-academic {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.grid-right-academic {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.box-academic {
  flex: 1;
  border-radius: 1em;
  gap: 0.5em;
  transition: 0.2s ease-in-out;
  display: flex;
}
.inner-box-academic {
  flex: 1;
  border-radius: 1em;
  overflow: hidden;
  opacity: 0.8;
  transition: 0.2s ease-in-out;
}
.grid-left-academic .inner-box-academic:nth-of-type(1) {
  flex: 2;
}
.grid-left-academic
  .box-academic:nth-of-type(2)
  .inner-box-academic:nth-of-type(2) {
  flex: 3;
}
.grid-left-academic .box-academic:nth-of-type(3) .inner-box-academic {
  flex: 1;
}
.inner-box-academic:hover {
  transform: scale(1.02);
  opacity: 1;
}
.grid-right-academic .box-academic {
  opacity: 0.8;
}
.grid-left-academic .box-academic:hover,
.grid-right-academic .box-academic:hover {
  transform: scale(1.02);
  opacity: 1;
  cursor: pointer;
}
.grid-right-academic .box-academic {
  overflow: hidden;
}