/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #6f4f37; /* Deep coffee color background */
  color: #f5f5f5; /* Off-white font color */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Header Navigation */
header {
  background-color: #2c2f36; /* Dark gray background */
  padding: 20px;
  border: none; /* Ensure no border */
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  text-decoration: none;
  color: #f5f5f5; /* Off-white font color */
  font-size: 18px;
  transition: color 0.3s;
  border: none; /* Ensure no border */
}

nav ul li a:hover {
  color: #cbaf77; /* Gold color on hover */
}

/* Section Styling */
section {
  padding: 40px 20px;
  margin: 20px 0;
  background-color: #2c2f36; /* Dark gray background */
  border-radius: 8px;
  border: none; /* Remove border */
}

/* Titles */
h1,
h2,
h3 {
  color: #cbaf77; /* Gold color for titles */
  margin-bottom: 20px;
  text-align: center; /* Center all titles */
}

/* Remove borders for text elements */
p,
li,
form label,
.qa-item p {
  border: none; /* No border */
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
}

/* Exclude navigation and footer text from gold border */
nav ul li a,
footer p {
  border: none; /* No border for navigation links and footer text */
}

/* Home Section */
#home {
  text-align: center;
  padding: 50px;
  background-color: #2c2f36; /* Dark gray background */
}

#home h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

/* About Section */
#about p {
  font-size: 18px;
  line-height: 1.8;
}

/* Coffee Section */
#coffee {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.coffee-item,
.brewing-method {
  width: 30%;
  background-color: #2c2f36; /* Dark gray background */
  margin: 10px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.coffee-item img,
.brewing-method img {
  width: 100%;
  border-radius: 8px;
}

.coffee-item h3,
.brewing-method h3 {
  color: #cbaf77; /* Gold color for coffee names */
  margin-top: 10px;
}

/* Last Activities Section */
#activities {
  text-align: center;
  background-color: #2c2f36; /* Dark gray background */
}

#activities p {
  font-size: 18px;
  line-height: 1.6;
}

/* Q&A Section */
.qa-item {
  background-color: #2c2f36; /* Dark gray background */
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.qa-item h3 {
  color: #cbaf77; /* Gold color for questions */
}

.qa-item p {
  font-size: 16px;
  line-height: 1.6;
}

/* Login and Contact Forms */
form {
  background-color: #2c2f36; /* Dark gray background */
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  margin: 0 auto;
}

form label {
  font-size: 18px;
}

form input,
form textarea,
form button {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

form input,
form textarea {
  background-color: #444c56; /* Dark gray background for inputs */
  color: #f5f5f5; /* Off-white text color for inputs */
}

form button {
  background-color: #cbaf77; /* Gold button color */
  color: #2c2f36; /* Dark gray font color */
  cursor: pointer;
}

form button:hover {
  background-color: #a48d5a; /* Darker gold on hover */
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: #2c2f36; /* Dark gray background */
  color: #f5f5f5; /* Off-white text color */
  font-size: 14px;
  border: none; /* Ensure no border */
}

/* Container for Coffee Types & Brewing Methods */
#coffee {
  margin-bottom: 40px;
}

/* Each item should have image on the left and text on the right */
.coffee-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px; /* Space between rows */
}

/* Style for each item */
.coffee-item {
  display: flex; /* Arrange image and text horizontally */
  align-items: center; /* Align items vertically in the center */
  flex: 1; /* Allow items to grow and fill the available space */
  margin: 0 15px; /* Add some space between items */
}

/* Image style */
.coffee-item img {
  width: 200px; /* Set a fixed size for the image */
  height: 200px;
  object-fit: cover; /* Ensure image covers the space */
  margin-right: 20px; /* Space between image and text */
}

/* Text (heading and paragraph) style */
.coffee-item h3,
.coffee-item p {
  text-align: left; /* Align text to the left */
}

/* Ensure the text is vertically centered next to the image */
.coffee-item h3 {
  margin: 0 0 10px 0; /* Add margin between title and paragraph */
}

.coffee-item p {
  margin: 0; /* Remove default margin for paragraph */
}

/* Image centering (if required) */
.center-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}