.wh {
      border-color: #27AE60; /* Bootstrap primary color */
    }
    .highlight {
      background-color: yellow;
    }
    .search-container {
      position: relative;
    }
    .reset-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      background-color: transparent;
      border: none;
      font-size: 20px;
      outline: none;
    }
    .reset-icon:hover {
      color: red;
    }
    .film-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .media-element {
      margin: 0.5rem;
      flex: 1 1 240px;
      max-width: 240px;
      text-align: center;
    }
    .media-element img,
    .media-element iframe {
      width: 100%;
      height: auto;
      max-height: 150px;
      object-fit: cover;
    }
    .media-element p {
      margin-top: 0.5rem;
    }
    /* Added color styling */
    .card-title {
      color: #007bff; /* Bootstrap primary color */
    }
    .card {
      border-color: #27AE60; /* Bootstrap primary color */
    }
    .card-body {
      background-color: #f8f9fa; /* Light gray background */
    }
    .btn-primary {
      background-color: #007bff; /* Bootstrap primary color */
      border-color: #007bff; /* Bootstrap primary color */
    }
    .btn-primary:hover {
      background-color: #0056b3; /* Darker shade of primary color */
      border-color: #0056b3; /* Darker shade of primary color */
    }
    .list-group-item {
      background-color: #e9ecef; /* Slightly darker gray for list items */
    }
    .list-group-item a {
      color: #007bff; /* Bootstrap primary color */
    }
    a {
      text-decoration: none;
    }
     .back {
            background-image: url('img/ed.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;
        }
        .bot {
            z-index: 1;
        }
        .accordion-content {
            display: none;
        }
        .accordion-content.visible {
            display: block;
        }
        .accordion-trigger {
            cursor: pointer;
        }
        .newimage {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            z-index: -1;
        }
        .inline-div {
            display: inline-flex;
            align-items: center;
        }
        .inline-div img {
            margin-left: 10px;
        }
        #originalParentElement img {
        }
        #planner {
            position: relative;
            transition: top 0.5s ease-in-out;
        }
        .owl-carousel .owl-stage {
            display: flex;
            flex-wrap: wrap;
        }
        .owl-carousel .owl-item {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .carousel-container {
            position: relative;
        }
        .clickable-div {
      cursor: pointer;
    }
    .btn-light:hover {
      background-color: #0056b3;
      color: white;
    }
    .card {
    height: 100%;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.border {
    margin-bottom: 10px;
}
  /* Existing styles */
  .card-body h1 {
    padding: 4px; /* Moved padding here for clarity */
  }

  /* Media query for devices with a max width of 768px */
  @media (max-width: 768px) {
    .card-body h1 {
      font-size: .5rem; /* Adjust the font size as needed */
    }
  }
 .col-md-9 .card-body {
    display: flex; /* Enables Flexbox */
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    padding: 10%; /* Adjust padding as needed */
    height: 100%; /* Ensures the div takes full height of its container */
  }

  .ai .card-body h3 {
    padding: 4px; /* Additional padding for the <h3> element */
  } 
  .inline-div {
    display: flex; /* Uses Flexbox to lay out children inline */
    align-items: center; /* Vertically centers the children in the line */
    justify-content: center; /* Centers the content horizontally within the container */
}

.inline-div-text {
    flex: 1; /* Allows the text div to grow and take up available space */
    padding-right: 20px; /* Adds some space between the text and the image */
}

.inline-image {
    flex-shrink: 0; /* Prevents the image from shrinking */
    width: 20%; /* Sets the width of the image to 20% of its container */
}