img{
  height:150px;
  width:233px;
  border: 5px solid;
  border-color: lavenderblush;
  border-radius: 10px;
}

.col-card {
  max-width: 450px;
}

.row-cards {
  display: flex;
  justify-content: center;
}

div [class^="col-"]{
  padding-left:5px;
  padding-right:5px;
}

.mlk-logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

div.mlk-logo > img{
  height:150px;
  width:233px;
  border: 5px solid;
  border-color: lavenderblush;
  border-radius: 10px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.mlk-btn {
  margin-top: auto;
  margin-bottom: 5px;
  background: radial-gradient(circle at -50% 21.7%, rgb(238, 130, 238) 0%, rgb(127, 0, 255) 100.2%),#FFF;
}

.mlk-type {
  font-weight: 600; 
  padding:0px 10px;
  border-radius:10px;
}

.mlk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lockapp {
  color:red;
}
.openapp {
  color:green;
}

.card{
  width: 250px !important;
  height: 400px;
  transition:0.5s;
  background-color: rgb(255, 255, 255);
  border-bottom-color: rgba(0, 0, 0, 0.125);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgba(0, 0, 0, 0.125);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgba(0, 0, 0, 0.125);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgba(0, 0, 0, 0.125);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 15px 0px;
  box-sizing: border-box;
  color: rgb(41, 43, 44);
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  font-family: Jost !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  position: relative;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.card-body {
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.card-title{  
  font-size:15px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  transition:1s;
}

.card-title i{  
  font-size:15px;
  transition:1s;
  color:#ffa710
}

.card-title i:hover{
  transform: scale(1.25) rotate(100deg); 
  color:#18d4ca;
  
}

.card-name { 
  font-size:15px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  transition:1s;
}
.card-name i { 
  font-size:15px;
  transition:1s;
  color:#ffa710
}
.card-name i:hover {
  transform: scale(1.25) rotate(100deg);
  color:#18d4ca;

}


.card:hover{
  transform: scale(1.05);
  box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}

.card-text{
  height:80px;  
}

.card::before, .card::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale3d(0, 0, 1);
  transition: transform .3s ease-out 0s;
  background: rgba(255, 255, 255, 0.1);
  content: '';
  pointer-events: none;
}
.card::before {
  transform-origin: left top;
}
.card::after {
  transform-origin: right bottom;
}
.card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after {
  transform: scale3d(1, 1, 1);
}