.cards-l {
    background-image: linear-gradient(90deg, #f39c12, #ffbf006b);
    border-radius: 1em;
    box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 12em;
    left: 15em;
    width: 25.1em;
    height: 14.8em;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}

/* Glass card */
.card--glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
  color: transparent;
      top: -4em;
    left: 4em;
    position: absolute;
    border-radius: 20px;
    width: 90%;
    height: 100%;
  transition: all 0.5s ease;  /* smooth animation */
  z-index: 1;
}

.card--glass:before,
.card--glass:after {
  border-radius: 20px;
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card--glass:before {
  border: 1px solid #fff;
  mask-image: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0) 50%);
}

.card--glass:after {
  border: 1px solid #ffc107;
  mask-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 50%, #fff);
}

/* Hover Effect: open animation */
.cards-l:hover .card--glass {
  top: -3.5em;       
  left: 1em;         
  width: 100%;       
  height: 100%;      
  z-index: 5;        
}

/* Content */
.card__content-l {
      background:linear-gradient(#fffcfc 3.125em, #fff3cd 3.375em, #fff3cd 4.5em) 0 0 / calc(21.1em - 2em * 2) 50%, linear-gradient(90deg, #fff3cd 13em, #fff3cd calc(21.1em - 2em * 2), rgba(255, 255, 255, 0) 19.1em) 0 100% / 100% 50%, linear-gradient(90deg, rgba(255, 255, 255, 0.5) 4em, rgba(255, 255, 255, 0.2)) 0 0 / 100% 100%;
    display: flex
;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.25em 2.5em;
    position: relative;
    height: 100%;
    z-index: 1;
}
[dir="rtl"] .card__content-l { 
    background: linear-gradient(rgba(255, 255, 255, 0) 3.125em, #f76e6e 3.375em, #fa9e9e 4.5em) 100% 0 / calc(21.1em - 2em * 2) 50%, linear-gradient(-90deg, #fa9e9e 13em, #f76e6e calc(21.1em - 2em * 2), rgba(255, 255, 255, 0) 19.1em) 100% 100% / 100% 50%, linear-gradient(-90deg, rgba(255, 255, 255, 0.5) 4em, rgba(255, 255, 255, 0.2)) 100% 0 / 100% 100%; 
    
} 
.card__content-l, [dir="rtl"] .card__content-l { 
    -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
    }
    
.card__logoo,
.card__title-l {
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.17;
  width: 75%;
}

.card__logoo {
  text-align: end;
  width: 25%;
  color: #101010;
}

.card__urll {
  font-size: 0.75em;
  align-self: flex-end;
  margin-inline-start: auto;
  color: #101010;
}

.cards-l {
  position: relative;
}