/*-----------------------------index service section---------------------------*/

  /* Caption text */
  .services-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.service-card>img:hover{
    animation-name: cardeffect ;
    animation-fill-mode:forwards;
    animation-duration: 5s;

}
.service-card{
    color: #b1b1b1;
    background-color: aqua;
    height: 85vh;
    width: 90vw;
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
}  
.service-card>img{
   width:100%;
height:100%;
object-fit: cover;
animation: cardeffect-out 3s;
}
.service-card>h3{
    text-transform: capitalize;
    position: absolute;
    color: var(--White, #FFF);
text-align: center;

/* Heading/H1 */
font-family: Cairo;
font-size: 56px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 67.2px */
top: 20%;
left: 10%;
}
.service-card>p{
    color: var(--White, #FFF);
text-align: center;

/* Text/Medium/Normal */
font-family: Cairo;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 27px */
position: absolute;
left: 10.5%;
top: 30%;
}
.service-card>button{
    text-transform: capitalize;
position: absolute; 
color: rgb(243, 243, 243);
/* Text/Regular/Normal */
font-family: Cairo;
width: 150px;
height: 50px;
border:none;
border:solid 2px rgb(255, 255, 255);
border-radius: 5px;
background: rgba(255, 255, 255, 0);
font-size: 25px;
left: 10.5%;
top: 80%;
}
.service-card>button:hover{
    background:rgb(255, 255, 255);
    color:rgb(0, 0, 0); 
}

  .service-h2{
      margin-top: 3rem;
      text-transform: capitalize;
    color: #444444;
    /* Heading/H2 */
    font-family: Cairo;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 57.6px */
    text-align: center;
  }
  .service-desc{
      text-transform: capitalize;
    color: #686868;
    text-align: center;
    
    /* Text/Medium/Normal */
    font-family: Cairo;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    margin-bottom: 3rem;
  }


