/* Custom Styling */
 body {
    background-color: #f1faff; /* Light blue background for the page */
  }

  .navbar {
    background-color: red ; /* Light blue navbar */
  }

  .navbar-brand, .nav-link {
    color: white !important; /* White text for navbar items */
  }

  .navbar-brand:hover, .nav-link:hover {
    color: #007bff !important; /* Red color on hover */
  }

  .dropdown-menu {
    background-color: #ff6347; /* Red dropdown */
  }

  .dropdown-item {
    color: white;
  }

  .dropdown-item:hover {
    background-color: #007bff; /* Light blue on hover in dropdown */
  }

  .carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background for captions */
    color: white; /* White text for captions */
  }

  /* Make images responsive and fit well */
  .carousel-item img {
    object-fit: cover; /* Ensures images fill the container without distorting */
    height: 500px; /* Fixed height for uniformity */
    width: 100%; /* Full width */
  }

  .carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: #ff6347; /* Red color for carousel controls */
  }

  .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    background-color: #007bff; /* Light blue hover color */
  }
  /* Custom Styles for Sections */
  .section-header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    border-radius: 8px;
  }
  .card {
    margin: 20px 0;
  }
.headmistress-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
  text-align: left;
}

  .news-item {
    background-color: red; /* Red news card background */
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .news-item h5 {
    color: white;
  }

  .news-item a {
    color: #fff;
    text-decoration: none;
  }

  .news-item a:hover {
    text-decoration: underline;
  }

  /* Styling for two columns */
  .left-section, .right-section {
    padding: 20px;
  }

  .left-section {
    border-right: 2px solid #ddd; /* Add a border to separate the two sections */
  }

  @media (max-width: 768px) {
    .left-section, .right-section {
      border-right: none; /* Remove border on small screens */
    }
  }