.upcoming_baner {
    display: flex; /* Enable flexbox layout */
    align-items: center; /* Vertically align items to the center */
    justify-content: space-between; /* Space out the content with some spacing between */
    padding: 30px 50px; /* Add padding around the banner */
    background-color: #f4f4f4; /* Light background color */
    border-radius: 8px; /* Round corners of the banner */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow to create a banner feel */
    margin: 30px 0px;
  }

  .upcoming_img {
    flex-shrink: 0; /* Prevent the image from shrinking */
    width: 250px; /* Set a fixed width for the image */
    height: 150px; /* Set a fixed height for the image */
    overflow: hidden; /* Ensure the image doesn't overflow */
    border-radius: 4px; /* Round the corners of the image */
  }

  .upcoming_img img {
    width: 100%; /* Make the image cover the container */
    height: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Ensure the image is cropped to fit the container */
  }

  .upcoming_info {
    flex-grow: 1; /* Allow the info section to take up remaining space */
    margin-left: 20px; /* Space between the image and the text */
  }

  .upcoming_des {
    font-size: 16px; /* Adjust text size */
    font-weight: bold; /* Make the description text bold */
    color: #333; /* Set a darker text color */
    text-align: left;
    margin-bottom: 20px;
  }

  .upcoming_date {
    font-size: 20px; /* Slightly smaller text for the date */
    font-weight: bold;
    color: #666; /* Lighter color for the date */
    margin-top: 5px; /* Space between the description and the date */
    text-align: left;
  }

  .event{
    position: relative;
    padding: 50px 0px;
    margin-top: 40px;
    background-size: initial;
  }


  @media (max-width: 480px) {
    .event{
        padding: 0px 0px;
        margin-top: -16px;
    }
    .upcoming_baner {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start */
        padding: 20px 15px; /* Adjust padding for smaller screens */
        margin: 10px 0px;
    }

    .upcoming_img {
        width: 100%; /* Make the image full-width */
        height: 200px; /* Adjust height to keep the aspect ratio */
        margin-bottom: 20px; /* Add some space between the image and text */
    }

    .upcoming_info {
        margin-left: 0; /* Remove margin */
    }

    .upcoming_des {
        font-size: 14px; /* Slightly smaller text size for mobile */
    }

    .upcoming_date {
        font-size: 12px; /* Smaller font size for the date */
    }
}



@media (min-width: 481px) and (max-width: 768px) {
    .upcoming_baner {
        flex-direction: row; /* Keep the items in a row */
        padding: 20px 30px; /* Adjust padding for tablets */
    }

    .upcoming_img {
        width: 200px; /* Adjust image width for tablets */
        height: 120px; /* Adjust image height */
    }

    .upcoming_des {
        font-size: 15px; /* Adjust text size for tablets */
    }

    .upcoming_date {
        font-size: 13px; /* Adjust date text size for tablets */
    }
}