.calendar-div {
    display: flex; 
    justify-content: center;
    margin-top: 20px; 
    align-items: center; 
  }
  
  .calendar-text {
    color: rgb(241, 241, 139);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    font-size:65px;
    text-decoration: underline;
  }
  
  .calendardiv-two {
    display: flex; 
    justify-content: center;
    min-height: 400px;
    align-items: center;
    margin-top: 25px; 
  }
  
  .inside-div {
    display: flex; 
    justify-content: center;
    align-items: center;
     background-color: rgb(167, 47, 47);
  }
  
  .inside-div p {
    font-size: 50px;
    width: 500px; 
    color: white; 
    text-align: center; 
    margin: 0; 
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    margin-right: 10px; 
  }
  
  .calendar-pic {
    width: 900px; 
    height: 500px;
    object-fit: cover;
  }
  
  /* Add this to ensure .main-content grows */
  .main-content {
    flex: 1 0 auto;
  }


  @media (max-width: 768px) {
    .calendar-text {
      font-size: 2.0rem;
      padding: 0.4em 0.1em;
      text-decoration: underline;
      word-break: break-word;
    }

    .calendar-div {
      margin-top: 10px;
      padding: 0 0.5em;
    }

    .calendardiv-two {
      min-height: unset;
      margin-top: 10px;
      flex-direction: column;
      align-items: center;
    }

    .inside-div {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
        padding-top: 10px; 
    }

    .inside-div p {
      font-size: 1.8rem;
      width: 90vw;
      margin-right: 0;
      margin-bottom: 1.2em;
      padding: 0 0.2em;
      text-align: center;
    }

    .calendar-pic {
      width: 90vw;
      max-width: 350px;
      height: auto;
      min-width: 0;
      border-radius: 8px;
      margin: 0 auto;
      display: block;
    }
  }