/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." *
     /* General */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f9;
  color: #333;
}

/* Header */
header {
  background: royalblue;
  color: white;
  text-align: center;
  padding: 30px 20px;
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
}

header p {
  font-size: 1.2rem;
}

/* Hero Section */
.hero {
  position: relative;
  text-align: center;
}

.hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  filter: brightness(70%);
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* About */
.about, .services, .contact {
  padding: 40px 20px;
  text-align: center;
}

.about p {
  max-width: 600px;
  margin: auto;
}

/* Services */
.services {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.service-box {
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  width: 280px;
  text-align: center;
}

.service-box img {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
}

.service-box h3 {
  margin: 15px 0 10px;
}

/* Contact */
.contact p {
  font-size: 1.1rem;
  margin: 8px 0;
}

/* Footer */
footer {
  background: #222;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}
/* Logo styling */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.logo img {
  width: 60px;
  height: 60px;
}

.logo h1 {
  font-size: 2.2rem;
  font-weight: bold;
  color: gold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}