.focus-areas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .area {
      width: 290px;
      height: 400px;
      border-radius: 12px;
    /* width: calc(25% - 20px); */
    margin:10px;
    background-size: cover;
    background-position: center;
    transition: 1s;
  }
  
  .area:hover{
      border: -10px solid orange;
      border-bottom-width: -50px;
      scale: 1.1;
      text-decoration: underline orange;
  }
  /* Background images */
  .health {
    background-image: url("https://www.careindia.org/wp-content/themes/careindia/images/health.jpg");
  }
          
  
  .education {
    background-image: url("https://www.careindia.org/wp-content/themes/careindia/images/education.jpg");
   margin-top: 50px;
  }
  
  .livelihood {
    background-image: url("https://www.careindia.org/wp-content/themes/careindia/images/livelihood.jpg");
  }
  
  .disaster-relief {
    background-image: url("https://www.careindia.org/wp-content/themes/careindia/images/disaster-relif.jpg");
   margin-top: 50px;
  }
  
  /* Text styling */
  .area h3, p {
    /* color: white; */
    font-family: Arial, sans-serif;
    text-align: center;
  }
  
  .area h3 {
    font-size: 24px;
    margin-top: 20px;
  }
  
  .area p {
    font-size: 18px;
    /* padding-top: 200px; */
    margin-top: 200px;
    background-color: rgba(255, 166, 0, 0.39);
    font-weight: 600;
  }
  
  /* Hover effect */
  .area:hover p {
     opacity:1;
  }
  
  /* Animation */
  @keyframes fadeIn {
     from {opacity:0;}
     to {opacity:1;}
  }
  
  .area p {
     opacity:0;
     animation-name: fadeIn;
     animation-duration:2s;
  }
  
  /* Responsive design */
  @media (max-width :600px) {
   .area{
      width: 400px;
      height: 100px;
   }
   .area:hover {
      height: 400px;
      scale: 1;
   }
   .disaster-relief, .education {
      margin-top: 10px;
   } 
  }