#mymenu li a.services{color:#3e4095;}

.section1 {
  background:url("images/5.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.section2{
  display: grid;
  gap: 30px;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
}

.service1, .service2, .service3, .service4, .service6, .service7{
  display: grid;
  justify-items: center;
  background: white;
  width: auto;/*339px;*/
  height: auto;/*340px;*/
  text-align: center;
  padding: 40px;
  transition: all 0.5s ease;
  border: solid white 1px;
  border-radius: 20px;
  
}

:is(.service1, .service2, .service3, .service4, .service6, .service7) :is(p){
  font-size: 13px;
  line-height: 1.3;
  margin-top:20px;
  margin-bottom: 20px;
}

#services:hover, #services:active{
  filter: drop-shadow(0 0 10px rgb(177, 177, 177));
}



.service1{
  grid-column: 1/1;
  grid-row: 1/1;
}

.service2{
  grid-column: 2/2;
  grid-row: 1/1;
}

.service3{
  grid-column: 3/3;
  grid-row: 1/1;
}

.service4{
  grid-column: 1/1;
  grid-row: 2/2;
}

.service6{
  grid-column: 2/2;
  grid-row: 2/2;
}

.service7{
  grid-column: 3/3;
  grid-row: 2/2;
}

.service1_icon, .service2_icon, .service3_icon, .service4_icon, .service6_icon, .service7_icon{
  height: 80px;
 padding: 0;
 padding-bottom: 15px;
 
}

.section2 p{
  font-size: 13px;
  color: #818181;
  line-height: 15px;
}


.section2 h4{
  color: #2e2e2e;
}

.find_out_more{
  color: rgb(237, 50, 55);
  cursor: pointer;
}
.section2 span{
  color: rgb(237, 50, 55);
  cursor: pointer;
}

.find_out_more:hover{color: #8587e9;}
.section2 span:hover{color: #8587e9;}

.testimonials_section{
  padding-bottom: 0px!important;
}

@media only screen and (max-width: 800px){
  .section2{
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    gap:20px;
    margin-bottom: 40px;

  }

  .service1{
    grid-column: 1/1;
    grid-row: 1/1;
  }
  
  .service2{
    grid-column: 2/2;
    grid-row: 1/1;
  }
  
  .service3{
    grid-column: 1/1;
    grid-row: 2/2;
  }
  
  .service4{
    grid-column: 2/2;
    grid-row: 2/2;
  }
  
  .service6{
    grid-column: 1/1;
    grid-row: 3/3;
  }
  
  .service7{
    grid-column: 2/2;
    grid-row: 3/3;
  }
  
  .service1, .service2, .service3, .service4, .service6, .service7{
    width: auto;
    height: auto;}

  :is(.service1, .service2, .service3, .service4, .service6, .service7) :is(p){
    font-size: 12px;
  }

 
}
@media only screen and (max-width: 700px) {
 .section1{
  background-size: auto 100%;
 }
 .section2{
   display: flex;
   flex-direction: column;
   gap:20px;
 }
 .service1, .service2, .service3, .service4, .service6, .service7{
  width: auto;
  height: auto;
  padding: 40px;
}

:is(.service1, .service2, .service3, .service4, .service6, .service7) :is(p){
  font-size: 12px;
}
}