html, body {
    height: auto;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to bottom right, rgb(126, 217, 87), rgb(25, 60, 95));
    overflow: auto;
}
.container {
    display: flex; /* Makes the children flex items */
    align-items: center; /* Optional: Vertically centers items */
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), /* Standard drop shadow (optional, for lift) */
                0 0 0 1000px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    background-image: linear-gradient(to bottom right, rgb(126, 217, 87), rgb(25, 60, 95));
}
h1 {
    text-align: justify;
    font-family: sans-serif;
}
.features {
    font-family: sans-serif;
    font-weight: bold;
    color: black;
    text-decoration: none;
    font-size: large;
    position: relative;
}

.features:hover {color: #303030;}

.title{
    font-family: sans-serif;
    font-weight: bold;
    color: black;
    text-decoration: none;
    font-size: xx-large;            
}

.title:hover {color: #070bff}


.right{
    text-align: right; 
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

.basic-button { 
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #020350;
  border: none;
  border-radius: 15px;
}

.basic-button:hover {background-color: #0508ad}

.basic-button:active {
  background-color: #070bff;
  transform: translateY(4px);
}

.phone{
    align-items: center;
    width: 20%;
    height: 20%;
    margin-top: 20%;
}

.features-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 3rem; /* Space between items */
  margin-top: 20%;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-item h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
}

.feature-item p {
  margin: 0;
  font-size: 0.95rem;
  color: #000;
  line-height: 1.5;
}

.features-container {
  display: flex;
  align-items: center; /* Vertically center phone and grid */
  justify-content: center;
  gap: 4rem; /* Space between Phone and Grid */
  padding: 50px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.icon-box svg {
  color: #000; /* The specific purple from your image */
  margin-bottom: 1rem;
  width: 50px; 
  height: 50px;
}

#top_page {
    
    /* 2. Layout & Spacing */
    width: 100%;
    padding: 200px 20px 100px 20px; 
    
    
    /* 3. Centering the content */
    display: flex;
    flex-direction: column; /* Stack text vertically */
    align-items: center;    /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center;
    
    /* 4. Font Family */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #222; /* Dark grey text color like the image */
}

/* The Main Title */
#top_page .brand-title {
    font-size: 4rem; /* Big text */
    font-weight: 400; /* Regular weight (not bold) matches the image */
    margin: 0;        /* Remove default spacing */
    letter-spacing: -1px; /* Slight tighten for modern look */
}

/* The Subtitle */
#top_page .brand-subtitle {
    font-size: 1.25rem;
    font-weight: 700; /* Bold matches the image */
    margin-top: 10px; /* Small space between title and subtitle */
    opacity: 0.9;
}

.quote-strip {
    /* Full width white box */
    width: 100%;
    background-color: #ffffff;
    
    /* Text Styling */
    color: #000000;
    text-align: center; /* Centers the text horizontally */
    
    /* Spacing */
    padding: 60px 20px; /* Top/Bottom padding makes the rectangle "tall" */
    
    /* Font tweaks for a "Quote" look */
    font-size: 1.5rem;  /* Larger text */
    font-style: italic; /* Classic quote style */
    font-family: serif; /* Optional: Serif fonts look elegant for quotes */
}

.center-bottom {
  /* Span across all available columns (1 to end) */
  grid-column: 1 / -1;
  
  /* Shrink the element to fit its content and center it horizontally */
  /* If you want the box to remain full width, remove this line. */
  justify-self: center; 
  
  /* Optional: Give it a width if you don't want it shrinking to text size */
  width: 50%; 
}

.register-container h3 {
  text-align: center;
  font-size: xx-large;
  font-weight:bolder;
  margin-top: 5%;
}

.register-container{
  align-items: center;
}

.arrow {
  position: relative;
  width: 50px;
  height: 30px;
  background-color: black; /* Color of the arrow's body */
  border-radius: 5px 0 0 5px; /* Rounded left end */
  
  /* Apply the animation */
  animation: up-down 1.5s ease-in-out infinite;
}

/* Pseudo-element for the arrowhead (triangle) */
.arrow::before {
  content: "";
  position: absolute;
  top: -15px; /* Adjust vertical position */
  left: 50px; /* Position next to the rectangle body */
  
  /* Create the triangle using borders */
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid black; /* Color of the arrowhead */
}

/* Keyframes for the Up and Down Movement */
@keyframes up-down {
  0% {
    transform: rotate(90deg) translateX(0); /* Start position: up arrow, no movement */
  }
  50% {
    transform: rotate(90deg) translateX(-20px); /* Mid-point: Move 20px up */
  }
  100% {
    transform: rotate(90deg) translateX(0); /* End position: Return to start */
  }
}

.arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Example height to show the movement */
  width: 100%;
}

.input{
  display: flex;
  justify-content: center;
  align-items: center;  
}

#registrationForm {
/* We'll use this container to center the elements */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center items horizontally within the container */
  padding: 20px;
  max-width: 500px; /* Set a maximum width for the container */
  width: 90%; /* Make it responsive */
}

/* --- Input Styling --- */
#emailInput {
 /* Make the text box bigger */
  width: 400px; /* Increased width */
  padding: 10px;
  font-size: 1.1em;
  margin-bottom: 20px; /* Space below the input */
  background-color: white; /* Matching your image input background */
  border: none;
}
        
/* Ensure the form itself doesn't interfere with centering */
#emailForm {
    display: contents; /* Allows children to be treated as direct children of #registrationForm for centering */
}

/* --- Button Styling --- */
#submitButton {
/* The button is already centered due to align-items: center on #registrationForm */
  padding: 8px 20px;
  font-size: 1em;
  cursor: pointer;
  background-color: white; /* Matching your image button background */
  border: 1px solid white;
}

#message {
  margin-top: 15px;
  color: black; 
  font-weight:bolder;
}