* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #1e0b3c, #3b1a5a 70%, #090825);
  cursor: none;
  scroll-behavior: smooth;
  overflow: hidden;

}

.neon-cursor {
    position: fixed;
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
    transition: transform 0.1s ease;
    z-index: 9999;
    border: 2px solid gray;
    opacity: 0.8;
}

.stars {
  width: 2px;
  height: 2px;
  position: fixed;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
    50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
    65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
    80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}


.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  padding-top: 200px;
  padding-bottom: 200px;
  max-width: 1300px;
  margin: 0 auto;
}

.phone-container {
    position: relative;
    width: 350px;
    height: auto;
    top: 20px;
    opacity: 0; /* Start invisible */
    transform: rotate(90deg); /* Start at 0 degrees */
    animation: fadeInRotate 3s ease-in-out 0.5s forwards; /* Animation: name, duration, easing, and stay at end */
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotate(90deg);
    }
    100% {
        opacity: 1; /* Fully visible */
        transform: rotate(0deg); /* End at 90 degrees */
    }
}

.phone-image {
    width: 200%;
    height: auto;
    position: relative;
    z-index: 1;
    right: 100px; 
}

.shadow-image {
  position: absolute;
  top: 87.5%; /* Center vertically on phone */
 /* Match phone rotation and center */
  width: 700px; /* Match phone width */
  left: -100px;
  height: auto;
  opacity: 0;
  z-index: -1;
  animation: fadeInShadow 0.5s ease-in-out 2.5s forwards;
}

@keyframes fadeInShadow {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.video {
    position: absolute; 
    left: -15%; 
    top: 12%;
    width: 175%; 
    height: 75%;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
    object-fit: fill;
    border-radius: 20px;
}

@keyframes fadeInNew {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.shooting-star {
  position: fixed;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
  transform: rotate(180deg);
}

.shooting-star:nth-child(1) {
  top: 50%;
  left: -100px;
  animation-delay: 0s;
}

.shooting-star:nth-child(2) {
  top: 35%;
  left: -100px;
  animation-delay: 1s;
}

.shooting-star:nth-child(3) {
  top: 20%;
  left: -100px;
  animation-delay: 2s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(-150deg);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(50vh) rotate(-150deg);
    opacity: 0;
  }
}



.stars::after {
  content: "";
  position: relative;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}


.boxes-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px auto;
  max-width: 1200px;
}

.purple-section {
  background: linear-gradient(135deg, #4b0082 0%, #8a2be2 100%);
  color: #ffffff;
  padding: 20px 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
  flex: 1;
  text-align: center;
}

.purple-section .container {
  padding: 0 20px;
}

.lock-icon {
  font-size: 4em;
  color: #dda0dd;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #8a2be2;
}





.section-text {
  font-family: SF UI Display, sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .boxes-container {
    flex-direction: column;
    gap: 10px;
  }
  .purple-section {
    padding: 20px 10px;
  }
  .lock-icon {
    font-size: 3em;
  }
  .section-text {
    font-size: 1em;
  }
}


.navbar {
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding-right: 200px;
  padding-left: 200px;
  backdrop-filter: blur(10px); /* Blur effect behind the navbar */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

.left-nav {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1001;
}
.nav-dot {
    display: block;
    width: 15px;
    height: 15px;
    background-color: transparent; /* Transparent for inactive */
    border: 3px solid #a855f7;
    border-radius: 50%;
    box-shadow: 0 0 10px #d65eff, 0 0 20px #d65eff, 0 0 30px #d65eff;
    transition: all 0.3s ease;
    text-decoration: none;
}
.nav-dot:hover {
    border-color: #d65eff;
    box-shadow: 0 0 15px #d65eff, 0 0 25px #d65eff, 0 0 35px #d65eff;
    transform: scale(1.2);
}
.nav-dot.active {
    background-color: #d7b1fb; /* Filled in for active */
    border-color: #d7b1fb;
    box-shadow: 0 0 15px #d65eff, 0 0 25px #d65eff, 0 0 35px #d65eff;
    transform: scale(1.2);
}



.h-title {
  color: #FFF;
  text-align: left;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: SF UI Display;
  font-size: 64px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-top: 2em;
  margin-bottom: 1em;
  text-shadow: 0 0 8px #ab00fd, 0 0 20px #7700b0;
  animation: fadeInUp 3s;
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.nav-buttons .navbtn {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #fff 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.nav-buttons .navbtn i {
  margin-right: 10px;
  margin-left: -10px;
}

.nav-buttons .navbtn:hover {
  color: #AD00FF;
}

.nav-buttons .navbtn:not(:last-child)::after {
  content: "|"; /* Adds the separator after each button except the last one */
  color: #fff; /* Match button text color for visibility */
  font-weight: normal; /* Optional: adjust if needed */
  margin-left: 20px; /* Space after the button before the | */
}


a.join {
  border-radius: 20px;
  border: 3px solid #AD00FF;
  background: rgba(125, 5, 199, 0.20);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);
  color: #FFF;
  text-shadow: 0px 1px 15px #000;
  font-family: SF UI Display, sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 100px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}

a.join::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(173, 0, 255, 0.5), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(30px);
  z-index: 0;
}

a.join:hover::before {
  opacity: 1;
  animation: pulseGlow 1.8s infinite ease-in-out;
}

a.join:hover {
  border-color: #d65eff;
  box-shadow: 0 0 20px #AD00FF, 0 0 15px rgba(173, 0, 255, 0.6);
  color: #fff;
  text-shadow: 0 0 10px #d65eff, 0 0 30px #AD00FF;
}

.header {
  position: relative;
}

.header .container {
  height: 400px;
  display: block;
  position: relative;
  z-index: 999;
}



.f-left h5,
h2 {
  margin: 0;
}

.f-left h5 {
  color: #AD00FF;
  font-family: Poppins;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.21px;
  text-transform: uppercase;
}

.f-left h2 {
  color: #DDE4ED;
  font-variant-numeric: lining-nums proportional-nums;
  font-family: SF UI Display;
  font-size: 30px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1300px;
  }
}

.feature {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 26.3%, rgba(217, 217, 217, 0.10) 100%);
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.f-name {
  color: #FFF;
  text-align: center;
  font-family: SF UI Display;
  font-size: 25px;
  font-weight: 500;
}

.f-desc {
  color: #FFF;
  text-align: center;
  font-family: SF UI Display;
  font-size: 20px;
  font-weight: 400;
}

.f-list {
  display: flex;
  gap: 1em;
  margin-top: 5em;
}

.f-icon {
  margin-top: -5em;
}

.f-right a {
  color: #A2A8BA;
  font-family: Poppins;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.21px;
  text-transform: uppercase;
  text-decoration: none;
}

.f-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2em;
}

/* --- FOOTER --- */

.footer {
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(25px);
  text-align: center;
  padding: 15px;
  position: relative;
}

.footer h3 {
  color: #DDE4ED;
  font-family: SF UI Display;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.72px;
}

.footer span {
  color: #A2A8BA;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.f-text {
  max-width: 45%;
  margin: 0 auto;
}

.f-bottom {
  display: flex;
  justify-content: space-between;
}

.fo-left,
.fo-right {
  color: #A2A8BA;
  font-family: Poppins;
  font-size: 15px;
  line-height: 28px;
  letter-spacing: 0.32px;
  margin: 0 auto;
}

.fo-links {
  display: flex;
  gap: 1em;
  list-style: none;
}

.fo-links a {
  color: #A2A8BA;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.32px;
  text-decoration: none;
}

.fo-links li::before {
  content: "|";
  color: rgba(120, 0, 176, 0.81);
  margin-right: 10px;
}

.fo-links li:first-child::before {
  content: "";
}

/* --- MISC --- */

.logo {
  height: 60px;
  display: flex;
}

.logo img {
  position: relative;
  left: 0;
  right: 0;
  animation: flipY 3s infinite;
}



.logo-text {
  color: #a855f7;
  font-family: SF UI Display, sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}


/* --- RESPONSIVE --- */

@media (max-width: 991px) {
  .f-list {
    display: flex;
    gap: 5em;
    flex-direction: column;
  }

  .inst-list {
    flex-direction: column;
    gap: 1em;
  }

  .f-left h2 {
    font-size: 18px;
  }

  .f-left h5 {
    font-size: 9px;
  }

  .f-right a {
    font-size: 9px;
  }

  .f-text {
    max-width: 100%;
  }

  .f-bottom {
    flex-direction: column;
  }

  .fo-links {
    gap: 0.25em;
  }

  .discord a {
    font-size: 14px;
  }

  .logo img {
    width: 75px;
  }

  .logo {
    height: 75px;
  }



@keyframes pulse {
  0% {
    text-shadow: 0 0 6px #00ffea, 0 0 16px #00c8b8;
    transform: translateZ(0);
  }
  50% {
    text-shadow: 0 0 18px #00ffea, 0 0 40px #00c8b8;
    transform: translateY(-2px);
  }
  100% {
    text-shadow: 0 0 6px #00ffea, 0 0 16px #00c8b8;
  }
}
}

/* --- ANIMATIONS & EFFECTS --- */

@keyframes flipY {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(-180deg);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



        .pricing {
            width: 100%;
            padding-bottom: 200px;
            padding-top: 200px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            padding-bottom: 50px;
        }

        .container2 {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        .p-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .p-left h5 {
            font-size: 14px;
            color: #a855f7;
            margin: 0;
            margin-bottom: 7px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: SF UI Display;
        }

        .p-left h2 {
            font-size: 36px;
            margin: 0;
            background: linear-gradient(45deg, #ffffff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: SF UI Display, sans-serif;
        }

        .p-right a {
            color: #a855f7;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
            font-family: SF UI Display;

        }

        .p-right a:hover {
            color: #ffffff;
            font-family: SF UI Display;
        }

        .p-right a i {
            margin-right: 5px;
        }

        .p-list {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 50px;
        }


        .p-name {
            font-family: SF UI Display, sans-serif;
            font-size: 22px;
            font-weight: 600;
            background: linear-gradient(
              45deg,
              rgba(255, 255, 255, 0.7),
              rgba(168, 85, 247, 0.7)
            );
            background-
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(173, 0, 255, 0.2);
            letter-spacing: 1px;
        }

        .plan {
            flex: 1;
            min-width: 300px;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(168, 85, 247, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }

        .plan::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #a855f7, #7c3aed);
        }

        .plan:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 40px rgba(168, 85, 247, 0.5);
        }


        .plan2 {
            flex: 1;
            min-width: 300px;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 
                0 0 5px #a855f7,   /* Inner glow */
                0 0 10px #a855f7,  /* Medium glow */
                0 0 15px #a855f7,  /* Outer glow */
                0 0 20px #a855f7;  /* Farthest glow */
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
            transform: scale(1.03);
        }

        .plan2::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #a855f7, #7c3aed);
            animation: pulseGlow;
            transform: scale(1.03);
        }

        .plan2:hover {
            transform: translateY(10px);
            box-shadow: 0 12px 40px rgba(168, 85, 247, 0.5);
            transform: scale(1.05);
        }


        .p-price {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
            background: linear-gradient(45deg, #ffffff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .p-features {
            margin-bottom: 15px;
        }

        .p-feature {
            font-family: SF UI Display, sans-serif;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            font-size: 16px;
            background: linear-gradient(45deg, #ffffff, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }




        .p-feature i {
            margin-right: 10px;
            color: #a855f7;
            font-size: 20px;
        }

      .p-button {
        border-radius: 20px;
        border: 3px solid #AD00FF;
        background: rgba(125, 5, 199, 0.20);
        box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);
        color: #FFF;
        font-family: SF UI Display, sans-serif;
        font-size: 18px;
        font-weight: 500;
        text-transform: uppercase;
        text-decoration: none;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        margin: 25px auto 0;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        cursor: pointer;
      }

      .p-button::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(173, 0, 255, 0.5), transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
        filter: blur(30px);
        z-index: 0;
      }

      .p-button:hover::before {
        opacity: 1;
        animation: pulseGlow 1.8s infinite ease-in-out;
      }

      .p-button:hover {
        border-color: #d65eff;
        box-shadow: 0 0 25px #AD00FF, 0 0 50px rgba(173, 0, 255, 0.6);
        color: #fff;
        text-shadow: 0 0 10px #d65eff, 0 0 30px #AD00FF;
      }

        @media (max-width: 768px) {
            .p-list {
                flex-direction: column;
                align-items: center;
            }

            .plan {
                min-width: 280px;
            }
        }


@media (max-width: 768px) {
  .navbar {
    padding-left: 10px;
    padding-right: 10px;
  }
}


.sticky-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #AD00FF, #7c3aed);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(173, 0, 255, 0.5);
  transition: all 0.3s ease;
  z-index: 1000;
}

.sticky-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(173, 0, 255, 0.7);
}

.sticky-bubble i {
  margin: 0;
}




/* Overall Section Styling */
#section3.faq.section {
  color: #ffffff; /* White text for contrast */
  padding: 40px 20px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 1300px; /* Center and limit width */
  font-family: Poppins;
}

/* Container Styling */
.faq {
  padding: 0 20px;
}



/* Question Styling */
.question {
  background-color: rgba(138, 43, 226, 0.1); /* Semi-transparent purple */
  border: 2px solid #8a2be2; /* Purple border */
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer; /* Indicates interactivity */
  transition: background-color 0.3s ease;
  font-weight: 500;
  color: #f3e5f5;
  font-family: Poppins, sans-serif;
}




.question::after {
  content: "▼"; /* Font Awesome chevron-down */
  font-weight: 900;
}

.question:hover {
  background-color: rgba(138, 43, 226, 0.2); /* Darker on hover */
}

.question.active {
  background-color: rgba(138, 43, 226, 0.3); /* Even darker when active/open */
  border-color: #6a0dad; /* Deeper purple border for active state */
}

.question.active::after {
  content: "▲"; /* Up arrow for open state */
  transform: translateY(-50%) rotate(180deg); /* Rotate for open */
}


/* Answer Styling */
.answercont {
  max-height: 0; /* Initially collapsed; script sets to scrollHeight when active */
  overflow: hidden; /* Prevents content from showing outside */
  transition: max-height 0.4s ease; /* Smooth animation */
  margin-bottom: 20px;
}

.answer {
  background-color: #4b0082; /* Very light purple */
  color: #f3e5f5; /* Dark purple text */
  border-left: 4px solid #8a2be2; /* Purple accent border */
  padding: 15px;
  border-radius: 0 8px 8px 0;
  font-style: italic; /* Optional emphasis */
}

/* Responsiveness for Mobile */
@media (max-width: 768px) {
  #section3.faq.section {
    padding: 20px 10px;
  }
  .f-left h2 {
    font-size: 2em;
  }
}


/* Custom Purple Scrollbar for Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #1e0b3c; /* Dark background matching the theme */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a855f7, #7c3aed); /* Purple gradient */
  border-radius: 10px;
  border: 2px solid #1e0b3c; /* Border to match track */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d65eff, #a855f7); /* Lighter purple on hover */
}

/* Custom Scrollbar for Firefox */
* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #a855f7 #1e0b3c; /* Thumb color and track color */
}



@media (max-width: 768px) {
  .left-nav .phone-container { /* Hide these sections on mobile */
    display: none;
  }
}






/* Help Center Styles */
.help-header {
  color: #fff;
  padding: 80px 0;
  text-align: center;
  min-height: 10vh;
}

.help-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.help-title {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px #AD00FF, 0 0 20px #7700b0;
  margin-bottom: 20px;
}

.help-subtitle {
  font-size: 1.2rem;
  color: #DDE4ED;
  margin-bottom: 40px;
}

.help-search {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.help-search .form-control {
  width: 60%;
  border-radius: 25px 0 0 25px;
  border: 2px solid #AD00FF;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 10px 20px;
}

.form-control::placeholder {
  color: #fff;
}

.help-search-btn {
  border-radius: 0 25px 25px 0;
  background: #AD00FF;
  border: 2px solid #AD00FF;
  color: #fff;
  padding: 10px 20px;
  transition: all 0.3s;
}

.help-search-btn:hover {
  background: #d65eff;
  box-shadow: 0 0 15px #AD00FF;
}

.help-categories {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.help-category-btn {
  background: rgba(173, 0, 255, 0.2);
  border: 2px solid #AD00FF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.help-category-btn:hover, .help-category-btn.active {
  background: #AD00FF;
  box-shadow: 0 0 10px #AD00FF;
}

.help-content {
  padding: 60px 0;
  margin-bottom: 200px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.help-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(173, 0, 255, 0.3);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(10px);
}

.help-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(173, 0, 255, 0.5);
}


.help-card-content {
  padding: 20px;
}

.help-card-title {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #AD00FF;
}

.help-excerpt {
  color: #DDE4ED;
  margin-bottom: 15px;
}

.help-read-more {
  color: #AD00FF;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.help-read-more:hover {
  color: #d65eff;
}

.help-sidebar {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 15px;
  border: 1px solid rgba(173, 0, 255, 0.3);
  backdrop-filter: blur(10px);
}

.help-sidebar h4 {
  color: #fff;
  margin-bottom: 15px;
}

.help-tag-list, .help-recent-list {
  list-style: none;
  padding: 0;
}

.help-tag, .help-recent-list a {
  color: #DDE4ED;
  text-decoration: none;
  margin-bottom: 10px;
  display: block;
  transition: color 0.3s;
}

.help-tag:hover, .help-recent-list a:hover {
  color: #AD00FF;
}

/* Responsive */
@media (max-width: 768px) {
  .help-title {
    font-size: 2rem;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
  .help-categories {
    flex-direction: column;
    align-items: center;
  }
  .help-sidebar {
    margin-top: 30px;
  }
}




/* Login Page Styles */
.login-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: Poppins, sans-serif;
}

.login-container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.login-card {
  border-radius: 25px; /* More rounded */
  padding: 40px;
  backdrop-filter: blur(10px);
  text-align: center;
}

.login-title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #AD00FF, 0 0 20px #7700b0;
  font-weight: 700;
  margin-bottom: 60px;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-group {
  margin-bottom: 20px;
  text-align: left;
}

.login-label {
  display: block;
  color: #DDE4ED;
  font-size: 1rem;
  margin-bottom: 5px;
  font-weight: 500;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-icon { /* FontAwesome icon styling */
  position: absolute;
  left: 15px;
  color: #fff;
  font-size: 1.2rem;
  z-index: 1;
  pointer-events: none; /* Prevents icon from interfering with input clicks */
}

.login-input {
  width: 100%;
  padding: 12px 15px 12px 45px; /* Extra left padding for icon space */
  border: 1px solid #AD00FF;
  border-radius: 20px; /* More rounded */
  background: #202020; /* Fully transparent background */
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s;
  box-sizing: border-box;
}

.login-input:focus {
  outline: none;
  border-color: #d65eff;
  box-shadow: 0 0 10px #AD00FF;
  background: rgba(255, 255, 255, 0.05); /* Slight tint on focus */
}

.login-input::placeholder {
  color: #fff;
}

.login-btn {
  background: #AD00FF;
  border: 2px solid #AD00FF;
  color: #fff;
  padding: 12px 20px;
  border-radius: 25px; /* More rounded */
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.login-btn:hover {
  background: #d65eff;
  box-shadow: 0 0 15px #AD00FF, 0 0 25px #AD00FF inset;
  transform: translateY(-2px);
}

.login-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.login-link {
  color: #AD00FF;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.login-link:hover {
  color: #d65eff;
  text-shadow: 0 0 5px #AD00FF;
}

/* Responsive */
@media (max-width: 768px) {
  .login-card {
    padding: 30px 20px;
    border-radius: 20px;
  }
  .login-title {
    font-size: 1.5rem;
  }
  .login-btn {
    border-radius: 20px;
  }
  .login-input {
    border-radius: 15px;
  }
  .login-links {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}