body {
  font: 16px Arial, sans-serif;
}
a {
  color: blue;
  text-decoration: none;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}
.page {
  margin:10px 10px 10px 10px;
}
.shbox {
  margin-top:20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.grid-container {
  margin-top:20px;
  margin-bottom:20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  display: grid; /* Enables CSS Grid layout */
  grid-template-columns: 1fr 1fr 1fr; /* Creates three equal-width columns */
  gap: 20px; /* Adds space between grid items */
}
.grid-item {
   padding: 15px;
   text-align:center;
   font: 20px Arial, sans-serif;
}
.slogan-container {
  padding-top:30px;
  background-color:#EEF;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
}
.slogan-image {
   margin:10px 10px 10px 10px;
   width: 40%;
   min-width: 200px;
   border-radius: 10px;
}
.slogan {
   font: 24px Arial, sans-serif;
   color: black;
   padding-left: 5%;
}

.slogan-heading {
   font: 28px Arial, sans-serif;
   color: black;
   padding-bottom: 24px;
}

.events-container {
  padding-top:30px;
  background-color:#EEF;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.pic-card {
  width: 350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  border-radius: 10px;
}
.pic-card-caption {
  padding: 10px;
  text-align: left;
}
.button-container {
  padding-top:30px;
  padding-bottom:20px;
  background-color:#EEF;
  text-align: center;
}
.button-link {
   background-color:blue;
   padding: 8px 20px;
   text-decoration:none;
   font-weight:bold;
   border-radius:5px;
   cursor:pointer;
   color: white;
}

.nav-extension {
  font: 20px Arial, sans-serif;
  background-color: #007700;
  background-image: linear-gradient(to right,#00BF63,#38B6FF);
  padding: 10px 20px;
  text-align: center;
  color: white;
}

.shaded-container {
  background-color: #007700;
  background-image: linear-gradient(to right,#00BF63,#38B6FF);
  padding:20px;
  font: 20px Arial, sans-serif;
  color: white;
}

.white-container {
  background-color: white;
  padding:30px;
  font: 20px Arial, sans-serif;
  color: black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}

/* Base styles for desktop (items are side-by-side) */
.flex-container {
  padding-bottom:16px;
  display: flex;
  flex-direction: row; /* Default layout on larger screens */
  justify-content: space-between; /* Add space between items */
}

.flex-item {
  width: 30%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  border-radius: 10px;
}

.details-page {
   margin:20px;
}

.details-heading {
font: bold 24px Arial, sans-serif;
padding-top: 14px;
padding-bottom: 14px;
}

.details-text {
line-height: 24px;
color: #666;
}

.details-images {
border-radius: 10px;
width:300px;
}

.form-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
}

.form-heading {
  text-align: center;
  font: bold 24px Arial, sans-serif;
  padding: 8px;
  color: navy;
}

.form-subheading {
  font: bold 16px Arial, sans-serif;
  padding: 8px;
  text-decoration: underline;
}

.form-text {
  text-align: center;
  font: 16px Arial, sans-serif;
  padding: 8px;
  color: blue;
}

input, textarea {
  margin-bottom: 10px;
}

input[type="text"], input[type="Email"], input[type="date"] {
   padding: 0px 5px; /* Adds 10px top/bottom padding, 15px left/right */
   line-height: 20px; /* Sets the line height of the text within the input */
}

.the-form {
  width: 500px;
  background-image: url('img/paper-background.jpg');
  padding: 20px;
  margin: 30px;
  border-radius:10px;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5);
}

#Name , #Email {
 width:340px;
 font: 16px Arial, sans-serif;
}

.submit-button {
 width:440px;
 font: bold 16px Arial, sans-serif;
 border-radius: 8px;
 background-color: blue;
 color: white;
 padding: 8px;
 border-color: #00c;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column; /* Stacks items vertically on smaller screens */
  }

  .flex-item {
    width: 100%; /* Makes items take up full width */
    margin-bottom: 10px;
  }
  .slogan {
     font: 16px Arial, sans-serif;
     color: black;
     padding-left: 1%;
}
}