body {
  background: #f8f8f8; 
  color: #222;         
  line-height: 1.6;    
}


header {
  background: rgb(18, 18, 18);    
  border-bottom: 1px solid #e5e5e5; 
}

header h1 {
  color: #f2f0f0;           
  font-weight: 700;      
  margin-bottom: 0.5rem; 
}

header p {
  color: #fdfbfb;           
  font-weight: 500;      
}

/* 3. HERO SECTION - Image and intro text */
#hero {
  background: white;           
  border: 1px solid #e5e5e5;   
  border-radius: 8px;          
}


#testimonials section {
  background: #f8f8f8;        
  border-left: 3px solid #000; 
}

/* 6. FORM - Sign up section */
#registration-form input,
#registration-form select {
  border: 1px solid #ddd;     /* Light gray border */
  border-radius: 6px;         /* Rounded corners */
}

#registration-form input:focus,
#registration-form select:focus {
  border-color: #000;         /* Black border when clicked */
  outline: none;              /* Removes default browser outline */
}

button[type="submit"] {
  background: #000;           /* Black button */
  color: white;               /* White text */
  font-weight: 600;           /* Bold text */
  border-radius: 6px;         /* Rounded corners */
}

button[type="submit"]:hover {
  background: #333;           /* Dark gray on hover */
}

/* 7. FOOTER - Bottom section */
footer {
  background: #000;           /* Black background */
  color: white;               /* White text */
  border-top: 1px solid #333; /* Dark gray top border */
}

footer a:hover {
  color: #ccc;               /* Light gray links on hover */
}