/* Import Libre Baskerville font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');

/* General Styling */
body {
  font-family: 'Libre Baskerville', serif; /* Apply Libre Baskerville font */
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
}

.hero {
  position: relative;
  background-image: url('./images/bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 30vh;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  color: white;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
  z-index: 1; /* Ensures the overlay stays behind the text */
}

.hero .title {
  font-size: 2.3rem;
  margin: 0;
  position: relative; /* Makes sure the title is above the overlay */
  z-index: 2; /* Places the text above the overlay */
  padding: 20px;
}

/* Content Section Styling */
.content {
  padding: 40px 20px;
}

/* .section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px 20px;
  margin-bottom: 5px;
} */

.section {
  background-color: #f9f9f9; /* Slightly lighter background */
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px; /* Rounded corners for a clean look */
}


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

p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555; /* Slightly lighter text color */
}

.license-link {
  color: #0073e6; /* Custom blue color for links */
  text-decoration: none;
  font-weight: bold;
}

.license-link:hover {
  text-decoration: underline;
}

.section h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* Paragraph styling with space between lines */
.section p {
  font-size: 1rem;
  line-height: 1.8; /* Increased line-height for better readability */
  text-align: justify;
  margin-bottom: 20px; /* Add space after paragraphs */
}

/* List Styling */
ul {
  padding-left: 20px; /* Adds indentation for the list */
}

ul li {
  font-size: 1rem;
  line-height: 1.8; /* Increased line-height for better readability */
  margin-bottom: 10px; /* Add space between list items */
}

/* Image styling inside sections */
.section img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}

/* Footer Styling */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
  position: fixed;
  width: 100%;
  bottom: 0;
}