/* Style sheet for Tsavo Baby website */

/* Reset some default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: #f9f5f2;
  color: #333;
  line-height: 1.6;
}

header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
}


/* Logo image styling */
.logo-img {
  height: 50px;
  width: auto;
  display: block;
}

/* Adjust the original logo text styling to harmonize with the new logo image */
header .logo {
  font-size: 1.5em;
  font-weight: bold;
  color: #7fbaae;
  display: flex;
  align-items: center;
  gap: 10px;
}

nav {
  margin-top: 10px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

nav a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

nav a:hover {
  background-color: #7fbaae;
  color: #fff;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 20px;
  background-color: #f5d0c5;
  flex-wrap: wrap;
}

.hero .content {
  flex: 1 1 350px;
  max-width: 600px;
  margin-right: 20px;
}

.hero h1 {
  font-size: 2.4em;
  color: #333;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.hero .btn {
  display: inline-block;
  background-color: #7fbaae;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.hero .btn:hover {
  background-color: #669e93;
}

.hero img {
  flex: 1 1 300px;
  max-width: 400px;
  width: 100%;
  border-radius: 8px;
}

section {
  padding: 40px 20px;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.feature {
  flex: 1 1 250px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.feature h3 {
  color: #7fbaae;
  margin-bottom: 10px;
}

footer {
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  font-size: 0.9em;
  border-top: 1px solid #eee;
  margin-top: 40px;
}

/* Call‑to‑action section */
.cta {
  background-color: #f5d0c5;
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  margin: 40px auto;
  max-width: 800px;
}

.cta h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.8em;
}

.cta p {
  margin-bottom: 20px;
  font-size: 1.1em;
}

.cta .btn {
  background-color: #7fbaae;
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta .btn:hover {
  background-color: #669e93;
}

/* Social links in the footer */
.social-links a {
  color: #7fbaae;
  text-decoration: none;
  margin: 0 8px;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #4c7d75;
}

/* Product page */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card img {
  /*
    Show the entire product mock‑up image without cropping.
    Using contain preserves the aspect ratio of our tall product images and
    prevents the logo and text on the packaging from being cut off. We also
    limit the maximum height so cards remain a consistent size.
  */
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}

.product-card .content {
  padding: 15px;
  flex-grow: 1;
}

.product-card h4 {
  margin-bottom: 10px;
  color: #7fbaae;
}

.product-card p {
  font-size: 0.95em;
  margin-bottom: 15px;
}

.product-card .price {
  font-weight: bold;
  margin-bottom: 15px;
}

.product-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* About page */
.about-section {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.about-section h2 {
  color: #7fbaae;
  margin-bottom: 20px;
}

.about-section p + p {
  margin-top: 15px;
}

/* Contact page */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
  color: #7fbaae;
  margin-bottom: 15px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact-form button {
  background-color: #7fbaae;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #669e93;
}