style.css

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

nav {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  align-items: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: rgba(27, 159, 111, 0.5);
  z-index: 1; /* Add this to ensure the nav bar is on top of other elements */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.logo-container {
  margin-left: 40px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff; /* White logo text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Add a subtle text shadow */
}

ul {
  margin-right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li {
  margin-left: 30px;
  list-style: none;
}

button {
  border: 1px solid #fff; /* Add a white border */
  padding: 20px 30px; /* Increase padding to make the box bigger */
  width: 150px; /* Set a fixed width to make the box bigger */
  border-radius: 10px; /* Increase border radius to make the box more rounded */
  background-color: rgb(77, 208, 160);
  color: #fff;
  box-shadow: 0 2px 5px 0 rgba(182, 177, 177, 0.1); /* Add a subtle shadow */
  transition: 0.5s;
}

button:hover {
  color: rgb(50, 144, 50);
  background-color: #fff;
  box-shadow: 0 4px 8px 0 #e5e1e1; /* Increase shadow depth on hover */
  transform: translateY(-2px); /* Add a subtle translate effect on hover */
  transition: 0.5s;
  cursor: pointer;
}

main {
  background: url(https://naturehikepakistan.pk/wp-content/uploads/elementor/thumbs/hunza-valley-autumnn-min-qko520gkxgnwv73gnt71nqm9y4tm4r1qnxz3ttpfuw.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
main h1 {
  font-size: 3rem;
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
main p {
  max-width: 600px;
  margin: 10px;
  font-size: 1.5rem;
  color: #fff;
}

.card {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.card .card-content {
  width: 500px;
  height: 500px;
  padding: 20px;
  margin: 0 2rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 1rem;
  flex-wrap: wrap;
  margin-bottom: 50px;
  box-shadow: 0 5px 10px rgb(1, 55, 13); /* Add a subtle shadow */
  display: block; /* Make the a tag a block element */
  background-color: rgba(103, 197, 139, 0.541);
}
.card .card-content h1 {
  font-size: 2rem;
  font-family: "Times New Roman", Times, serif;
  margin-top: 1rem;
}
.card .card-content p {
  flex-basis: 100%;
  margin-top: 1rem;
}
.card .card-content ol {
  list-style: decimal; /* Use decimal numbering for the list */
  margin: 0;
  padding: 0;
}
.card .card-content ol li {
  margin-bottom: 10px; /* Add some space between list items */
}
.card .card-content ol a {
  text-decoration: underline;
  margin-top: 1rem;
}
.card .card-content .card-img {
  width: 400px;
  margin-right: 2rem;
}
@media (max-width: 768px) {
  .card .card-content {
    flex-direction: column;
  }
}

.gallery {
  margin-top: 6rem;
}
.gallery h1 {
  text-align: center;
  font-family: sans-serif;
  margin-bottom: 5rem;
  margin-top: 20rem;
  margin-bottom: 10rem;
}
.gallery .img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px rgba(0, 43, 10, 0.806); /* Add a subtle shadow */
  margin: 20px;
  background-color: rgba(0, 82, 15, 0.626);
}
.gallery .gallery-img {
  width: 300px;
  margin: 20px;
}

footer {
  height: 100vh;
  display: flex;
  flex-direction: column; /* Align items in a column */
  justify-content: center;
  align-items: center;
  background-color: rgb(56, 96, 78);
  color: white;
  flex-direction: column;
}
footer input {
  padding: 10px 20px;
  margin-bottom: 20px;
  margin-top: 0;
  background-color: rgba(147, 240, 198, 0.811);
}
footer textarea {
  padding: 20px;
  width: 420px;
  height: 200px;
  margin-bottom: 20px;
  background-color: rgba(147, 240, 198, 0.811);
}
footer a {
  text-decoration: none;
  color: #fff;
  background: green;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}/*# sourceMappingURL=style.css.map */