@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
   margin: 0;
   padding: 0;
}
:root {
   --neon-blue: #76e6ff;
   --neon-blue-50: #76e6ff7f;
   --neon-red: #e789ff;
   --font-montserrat: "Montserrat", sans-serif;
   --font-montserrat-light: 300; /* Light */
   --font-montserrat-regular: 400; /* Regular */
   --font-montserrat-bold: 700; /* Bold */
   --font-montserrat-extrabold: 800; /* Extra Bold */
}
.neon_blue {
   color: var(--neon-blue);
}
.neon_blue-50 {
   color: var(--neon-blue-50);
}
.neon_red {
   color: var(--neon-red);
}
.darblue {
   color: #020617;
}
.pricing_card-btn:hover {
   background-color: #ffff;
   color: #020617;
}
.montserrat-light {
   font-family: "Montserrat", sans-serif;
   font-weight: var(--font-montserrat-light); /* Light weight */
}

.montserrat-regular {
   font-family: "Montserrat", sans-serif;
   font-weight: var(--font-montserrat-regular); /* Regular weight */
}

.montserrat-bold {
   font-family: "Montserrat", sans-serif;
   font-weight: var(--font-montserrat-bold); /* Bold weight */
}

.montserrat-bolder {
   font-family: "Montserrat", sans-serif;
   font-style: var(--font-montserrat-extrabold); /* Italic style */
}

body {
   overflow-x: hidden !important;
   box-sizing: border-box;
}
@media (min-width: 992px) {
   .offcanvas {
      visibility: visible;
      position: relative;
      background: none;
      border: none;
      justify-content: end;
      color: red;
   }
}
@media (max-width: 768px) {
   .hero_content {
      font-size: 35px !important;
   }
}
@media (max-width: 992px) {
   .offcanvas {
      width: 300px !important;
      background: #020617;
   }
   .hero_btns {
      width: 100% !important;
   }

   .offcanvas-start-lg {
      top: 0;
      right: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.2);
      transform: translateX(100%);
   }
}
nav {
   z-index: 100;
}
.navbar-nav li a {
   color: white !important;
}
.hero__section {
   position: relative;
   background: #020617; /* Dark background color */
   height: 100vh; /* Set height for hero section */
   overflow: hidden; /* Prevent lines from overflowing the hero section */
}
.left_line {
   position: absolute;
   bottom: 0%;
   left: 0%;
   display: flex;
   flex-direction: column;
   gap: 4rem; /* Gap between child elements (16 in Tailwind, which equals 4rem) */
   align-items: center;
   transform: translate(-50%, 50%) rotate(-45deg); /* Translate and rotate to match Tailwind */
}

.right_line {
   position: absolute;
   top: 0%;
   right: 0%;
   display: flex;
   flex-direction: column;
   gap: 4rem; /* Gap between child elements */
   align-items: center;
   transform: translate(50%, -50%) rotate(-45deg); /* Translate and rotate for the right side */
}

/* Hero Background */
.hero-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0; /* Ensure background stays behind other elements */
}

.hero_content {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   align-content: center;
   gap: 0;
   margin-top: 5rem;
   line-height: 1.2;
   font-size: 75px;
   font-family: var(--font-montserrat);
   font-weight: var(--font-montserrat-bold);
   letter-spacing: 3px;
}
.hero_btns {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
   border-top-left-radius: 9999px;
   border-width: 4px;
   width: 250px;
}
.dragones {
   filter: drop-shadow(0px 0px 16px #76e6ff);
   color: white;
   border-color: #76e6ff;
}
.y,
.gusanos {
   filter: drop-shadow(0px 0px 16px #e789ff);
   color: white;
   border-color: #e789ff;
}
.pricing_card::before {
   content: "";
   background: #020617;

   position: absolute;

   z-index: -10;
   top: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   border-radius: 20px;
   height: 100%;
}
.pricing_card {
   position: relative;
   border-radius: 20px;
   filter: drop-shadow(0px 0px 1px #76e6ff);
   box-shadow: 0px 10px 22px #d6d6d63f;
   background-color: #020617;
   border: 0.3px solid gray;
   color: var(--neon-red);
}
.card_svg {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   z-index: -10;
   right: 0;
   width: 600px;
   height: 600px;
   /* filter: drop-shadow(10px 1px 40px #e789ff); */
   filter: blur(55px);
}

.pricing_card_content li {
   list-style: none;
   padding: 1rem 1rem;
   color: #fff;
}
.pricing_card_content ul {
   padding: 0;
}
.pricing_card_content li p {
   font-size: 14px;
   margin: 0;
}
.pricing_card-btn {
   border-radius: 10px;
   border: none;
   font-weight: bold;
   transition: all 0.3s ease;
}

/* Outline button */
.pricing_card-btn-outline {
   color: white;
   border: 2px solid var(--neon-blue); /* Outline color */
}

/* Active button with background color */
.pricing_card-btn-active {
   background-color: white; /* Active background color */
   color: #020617;
}
footer {
   background-color: #020617;
}
ul {
   padding: 0;
}
footer ul li {
   list-style: none;
   text-decoration: none;
   padding: 0.4rem 0 !important;
}
footer p {
   font-size: 14px;
}
footer a {
   text-decoration: none;
}