html{
font-family: 'Alata';
}
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    
    gap: 20px;
    padding: 20px;
    justify-items: center;
    margin: 0 auto;
    align-content: center;
    background-color: white;
    border-radius: 15px;
  }

  .grid-item {
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    width: 250px;
    height: 250px;
    justify-content: center;
    align-items: center;
    background-color: #2DBDEF;
    border-radius: 30px;
    height: 210px;
    width: 240px;
  }

  .grid-item img {
    width: 100px;
    height: 100px;
    object-fit: cover; /* Ensures the image maintains its aspect ratio */
    align-items: center;
    justify-content: center;
  }

  .text {
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 24px;
    text-wrap: wrap;
    color: white;
    font-family: 'Alata';
  }

  @media (max-width: 768px) {
    .grid-item {
      width: 100%; /* Full width for small screens */
    }
  }








  .cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
    height: auto; /* Change height to auto */
    margin-bottom: 300px;
  }
  
  .image-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #2DBDEF;
    font-size: larger;
    text-align: center;
  }
  
  .image-text-container img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Make images responsive */
    border-radius: 0;
  }
  
  .cont p {
    margin-bottom: 30px;
    font-size: 25px;
    color: white;
    text-align: center;
  }
  
  @media (max-width: 768px) {
    .cont {
      grid-template-columns: repeat(1, 1fr); /* Change to single column layout */
    }
  
    .image-text-container {
      width: 80%; /* Reduce width for better responsiveness */
      margin: 0 auto; /* Center horizontally */
    }
  
    .image-text-container img {
      max-width: 100%; /* Make images responsive */
      height: auto; /* Make images responsive */
    }
  }
  
  @media (min-width: 769px) and (max-width: 1024px) {
    .cont {
      grid-template-columns: repeat(1, 1fr); /* Change to two columns layout */
      margin: 20px 20px;
    }
  }