.more custom-font mt-30 {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
  }
  
  .modal.show {
    display:flex;
    opacity: 1;
  }
  
  .modal-content {
    background: white;
    border-radius: 15px;
    margin-top: 75px;
    margin-left: 300px;
    max-width: 800px; /* Increased maximum width */
    width: 90%; /* Ensures responsiveness */
    /* Increased padding for a larger content area */
    text-align: center;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    animation: scaleIn 0.5s ease;
  }
  
  @keyframes scaleIn {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .modal-body img {
    width: 100%;
    max-height: 300px; /* Increased height for the image */
    object-fit:inherit;
    border-radius: 15px;
    margin-bottom: 20px; /* Larger margin below the image */
  }
  
  .modal-body h3 {
    margin: 0;
    font-size: 28px; /* Larger title font size */
    color: #333;
  }
  
  
  .modal-body p {
    text-align: justify;
    font-size: 15px; /* Larger description font size */
    color: #555;
    line-height: 1.8;
  }
  
  .close-button {
    /* position: absolute; */
    margin-inline-start:95%;
    top: 50px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px; /* Larger close button */
    cursor: pointer;
    color: #202020;
    
  }
  
  .close-button:hover {
    color: rgb(152, 145, 145);
  }

  @media screen and (max-width: 768px){
    .modal-content {
        height: 75%;
        margin-left: 20px;
        max-width: fit-content;
        scroll-behavior: auto;

    }

    .modal-body p{
      font-size: small;
    }
    .close-button{
      margin-inline-start: 89%;
      font-size: larger;
    }
    .modal-body h3{
      font-size: large;
    }
    .modal-body img{
      height: 160px ;
      margin-top: 0%;
    }
}




/* scroll */
.modal-body p {
  max-height: 300px; /* Limit height for the text content */
  overflow-y: auto; /* Enable vertical scrolling */
}

.modal-body p::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.modal-body p::-webkit-scrollbar-thumb {
  background-color: #aaa; /* Scrollbar thumb color */
  border-radius: 10px; /* Rounded corners for thumb */
}

.modal-body p::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* Darker color on hover */
}

.modal-body p::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Background color for scrollbar track */
  border-radius: 10px; /* Rounded corners for track */
}

/* */