:root{
    --bg-gradient-1: linear-gradient(90deg, rgba(16, 51, 49, 75%) 43%, rgba(16, 51, 49, 30%) 100%);
  }


.about-item{
    border-radius: 18px;
    min-height: max-content;
}

.about-item{
    background-color: aliceblue;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
}

.about-item:hover{
    transform: translateY(-5px);
    transition: 0.3s;
    border-color: var( --color-primary);
   
}
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    
}
.card-body {
    flex: 1;
   
}

.card-header{
    padding: 15px 0;
}


.why-us{
   color: white;
}

.procedure-body {
    background: var(--bg-gradient-1);
}
.feature-item1{
    width: 300px;
}

.item-number{
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    color: white;
    width: 4rem; 
    height:4rem; 
    margin-top:-3.5rem;
    background-color: var(--color-primary);
}

.item-title{
    display: flex;
    align-self: center;
    padding-bottom: 5px;
    border-bottom: 3px solid white;
   
    transition: 0.7s;
}


.procedure .card:hover .item-title{
    border-color: var(--color-primary);
}

.procedure .card:hover{
    transform: translateY(-5px);
    transition: 0.7s;
}
.procedure .card{
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .procedure .card{
        height: fit-content;
    }
  }



  
/* Services Page */
.cleanify-service-item{
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 10px;
    transition: 0.6s;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .cleanify-service-item .icon img{
    border-radius: 10px 10px 0 0;
  }
  
  .cleanify-service-item-text p{
    color: #8892B0;
  }
  
  .cleanify-service-item:hover{
    box-shadow: rgba(0, 0, 0, 0.6) 0px 5px 15px;
    transform: translateY(-7px);
  }
  
  .cleanify-title{
    line-height: 1.25;
  }