/* Global styles */
body {
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #222222;
  height: 100vh;
  /* background-image: url('media/photography/water_in_the_bush.jpg'); */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

p {
  font-size: 18px;
}

.content-wrap {
  flex: 1; /* This makes it flexible to occupy the available space */
  padding: 75px 50px;
}

/* Homepage menu styles */
.index {
  background-image: url('media/photography/water_in_the_bush.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* This ensures the image does not tile */
  background-attachment: fixed; /* Optional: if you want the image to stay put while scrolling */
  min-height: 100vh; /* This ensures that the .index element covers the full viewport height */
  width: 100%; /* This ensures that the .index element covers the full width */
}


/* Navigation menu styles */
header {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  font-size: 18px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

/* Hero section styles */
.hero {
  text-align: center;
  padding: 100px 0;
  color: #fff;
  /* background-image: url('media/photography/water_in_the_bush.jpg'); */
  background-color:rgba(0, 0, 0, 0.7);
  font-size: 36px;
}

phero {
  font-size: 24px;
}

/* Portfolio section styles */
.portfolio {
  color: #fff;
}

.portfolio-item {
  display: flex;
  margin-bottom: 20px;
  color: #fff;
}

.portfolio-item img {
  width: 200px;
  height: auto;
  margin-right: 20px;
}

.contact {
  color: #fff;
}

/* About/Medicine section styles */
.about {
  display: flex;
  align-items: center;
  color: #fff;
}

.about img {
  width: 400px;
  height: auto;
  margin-right: 50px;
  margin-left: 50px;
}

/* Photography section styles */
.photography {
  color: #fff;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
  grid-gap: 25px;
  background-color: #222222;;
}

.photo-grid img {
  width: 100%;
  height: auto;
}

/* Footer styles */
footer {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  padding: 8px;
  position: relative; /* Change to relative */
  width: 100%;
}