header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
  background: linear-gradient(
    to right,
    lightyellow,
    #ffcc00
  ); /* Linear gradient from yellow to a golden shade */
}
body {
  padding-top: 160px; /* Adjust to the height of the header and navbar */
}
#slider img {
  width: 1200px;
  height: 400px;
  object-fit: cover;
}
.navbar-nav {
  margin: 0 auto; /* Center the nav links */
}
.navbar {
  background-color: #368500 !important; /* Set background color */
}

.navbar .nav-link {
  color: white !important; /* Ensure the links are white */
}
.navbar .navbar-toggler-icon {
  background-color: white; /* Set the toggle icon to white */
}
.navbar .nav-link.btn {
  color: white; /* Ensure text is white */
  padding: 10px 20px; /* Adjust padding for buttons */
  border-radius: 5px; /* Optionally add rounded corners */
}
.navbar .nav-link.btn:hover {
  background-color: #1a1d7d; /* Change the background color on hover */
}
.navbar .nav-link.btn {
  color: white; /* Text color */
  padding: 10px 20px; /* Adjust padding for buttons */
  border-radius: 5px; /* Optionally add rounded corners */
  font-weight: bold; /* Make the text bold */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* On hover, change the background color to golden */
.navbar .nav-link.btn:hover {
  background-color: #ffd700; /* Golden color */
}

/* On active (when clicked), change the background color to golden */
.navbar .nav-link.btn:active {
  background-color: #ffd700; /* Golden color */
  color: #386500; /* Optional: change text color when active */
}
#about h3 {
  color: #386500; /* Heading color */
  font-weight: bold; /* Make the heading bold */
}

.scrolling-links {
  height: 200px; /* Set a fixed height for the scrolling area */
  overflow: hidden; /* Hide overflow content */
  position: relative;
}

.scrolling-links ul {
  position: absolute;
  top: 0;
  animation: scrollUp 10s linear infinite; /* Scroll the list up */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.scrolling-links li {
  font-size: 1.2rem; /* Font size for the links */
  margin: 10px 0;
}

.scrolling-links a {
  color: #386500; /* Link color */
  text-decoration: none; /* Remove underline from links */
  font-weight: bold; /* Make the text bold */
}

.scrolling-links a:hover {
  color: #ffd700; /* Change color on hover */
}

/* Animation for scrolling from top to bottom */
@keyframes scrollUp {
  0% {
    top: 100%;
  }
  100% {
    top: -100%;
  }
}

/* Border styling for the Important Links section */
.scrolling-links {
  border: 2px solid #386500; /* Blue border */
  border-radius: 8px; /* Optional rounded corners */
  background-color: #f9f9f9; /* Light background color for better contrast */
}

/* Optional styling for columns to have some space */
.col-md-4 {
  margin-bottom: 30px; /* Space between columns */
}
footer {
  background-color: #386500; /* Set the footer background color */
  color: white; /* Ensure the text is white for contrast */
}
#md-message {
  background-color: #f9f9f9; /* Light background for contrast */
}

#md-message h2 {
  color: #386500; /* Header color */
  font-weight: bold; /* Make the section header bold */
}

#md-message h3 {
  color: #386500; /* Sub-header color */
  font-weight: bold; /* Make the MD's message title bold */
}

#md-message p {
  font-size: 1.1rem; /* Slightly larger font for readability */
  line-height: 1.6; /* Improve text readability */
}

#md-message img {
  max-width: 100%; /* Ensure image is responsive */
  border: 3px solid #386500; /* Add a border around the image */
  padding: 5px; /* Add some padding inside the border */
  border-radius: 50%; /* Make the image circular */
}
#principal-message {
  background-color: #ffffff; /* White background for contrast */
}

#principal-message h2 {
  color: #386500; /* Header color */
  font-weight: bold;
}

#principal-message h3 {
  color: #386500; /* Sub-header color */
  font-weight: bold;
}

#principal-message p {
  font-size: 1.1rem;
  line-height: 1.6;
}

#principal-message img {
  max-width: 100%;
  border: 3px solid #386500;
  padding: 5px;
  border-radius: 50%;
}
#contact h3 {
  color: #386500; /* Sub-header color */
  font-weight: bold;
}
#about-us {
  background-color: #f9f9f9;
}

#about-us h2 {
  color: #386500;
  font-weight: bold;
}

.faculty-category h3 {
  color: #386500;
  font-weight: bold;
  margin-bottom: 20px;
}

.faculty-category .row {
  margin-top: 20px;
}

.faculty-category img {
  max-width: 100%;
  border: 3px solid #386500;
  padding: 5px;
  border-radius: 50%;
}

.faculty-category h5 {
  font-weight: bold;
  color: #386500;
  margin-top: 10px;
}

.faculty-category p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555555;
}

.faculty-category .text-muted {
  color: #888888;
  font-style: italic;
}
.gallery-header {
  background: linear-gradient(to right, #386500, #0e0f91);
  color: white;
  padding: 30px 0;
  text-align: center;
}
.album {
  margin-bottom: 40px;
}
.album h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #386500;
}
.album img {
  width: 100%;
  height: 300px;
  border: 3px solid #386500;
  border-radius: 8px;
  transition: transform 0.3s;
}
.album img:hover {
  transform: scale(1.5);
}
/* Faculty Table Styling */
.table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse; /* Removes gaps between cells */
}

.table th,
.table td {
  border: 2px solid #386500; /* Blue border for table cells */
  padding: 10px; /* Add space inside cells */
  text-align: left; /* Align text to the left */
  font-size: 1rem; /* Set a standard font size */
}

.table th {
  background-color: #386500; /* Dark blue background for headers */
  color: white; /* White text for contrast */
  font-weight: bold; /* Bold header text */
}

.table tr:nth-child(even) {
  background-color: #f9f9f9; /* Light background for alternate rows */
}

.table tr:nth-child(odd) {
  background-color: #ffffff; /* White background for odd rows */
}

.table tr:hover {
  background-color: #ffd700; /* Golden highlight on hover */
  color: #386500; /* Blue text on hover */
}

/* Responsive Table */
@media screen and (max-width: 768px) {
  .table th,
  .table td {
    font-size: 0.9rem; /* Smaller font size for smaller screens */
  }
}
.faculty-details img {
  width: 50%;
  height: 50px; /* adjust the height as needed */
  object-fit: cover;
  border-radius: 50%; /* optional, for a circular image */
  margin-bottom: 10px; /* optional, for spacing between images */
}

.faculty-details .col-md-4 {
  padding: 10px; /* optional, for spacing between images */
}

.faculty-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  order: 3px solid #007bff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.faculty-card {
  transition: transform 0.3s ease;
}

.faculty-card:hover {
  transform: translateY(-5px);
}
/* Custom styles for Wellborn Public School website */

.navbar-gradient {
  background-image: linear-gradient(to right, #6bc504, #529202);
}