.container_grid {
    margin-top: -10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Default for large screens */
grid-gap: 10px;  
grid-row-gap: 5vh;
grid-column-gap: 2vw;
}

/* For tablets */
@media only screen and (max-width: 991px) {
.container_grid {
grid-template-columns: 1fr 1fr; /* 2 boxes for tablets */
}
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
.container_grid {
grid-template-columns: 1fr; /* 1 box for mobile */
}
}

.item1,
.item2,
.item3,
.item4,
.item6 {
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;
background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
border-radius: 10px; /* Adjust the value as needed */

}
.item1 {
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;

background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
margin-left: 5px;
border-radius: 2px; /* Adjust the value as needed */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 2px #6AD5FF;

}
.item2{
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;
background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
margin-left: 5px;
border-radius: 2px; /* Adjust the value as needed */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 2px #6C63FF;
}
.item3{
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;
background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
margin-left: 5px;
border-radius: 2px; /* Adjust the value as needed */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 2px #0BFB23;
}
.item4{
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;
background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
margin-left: 5px;
border-radius: 2px; /* Adjust the value as needed */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 2px #E5F714;;
}
.item5 {
/* Updated styles */
height: 40vh;
text-align: left;
padding: 20px;
background-color: white;
display: flex;
flex-direction: column; /* Updated property */
justify-content: flex-start; /* Align items at the start (top) */
align-items: center;
text-align: center;
margin-left: 5px;
margin-bottom: 5px;
border-radius: 2px; /* Adjust the value as needed */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 0 0 2px red;
}

/* Optional: Add responsive styles for item content */
.item1 h2,
.item2 h2,
.item3 h2,
.item4 h2,
.item5 h2 {
font-size: 1.5rem;
margin-bottom: 0px;
}

.item1 p,
.item2 p,
.item3 p,
.item4 p,
.item5 p {
font-size: 1rem;
}

  /* @media only screen and (max-width: 520px) {
    .centerImage {
      margin-bottom: -50px !important;
    }
    .container_grid {
      grid-template-columns: 1fr;
    }
    .item1 {
      width: 85vw;
    }
    .item2 {
      width: 85vw;
    }
    .item3 {
      width: 85vw;
    }
    .item4 {
      width: 85vw;
    }
    .item5 {
      width: 85vw;
    }
  } */
  .image-container {
    margin-top: 200px;
    position: relative;
    background-color: rgb(214, 243, 227);
    overflow: hidden;
    border-radius: 50%;
    width: 600px; /* Set your desired width */
    height: 600px; /* Set your desired height */
}

.background-image {
width: 100%;
height: auto;
display: block;
z-index: 1; /* Set a lower z-index for the background */
}

.overlay-image {
position: absolute;
top: 300px;
left: -30px;
width: 70%;
height: 270px;
display: block;
z-index: 2; /* Set a higher z-index for the overlay */
}