/* === Global Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/* From Uiverse.io by AnthonyPreite */ 
.card67-inner{
  width: 160px;
  height: 40px;
  left:20px;
  position: relative;
  justify-content: center;
  align-items: center;
  left: 0;

}

.card67 {
  position: relative;
  left: 1px;
}

.card67 {
  --flow-space: 0.5em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  flex: 1 1 14rem;
  padding: 1.5em 2em;
  display:flex;
  width: 100%;
  height:100%;
  text-align: center;
  position:relative;
  align-items: center;
  gap: 1.25em;
  color: #eceff1;
  background-color: #2b2b2b;
  border: 1px solid #eceff133;
  border-radius: 15px;
  margin-bottom: 20px;
}

.card67:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}



.card67-price {
  font-size: 1.6em;
  font-weight: 700;
  
}

.flow > * + * {
  margin-top: var(--flow-space, 1.25em);
}



.card67:hover {
  --lightness: 80%;
  background: #ffffff80;
  color: #000;
  outline: 1px solid rgb(255, 255, 255);
  box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
  transition: all ease-in-out 0.3s;
}



/* From Uiverse.io by Cksunandh */ 
.m2 {
  position: relative;
  margin-top: 30px;
  border-radius: 20px;
  margin-left: 30px;
  width: 40%; /* Reduced size */
  height: 50px; /* Reduced size */
  background: linear-gradient(135deg, #1e1e24 10%, #050505 60%);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: gradient-shift 5s ease-in-out infinite; /* Faster animation */
  background-size: 200% 200%; /* Gradient shift */
}



.m2::before,
.m2::after {
  --size: 5px; /* Reduced glow size */
  content: "";
  position: absolute;
  border-radius: 20px;
  top: calc(var(--size) / -2);
  left: calc(var(--size) / -2);
  width: calc(100% + var(--size));
  height: calc(100% + var(--size));
  background: radial-gradient(circle at 0 0, hsl(27deg 93% 60%), transparent),
    radial-gradient(circle at 100% 0, #00a6ff, transparent),
    radial-gradient(circle at 0 100%, #ff0056, transparent),
    radial-gradient(circle at 100% 100%, #6500ff, transparent);
}

.m2::after {
  --size: 2px; /* Reduced inner glow size */
  z-index: -1;
}

.m2::before {
  --size: 10px; /* Reduced outer glow size */
  z-index: -2;
  filter: blur(2vmin); /* Reduced blur */
  animation: blur-animation 3s ease-in-out alternate infinite; /* Faster blur animation */
}

/* Faster blur animation */
@keyframes blur-animation {
  to {
    filter: blur(3vmin);
    transform: scale(1.05);
  }
}

/* Faster gradient animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/**/
.minfo {
  position: relative;
  
  margin: 30px auto;
  width: 90%;
  
  }
  .info, .info2, info3, .info4 {
  margin-top: 15px;
  padding: 15px 25px;

}


/* From Uiverse.io by joe-watson-sbf */ 
.card31 {
  margin: 40px 10%;
  width: 80%;
  height: 254px;
  border-radius: 4px;
  background: #1f1f1f;
  display: flex;
  gap: 5px;
  padding: .4em;
}

.card31 p31 {
  height: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  transition: all .5s;
  background: #1f1f1f;
  border: 1px solid #ff5a91;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card31 p31:hover {
  flex: 4;
}

.card31 p31 span {
  min-width: 16em;
  padding: .5em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all .5s;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: .1em;
}

.card31 p31:hover span {
  transform: rotate(0);
}
/* From Uiverse.io by ilkhoeri */ 
.wrapper {
  margin:5%;
  width: 90%;
  height: 400px;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wrapper img{
  margin:0
  
  
}
.inner {
  --w: 100px;
  --h: 150px;
  --translateZ: calc((var(--w) + var(--h)) + 0px);
  --rotateX: -15deg;
  --perspective: 1000px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 25%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  z-index: 8000;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
  animation: rotating 20s linear infinite; /* */
}
@keyframes rotating {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(1turn);
  }
}

.card3 {
  position: absolute;
  border: 2px solid rgba(var(--color-card));
  border-radius: 12px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
    translateZ(var(--translateZ));
}

.img2 {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  object-fit: cover;
  background: #0000
    radial-gradient(
      circle,
      rgba(var(--color-card), 0.2) 0%,
      rgba(var(--color-card), 0.6) 80%,
      rgba(var(--color-card), 0.9) 100%
    );
}
.img2 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* gambar isi penuh tanpa herot */
  object-position: center;
  display: block;
}


body {
  /* Basic dimensions and centering */
 font-family: Arial, sans-serif; /* Contoh: Font lalai untuk semua teks lain */
  line-height: 1.6;
  
 margin: 0;
 padding: 0;
  height: 100%;
  justify-content: center;
  align-items: center;

  /* Dark mode colors and gradient */
  background: #121212; /* Fallback for browsers that don't support gradients */
  background: linear-gradient(
    135deg,
    #121212 25%,
    #1a1a1a 25%,
    #1a1a1a 50%,
    #121212 50%,
    #121212 75%,
    #1a1a1a 75%,
    #1a1a1a
  );
  background-size: 40px 40px;

  /* Animation */
  animation: move 4s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}
/* === Section Styling === */
main .page {
  
  width: 80%;
  margin: 10% 10%;
  justify-content: center;
  align-items: center;
}
main .hero {
 width: 100vw; 
 margin: 0;  
}
main h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #ffffff; 
  text-align: center;
}
main .p1{
  font-family: 'Stack Sans Notch', sans-serif;
  font-weight: 700;
  margin-top:7px;
  margin-bottom:2px;
  color: white;
  font-size: 16px; 
}
main .p2{
   font-family: 'Stack Sans Notch', sans-serif;
  font-weight: 700;
  margin: 4px 0;
  color: white;
  font-size: 16px;
  
}
main .p3{
   font-family: 'Stack Sans Notch', sans-serif;
  font-weight: 700;
  margin:2px 0 ;
  color: white;
  left: 30px;
  font-size: 16px;
}
main .p4{
   font-family: 'Stack Sans Notch', sans-serif;
  font-weight: 700;
  margin-top: 2px;
  margin-bottom:10px;
  left:30px;
  color: white;
  font-size: 16px;
}
main span{
  color: white;
  font-size: 20px;
}
.subtitle {
  text-align: center;
  margin-bottom: 10px;
  color: #666;
}
/* From Uiverse.io by gharsh11032000 */ 
.card61 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  box-shadow: 0 0 0 5px #ffffff80;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card61 img {
  width: 100%;
  height: 100%;
  fill: #333;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card61:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}

.card61-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #1a1a1a;
  transform: rotateX(-90deg);
  transform-origin: bottom;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card61:hover .card61-content {
  transform: rotateX(0deg);
}

.card61-t {
  margin: 0;
  font-size: 24px;
  color: #ffffff;
  font-weight: 700;
}

.card61:hover img {
  scale: 0;
}

.card61-d {
  margin: 10px 0 0;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.4;
}



/* From Uiverse.io by M4rco592 */ 
.gbutton {
  position: relative;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.gbutton:hover {
  transform: scale(1.03);
}

.gbutton::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57,
    #ff9ff3,
    #ff6b6b
  );
  z-index: -2;
  filter: blur(10px);
  transform: rotate(0deg);
  transition: transform 1.5s ease-in-out;
}

.gbutton:hover::before {
  transform: rotate(180deg);
}

.gbutton::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: black;
  border-radius: 47px;
  z-index: -1;
  filter: blur(5px);
}

.gtext {
  color: transparent;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57,
    #ff9ff3,
    #ff6b6b
  );
  background-clip: text;
  filter: hue-rotate(0deg);
}

.gbutton:hover .gradient-text {
  animation: hue-rotating 2s linear infinite;
}

.gbutton:active {
  transform: scale(0.99);
}

@keyframes hue-rotating {
  to {
    filter: hue-rotate(360deg);
  }
}

/* From Uiverse.io by Spacious74 */ 


.outer {
  margin: 0;
  width: 100%;
  height: 100vh;
  border-radius: 10px;
  padding: 1px;
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
  position: relative;
}

.dot {
  width: 5px;
  aspect-ratio: 1;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px #ffffff;
  border-radius: 100px;
  z-index: 2;
  right: 10%;
  top: 10%;
  animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%,
  100% {
    top: 10%;
    right: 10%;
  }
  25% {
    top: 10%;
    right: calc(100% - 35px);
  }
  50% {
    top: calc(100% - 30px);
    right: calc(100% - 35px);
  }
  75% {
    top: calc(100% - 30px);
    right: 10%;
  }
}

.card {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  border: solid 1px #202222;
  background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  color: #fff;
}
.ray {
  width: 220px;
  height: 45px;
  border-radius: 100px;
  position: absolute;
  background-color: #c7c7c7;
  opacity: 0.4;
  box-shadow: 0 0 50px #fff;
  filter: blur(10px);
  transform-origin: 10%;
  top: 0%;
  left: 0;
  transform: rotate(40deg);
}

.card .text {
  font-weight: bolder;
  
  margin-bottom: 10px;
  font-size: 4rem;
  background: linear-gradient(45deg, #000000 4%, #fff, #000);
  background-clip: text;
  color: transparent;
}

.line {
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #2c2c2c;
}
.topl {
  top: 10%;
  background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
}
.bottoml {
  bottom: 10%;
}
.leftl {
  left: 10%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, #747474 30%, #222424 70%);
}
.rightl {
  right: 10%;
  width: 1px;
  height: 100%;
}

/* From Uiverse.io by srinivasaiml */ 
.pill-radio-container {
  --main-color: #ff6ec4;
  --secondary-color: #7873f5;
  --text-color: #ddd;
  --pill-bg: #1a1a1a;
  --total-options: 5;

  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  z-index: 9995;
  position: fixed;
  background: var(--pill-bg);
  border-radius: 3rem;
  padding: 0.5rem;
  box-shadow: 0 0 18px #000 inset;
  justify-content: space-between;
  overflow: hidden;
}

.pill-radio-container input {
  display: none;
}

.pill-radio-container label {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0;
  border-radius: 3rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-color);
  transition: color 0.3s ease-in-out;
  z-index: 2;
}

.pill-radio-container input:checked + label {
  color: #fff;
}

.pill-radio-container label:hover {
  color: var(--main-color);
}

.pill-indicator {
  position: absolute;
  bottom: 5px;
  left: 0;
  height: 4px;
  width: calc(100% / var(--total-options));
  background: linear-gradient(to right, var(--main-color), var(--secondary-color));
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
}

/* Sliding effect ikut pilihan */
#pill-hero:checked ~ .pill-indicator { 
  transform: translateX(0%) ;
}

#pill-bio:checked ~ .pill-indicator {
  transform: translateX(100%);
}
#pill-owner:checked ~ .pill-indicator {
  transform: translateX(200%);
}
#pill-info:checked ~ .pill-indicator {
  transform: translateX(300%);
}
#pill-kuiz:checked ~ .pill-indicator {
  transform: translateX(400%);
}



/* From Uiverse.io by bhaveshxrawat */ 

.package11 {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  height: 50px;
  background: #07182E;
  position: relative;
  display: flex;
  z-index: 9000;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
}

.package11 h11 {
  z-index: 9000;
  color: white;
  
  font-size: 2.2em;
}

.package11::before {
  content: '';
  position: absolute;
  width: 100%;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  height: 390%;
  animation: rotBGimg 3s linear infinite;
  transition: all 0.2s linear;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.package11::after {
  content: '';
  position: absolute;
  background: #07182E;
  ;
  inset: 5px;
  border-radius: 13px;
}  
/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */




/* From Uiverse.io by S4tyendra */ 
.neon-button {
  position: relative;
  padding: 0.75em 1.5em;
  margin-top: 15px;
  margin-left: 10px;
  height: fit-content;
  width: fit-content;
  border-radius: 0.625em;
  border: 2px solid #ff00ff;
  font-size: 0.938em;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.125em;
  background: transparent;
  color: #9900ff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;
  transition: all 0.3s ease-in-out;
}

.neon-button:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 40px 10px rgba(0, 255, 255, 0.5);
  color: #ffffff;
}

.neon-button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  box-shadow: 0 0 50px 30px #00ffff;
  transform: skewX(-20deg);
  transition: all 0.5s ease-in-out;
}

.neon-button:hover::before {
  animation: neon-shine 0.6s 0s linear;
}

@keyframes neon-shine {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

.neon-button:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 0 transparent;
  transition: all 0.2s ease-in;
}

/* From Uiverse.io by Lakshay-art */ 
/* This is an example, feel free to delete this code */
.tooltip-container {
  /* --background: #22d3ee; */
  position: fixed;
  background: var(--background);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  padding: 0.7em 1.8em;
  margin-bottom: 40px;
}

.bg {
  position: fixed;
  right: 15%;
  bottom: 15%;
  z-index: 9999;
}

.tooltip {
  position: absolute;
  bottom:10%;
  right: 5%;
  width: 160px;
  height: 100px;
  transform: translateX(-30%);
  padding: 0.5em 1em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  background: url("data:image/jpeg;base64,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");
  border-radius: 30px;
  background-size: cover;
  box-shadow: inset 0px 8px 9px #182218, 5px 8px 0px #314328;
  filter: drop-shadow(60px 60px 6px #18221888);
  border: 10px solid #3f5641ee;
  z-index: 9998;
  animation: float 2s infinite;
}

.tooltip::before {
  position: fixed;
  content: "";
  height: 20px;
  width: 20px;
  bottom: -22px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: #e9f6f4;
  border: 10px solid #3f5641ee;
  border-left: none;
  border-top: none;
  border-radius: 5px;
  box-shadow: 10px 4px 0px #314328;
}

.tooltip-container:hover .tooltip {
  bottom: 40px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.leaf1 {
  top: -30px;
  left: -60px;
}
.leaf2 {
  top: -30px;
  left: -60px;
}
.leaf3 {
  top: -30px;
  left: -60px;
}
.leaf4 {
  top: -30px;
  left: -60px;
}
.tooltip-container:hover .leaf1 {
  rotate: z 20deg;
}
/* .tooltip-container:hover .leaf2{
rotate: z 20deg;
} */
.tooltip-container:hover .leaf3 {
  rotate: z -20deg;
}
.tooltip-container:hover .leaf4 {
  rotate: z 40deg;
}

.leaf {
  width: 60px;
  height: 40px;
  position: absolute;
  transform-origin: 100% 100%;
  transition: rotate 0.5s 0.2s linear;
  /* border: px solid #314328; */
  border-radius: 0 100%;
  background-image: linear-gradient(to right, #b4c7b3, #314328);
}
.icon {
  /* box-shadow: 60px 60px 6px #18221888,120px 60px 6px #18221888; */
  transform: translateX(-50%);
  filter: drop-shadow(60px 60px 6px #18221888);
}
.text99 {
  z-index: 9997;
  font-size: 21px;
  color: #000000;
  font-weight: bolder;
  margin: auto;
  width: fit-content;
  padding-top: 25px;
  padding-left: 18px;
  filter: drop-shadow(0px 0px 3px #ffffff);
}
@keyframes float {
  0% {
    top: -120px;
  }
  50% {
    top: -125px;
  }
  100% {
    top: -120px;
  }
}

/* From Uiverse.io by StealthWorm */ 
.btn5 {
  display: flex;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  width: 13rem;
  overflow: hidden;
  height: 3rem;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(
      137.48deg,
      #ffdb3b 10%,
      #fe53bb 45%,
      #8f51ea 67%,
      #0044ff 87%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

strong {
  z-index: 2;
  font-family: "Avalors Personal Use";
  font-size: 12px;
  letter-spacing: 5px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn5:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn5:hover {
  transform: scale(1.1);
}

.btn5:active {
  border: double 4px #fe53bb;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn5:active .circle {
  background: #fe53bb;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-135rem);
  }
}

@keyframes animStarRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes gradient_301 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse_3011 {
  0% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* From Uiverse.io by codebykay101 */ 
.container2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container2 .glass {
  position: relative;
  width: 25%;
  
  height: 180px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -30px;
  backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
}

.container2:hover .glass {
  transform: rotate(0deg);
  margin: 0 20px;
}

.container2 .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container2 .glass img91 {
  margin:20px;
  
}
/* From Uiverse.io by gharsh11032000 */ 
.card99 {
  position: relative;
  width: 190px;
  height: 254px;
  background-color: #000;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  
  justify-content: end;
}

.card99::before {
  content: '';
  left: -5px;
  
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200;
  height: 264px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card99::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.card99 p:not(.heading) {
  font-size: 14px;
}

.card99 p:last-child {
  color: #e81cff;
  font-weight: 600;
}

.card99:hover::after {
  filter: blur(30px);
}

.card99:hover::before {
  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}

/* From Uiverse.io by gharsh11032000 */ 
.card98 {
position: relative;
width: 500px;
left:10px;
height: 300px;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: end;
padding: 12px;
gap: 12px;
border-radius: 8px;
cursor: pointer;
place-items: center;
place-content: center;
}

.card98::before {
content: '';
position: absolute;
inset: 0;
left: -5px;
margin: auto;
width: 510px;
height: 310px;
border-radius: 10px;
background: linear-gradient( #e81cff 0%, #40c9ff 100% );
z-index: -10;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.card98 p:not(.heading) {
  font-size: 14px;
}

.card98 p:last-child {
  color: #e81cff;
  font-weight: 600;
}


.img98 img {
  position: relative;
  margin: 0;
  border-radius: 10px;
  width:500px;
  height:300px;
  
  
}

/* From Uiverse.io by ilkhoeri */ 
.package7 {
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 440px;
  margin: 5%;
  background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);
  border-radius: 20px;
  
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}

.package7:hover {
  box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);
}

.package8 {
  width: 100%;
  height: 440px;
  background-color: #1f1f1f;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
  padding: 15px;
  cursor: pointer;
}

.package8:hover {
  transform: scale(0.98);
  border-radius: 18px;
}

.text {
  color: white;
  font-size: 17px;
}

/* From Uiverse.io by ilkhoeri */ 
.package5 {
  place-items: center;
  width: 90%;
  height: 1200px;
  margin: 5%;
  background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);
  border-radius: 20px;
  
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}

.package5:hover {
  box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);
}

.package6 {
  width: 100%;
  height: 1200px;
  background-color: #1f1f1f;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
  padding: 15px;
  cursor: pointer;
}

.package6:hover {
  transform: scale(0.98);
  border-radius: 18px;
}

.text {
  color: white;
  font-size: 17px;
}

/* From Uiverse.io by LightAndy1 */ 
.package3 {
  place-items: center;
  width: 90%;
  height: 380px;
  margin: 5%;
  background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}

.package3:hover {
  box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);
}

.package4 {
  width: 100%;
  height: 380px;
  background-color: #1f1f1f;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
  padding: 15px;
  cursor: pointer;
}

.package4:hover {
  transform: scale(0.98);
  border-radius: 18px;
}

.text {
  color: white;
  font-size: 17px;
}
.package {
  justify-content: center;
  width: 90%;
  height: 1600px;
  background-image: linear-gradient(163deg, #ff00ff 0%, #3700ff 100%);
  margin: 5%;
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}

.package:hover {
  box-shadow: 0px 0px 30px 1px rgba(204, 0, 255, 0.3);
}

.package2 {
  width: 100%;
  height: 1600px;
  background-color: #1f1f1f;
  border-radius: 10px;
  
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
  padding: 15px;
  cursor: pointer;
}

.package2:hover {
  transform: scale(0.98);
  border-radius: 18px;
}

.text {
  color: white;
  font-size: 17px;
}

/* teruskan pengenalan rg99 */ 
.button1 {
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #1a1a1a;
  color: #fff;
  border-radius: 10rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  padding-left: 20px;
  margin-bottom: 10%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
}

.button1__icon-wrapper {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.button1:hover {
  background-color: #fff;
  color: black;
}

.button1:hover .button1__icon-wrapper {
  color: #fff;
  background-color: #000;
}

.button1__icon-svg--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button1:hover .button1__icon-svg:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button1:hover .button1__icon-svg--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}



/* === Owner List Grid === */

.owner-list {
  display: flex;
  gap: 2%;
  margin: 40px 3%;
  justify-content: space-between;

}



/* === Footer === */
footer {
  left:0 ;
  width: 100%;
  display: block;
  position: relative;
  bottom: 0;
  background: #000000;
  color: #eee;
  padding:50px ;
  text-align: center;
  margin-top: 40px;
}

footer p11 {
  font-size: 14px;
}