* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* HTML and Body styling */
  html, body {
    font-family: Arial, sans-serif; /* Use a clean, modern font */
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Increase readability */
    color: #ffffff; /* Standard text color */
    min-height: 100vh; /* Ensure the background covers the full viewport height */
    background: var(--background); /* Use the variable */
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh; /* Ensure body covers full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  :root {
    --text: hsl(0, 0%, 99%);
    --textDim: hsl(0, 0%, 60%);
    --background: #051604;
    --primary: hsl(150, 95%, 60%);
    --primaryBg: hsla(155, 100%, 65%, 1%);
    --primaryHi: hsla(155, 100%, 75%, 25%);
    --primaryFg: hsl(155, 100%, 85%);
    --secondary: hsl(156, 51%, 14%);
    --secondaryFg: hsl(156, 51%, 75%);
    --secondaryBg: hsla(156, 51%, 14%, 5%);
    --secondaryHi: hsla(156, 51%, 30%, 50%);
    --accent: hsl(155, 100%, 94%);
    --accentBg: hsla(155, 100%, 94%, 1%);
    --accentHi: hsla(155, 100%, 100%, 25%);
  }
 
  .error-message {
    color: red;
    font-size: 16px; /* Slightly larger font for better visibility */
    margin-top: 2px; /* Reduce the gap between input and message */
    position: absolute; /* Position the error directly under the input */
    left: 0; /* Align with the input field's left edge */
  }

  /* Center the h1 container */
h1 {

    position: absolute; /* Ensure the logo stays on top */
    top: 20px; /* Adjust spacing from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Perfectly center it */
    z-index: 10; /* Higher z-index to sit on top of the gradient */
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  /* Style the anchor tag within h1 */
  h1 a img {
    margin-top: 60px;
    width: 120px;
    display: inline-block; /* Ensures anchor behaves like text and stays centered */
  }
  
   h2 {
    font-size: 45px; /* Set font size */
    line-height: 1.1; /* Adjust line spacing */
    font-weight: bold; /* Optional: make text bold */
    text-align: center; /* Center-align the text */
    padding: 0 450px; /* Add some margin */
    letter-spacing: -1.5px; /* Reduces the space between letters */
    z-index: 12; /* Higher z-index to sit on top of the gradient */
   }

   h2 span{
    color: #39FA99;
   }

   .text p{
    font-size: 22px; /* Set font size */
    line-height: 1.2; /* Adjust line spacing */
    margin-top: -10px; /* Remove default margin */
    padding: 40px 500px; /* Add some margin */
    text-align: center; /* Center-align the text */
    color: #e8e8e8cb;
    z-index: 10; /* Higher z-index to sit on top of the gradient */
   }

  /* Container for the two input and label */ 
  .Flex-Container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Add 10px space between items */
  }

 /* Container for the input and label */
 .input-container {
  /* position: relative;
  margin: 10px 0; */
  width: 100%;
  max-width: 350px;
  position: relative; /* Needed for positioning the error message relative to the input field */
  margin-bottom: 30px; /* Ensure enough space between inputs to accommodate error messages */
}

/* Styling the input field */
.input-container input {
  width: 100%;
  padding: 12px 0 12px 8px;
  font-size: 16px;
  padding-left: 20px;
  border: solid rgba(16, 195, 58, 0.395); /* Remove default border */
  border-radius: 6px; /* Rounded corners */
  outline: none;
  background: #39fa990f; /* Transparent background */
  color: #ffffff; /* Text color */
  position: relative;
  z-index: 4; /* Ensure input is above pseudo-element */
  /* Gradient Border */
  /* border-image: linear-gradient(90deg, #057d3d, #5bed95, #109452) 4; */
   /* border-image-slice: 1; */
  
}

/* Create the gradient border using a pseudo-element */
.input-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px; /* Same as input */
  padding: 2px; /* Border thickness */
  background: linear-gradient(90deg, #057d3d, #5bed95, #109452); /* Gradient */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* Mask gradient inside border */
  -webkit-mask-composite: destination-out; /* For Safari */
  mask-composite: exclude; /* For modern browsers */
  z-index: 0; /* Place it behind the input */
}
  
/* Initial label styling */
  .input-container label {
    position: absolute;
    top: 12px;
    left: 8px;
    color: #999;
    font-size: 16px;
    transition: 0.2s ease all;
    pointer-events: none;
    padding-left: 15px;
  }

  /* When input has focus or content, move label up */
  .input-container input:focus + label,
  .input-container input:not(:placeholder-shown) + label {
    top: -8px;
    left: 8px;
    font-size: 12px;
    color: #333;
    background-color: #fff;
    padding: 0 4px;
    z-index: 5; 
  }

/* Center the button within .btn-container */
.btn-container {
    display: flex; /* Enables flex layout */
    justify-content: center; /* Center-aligns items horizontally */
    margin-top: 20px; /* Space between text and button */
  }


/* Style for the CTA button */
.cta-button {
    width: 290px;
    font-size: 18px; /* Set button text size */
    padding: 15px 40px; /* Button padding for height and width */
    color: #1e1d1d; /* Text color */
    border: 2px solid #53fd77a3; /* Transparent base */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* Shadow for depth */
    background: linear-gradient(90deg, #057d3d, #5bed95, #109452); /* Gradient background */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transitions */
  }

/* Hover effect */
.cta-button:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0px 12px 34px rgba(0, 0, 0, 0.6); /* Slightly stronger shadow on hover */
  }



/* Scrolling Logo Animation */




  /* Blurred green circle */
.blurred-circle {
    position: absolute;
    width: 800px; /* Circle size */
    height: 1600px; /* Circle size */
    background: radial-gradient(circle, rgba(0, 208, 132, 0.7),  rgba(60, 228, 38, 0.472), rgba(10, 53, 65, 0.246)); /* Green radial gradient */
    border-radius: 50%; /* Make it a circle */
    filter: blur(50px); /* Apply blur effect */
    top: 10%; /* Position it vertically (adjust as needed) */
    left: 90%; /* Position it horizontally (adjust as needed) */
    transform: translate(-50%, -50%); /* Center the circle around the specified position */
    overflow: hidden; /* Prevent content overflow */
    z-index: 0; /* Lower z-index to stay behind the logo */
    opacity: 50%;
  }

  
/* Media Queries */


/* Mobile Screens */
@media screen and (min-width: 320px) and (max-width: 480px) {

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  h1 a img {
      width: 80px; /* Adjust logo size */
      margin-top: 20px;
      z-index: 5;
  }

  h2 {
    font-size: 30px;
    padding: 0 0px; /* Add some margin */
    max-width: 340px; /* Limit the width to force line break */
    margin: 0 auto; /* Center-align with margins */
    word-break: break-word; /* Ensure long words break */
  }
  
  .text p {
      font-size: 20px;
      padding: 40px 33px 100px 33px; /* Add some margin */
  }
  
   
  .Flex-Container {
    flex-direction: column; /* Stack items vertically */
    gap: 20px; /* Adjust spacing between stacked items */
  }
  
  .input-container {
    width: 100%;
    max-width: 330px; /* Or any reasonable width */
    margin: 0 auto; /* Center the container */
   }

  .input-container input {
    width: 100%; /* Adjust width to fit the smaller screen */
    padding: 6px 10px; /* Smaller padding */
    font-size: 12px; /* Reduce font size for smaller screens */
    padding: 12px 0 12px 14px;
    font-size: 16px;
    border: solid rgba(16, 195, 58, 0.395); /* Remove default border */
    border-radius: 6px; /* Rounded corners */
    outline: none; 
  }

  /* Create the gradient border using a pseudo-element */
.input-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px; /* Same as input */
  padding: 2px; /* Border thickness */
  background: linear-gradient(90deg, #057d3d, #5bed95, #109452); /* Gradient */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); /* Mask gradient inside border */
  -webkit-mask-composite: destination-out; /* For Safari */
  mask-composite: exclude; /* For modern browsers */
  z-index: 0; /* Place it behind the input */
}



  .cta-button {
      width: 330px; /* Smaller button */
      font-size: 14px;
  }
  .blurred-circle {
    width: 300px; /* Reduce size for smaller screens */
    height: 500px; /* Keep it proportionate */
    top: 0%; /* Adjust vertical position */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the circle */
    z-index: 1;
    opacity: 50%;
}

}


/* Tablet Screens */
@media screen and (min-width: 481px) and (max-width: 767px) {
  
  
}