/* Add your custom css styles */
     .mission-section {
            background-color: #f8f9fa; /* Light grey background for the mission */
            padding: 0px 0px;
            border-bottom: 1px solid #e9ecef;
            text-align: center;
        }
        .mission-section h4 {
            color: #007bff; /* Bootstrap primary blue */
            margin-bottom: 15px;
            font-weight: 600;
        }
        .location-section {
            padding: 0px 0;
        }
        .col{
            margin-top: 5px;
        }
        .location-section h2 {
            text-align: center;
            margin-bottom: 40px;
            color: #343a40; /* Dark grey for heading */
            font-weight: 700;
        }
        .location-card {
            border: none; /* Remove default card border */
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
            transition: transform 0.2s ease-in-out; /* Smooth hover effect */
        }
        .location-card:hover {
            transform: translateY(-5px); /* Lift card on hover */
        }
        .location-card .card-header {
            background-color: #dfc066; /* Bootstrap success green for headers */
            color: white;
            font-weight: bold;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding: 15px 20px;
            font-size: 1.15em;
        }
        .location-card .card-body {
            padding: 25px 20px;
        }
        .location-card .card-body ul {
            list-style: none; /* Remove bullet points */
            padding-left: 0;
            margin-bottom: 0;
        }
        .location-card .card-body ul li {
            padding: 2px 0;
            border-bottom: 1px dashed #e9ecef; /* Dashed line separator */
            color: #495057; /* Slightly lighter text color */
        }
        .location-card .card-body ul li:last-child {
            border-bottom: none; /* No border for the last item */
        }
            .effect {
      position: relative;
    }
    .image-box-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
    .effect:hover .image-box-content {
      display: block;
    }
    .image-box-content i {
      font-size: 24px;
      color: white;
      background: rgba(0, 0, 0, 0.6);
      padding: 10px;
      border-radius: 50%;
    }
    #section1 img{
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 200px;  /* Limit logo width */
  height: auto;
  object-fit: contain; /* Prevent cropping logo */
    }