/*** first-container ***/

.first-container{
  padding: 20px 10px;
  height: 40%;
  width: 100%;
  text-align: center;
}

.first-container > img {
  height: 250px;
  width: 250px;
  float: left;
}

.message {
  float: right;
  margin-left: 10%;
}

/*** features ***/
.features {
  height: 45%;
  width: 100%;
  background-color : antiquewhite;
  display : block;
  text-align : center;
  justify-content: center;
  padding : 6% 6%;
}

.card0{
  height: 50px;
 width: 100%;
 background-color : antiquewhite;
}

.card {
    background-color: white;
    padding-top: 10px;
    margin: 10px;
}

.btn:hover{
  color : yellow;
}

/*** second-container ***/

.second-container {
  display : grid;
  text-align :center;
  justify-content : center; 
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns :1fr 1fr ;
  
  
}

.item0{
  margin-top: 5%;
  margin-bottom :3%;
  grid-column : span 2;
}

.item {
  background-color: blue;
  color: white;
  margin: 10px;
 padding-top :15px;
  height:70px;
}

/*** Third-container ***/

.third-container{
  padding-top: 10px;
  display: block;
  justify-content: center;
  text-align :center;
  background-color : antiquewhite;
  grid-gap: 10px;
}

.third-heading {
  padding-top :20px;
  padding-bottom:10px;
}
.third-card > img {
  height :200px;
  width: 300px;
  border-radius : 50%;
}
.third-card {
  background-color: white;
  margin-bottom :15px;
}

.fourth-card {
  height: 300px;
  background-color :white;
}
.fourth-card > img {
  height: 200px;
  border-radius : 50%;
  width: 300px;
}


/**** desktop  ***/

@media (min-width:768px){
  
  /*** features  ***/
  .features {
   display: grid;
  grid-template-rows :50px 1fr 1fr;
  grid-template-columns : 1fr 1fr;
  
  }
  
  .card0{
  grid-column: span 3;
 
}

.card3{
  grid-column : span 3;
  width:100%;
}

/*** second-container ***/
.item{
  height: 110px;
  padding-top :9%;
}

  /*** Third-container ***/

.third-container{
  display: grid;
  grid-template-columns : 1fr 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr ;
 
}

.third-heading {
  grid-column: span 3;
}

.fourth-card {
  grid-column : span 3;
}

.fourth-card > img {
  width :70%;
}
}