@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-radius: 40px; /* border radius for the boxes */
    overflow: hidden; /* to respect the border-radius for images */
    background-color: var(--bright-blue-transparent);
}
.about-us-content-image {
    height: 200px; /* Adjust the height to your desired value */
    width: 35%;
    border-radius: 20px; /* Adjust the border-radius to your desired value */
    overflow: hidden; /* To respect the border-radius for images */
    margin: auto;
  }


  .about-us-content-image img {
    height: 100%; /* Ensure the image fills the container */
    width: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Maintain the image's aspect ratio and cover the container */
  }

  .about-us-content-text {
    padding: 0 2rem;
    width: 65%;
  }

.highlighted-content-box-wrapper{
    background: linear-gradient(var(--bright-blue-transparent), var(--bright-blue-transparent)), url('/assets/images/website_background.png');
    width: 100vw;
    padding: 4rem 0; /* padding for the content */
}

.highlighted-content-box {
    display: flex;
    flex-direction: column;
    margin: 2rem auto; /* center horizontally with auto margin */
    width: 90%;
    overflow: hidden; /* to respect the border-radius for images */
    background-size: cover; /* ensure background image covers whole div */
    background-repeat: no-repeat; /* no repeat for background image */
}

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

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

.highlighted-content-box {
    color: white;
}

.highlighted-content-box h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

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


.holBody{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.header-container{
    width: 90% !important;
}


/* For tablet devices */
@media(max-width: 768px) {

}

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

    .content-box{
        display: flex;
        flex-direction: column;
        margin: 2rem auto ; /* center horizontally with auto margin */
    padding: 2rem; /* padding for the content */
    }

    .about-us-content-image {
        margin-bottom: 10px;
        width: 100%;
      }

      .content-box h3 {
        margin-bottom: 1rem;
    }

      .about-us-content-text {
        padding: 0;
        width: 100%;
      }




}