@charset "UTF-8";

/* General Styles */
body {
	margin: 0;
	font-family: 'Raleway', sans-serif;
	background-color: #253670;
	color: #FFF;
	line-height: 1.6;
  }
  
  h1, h2 {
	color: #FFCC00;
  }
  
  a {
	text-decoration: none;
	color: #FFCC00;
  }
  
  /* Header */
  .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #121c32;
	padding: 1rem 2rem;
	position: sticky;
	top: 0;
	z-index: 1000;
  }
  
  .logo {
	width: 15em;
	align-self: center;
	justify-self: center;
  }
  
  .navbar a {
	margin: 0 1rem;
	font-weight: 600;
	transition: color 0.3s;
  }
  
  .navbar a:hover {
	color: #FFCC00;
  }
  
  /* Hero Section */
  .hero {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 4rem 2rem;
	background: linear-gradient(to right, #17233D, #253670);
  }
  
  .hero-content {
	max-width: 50%;
  }
  
  .hero-content h1 {
	font-size: 2.5rem;
  }
  
  .hero-content p {
	margin: 1rem 0;
  }
  
  .cta-button {
	background-color: #FFCC00;
	color: #17233D;
	padding: 1rem 2rem;
	border: none;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s;
  }
  
  .cta-button:hover {
	background-color: #E5B700;
  }
  
  /* Features Section */
  .features {
	text-align: center;
	padding: 4rem 2rem;
	background-color: #253670;
  }
  
  .features h2 {
	margin-bottom: 2rem;
  }
  
  .features-grid {
	display: flex;
	justify-content: center;
	gap: 2rem;
  }
  
  .feature {
	background: #17233D;
	padding: 1.5rem;
	border-radius: 10px;
	text-align: center;
	width: 250px;

  }
  
  .feature img {
	width: 50px;
	margin-bottom: 1rem;
  }
  
  /* About Section */
  .about {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	background-color: #17233D;
	gap: 2em;
  }
  
  .about-content {
	max-width: 50%;
  }
  .about-image {
	display:flex;
	align-items: center;
	justify-content: center;
  }
  .about-image img {
	width: 70%;
	
  }
  .drainRing {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 3em;
  }
  .drainRing img {
	width: 25em;
	padding-top: 2em;
  }
  .cta {
	text-align: center;
	padding: 2rem;
	background: linear-gradient(to right, #17233D, #253670);
	border-radius: 8px;
  }
  
  .contact-form {
	max-width: 500px;
	margin: 1em auto;
	display: flex;
	flex-direction: column;
	gap: 1em;
  }
  
  .contact-form label {
	font-size: 1em;
	color: #e1e1e1;
	font-weight: bold;
	align-self: flex-start;
  }
  
  .contact-form input,
  .contact-form textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	font-size: 1rem;
  }
  
  .contact-form textarea {
	resize: vertical;
  }
  
  .contact-form .cta-button {
	padding: 0.75rem 1.5rem;
	background-color: #FFCC00;
	color: #1a416f;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s ease;
  }
  
  .contact-form .cta-button:hover {
	background-color: #1a416f;
	color: #FFCC00;
  }
  
  /* Footer */
  .footer {
	text-align: center;
	padding: 1rem 0;
	background-color: #17233D;
	color: #FFF;
  }

  /* General Media Query for Mobile Screens */
@media (max-width: 768px) {
	/* Header */
	.header {
	  flex-direction: column;
	  padding: 1rem;
	
	}
	.navbar {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  gap: 0.5rem;
	}
	.logo {
	  width: 12em;
	}
  
	/* Hero Section */
	.hero {
	  flex-direction: column;
	  text-align: center;
	  padding: 2rem 1rem;
	  gap: 3em;
	}
	.hero-content {
	  max-width: 100%;
	}
	.hero-content h1 {
	  font-size: 1.8rem;
	}
	.hero-content p {
	  font-size: 1rem;
	}
	.hero-image img {
	  width: 80%;
	  margin-top: 1rem;
	}
	.cta-button {
		margin-top:2em;
	}
		/* Features Section */
		.features-grid {
			display: flex;
			flex-direction: column;
			align-items: center; /* Ensures proper centering */
			gap: 1rem;
			padding: 0 1rem; /* Adds padding to prevent elements from touching screen edges */
		  }
		  .feature {
			width: 90%; /* Reduces width slightly for better centering */
			margin: 0 auto; /* Centers the element horizontally */
		  }
	
  
	/* About Section */
	.about {
	  flex-direction: column;
	  text-align: center;
	  gap: 1rem;
	}
	.about-content {
	  max-width: 100%;
	}
	.about-image img {
	  width: 90%;
	}
	.about ul {
		text-align: left;
	}
  
	/* Drain Ring Section */
	.drainRing img {
	  width: 90%;
	  padding-top: 1em;
	}
  
	/* Contact Form */
	.contact-form {
	  max-width: 90%;
	  margin: 1em auto;
	}
	.contact-form label {
	  font-size: 0.9em;
	}
	.contact-form input,
	.contact-form textarea {
	  font-size: 0.9em;
	}
	.contact-form .cta-button {
	  font-size: 0.9em;
	  padding: 0.5rem 1rem;
	}
  }