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

body {
  font-family: Arial, sans-serif;

}

img {
  max-width: 100%;
  height: auto;
}

h6 {
  font-weight: 100;
  line-height: 1.2em;
  font-size: large;
  font-style: italic;
}

.bold-red h4 {
  color: red;
  font-weight: bold;

}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  color: white;
  padding: 3rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1000;

}

.logo {

  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  width: 200px;

}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style-type: none;
}

.nav-list li {
  margin: 0 10px;
}

.nav-list a {
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}

.nav-list a:hover {
  color: #00bcd4;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
  transition: 0.3s;
}

#empty_box1 {
  background-color: #336699;
  height: 8px;
}

#empty_box2 {
  background-color: #336699;
  height: 8px;
}

#empty_box3 {
  background-color: #336699;
  height: 8px;
}

.container {
  display: flex;
  height: 100vh;
  margin-top: 100px;
  /* Adjusted for header height */

}

.container2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* Adds space between the boxes */

}


.content {
  flex: 1 1 75%;
}

.content h1 {
  font-size: xx-large;
}

.content h2 {
  font-size: xx-large;
  font-weight: 100;
}

.section {
  color: black;

}

.box-fed a {
margin-top: 1em;
  font-style: italic;
  color: lightblue;
}
.img-box {
  background-color: #336699;
  color: black;
  width: 100%;
  height: auto;
  padding-bottom: 0px;
}

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

.image50 {
  width: 50%;
  height: auto;
  align-items: center;
  text-align: center;
}

.image50 img {
  width: 50%;
  height: auto;
  align-items: center;
  text-align: center;
}

.image25 {
  width: 200px;
  height: auto;
  align-items: center;
  text-align: center;

}

.image25 p {
  color: #666;
  font-size: small;
  font-style: italic;
}


.yellow-box {
  background-color: rgb(255, 210, 83);
  color: black;
  text-align: center;
  height: auto;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */
  text-align: justify;
  padding: 2rem;

}

.yellow-box h6 {
  text-align: center;

}

.yellow-box p {
  text-align: center;

}

.box-text {
  margin-left: 10%;
  margin-right: 10%;
}

.black-box {
  background-color: black;
  color: white;
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */

}

.black-box2 {
  background-color: black;
  color: white;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */

}

.black-box2 a {
  color: #fff;
  text-decoration: none;
}

.email-box {
  background-color: whitesmoke;
  color: white;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */

}


.email-box2 {
  background-color: black;
  color: white;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */

}

.email-box3 {
  background-color: darkslategray;
  color: white;
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */

}

.email-box2 a {
  color: cornflowerblue;
}

.email-box2 a:hover {
  color: white;
}

.email-box3 a {
  color: white;
}

.email-box3 a:hover {
  color: lightblue;
}


.cert-box {
  background-color: whitesmoke;
  padding: 20px;
  border: 1px solid #ccc;
  height: auto;
  /* Ensures the box is 25% shorter */
}

.cert-box2 {
  background-color: black;
  padding: 20px;
  border: 1px solid #ccc;
  height: auto;
  /* Ensures the box is 25% shorter */
}



.white-box {
  background-color: white;
  color: black;
  height: auto;
  display: flex;

  flex-direction: column;
  /* Stack items vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  border: 1px solid #ccc;
  flex-wrap: wrap;

}

.white-box h2 {
  text-align: center;
  padding-bottom: 20px;

}

.white-box p {
  line-height: 1.8;
}

.box {
  flex: 1;
  /* Shortens the box height by 25% */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: left;

}


.box p,
h1,
h2,
h3 {
  padding-left: 15px;
  padding-left: 15px;
  line-height: 1.5;
  /* Adjust this value for desired spacing */

}

.box h4 {
  padding-left: 15px;
  padding-left: 15px;
  line-height: 1.5;
  /* Adjust this value for desired spacing */
  font-weight: 100;
}

.box ul {
  color: #555;
  line-height: 1.5;
  /* Adjust this value for desired spacing */

  padding-left: 50px;
  padding-left: 50px;

}


.photo-box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: #333;
}

.photo-box2 {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
  color: #666
}

.photo-box2 img {
  height: auto;
  object-fit: cover;
  /* Fills the box while maintaining the aspect ratio */
  border-radius: 8px;
  /* Matches the box's border radius */

}

.photo-box img {
  height: auto;
  object-fit: cover;
  /* Fills the box while maintaining the aspect ratio */
  border-radius: 8px;
  /* Matches the box's border radius */

}

.photo-box img h2 {
  justify-content: left;

}

.photo-box h3 {
  justify-content: center;

}

.class-box h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
}

.class-box p {
  margin: 10px 0 0;
  color: #555;
}

.stacked-container {
  display: flex;
  flex-direction: column;
  /* Ensures stacking vertically */
  align-items: center;
  /* Optional, centers the content */
  text-align: center;
  /* Optional, centers text */
  margin: 20px;
  /* Optional, adds space around the container */

}



.training-section {
  display: flex;

  gap: 1rem;
  /*
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 20px;
  background-color: #f9f9f9;
  margin: 20px 0;
  */
}


.training-box {

  flex: 1 1 calc(33.333% - 1rem);
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #fff;
  text-decoration: none;
  color: inherit;

}




.training-box h3 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 10px;
}

.training-box p {
  font-size: 1em;
  line-height: 1.6;
  color: #666;
  text-align: left;
}

.training-section ul {
  color: #555;
  line-height: 1.5;
  /* Adjust this value for desired spacing */
  text-align: left;
  padding-left: 50px;
  padding-left: 50px;
  flex-direction: column;


}

/* Hover Effect */
.training-box:hover {
  transform: translateY(-10px);
  /* Moves the box slightly upwards */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Darker shadow */
  background-color: #f5f5f5;
  /* Slightly darker background */
}

/* Active (Clicked) Effect */
.training-box:active {
  transform: translateY(0);
  /* Reset the hover effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow */
  background-color: #e0e0e0;
  /* A slightly darker background to show the click */
}


.menu-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;

}


.menu-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;

}


.stacked-container {
  display: flex;

  justify-content: center;
  align-items: center;
}

.menu-toggle {
  display: none;
  /* Hidden on larger screens */
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
  transition: 0.3s;
}

.pdf-container {
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.download-link {
  display: inline-block;
  margin: 20px 0;
  padding: 10px 15px;
  font-size: 16px;
  color: white;
  background-color: #007BFF;
  text-decoration: none;
  border-radius: 5px;
}

.download-link:hover {
  background-color: #0056b3;
}

.download-center {
  align-items: center;

}



/* Media Mobile Here */

/* Media Queries */
@media (max-width: 1024px) {
  header {

    flex-direction: row;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem;
  }

  .menu-toggle { 
    display: flex;
    /* Show on smaller screens */
  }

  .nav-list {
    display: none;
    /* Initially hidden */
    flex-direction: column;
    gap: 0.5rem;
    
  }

  

 .nav-list { 
   
    color: #e0e0e0;
  }

  .nav-list2 ul li a {
    margin: 10px 0;
    text-align: center;
    color: #e0e0e0;
  }

  .logo {
    font-size: 1.25rem;
  }

 .nav-list2 {
  list-style: none;               /* Removes bullets */
  margin: 0;
  padding: .5rem;
  padding-top: 1.5rem;
  background-color: #336699;     /* Simple background */
  display: flex;
  flex-direction: column;
   /* existing styles... */
 box-shadow: 10px 10px 10px rgb(59, 59, 59); /* Right and down shadow */



}

.nav-list2 li {
  margin: 0;
  padding: 0;
}

.nav-list2 li a {
  display: block;
  padding: 0.2rem .3rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
   /* existing styles... */
  border: 1px solid darkblue; /* White border, 1px thick */


}
  

  .container,
  .container2 {
    flex-direction: column;
    gap: 1rem;
  }

  .training-box {
    flex: 1 1 100%;
    margin-bottom: 1rem;
  }

  .content h1,
  .content h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .yellow-box {
    text-align: center;
    padding: 1rem;
  }

  .yellow-box h6 {
    color: black;
    font-weight: 300;
  }

  .white-box {
    padding: 40px 15px;
    margin: 0 10px;
  }

  .white-box h2 {
    font-size: 1.25rem;
    font-weight: 300;

  }

  .white-box p {
    font-size: 0.95rem;
  }





  .training-section {
    flex-direction: column;
    /* Stack items vertically */
    gap: 1rem;
    /* Add spacing between items */
  }

  .training-box {
    flex: 1 1 100%;
    /* Ensure full width for each box */
  }

  .training-box img {
    width: 100%;
    /* Adjust images to fit container width */
    height: auto;
    /* Maintain aspect ratio */
  }

}





@media (max-width: 480px) {
  header {
    padding: 0.5rem;
  }

  .training-box {
    margin-bottom: 1rem;
  }

  .white-box {
    padding: 30px 10px;
    margin: 0 5px;
  }

  .white-box h2 {
    font-size: 1rem;
  }

  .white-box p {
    font-size: 0.9rem;
  }

  .yellow-box h6,
  .yellow-box p {
    font-size: 0.9rem;
  }

}