@import url('https://fonts.googleapis.com/css2?family=Kulim+Park:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

* {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.kulim-park-extralight {
    font-family: "Kulim Park", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.kulim-park-light {
    font-family: "Kulim Park", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.kulim-park-regular {
    font-family: "Kulim Park", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kulim-park-semibold {
    font-family: "Kulim Park", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.kulim-park-bold {
    font-family: "Kulim Park", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.kulim-park-extralight-italic {
    font-family: "Kulim Park", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.kulim-park-light-italic {
    font-family: "Kulim Park", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.kulim-park-regular-italic {
    font-family: "Kulim Park", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.kulim-park-semibold-italic {
    font-family: "Kulim Park", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.kulim-park-bold-italic {
    font-family: "Kulim Park", sans-serif;
    font-weight: 700;
    font-style: italic;
}


@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: fadeOut 0.6s ease-in-out forwards;
}

::view-transition-new(root) {
    animation: fadeIn 0.6s ease-in-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(0);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* btn styles  */


.btn-shine {
    position: relative;
    overflow: hidden;
}

/* Shine layer */
.btn-shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    transform: skewX(-20deg);
}

/* Animation */
.btn-shine:hover::before {
    animation: shine 1s ease-in-out;
}

/* Looping subtle shine (optional auto mode) */
.btn-shine.loop::before {
    animation: shine-loop 3s infinite;
}

@keyframes shine {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

@keyframes shine-loop {
    0% {
        left: -75%;
    }

    50% {
        left: 125%;
    }

    100% {
        left: 125%;
    }
}



/* Recommended Lenis Core CSS setup */
html.lenis, html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  scroll-behavior: contain;
}

/* Optional: Hiding scrollbars completely if going for an ultra-clean UI, 
   while keeping scroll functionality functional */
::-webkit-scrollbar {
  width: 2px;
  
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #84e358; /* Keeps scrollbar cohesive with your green branding */
  border-radius: 0px;
 
}


/* -------------------->>>>>>>>>>FAQ section animation  */


details summary::-webkit-details-marker { display: none; }
  details summary { list-style: none; }
  
  /* Smooth scale & fade effect for the inner content when opened */
  details[open] .faq-content {
    animation: fadeIn 0.3s ease-out forwards;
  }
  
  /* Rotate the plus icon into a close state smoothly */
  details[open] .icon-plus {
    transform: rotate(45deg);
    color: #ef4444; /* Soft transition to indicate closing action */
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

@keyframes shine-loop {
    0% {
      left: -150%;
    }
    30% {
      left: 150%;
    }
    100% {
      left: 150%;
    }
  }

  .promo-shine-card {
    position: relative;
    overflow: hidden;
  }

  /* The shine effect overlay */
  .promo-shine-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.171),
      transparent
    );
    transform: skewX(-25deg);
  }

  /* Staggered animation delays to make the loops look organic and premium */
  #promo-card-instant::after {
    animation: shine-loop 6s ease-in-out infinite;
  }
  #promo-card-power::after {
    animation: shine-loop 6s ease-in-out infinite;
    animation-delay: 1s;
  }
  #promo-card-accounts::after {
    animation: shine-loop 6s ease-in-out infinite;
    
  }
  #promo-card-transparency::after {
    animation: shine-loop 6s ease-in-out infinite;
    animation-delay: 1s;
  }