@import url('../components/secondary_header.css');

.content-box{
    display: flex;
    flex-direction: row;
    margin: 2rem auto; /* center horizontally with auto margin */
    padding: 2rem; /* padding for the content */
    width: 80%; /* you can adjust this to suit your needs */
    border: 0.2vw solid #92A4A954;
    border-radius: 50px; /* border radius for the boxes */
    overflow: hidden; /* to respect the border-radius for images */
    background-color: #23414967;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.news-room-content-image {
    height: 200px; /* Adjust the height to your desired value */
    width: 35%;
    margin: auto;
    border-radius: 20px; /* Adjust the border-radius to your desired value */
    overflow: hidden; /* To respect the border-radius for images */
  }


  .news-room-content-image img {
    height: 100%; /* Ensure the image fills the container */
    width: 100%; /* Ensure the image fills the container */
    object-fit: contain;
  }

  .news-room-content-text {
    padding: 0 2rem;
    width: 45%;
  }

  .news-room-content-button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    width: 20%;
  }

  .news-room-content-button .button{
    background-color: #E0EEF2;
    color: #020202;
    border-radius: 20px;
    padding: 10px 20px;
    width: max-content;
  }

  .news-room-content-button p{
    width: max-content;
    padding: 10px 20px;
  }

.content-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.content-box p {
    font-size: 1rem;
    color: white;
}

/* For mobile devices */
@media(max-width: 1100px) {

    .content-box{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        margin: 2rem auto; /* center horizontally with auto margin */
        padding: 1rem; /* padding for the content */
        border-radius: 20px;
        height: 200px;
        width: 100%; /* you can adjust this to suit your needs */
    }
    .news-room-content-image{
        margin: 0;
        height: 100%;
        width: 33%;
        border-radius: 10px;
      }

      .news-room-content-text {
        padding: 0;
        margin: 0 10px;
        align-items: start;
        width: 35%;
      }

      .news-room-content-text p{
        overflow: hidden;
        height: 100px;
      }

      .news-room-content-button{
        padding: 0;
      }



}


@media(max-width: 460px) {
    .content-box{
        display: flex;
        flex-direction: row;
        margin: 2rem auto; /* center horizontally with auto margin */
        padding: 1rem; /* padding for the content */
        border-radius: 20px;
        height: 100px;
        width: 100%; /* you can adjust this to suit your needs */
    }
    .news-room-content-image{
        margin: 0;
        height: 100%;
        border-radius: 10px;
      }

      .content-box h3 {
        font-size: 1.2rem;
        margin: 0;
    }

      .news-room-content-text {
        padding: 0;
        margin: 0 10px;
        align-self: center;
        width: 50%;
      }

      .news-room-content-text p{
        display: none;
      }

      .news-room-content-button{
        width: auto;
      }

      .news-room-content-button .button{
        background-color: #E0EEF2;
        color: #020202;
        border-radius: 10px;
        padding: 5px 10px;
        width: max-content;
      }

      .news-room-content-button p{
        width: max-content;
        padding: 5px 10px;
      }
}