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


html,body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #dae6df;
}

a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}

h1,h2,h3 {
 
}

p {
  margin: 10px 0;
}
/*utility*/
.navbar {
  margin: auto;
  max-width: 1400px;
  overflow: auto;
  padding: 0px;
 }
.container {
  margin: auto;
  max-width: 900px;
  overflow: auto;
  padding: 10px;
}
.words {
  text-align: left;
  margin: auto;
  max-width: 1100px;
  overflow: auto;
  padding: 10px;
}

.text-primary {
  color: #333;
}
.lead {
  font-size: 10px;
}
.btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #fff;
  background: #333;
  padding: 10px 10px;
  border: none;
  border-radius: 6px;
  }

#navbar {
  background: #ffffff56;
  color: #444;
  overflow: auto;
}

#navbar a {
  color: #444;
}

#navbar h1 {
  float: left;
  padding-top: 10px;
  padding-bottom: 0px;
  font-family: 'Cinzel', serif;
}

#navbar ul {
  list-style: none;
  float: right;
}

#navbar ul li {
  float: left;
}

#navbar ul li a {
  display: block;
  padding: 10px;
  text-align: center;
  font-family: 'Cinzel', serif;
}

#navbar ul li a:hover,
#navbar ul li a.current
 {
  background: #8DB29F;
  font-weight: bold;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  z-index: 999;
  background-color: #dae6df;
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

}
.foot {
  display: flex;
  justify-content: center;
}
.sidebar li {
  width: 100%;
}
.sidebar a {
  width: 100%;
}
#showcase {
  background: url(../img/heroravenwood.jpg) no-repeat center center/cover;
  height: 400px;
  background-size: cover; /* or 'contain' based on your need */
  background-position: center; /* Ensures the image is centered */
  }
  #showcase-1 {
    background: url(../img/hodhero.png) no-repeat center center/cover;
    height: 400px;
    background-size: cover; /* or 'contain' based on your need */
    background-position: center; /* Ensures the image is centered */
    }
  #showcase-2 {
    background: url(../img/RWherotest4.png) no-repeat center center/cover;
    height: 400px;
    background-size: cover; /* or 'contain' based on your need */
    background-position: center; /* Ensures the image is centered */
    }
    #showcase-3 {
      background: url(../img/heroravenwood.jpg) no-repeat center center/cover;
      height: 400px;
      background-size: cover; /* or 'contain' based on your need */
      background-position: center; /* Ensures the image is centered */
      }
      #showcase-4 {
        background: url(../img/MOWhero.png) no-repeat center center/cover;
        height: 400px;
        background-size: cover; /* or 'contain' based on your need */
        background-position: center; /* Ensures the image is centered */
        }
        #showcase-5 {
          background: url(../img/smghero.png) no-repeat center center/cover;
          height: 400px;
          background-size: cover; /* or 'contain' based on your need */
          background-position: center; /* Ensures the image is centered */
          }
#history .words {
  background: #dae6df;
  color: #444;
  text-align: left;
  padding-top: 20px;
  padding-left: 10px;
  font-size:larger;
}
/* In your external stylesheet (e.g., styles.css) */
#history .words img {
  display: block;
  margin: auto;
  padding-bottom: 20px;
}

#history h1 {
  text-align: center;
  font-family: 'Cinzel', serif;
}
#history-hod .words-hod {
  background: #dae6df;
  color: #444;
  text-align: center;
  padding-top: 20px;
  padding-left: 10px;
  font-family: 'Cinzel', serif;
}

.blog {
  display: flex;
  align-items: center;
  justify-content: center; /* Changed to center horizontally */
  margin-top: 50px;
}

.blog img {
  margin-right: 50px;
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.blog a {
  font-family: 'Cinzel', serif;
  text-decoration: underline;
  padding-left: 2rem;
}

/* Image Container */
.image-container {
  background-color: #f0f0f0;
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: inline-block;
  padding: 10px;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.donate {
  text-align: center;
  background: #dae6df;
  padding: 10px;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #dae6df;
}

.italic {
  font-style: italic;
}
ol {
  padding-left: 30px; /* Adjust this value as needed */
}

#covens {
  background: #dae6df;
  color: #444;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size:larger;
}
.menu-button {
  display: none;
}
#expectations .student {
  background: #dae6df;
  color: #444;
  text-align: left;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: auto;
  max-width: 1100px;
  overflow: auto;
  padding: 10px;
   font-size:larger;
}
#expectations .student h1, h2 {
  background: #dae6df;
  color: #444;
  text-align: center;
  font-family:'Cinzel', serif;
  margin: auto;
  max-width: 1100px;
  overflow: auto;
  padding: 10px;
}
#expectations .student ul{
  list-style-type: disc; /* This adds bullet points */
    padding-left: 20px;    /* This indents your list */
}
#expectations .student ul li {
  text-align: left;
  margin-left: 20px; /* Indents each list item */
 
}
.splash {
  display: flex;
  flex-direction: column; /* Aligns children elements (links and image) vertically */
  justify-content: center; /* Centers the content vertically */
  align-items: center; /* Centers the content horizontally */
  height: 100vh; /* Optional: Makes the splash div take the full viewport height */
}

.splash a {
  margin: 20px 0; /* Adds space above and below each link */
  text-decoration: none; /* Removes the underline from links */
  color: #000; /* Change color as needed */
  font-size: 20px; /* Adjust font size as desired */
}

.splash img {
  max-width: 100%; /* Makes the image responsive */
  height: auto; /* Keeps the image aspect ratio */
}

@media screen and (max-width: 1024px) {
  #showcase {
      background-image: url('../img/ravenwood\ 768.png'); /* Optional: different image for smaller screens */
      height: 768px; /* Adjust the height for smaller screens */
  }
}

@media screen and (max-width: 1024px) {
  .hideOnMobile {
    display: none;
}
 .menu-button {
  display: block;
 }
}
@media screen and (max-width: 540px) {
  .sidebar{
    width: 100%;
  }
  #showcase {
    background-image: url(../img/ravenwood\ 400.png);
    height: 400px; /* Adjust the height for smaller screens */
}
}