/* Community Engagement Section */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  .community-engagement{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px  0;
    font-size: 12px;
  }
  .community-engagement p{
    text-align: center;
    max-width: 800px;
    width: 100%;
  }
  .engagement{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    width: 100%;
    max-width: none;
  }
  
  .Box {
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 0.5fr;
    grid-template-areas: "Box-left Box-right";
    max-width: 800px;
    width: 100%;
    aspect-ratio: 1.5;
  }
  
  .Box-1 {
    grid-area: Box-left;
  
    display: grid;
    grid-template-rows: 1fr 0.5fr ;
    gap: 5px;
    grid-template-areas: "top""bottom";
  }
  
  .Box-2{
    position: relative;
    grid-area: Box-right;
    width: 100%;
    height: 100%;
  }
  
  .Box-11{
    grid-area: top;
    width: 100%;
    height: 100%;
  
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr ;
    grid-template-areas: "left right";
  
  }
  
  .Box4{
    position: relative;
    grid-area: bottom;
    width: 100%;
    height: 100%;
    background-color: red;
    background-image: url('/img/music/diamond/shule.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

 
  
  
  .Box-12{
    width: 100%;
    height: 100%;
    grid-area: left;
  
    display: grid;
    gap: 5px;
    grid-template-rows: 1fr 1fr;
  }
  .Box3{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: yellow;
    grid-area: right;

    background-image: url('/img/music/diamond/blood.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .Box-2{
    display: grid;
    gap: 5px;
    grid-template-rows: 1fr 1fr 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  
  .box{
    position: relative;
    width: 100%;
    background-color: orange;
  }
  
  .p{
    /* margin: 5px; */
    box-sizing: border-box;
  }
  .hover-details {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #8B0000;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        opacity: 1;
        transform: translateY(100%);
        transition: all 0.5s ease;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
  }
  .hover-details p{
    font-size: 12px;
    text-align: center;
    text-align: justify;
  }

  .hover-details h3{
    font-size: 16px;
    text-align: center;
  }
  .box-container:hover .hover-details {
        opacity: 1;
        transform: translateY(0);
  }
  .box-container{
    border-radius: 2px;
    overflow: hidden;
  }
  
  .Box1{
    background-image: url('/img/music/diamond/schoolarship.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .Box2{
    background-image: url('/img/music/diamond/medical-support.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .Box5{
    background-image: url('/img/music/diamond/covid.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .Box6{
    background-image: url('/img/music/diamond/wasafiBet.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .Box7{
    background-image: url('/img/music/diamond/covid.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }