/* General Settings */

.main-content {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #e6f0ff;
}

/* Top Header */
.top-header {
  background-color: #000;
  color: white;
  padding: 20px 20px;
  text-align: right;
  font-size: 20px;
  margin-bottom:5px;
}

/* Second Header */
.second-header {
  background-color: #0073e6;
  display: flex;
  align-items: center;
  padding: 20px 20px;
  margin-bottom:5px;

}

.second-header img {
  height: 70px;
  margin-right: 25px;
}

.second-header h1 {
  margin: 0;
  color: white;
  font-size: 40px;
}

/* Navigation Menu */
nav {
  background-color: #3399ff;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  font-size: 16px;
}

nav ul li:hover {
  background-color: #1a8cff;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 48px;
  left: 0;
  background-color: #3399ff;
  flex-direction: column;
  min-width: 160px;
  z-index: 1000;
}

nav ul li:hover ul {
  display: flex;
}

nav ul li ul li {
  width: 100%;
}

nav ul li ul li a {
  padding: 12px 16px;
}

/* Slider Section */

.slider {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 450px;
}

.slides {
  display: flex;
  width: 300vw; /* 100vw * 3 images */
  animation: slide 12s infinite;
}

.slides img {
  width: 100vw;
  height: 450px;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes slide {
  0%   { transform: translateX(0vw); }
  33%  { transform: translateX(0vw); }
  36%  { transform: translateX(-100vw); }
  66%  { transform: translateX(-100vw); }
  69%  { transform: translateX(-200vw); }
  99%  { transform: translateX(-200vw); }
  100% { transform: translateX(0vw); }
}


/* Main Content Area */
.main-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 20px;
}

.notice-board, .vision-mission, .events-activities {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  flex: 1;
}

.notice-board {
  flex: 1;
}

.vision-mission {
  flex: 2;
}

.events-activities {
  flex: 1;
}

/* Footer */
footer {
  background-color: #0059b3;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}



/* Gallery Section */
.gallery-section {
  background-color: #f4f8ff;
  padding: 40px 20px;
  text-align: center;
}

.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #003366;
}

.gallery-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 20px;
  width: calc(300px * 12); /* 12 images including duplicates */
  animation: scrollGallery 40s linear infinite;
}

.gallery-track img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Animation */
@keyframes scrollGallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1800px); /* 300px * 6 images */
  }
}

/* 3-Column Info Section */
.info-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 50px 20px;
  background-color: #eaf3ff;
}

.info-box {
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  text-align: left;
}

.info-box h3 {
  color: #003366;
  margin-bottom: 15px;
}

.info-box p {
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}

.map-container iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
}


.vision-mission p,
.vision-mission ul li {
  text-align: justify;
}
.vision-mission {
  padding: 30px;
  background-color: #f4f9ff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.vision-mission h2 {
  color: #003366;
  margin-bottom: 10px;
}

.vision-mission p,
.vision-mission ul li {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.vision-mission ul {
  padding-left: 20px;
  list-style-type: disc;
}

.about-us {
  background-color: #f4f8ff;
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

.about-us h2 {
  color: #003366;
  margin-bottom: 20px;
  text-align: center;
}

.about-us p {
  text-align: justify;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}
.contact-us {
  background-color: #eaf3ff;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.contact-us h2 {
  color: #003366;
  margin-bottom: 15px;
  text-align: center;
}

.contact-us p {
  text-align: justify;
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}


/* Locate Us Section */
.locate-us {
  background-color: #f4f9ff;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.locate-us h2 {
  color: #003366;
  text-align: center;
  margin-bottom: 20px;
}

.map-container {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


.notice-board {
  background-color: #fff8e1;
  border: 2px solid #f9c200;
width: 25%;
max-width: 250px;
min-width: 200px;
  padding: 20px;
  border-radius: 10px;
  height: 320px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.notice-board h2 {
  text-align: center;
  color: #c28000;
  margin-bottom: 15px;
}

.notice-board ul {
  list-style: none;
  padding-left: 15px;
}

.notice-board ul li {
  margin-bottom: 12px;
}

.notice-board a {
  text-decoration: none;
  color: #003366;
  font-weight: 500;
}

.notice-board a:hover {
  text-decoration: underline;
  color: #0056b3;
}

.events-activities {
  background-color: #f0f8ff;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.events-activities h2 {
  color: #003366;
  margin-bottom: 20px;
  text-align: center;
}

.events-activities p {
  text-align: justify;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.events-activities ul {
  padding-left: 20px;
  list-style-type: disc;
}

.events-activities ul li {
  margin-bottom: 10px;
  text-align: justify;
  color: #444;
}


body {
  font-family: Arial, sans-serif;
  background-color: #f3f3f3;
}

.form-container {
  max-width: 600px;
  margin: 30px auto;
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  color: #2a4b7c;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 15px;
  font-weight: bold;
}

input, select, textarea {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

button {
  margin-top: 20px;
  background-color: #2a4b7c;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #1f3860;
}