*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
--Red: hsl(0, 78%, 62%);
--Cyan: hsl(180, 62%, 55%);
--Orange: hsl(34, 97%, 64%);
--Blue: hsl(212, 86%, 64%);
--Very-Dark-Blue: hsl(234, 12%, 34%);
--Grayish-Blue: hsl(229, 6%, 66%);
--Very-Light-Gray: hsl(0, 0%, 98%);
}
body{
   font-size: 15px;
   background-color: var(--Very-Light-Gray);
}
.container{
   padding-left: 15px;
   padding-right: 15px;
   margin-left: auto;
   margin-right: auto;
   font-family: "Poppins", sans-serif;
}
/* Small */
@media (min-width:576px) {
   .container{
      width: 540px;
   }
}

@media (min-width:768px) {
   .container{
   width: 720px;
   }
}
@media (min-width:992px) {
   .container{
      width: 960px;
   }
}
@media (min-width:1200px) {
   .container{
      width: 1180px;
   }
}
@media (min-width:1440px) {
   .container{
      width: 1320px;
   }
}

/* header section  */
header{
   padding-top: 70px;
   text-align: center;
   line-height: 1.6;
}

header h1{
   font-size: 27px;
   font-weight: 300;
   color: var(--Grayish-Blue);
}
header h2{
   font-size: 27px;
   color: var(--Very-Dark-Blue);
   margin-top: 8px;
   margin-bottom: 12px;
}
header p{
   color: var(--Grayish-Blue);
   font-size: 17px;
   font-weight: 300;
   width: 100%;
   max-width: 555px;
   margin: 0 auto;
}

/* card section */
.cards{
   margin-top: 70px;
}
.cards .card{
   background-color: white;
   padding: 29px 25px;
   width: 100%;
   max-width: 352px;
   margin: 0 auto 25px auto;
   border-radius: 10px;
   border-top: 2px solid transparent;
   box-shadow: 0px 5px 10px 0px rgba(216, 226, 238, .75);
}
.cards .card:nth-last-of-type(1){
   border-color: var(--Cyan);
}
.cards .card:nth-last-of-type(2){
   border-color: var(--Red);
}
.cards .card:nth-last-of-type(3){
   border-color: var(--Blue);
}
.cards .card:nth-last-of-type(4){
   border-color: var(--Orange);
}
.cards .card h3{
   color: var(--Very-Dark-Blue);
}
.cards .card p{
   color: var(--Grayish-Blue);
   font-size: 13px;
   letter-spacing: .5px;
   line-height: 1.8;
   margin: 12px 0 36px 0;
}
.cards .card img{
   display: block;
   margin-left: auto;
}


@media (min-width:1200px) {
   header{
      padding-top: 50px;
   }
   header h1{
      font-size: 36px;
   }
   header h2{
      font-size: 36px;
      margin-top: 0;
   }
   .cards{
      margin-top: 50px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0;
   }
   .cards .card{
      margin-left: 25px;
      margin-right: 0;
   }
}
@media (min-width:768px) {
   .cards{
      display: grid;
      grid-template-columns: repeat(2, 352px);
      column-gap: 25px;
      justify-content: center;
   }
}