@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}
.heading{
     text-align: center;
     font-size: 2.2rem;
     font-weight: 200;
     padding-top: 5rem;
}

.title{
     text-align: center;
     font-size: 2.2rem;
     font-weight: 600;
     padding-bottom: 1rem;
}

.info{
     text-align: center;
}

.card-section{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: auto auto auto auto;
     row-gap: 2rem;
     padding:4rem;
     column-gap: 2rem;
}
.card{
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -ms-border-radius: 5px;
     -o-border-radius: 5px;
     padding: 1.5rem;
     box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08);
}
.card-title{
     padding-bottom: 0.6rem;
     font-size: 1.2rem;
     font-weight: 500;
}
.card-image{
     padding-top: 1rem;
     display: flex;
     flex-direction: row-reverse;
}
.card-info{
     font-size: 0.9rem;
     font-weight: 200;
}
.card-1{
     border-top: 3px solid hsl(180, 62%, 55%);
     grid-row-start: 2;
     grid-row-end: 4;
}
.card-2{
     border-top: 3px solid  hsl(0, 78%, 62%);
     grid-row-start: 1;
     grid-row-end: 3;
}
.card-3{
     border-top: 3px solid hsl(34, 97%, 64%);
     grid-row-start: 3;
     grid-row-end: 5;

}

.card-4{
     border-top: 3px solid hsl(212, 86%, 64%);
     grid-row-start: 2;
     grid-row-end: 4;
}

/* For mobile devices (below 768px) */

@media (max-width:768px){
     .card-section{
          display: flex;
          flex-direction: column;
     }
     .heading, .title {
          font-size: 1.8rem;
          padding-left:0.5rem;
          padding-right: 0.5rem;
        }
        .info {
          font-size: 1rem;
          padding-left:1.2rem;
          padding-right: 1.2rem;
          line-height: 1.5;
          text-align: center;
        }
}

@media (min-width: 768px) and (max-width: 1024px) {
     .card-section {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto auto;
       gap: 2rem;
       padding: 2rem;
     }
   
     .card-1 {
       grid-row-start: 1;
       grid-row-end: 2;
     }
   
     .card-2 {
       grid-row-start: 1;
       grid-row-end: 2;
     }
   
     .card-3 {
       grid-row-start: 2;
       grid-row-end: 3;
     }
   
     .card-4 {
       grid-row-start: 2;
       grid-row-end: 3;
     }
   }