*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.sunita7 main .main-inner{

    width: 100%;

   flex-wrap: wrap;

    /* border: 1px solid; */

    display: flex;

    align-items: center;

    justify-content: space-evenly;



}

.sunita7 main .main-inner .main-inner-coard{

    width: 270px;

    /* height: 400px; */

    border: 2px solid rgb(224, 221, 221);

    margin: 20px;

    padding: 10px;

    border-radius: 10px;

   

}

.sunita7 main .main-inner .main-inner-coard:hover{

    border: 2px solid green;

}

.sunita7 main .main-inner .main-inner-coard img{

    width: 100%;

    height: 100%;

  

}

.sunita7 main .main-inner .main-inner-coard .top{

    width: 100% ;

    /* border: 1px solid red; */

    display: flex;

    align-items: center;

      position: absolute;

      top: 0;

      left: 0;

    justify-content: space-between;

}

.sunita7 main .main-inner .main-inner-coard .top-main{

    height: 200px;

    /* border: 1px solid ; */

    overflow: hidden;

    transition: .5s;

     position: relative;

}

.sunita7 main .main-inner .main-inner-coard .top-main::before{

    position: absolute;

    right: -100%;

    top: 0;

    content: '';

    background-color: red;

    background-image: url(kolmisakh_252_215_thumb.jpg);

    width: 100%;

    height: 100%;

     transition: .5s;

}

.sunita7 main .main-inner .main-inner-coard .top-main:hover::before{

   right: 0%;

}

.sunita7 main .main-inner .main-inner-coard .top button{

    background-color: red;

    padding: 2px 10px;

    border-radius: 10px;

    border: none;

    color: white;

    font-size: 15px;

    outline: none;

}

.sunita7 main .main-inner .main-inner-coard .top .icon{

    width: 25px;

    height: 25px;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid green;

    color: green;

}

.sunita7 main .main-inner .main-inner-coard .text{

    width: 100%;

    height: 50px;

    /* border: 1px solid red; */

}

.sunita7 main .main-inner .main-inner-coard .text h4{

    font-size: 15px;

    margin: 0;

}

.sunita7 main .main-inner .main-inner-coard .text p{

    font-size: 14px;

    margin: 0;

    color: gray;

}

.sunita7 main .main-inner .main-inner-coard .select{

    margin: 10px 0px;

}

.sunita7 main .main-inner .main-inner-coard .select select{

    width: 100%;

    padding: 10px;

    border: 1px solid gray;

    color: green;

}

.sunita7 main .main-inner .main-inner-coard .span{

    text-align: center;

}

.sunita7 main .main-inner .main-inner-coard .span del{

    color: red;

}

.sunita7 main .main-inner .main-inner-coard .button-main{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.sunita7 main .main-inner .main-inner-coard .button-main .div-button{

    /* width: 100px; */

  margin-top: 10px;

    border: 1px solid rgb(224, 221, 221);

    border-radius: 15px;

    display: flex;

    

}

.sunita7 main .main-inner .main-inner-coard .button-main .div-button .one{

    width: 40px;

    height: 30px;

    border-right: 1px solid rgb(224, 221, 221);

    font-size: 17px;

    display: flex;

    

    align-items: center;

    justify-content: center;

}

.sunita7 main .main-inner .main-inner-coard .button-main .div-button .two{

    width: 40px;

    height: 30px;

    /* border-right: 1px solid; */

    font-size: 17px;

    display: flex;

    

    align-items: center;

    justify-content: center;

}

/* .sunita7 main .main-inner .main-inner-coard .button-main button{

    border: none;

    font-size: 10px;

    padding: 10px;

    outline: none;

    background-color: lightgreen;

    color: white;

    margin-top: 10px;

} */
 /* From Uiverse.io by vinodjangid07 */ 


.custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--clr);
  color: #fff;
  border: none;
  border-radius: 10rem;
  padding: 10px 30px;
  padding-left: 18px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.custom-btn:hover {
  background-color: #157347;
}

.custom-btn-icon {
  width: 26px;
  height: 26px;
  background: #fff;
  color: var(--clr);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.custom-btn-icon i {
  font-size: 14px;
  transition: transform 0.3s ease-in-out;
}

.icon-main {
  transform: translate(0, 0);
}

.icon-copy {
  position: absolute;
  transform: translate(-150%, 150%);
}


.custom-btn:hover .icon-main {
  transform: translate(150%, -150%);
}

.custom-btn:hover .icon-copy {
  transform: translate(0, 0);
  transition-delay: 0.1s;
}

.custom-btn:hover .custom-btn-icon {
  color: #000;
}