@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* styles.css */

:root {
 --navbarLight: #9e9e9e;
}

#egg {
 /* padding-right: 177px; */
 display: inline-block;
 width: 12px;
 height: 15px;
 background: radial-gradient(circle at 30% 30%, #fff4bf, #ffbb33);
 border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
 animation: wiggle 1s infinite ease-in-out;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 cursor: help;
 /* position: fixed; */
 z-index: 1;
 transition: transform 0.5s ease-in-out;
}

#egg:hover {
 transform: scale(1.2);
 animation: wiggleHover 1s infinite ease-in-out;
}

@keyframes wiggle {
 0% {
  transform: rotate(0deg);
 }

 25% {
  transform: rotate(3deg);
 }

 50% {
  transform: rotate(0deg);
 }

 75% {
  transform: rotate(-3deg);
 }

 100% {
  transform: rotate(0deg);
 }
}

@keyframes wiggleHover {
 0% {
  transform: scale(1.2) rotate(0deg);
 }

 25% {
  transform: scale(1.2) rotate(3deg);
 }

 50% {
  transform: scale(1.2) rotate(0deg);
 }

 75% {
  transform: scale(1.2) rotate(-3deg);
 }

 100% {
  transform: scale(1.2) rotate(0deg);
 }
}

#messagee {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 80%;
 max-width: 400px;
 transform: translate(-50%, -50%);
 background: linear-gradient(135deg, #fff9e6, #ffe0b3);
 border: 2px solid #f0c674;
 padding: 25px 20px 30px;
 border-radius: 15px;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
 text-align: center;
 display: none;
 animation: flyIn 0.6s ease-out forwards;
 z-index: 1000;
}

#messagee.show {
 display: block;
 animation: flyIn 0.6s ease-out, idlePulse 2s infinite;
}

#messagee.hide {
 animation: flyOut 0.5s ease-in forwards;
 display: block;
}

#messagee h2 {
 font-size: 1.6rem;
 color: #e67e22 !important;
 margin-bottom: 10px;
}

#messagee p {
 font-size: 1rem;
 color: #5a4636;
 white-space: pre-line;
}

#close-btn-message_easteregg {
 position: absolute;
 top: 10px;
 right: 12px;
 font-size: 18px;
 background: none;
 border: none;
 color: #d35400;
 cursor: pointer;
 transition: transform 0.2s;
}

#close-btn-message_easteregg:hover {
 transform: scale(1.2);
}

@keyframes flyIn {
 from {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.9);
 }

 to {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
 }
}

@keyframes flyOut {
 from {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
 }

 to {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.9);
 }
}

@keyframes idlePulse {
 0% {
  transform: translate(-50%, -50%) scale(1);
 }

 50% {
  transform: translate(-50%, -50%) scale(1.02);
 }

 100% {
  transform: translate(-50%, -50%) scale(1);
 }
}

/* ! Maintance */
.maintainceScreen {
 position: fixed;
 z-index: 5;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 /* Semi-transparent background */
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-family: Arial, sans-serif;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.loadingContent {
 text-align: center;
}

.loadingContent h2 {
 border-bottom: none;
 padding-bottom: unset;
 margin-top: unset;
 font-size: 1.5em;
}

.loadingContent p {
 font-size: unset;
 line-height: unset;
}

.maintainceScreen.show {
 opacity: 1;
 visibility: visible;
}

.search-container {
 transform: translateX(-50%);
 left: 50%;
 position: relative;
 display: flex;
 align-items: center;
 height: 50px;
 overflow: visible;
 transition: width 0.3s ease;
 width: 50px;
 /* Default width */
 margin-top: 20px;
 /* Tambahkan jarak ke atas */
 transition: all 0.5s ease;
}

.search-container.active {
 left: 50%;
 width: 300px;
 /* Expanded width */
}

.search-input {
 width: 100%;
 height: 50px;
 padding: 0 50px 0 20px;
 /* Right padding ensures space for submit button */
 border: none;
 border-radius: 25px;
 outline: none;
 font-size: 16px;
 opacity: 0;
 /* Hidden by default */
 transition: opacity 0.2s ease, width 0.3s ease, background-color 0.3s ease-out, color 0.3s ease-out, border 0.3s ease-in;
}

.search-input:disabled {
 background-color: #f0f0f0;
 /* Warna latar untuk input yang dinonaktifkan */
 color: #a0a0a0;
 /* Warna teks untuk input yang dinonaktifkan */
 border: 1px solid #d0d0d0;
 /* Warna border untuk input yang dinonaktifkan */
 cursor: not-allowed;
 /* Ubah kursor ke tanda larangan */
 opacity: 0.7;
 /* Opsional: Buat sedikit transparan */
}

.search-input::placeholder {
 font-size: 13px;
 /* Ganti dengan ukuran yang diinginkan */
 color: rgb(0, 0, 0);
 /* (Opsional) Atur warna placeholder */
}

.search-container.active .search-input {
 opacity: 1;
 /* Show input */
}

.search-btn,
.submit-btn {
 position: absolute;
 width: 50px;
 height: 50px;
 border: none;
 border-radius: 50%;
 background: #3498db;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.3s ease;
}

.search-btn {
 left: 0;
 z-index: 2;
 transition: all 0.3s ease;
}

.submit-btn {
 right: 0;
 opacity: 0;
 pointer-events: none;
 /* Initially disabled */
 transition: opacity 0.2s ease, background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.submit-btn[disabled] {
 background: #c9c9c9 !important;
 color: #137518 !important;
 cursor: not-allowed;
 opacity: 0.6;
}

.search-container.active .submit-btn {
 opacity: 1;
 pointer-events: auto;
 /* Enable interaction */
}

.search-btn:hover {
 background: #2980b9;
}

.search-container.active .submit-btn {
 background: #fff;
 color: #3498db;
}

.search-container.active .search-btn {
 opacity: 0;
}

.suggestion-box {
 position: absolute;
 top: calc(100% + 5px);
 /* Awalnya berada di bawah input */
 left: 0;
 width: 100%;
 background: #333;
 border: 1px solid black;
 border-radius: 4px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 z-index: 100;
 overflow: hidden;
 /* Sembunyikan konten yang melampaui ukuran */
 transform-origin: top;
 /* Transformasi dari bagian atas */
 transform: scaleY(0);
 /* Mulai dalam keadaan tertutup */
 transition: transform 0.3s ease, height 0.3s ease;
 /* Animasi transformasi dan ukuran */
}

.suggestion-box.active {
 transform: scaleY(1);
 /* Animasi muncul dari atas */
 transition: transform 0.3s ease, height 0.3s ease;
 /* Smooth animasi */
}

.suggestion-item {
 padding: 10px;
 cursor: pointer;
 font-size: 16px;
 transition: background-color 0.3s ease, color 0.3s ease-in-out;
}

.suggestion-item:hover {
 background-color: #dad4d4;
 color: black;
}

.suggestion-item.active {
 background-color: #3498db;
 /* Warna latar untuk item aktif */
 color: #fff;
 /* Warna teks untuk item aktif */
}

/* General styles */

.corner-decor {
 position: fixed;
 width: 95px;
 height: 70px;
 background-size: contain;
 background-repeat: repeat;
 z-index: 5;
 pointer-events: none;
 /* background-color: transparent; */
}

.corner-decor.static {
 position: absolute;
}

.corner-decor.left {
 top: 15px;
 background-image: url('/image/Left_Ramadhan_Rev1.png');
 /* background-image: url('/image/Left_LunarNewYear_Rev1.png'); */
 /* left: -10px; */
 /* background-image: url('/image/Right_wayang_bgremove.png'); */
 /* transform: rotateY(180deg); */
}

.corner-decor.right {
 height: 98px;
 /* background-image: url('path/to/your/right-corner-image.png'); */
 top: 1px;
 right: 0px;
 /* background-image: url('/image/Right_Chinese_Rev2-2.png'); */
 background-image: url('/image/Right_Ramadhan_Rev1.png');
 background-size: cover;
 /* transform: rotateY(180deg); */
 z-index: 4;
}

/* .loading-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 color: #fff;
 align-items: center;
 justify-content: center;
 font-size: 1.5em;
 z-index: 1000;
 display: none;
 flex-direction: column;
 text-wrap: wrap;
 display: none;
} */

* {
 /* margin: 0; */
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}

.loading-overlay {
 cursor: default;
 display: flex;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* background: rgba(0, 0, 0, 0.8); */
 background: linear-gradient(135deg, #05553d, #05612a);
 color: #fff;
 font-size: 1em;
 z-index: 1000;
 padding: 10px;
 text-align: center;
 flex-direction: column;
 text-wrap: nowrap;
 font-weight: bold;
 border-radius: 12px;
 /* background-color: rgba(255, 255, 255, 0.7); */
 /* background: linear-gradient(45deg, purple, pink);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent; */
}

.loading-overlay p {
 margin: 15px 0;
 line-height: 0;
}

/* .loading-overlay::after {
 content: attr(data-text);
 font-size: 24px;
 background: linear-gradient(to bottom, white, black);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 color: transparent;
} */

body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 margin: 0;
 padding: 0;
 background-color: #f8f8f8;
 /* background-color: #fffbef; */
 color: #333;
 padding-bottom: 50px;
 transition: all 0.4s ease;
 min-height: 100vh;
}

body.overflow-y-hidden {
 overflow-y: hidden;
}

.parallax-top {
 padding: 0;
}

.parallax-1 {
 background: url('/image/9A_Photobooth_LE_auto_custom_colored-NEW2.jpg') no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 margin-top: 110px;
}

.parallax-2 {
 background: url('https://cdn.marsell.my.id/9A_landscape.png') no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
}

.parallax-2 #parallax-inner-h1 {
 font-size: 70px;
}

.parallax-3 {
 background: url('/image/404_notfound-image_3.jpg') no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
}

.parallax-inner {
 padding: 10% 0;
}

#parallax-inner-h1 {
 font-size: 120px;
 text-align: center;
 color: rgba(255, 255, 255, .4);
}

.parallax-h2 {
 font-size: 32px;
 color: #555;
 text-align: center;
 font-weight: 300;
 letter-spacing: 2px;
 margin: 20px 0 10px;
 border-bottom: none;
}

#parallax-p {
 font-size: 16px;
 color: #555;
 text-align: justify;
 line-height: 30px;
 margin: 10px 20px 10px;
 /* margin: 0 50px 40px; */
}

/* #parallax-p:nth-of-type(2),
#parallax-p:nth-of-type(3) {
 margin: 40px 50px;
} */

body.dark-mode {
 background-color: #333;
 color: #fff;
}

/* .change-theme {
 background-color: #007bff;
 color: #fff;
 border: none;
 padding: 1px 2px;
 font-size: 16px;
 cursor: pointer;
 border-radius: 5px;
 transition: background-color 0.3s, color 0.3s;
 margin-top: 0px;
}

.change-theme:hover {
 background-color: #0056b3;
} */

.navigation ul li a span.text {
 font-size: 11px;
}

.tree ul li ul li a {
 cursor: pointer;
}

.navigation {
 transition: background 3s ease-in-out, transform 0.5s ease, margin-top 0.5s ease;
}

.dark-mode .navigation {
 background: linear-gradient(241deg, #b91587, #460e63);
 /* background: linear-gradient(4deg, #998352, #620726); */
 /* background: linear-gradient(300deg, #0a3e68, #620726); */
}

/* @keyframes gradientAnimation1 {
 0% {
  background: linear-gradient(45deg, #0b365a, #6d0c2c);
 }

 100% {
  background: linear-gradient(300deg, #1a76c1, #c81852);
 }
}

@keyframes gradientAnimation2 {
 0% {
  background: linear-gradient(300deg, #1a76c1, #c81852);
 }

 100% {
  background: linear-gradient(45deg, #0b365a, #6d0c2c);
 }
}

.navigation.light-mode {
 animation: gradientAnimation1 3s ease-in-out forwards;
}

.navigation.dark-mode {
 animation: gradientAnimation2 3s ease-in-out forwards;
} */

.dark-mode .navigation ul li a .icon {
 color: rgb(255, 255, 255);
}

.dark-mode .navigation ul li a .circle {
 border: 1.8px solid #d7bdbd;
}

.dark-mode .indicator {
 background: linear-gradient(358deg, #ca15cd, #5f0883);
 /* background: linear-gradient(358deg, #7b6511, #620726); */
 /* background: linear-gradient(257deg, #0a3e68, #620726); */
}

.dark-mode #parallax-h2 {
 color: rgba(245, 245, 245, 0.786);
}

.dark-mode #parallax-p {
 color: rgba(245, 245, 245, 0.66);
}

.dark-mode .navbar {
 /* background-color: #235e2f; */
 background-color: #222;
}

.dark-mode .navbar a {
 color: #fff;
}

.dark-mode .navbar h3 {
 color: #b3b0b0;
}

.dark-mode .navbar a:hover {
 color: #ff0;
}

.dark-mode .close-menu {
 color: #fff;
}

.dark-mode .close-menu:hover {
 color: #ff0;
}

/* .dark-mode .change-theme {
 background-color: #222;
 color: #fff;
} */

/* .dark-mode .change-theme:hover {
 background-color: #444;
} */

.dark-mode .detail-view {
 background-color: rgba(0, 0, 0, 0.856);
}

.dark-mode .detail-view .arrow {
 color: white;
}

.dark-mode #photos a {
 color: rgba(0, 0, 0, 0.849);
 font-weight: medium;
 text-shadow:
  -1px -1px 0 rgb(255, 255, 255),
  1px -1px 0 rgb(255, 255, 255),
  -1px 1px 0 rgb(255, 255, 255),
  1px 1px 0 rgb(255, 255, 255);
}

.dark-mode h2,
.dark-mode h3 {
 color: rgb(221, 218, 218) !important;
}

.dark-mode blockquote {
 color: #ddd;
}

.dark-mode .social-links a {
 color: #c5bfbf;
}

.detail-view {
 top: 0px;
 height: 100%;
 width: 100%;
 /* width: 56%;
 height: 75%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); */
 background-color: rgba(255, 255, 255, 0.9);
 padding: 24px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 z-index: 999;
 transition: all 0.5s ease;
 position: fixed;
}

/* .additionalDiv {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 80%;
 max-height: 80%;
 background: gray;
 border-radius: 10px;
 padding: 20px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 overflow: auto;
} */

.additionalDiv {
 /* margin-right: 100%; */
 /* margin-left: 185px; */
 width: 62%;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* max-width: 80%; */
 /* max-height: 80%; */
 /* background: #8080804f; */
 /* border-radius: 10px; */
 padding: 20px;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 /* overflow: auto; */
 height: 80%;
}

/* .additionalDiv {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(128, 128, 128, 0.3);
 /* Transparan abu-abu
} */

.detail-view.hide {
 /* right: 100%; */
 transform: translateX(-100%);
}

.detail-view #detailTitle {
 border-bottom: none !important;
 font-size: large;
 padding-bottom: 0px !important;
 text-align: center;
 margin-top: -20px;
 margin-bottom: 2px;
 /* position: fixed; */
}

.detail-view #detailDesc {
 top: 25px;
 transform: translateX(-50%);
 left: 50%;
 position: absolute;
 font-size: 10px;
 text-align: center;
}

.detail-view #imageTotal {
 float: right;
 /* margin-top: -29px; */
 /* margin-bottom: -10px; */
 font-size: medium;
 transition: all 0.3s ease, margin 0.5s ease, transform 0.3s ease;
 position: absolute;
 bottom: -10px;
 left: 50%;
 transform: translateX(-50%);
}

/* .detail-view .close-button {
 margin-top: -25px;
 position: fixed;
} */

.detail-view .close-button {
 font-size: 32px;
 background: none;
 border: none;
 padding: 1px;
 margin-top: -15px;
 position: fixed;
 padding-right: 5px;
 padding-left: 5px;
 cursor: pointer;
}

.close-button .icon {
 color: white;
}

/* .detail-image {
 /* max-width: 53vw;
 margin-left: 9%;
 margin-top: 10%;
 max-width: 80vw;
 max-height: 80vh;
 border-radius: 10px;
 overflow: hidden;
 filter: brightness(90%) contrast(120%) sepia(10%) grayscale(10%) saturate(100%) blur(0px);
} */

.detail-image {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 80vw;
 max-height: 80vh;
 border-radius: 10px;
 overflow: hidden;
 filter: brightness(90%) contrast(120%) sepia(10%) grayscale(10%) saturate(100%) blur(0px);
}

.arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 font-size: 2em;
 cursor: pointer;
 color: #000;
}

.left-arrow {
 left: 2px;
}

.right-arrow {
 right: 2px;
}

.username-box {
 position: absolute;
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 14px;
 display: none;
 transition: opacity 0.3s;
 white-space: nowrap;
 z-index: 10;
 transform: translateX(0%);
}

.username-box a {
 color: #1da1f2;
 text-decoration: none;
}

.username-box a:hover {
 text-decoration: underline;
}

.hover-area {
 position: absolute;
 cursor: pointer;
 border-radius: 50%;
 display: inline-block;
}

.hover-area::before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 /* background-color: rgba(255, 0, 0, 0.3); */
 border-radius: 50%;
}

.hover-area.always-show::before {
 background-color: rgba(255, 0, 0, 0.3);
}

.hidden {
 display: none !important;
}

.navbar {
 /* position: fixed; */
 top: 0;
 left: 0;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 /* background-color: #adacac; */
 /* background-color: #b1b1b1; */
 background-color: #9e9e9e;
 color: white;
 padding: 15px;
 transition: all 0.3s ease-in-out;
 z-index: 3;
}

.navbar .titleWithBackground {
 /* height: 80px;
 left: 0;
 top: 0;
 position: absolute;
 padding: 15px;
 width: 100%;
 display: block;
 z-index: 2;
 background-color: white; */

 /* background-image: url('/image/Desktop-Navbar_Christmas-Rev2.png'); */
 /* Mobile Style to Desktop but Modernisasi */
 padding: 20px;
 position: absolute;
 top: 20px;
 left: 48%;
 transform: translateX(-52%);
 width: 38%;
 height: 70px;
 display: block;
 z-index: 2;
 background-image: url('/image/Desktop-Navbar_LunarNewYear.png');
 /* background-image: url('/image/Desktop-Navbar_Christmas.png'); */
 /* background-color: white; */
 /* Desktop Style on Desktop */
 /* background-image: url('/image/Tablet-Navbar_Christmas-Rev4.png'); */
 /* Tablet Style on Desktop */
 border-radius: 20px;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
}

.navbar .titleWithBackground.desktop {
 background-image: url('/image/Desktop-Navbar_Ramadhan.png');
 /* background-image: url('/image/Desktop-Navbar_LunarNewYear.png'); */
 /* background-image: url('/image/Desktop-Navbar_Christmas.png'); */
 /* Desktop Style on Desktop */
}

.navbar .titleWithBackground.tablet {
 background-image: url('/image/Tablet-Navbar_Christmas-Rev4.png');
 /* Tablet Style on Desktop */
}

.navbar .titleWithBackground.hp {
 background-image: url('/image/Desktop-Navbar_Christmas-Rev2.png');
 /* Mobile Style to Desktop but Modernisasi */
}

.navbar .titleWithBackground-tablet,
.navbar .titleWithBackground-mobile {
 display: none !important;
}

.navbar .cover-screen-mobile {
 display: none;
 background-color: var(--navbarLight);
}

.navbar {
 position: absolute;
}

.navbar.fixed {
 position: fixed;
 /* top: 0; */
 animation: slideDownNavbar 0.5s forwards;
}

.corner-decor.fixed {
 position: fixed;
 animation: slideDownCornerDecor 0.5s forwards;
}

.corner-decor.unfixed {
 animation: slideUpNavbar 0.5s forwards;
}

.navbar.unfixed {
 animation: slideUpNavbar 0.5s forwards;
}

.navbar.stayOpenFlex {
 top: 0px !important;
}

@keyframes slideDownCornerDecor {
 from {
  top: -100px;
 }

 to {
  top: revert-layer;
 }
}

@keyframes slideDownNavbar {
 from {
  top: -100px;
 }

 to {
  top: 0;
 }
}

@keyframes slideUpNavbar {
 from {
  top: 0;
 }

 to {
  top: -100px;
 }
}

.close-menu {
 display: none;
}

.navbar h3 {
 color: #222;
 text-decoration: none;
 transition: all 0.3s ease;
 /* margin-left: 80px; */
}

.menu-toggle {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 padding: 10px;
}

.menu-toggle span {
 display: block;
 width: 30px;
 height: 3px;
 background-color: #333;
 margin: 5px auto;
 transition: background-color 0.3s ease;
}

.menu-toggle.open span:nth-child(1) {
 transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.open span:nth-child(2) {
 opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
 transform: rotate(45deg) translate(-5px, -6px);
}

.navbar nav ul {
 display: flex;
 list-style: none;
 padding: 0;
 margin: 0;
 transition: all 0.3s ease;
}

.navbar nav ul li {
 display: inline;
 margin-left: 20px;
 transition: all 0.3s ease;
}

.navbar nav ul li:first-child {
 margin-left: 0;
}

.navbar nav ul li a {
 color: white;
 text-decoration: none;
 transition: all 0.3s ease;
}

.navbar nav ul li a:hover {
 text-decoration: underline;
}

h1 {
 margin: 0;
 font-size: 3em;
}

section {
 padding: 40px 20px;
}

#usaha h3,
#photos h3,
#videos h3.title,
#kelompok-section h3 {
 margin-top: 0;
 font-size: 2em;
 color: #333;
 border-bottom: 3px solid #ff7f50;
 /* Highlight color */
 padding-bottom: 10px;
}

h2 {
 margin-top: 0;
 font-size: 2.5em;
 color: #333;
 border-bottom: 3px solid #ff7f50;
 /* Highlight color */
 padding-bottom: 10px;
}

p {
 font-size: 1.2em;
 line-height: 1.6;
}

/* CLASS LEADER TREE */
#classLeader h2 {
 text-align: center;
}

.tree {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 margin: 20px;
}

.tree ul {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 padding: 20px 0;
 position: relative;
}

.tree li {
 float: left;
 text-align: center;
 list-style-type: none;
 position: relative;
 padding: 20px 5px 0 5px;
 transition: all 0.5s;
}

.dark-mode .tree li::before,
.dark-mode .tree li::after {
 border-top: 1px solid #ccc;
}

.tree li::before,
.tree li::after {
 content: '';
 position: absolute;
 top: 0;
 right: 50%;
 border-top: 1px solid black;
 width: 50%;
 height: 20px;
}

.dark-mode .tree li::after {
 border-left: 1px solid #ccc;
}

.tree li::after {
 right: auto;
 left: 50%;
 border-left: 1px solid black;
}

.tree li:only-child::after,
.tree li:only-child::before {
 display: none;
}

.tree li:only-child {
 padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
 border: 0 none;
}

.dark-mode .tree li:last-child::before {
 border-right: 1px solid #ccc;
}

.tree li:last-child::before {
 border-right: 1px solid black;
 border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
 border-radius: 5px 0 0 0;
}

.dark-mode .tree ul ul::before {
 border-left: 1px solid #ccc;
}

.tree ul ul::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 border-left: 1px solid black;
 width: 0;
 height: 20px;
}

.dark-mode .tree li a {
 color: #ccc;
}

.tree li a {
 border: 1px solid black;
 padding: 5px 10px;
 text-decoration: none;
 color: black;
 font-family: Arial, Verdana, Tahoma;
 font-size: 11px;
 display: inline-block;
 border-radius: 5px;
 transition: all 0.5s;
}

.tree li a img {
 filter: grayscale(65%);
 display: block;
 margin: 0 auto 5px;
 width: 50px;
 height: 50px;
 object-fit: cover;
 /* border-radius: 6%; */
 border-radius: 50%;
}

.tree li a:hover,
.tree li a:hover+ul li a {
 background: #c8e4f8;
 color: #000;
 border: 1px solid #94a0b4;
}

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
 border-color: #94a0b4;
}

/* Usaha section */
/* Style dasar untuk tabel */
table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 20px;
 font-family: Arial, sans-serif;
}

/* Style untuk header tabel */
th {
 background-color: #513e3e;
 padding: 12px;
 text-align: left;
 border: 1px solid #ddd;
}

/* Style untuk isi tabel */
td {
 padding: 10px;
 border: 1px solid #ddd;
}

/* Style untuk link Instagram */
td a {
 color: #8ec0f7;
 text-decoration: none;
 font-weight: bold;
}

td a:hover {
 text-decoration: underline;
}

/* Membuat daftar anggota berurutan dengan angka otomatis */
.numbered-list {
 counter-reset: list-number;
 padding-left: 20px;
}

.numbered-list li {
 list-style: none;
 counter-increment: list-number;
 position: relative;
 padding-left: 25px;
}

.numbered-list li::before {
 content: counter(list-number) ". ";
 position: absolute;
 left: 0;
 font-weight: bold;
}

/* Photo gallery styles */
#photos {
 text-align: center;
}

#photos h2,
#photos h3 {
 text-align: left;
 margin-bottom: 0px;
}

#photos a {
 display: inline-block;
 margin-top: 20px;
 text-decoration: none;
 color: #333;
 font-size: 1.2em;
 transition: all 0.3s ease;
}

#photos a:hover {
 transform: scale(1.05);
 color: red;
}

.photo-gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.photo-wrapper {
 position: relative;
 display: inline-block;
}

.photo-wrapper h4 {
 position: absolute;
 top: 10px;
 /* Bisa disesuaikan, posisi vertikal */
 left: 50%;
 transform: translateX(-50%);
 color: #ffffff;
 /* Ubah jika ingin warna lain */
 text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
 font-size: 1em;
 z-index: 1;
 white-space: nowrap
}

.photo-wrapper img {
 display: block;
 width: 100%;
 height: auto;
}

.photo-wrapper .archived-text {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 color: white;
 font-size: 14px;
 background-color: rgba(0, 0, 0, 0.7);
 padding: 3px 6px;
 border-radius: 3px;
 z-index: 2;
 transition: all 0.5s ease;
}

.photo-gallery img {
 width: 300px;
 height: 200px;
 margin: 10px;
 border-radius: 10px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 transition: transform 0.3s ease;
}

.photo-wrapper img#potret-pakFariz,
.loading-image {
 bottom: calc(100% - 280px) !important;
}

.photo-wrapper .loading-image {
 margin: 8px;
 border-radius: 15px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: calc(100% - 225px);
 background-color: rgba(0, 0, 0, 0.5);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
 /* Above the image */
}

.photo-wrapper .loading-image:before {
 content: '';
 width: 50px;
 height: 50px;
 border: 6px solid #fff;
 border-top: 6px solid transparent;
 border-radius: 50%;
 animation: spin 1s linear infinite;
 /* Loading spin animation */
}

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

/* .photo-gallery img:hover {
 transform: scale(1.05);
} */

.photo-wrapper:hover img,
.photo-wrapper:hover .archived-text-photo {
 transform: scale(1.05);
}

#landscape-buNovi {
 width: 350px;
}

#pano-marchello {
 width: 700px;
}

#ultrawide-0_5 {
 width: 350px;
}

.photo-wrapper .archived-text-photo.featSomeone {
 font-size: 11px;
 max-width: 100%;
 white-space: nowrap;
 right: auto;
 /* overflow: hidden; */
 /* text-overflow: ellipsis; */
}

.photo-wrapper:hover img#landscape-buNovi+.archived-text-photo {
 transform: scale(1.05) translateX(25%);
 bottom: calc(60px + 53%);
 font-size: 9px;
}

.photo-wrapper:hover img#pano-marchello+.archived-text-photo {
 transform: scale(1.05) translateX(75%);
}

.photo-wrapper:hover .archived-text-photo {
 transform: scale(1.05) translateX(-15%);
}

.photo-wrapper:hover .loading-image.hidden+img:not(#kotak-pakFariz, #landscape-pakFariz, #potrait-pakFariz, #kamera-photobooth, #ultrawide-0_5, #pano-marchello, #landscape-buNovi)+.archived-text-photo {
 bottom: 220px;
}

.photo-wrapper img:not(#kotak-pakFariz, #landscape-pakFariz, #potrait-pakFariz, #kamera-photobooth, #ultrawide-0_5, #pano-marchello, #landscape-buNovi)+.archived-text-photo {
 bottom: calc(100% - 220px);
 /* Keep Down Footer! */
}

.photo-wrapper:hover .archived-text-photo {
 bottom: calc(60px + 53%);
 /* Let Footer up */
 border-radius: 10px;
}

.photo-wrapper:hover #kotak-pakFariz+.archived-text {
 bottom: 220px;
}

.photo-wrapper:hover #landscape-pakFariz+.archived-text {
 bottom: calc(100% - 60px);
 /* bottom: 220px; */
}

.photo-wrapper:hover #kamera-photobooth+.archived-text {
 bottom: calc(60px + 53%);
}

.photo-wrapper:hover #potrait-pakFariz+.archived-text {
 bottom: 220px;
}

#landscape-pakFariz+.archived-text {
 /* bottom: 60px; */
 /* bottom: 20%; */
 /* transform: translateY(50%); */
 bottom: calc(100% - 200px);
}

#kotak-pakFariz+.archived-text {
 bottom: 60px;
}

#potrait-pakFariz+.archived-text {
 left: 37%;
}

/* Video Gallery */
.video-gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.video-wrapper {
 width: 300px;
 height: 170px;
 margin: 10px;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 transition: transform 0.3s ease;
 position: relative;
}

.video-wrapper:hover {
 transform: scale(1.05);
}

.video-wrapper:hover .archived-text-vidwrapper {
 transform: translateX(-166%);
}

.thumbnail {
 /* width: 100px; */
 /* height: 100px; */
 /* margin: 10px; */
 border-radius: 5px;
 overflow: hidden;
}

.thumbnail img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: all 0.3s ease;
}

/* .thumbnail:hover img { */
/* transform: scale(3); */
/* } */

.archived-text-vidwrapper {
 position: absolute;
 left: 50%;
 transform: translateX(66%);
 color: white;
 font-size: 10px;
 background-color: rgba(0, 0, 0, 0.7);
 padding: 5px 10px;
 border-radius: 5px;
 /* z-index: 10; */
 transition: all 0.5s ease-in-out;
}

.video-titleText {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 text-align: center;
 width: 100%;
 color: white;
 text-shadow:
  -1px -1px 0 black,
  1px -1px 0 black,
  -1px 1px 0 black,
  1px 1px 0 black;
}

video.video-player {
 width: 100%;
 height: 100%;
 display: block;
}

.lengthVid.small {
 font-size: 0.5rem;
}

.lengthVid {
 position: absolute;
 top: 2px;
 right: 5px;
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 font-size: 12px;
 border-radius: 5px;
 /* z-index: 1; */
}

.lengthVid.rightMid {
 top: 55px;
 right: 5px;
}

.controls.small {
 gap: 2px;
 right: auto;
 left: 15px;
 /* padding: 10px 10px; */
 font-size: 0.5rem;
}

.controls {
 position: absolute;
 bottom: 10px;
 left: 10px;
 right: 10px;
 display: flex;
 justify-content: center;
 gap: 10px;
}

.play-pause {
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 border: none;
 padding: 10px;
 cursor: pointer;
 font-size: 1em;
 border-radius: 5px;
}

.play-pause:hover {
 background-color: rgba(0, 0, 0, 0.9);
}

.mute-toggle {
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 border: none;
 padding: 10px;
 cursor: pointer;
 font-size: 1em;
 border-radius: 5px;
 transition: background-color 0.3s;
}

.mute-toggle:hover {
 background-color: rgba(0, 0, 0, 0.9);
}

.mute-toggle.lock:hover {
 background-color: rgba(255, 0, 0, 0.9);
}

/* Container and Cards */
#kelompok-section p {
 text-align: center;
 margin-top: -19px;
 font-size: 0.9rem;
}

.kelompok-container {
 margin-top: 20px;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
 gap: 20px;
}

.kelompok-card {
 border-radius: 10px;
 border: 2px solid black;
 background-color: #5f4e4e00;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
 transition: transform 0.3s ease-in-out, box-shadow 0.3s;
 overflow: hidden;
 /* cursor: pointer; */
}

.kelompok-card img {
 /* width: 40%; */
 height: 500px;
 object-fit: cover;
 border-radius: 5px;
 margin-bottom: 10px;
}

.card-header {
 margin-bottom: 5px;
 margin-top: -3px;
 text-align: right;
 font-size: 12px;
 font-style: italic;
 align-self: flex-end;
 color: rgb(255, 255, 255);
}

.card-content {
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 color: rgb(255, 246, 246);
}

/* Hover Effect */
.kelompok-card:hover {
 transform: scale(1.05);
 /* Membesarkan 5% */
 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
 /* Menambahkan bayangan */
}

/* Quote container styles */
.quote-container {
 display: flex;
 flex-direction: column;
 align-items: center;
}

blockquote {
 font-size: 1.5em;
 font-style: italic;
 margin: 20px 0;
 color: #555;
}

/* Social links styles */
.social-links {
 display: flex;
 justify-content: center;
 margin-top: 20px;
}

.social-links a {
 display: inline-block;
 margin: 0 20px;
 font-size: 1.5em;
 color: #333;
 text-decoration: none;
 transition: color 0.3s ease;
}

.social-links a:hover {
 color: #007bff;
}

#instagram:hover {
 color: #E1306C;
}

/* Footer */
footer {
 margin: 0;
 position: fixed;
 left: 0;
 bottom: 0px;
 width: 100%;
 background-color: #333;
 color: white;
 text-align: center;
 font-size: 10px;
 /* font-size: 1em; */
 border-top: 1px solid white;
 z-index: 3;
}

footer span.bg-pink {
 background-color: rgba(177, 109, 120, 0.674);
}

/* marsel's projects */

/* Fullscreen Video */

#fullscreen-video {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 20;
 flex-direction: column;
}

#fullscreen-video video {
 max-width: 90%;
 max-height: 90%;
 border-radius: 12px;
}

.lyric-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 90%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: white;
 font-size: 1.2rem;
 text-align: center;
 pointer-events: none;
 /* Prevent clicks from affecting lyrics */
}

.lyric-left,
.lyric-right {
 /* max-width: 45%; */
 word-wrap: break-word;
 white-space: pre-wrap;
 background-color: transparent;
 /* Default transparent */
 padding: 0.5rem 1rem;
 font-size: 1rem;
 border-radius: 8px;
 transition: background-color 0.3s ease-in-out;
}

.lyric-left {
 text-align: left;
 margin-right: auto;
 /* Pushes to the left */
}

.lyric-right {
 text-align: right;
 margin-left: auto;
 /* Pushes to the right */
}

.lyric-left:empty,
.lyric-right:empty {
 display: none;
 /* Hide if no content */
}

.lyric-left:not(:empty),
.lyric-right:not(:empty) {
 background-color: rgba(0, 0, 0, 0.5);
 /* Show background when there’s content */
}

.fullscreen-controls {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
 margin-top: 20px;
}

.overlay-text {
 position: absolute;
 bottom: 10px;
 right: 10px;
 color: white;
 font-size: 16px;
 background-color: rgba(0, 0, 0, 0.5);
 padding: 5px 10px;
 border-radius: 5px;
 display: none;
}

.archived-text,
.timeVideo {
 position: absolute;
 color: white;
 font-size: 14px;
 background-color: rgba(0, 0, 0, 0.5);
 padding: 5px;
 border-radius: 3px;
 transition: all 0.3s ease;
}

.timeVideo {
 z-index: 10;
}

.archived-text {
 bottom: 10px;
 right: 10px;
}

.fullscreen-video .archived-text:hover {
 color: rgb(0, 0, 0);
 background-color: rgba(255, 255, 255, 0.7);
}

.watched {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 position: absolute;
 font-size: 14px;
 background-color: rgba(0, 0, 0, 0.5);
 padding: 5px;
 border-radius: 3px;
 display: none;
}

.fullscreen-controls button.fullscreen-play-pause {
 background-color: rgba(0, 0, 0, 0.7);
 border: none;
 color: white;
 padding: 10px 20px;
 font-size: 16px;
 cursor: pointer;
 border-radius: 5px;
 transition: background 0.3s;
}

.fullscreen-controls button.fullscreen-play-pause:hover {
 background-color: rgba(0, 0, 0, 0.9);
}

.resolution-selector {
 position: absolute;
 bottom: 65px;
 /* top: 10px; */
 /* right: 10px; */
 right: calc(100% - 920px);
 background-color: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 5px 10px;
 font-size: 14px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 z-index: 1000;
}

.resolution-selector:hover {
 background-color: rgba(0, 0, 0, 0.9);
}

input[type="range"].fullscreen-timeline,
input[type="range"].fullscreen-volume {
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 8px;
 background: #ddd;
 outline: none;
 border-radius: 5px;
 margin: 10px 0;
 transition: background 0.3s;
 background-image: linear-gradient(#4caf50, #4caf50);
 background-size: 0% 100%;
 background-repeat: no-repeat;
}

input[type="range"].fullscreen-timeline::-webkit-slider-thumb,
input[type="range"].fullscreen-volume::-webkit-slider-thumb,
input[type="range"].fullscreen-timeline::-moz-range-thumb,
input[type="range"].fullscreen-volume::-moz-range-thumb,
input[type="range"].fullscreen-timeline::-ms-thumb,
input[type="range"].fullscreen-volume::-ms-thumb {
 width: 20px;
 height: 20px;
 background: #4caf50;
 cursor: pointer;
 border-radius: 50%;
 transition: background 0.3s;
}

input[type="range"].fullscreen-timeline::-webkit-slider-thumb:hover,
input[type="range"].fullscreen-volume::-webkit-slider-thumb:hover,
input[type="range"].fullscreen-timeline::-moz-range-thumb:hover,
input[type="range"].fullscreen-volume::-moz-range-thumb:hover,
input[type="range"].fullscreen-timeline::-ms-thumb:hover,
input[type="range"].fullscreen-volume::-ms-thumb:hover {
 background: #45a049;
}

.fullscreen-timeline {
 width: 300px;
}

.fullscreen-volume {
 width: 100px;
}

.loading-spinner,
.loading-spinner-videoWrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50px;
 height: 50px;
 margin-top: -25px;
 margin-left: -25px;
 border: 5px solid rgba(0, 0, 0, 0.1);
 border-radius: 50%;
 border-top-color: #3498db;
 animation: spin 0.6s linear infinite;
 z-index: 10;
 /* Make sure it's above the video */
}

/* Gelembung Angin */
.wind-bubble-container {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none; /* Allows clicks to pass through */
 overflow: hidden; /* Ensures bubbles don't go outside */
 z-index: 9999 !important; /* Place it behind other content */
}

.wind-bubble {
 position: absolute;
 background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
 border-radius: 50%;
 opacity: 0;
 animation: riseAndFade var(--animation-duration, 10s) infinite ease-in; /* Gunakan variabel CSS untuk durasi jika diperlukan, tapi utamakan dari JS */
 /* Deklarasikan properti custom di sini sebagai fallback atau initial */
 /* --initial-translateY: 0px;  */
 z-index: 9999 !important; /* Place it behind other content */
}

@keyframes riseAndFade {
 0% {
     transform: translateY(var(--initial-translateY)) scale(0); /* Gunakan custom property di sini */
     opacity: 0;
 }
 10% {
     opacity: 1;
     transform: translateY(calc(var(--initial-translateY) - 10vh)) scale(1); /* Sesuaikan awal naiknya */
 }
 80% {
     opacity: 0.5;
 }
 100% {
     transform: translateY(-100vh) scale(1.2);
     opacity: 0;
 }
}

.dark-mode .wind-bubble {
 background-color: rgba(255, 255, 255, 0.1); /* Lighter bubbles in dark mode */
}

/* Sisa CSS Anda */
/* ... */

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

/* LAPTOP SCREEN */
@media screen and (min-width: 1213px) {
 .archived-text-vidwrapper {
  bottom: 0px;
 }

 .timeVideo {
  /* bottom: 30px; */
  bottom: 50px;
 }

 /* .watched {
  top: 10px;
 } */

 .watched::before,
 .watched::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #000;
  margin: 0 10px;
 }

 .watched span {
  white-space: nowrap;
 }

 .parallax-1,
 .parallax-2 {
  padding-bottom: 400px;
 }
}

/* SEMI TABLET */
@media only screen and (max-width: 800px) and (min-width: 480px) {

 .parallax-1,
 .parallax-2 {
  padding-bottom: 100px;
 }
}

@media only screen and (max-width: 768px) {
 .tree li {
  width: 90%;
 }
}

@media only screen and (min-width: 480px) and (max-width: 1213px) {
 .timeVideo {
  top: 0;
 }

 .navbar {
  position: absolute;
 }

 /* .navbar.fixed {
  position: fixed;
  /* top: 0;
  animation: slideDown 0.5s forwards;
 }

 .navbar.unfixed {
  animation: slideUp 0.5s forwards;
 } */

 @keyframes slideDown {
  from {
   top: -100px;
  }

  to {
   top: 0;
  }
 }

 @keyframes slideUp {
  from {
   top: 0;
  }

  to {
   top: -100px;
  }
 }
}

@media print {
 body * {
  display: none !important;
 }
}