section.twocards {
    padding: 100px 8%;
    background: linear-gradient(
    90deg,
    rgba(40, 25, 66, 1) 0%,
    rgba(81, 54, 119, 1) 50%,
    rgba(40, 25, 66, 1) 100%
  );
    overflow: hidden;
}

.twocards .header{
    margin-bottom: 30px;
}

.twocards .header h2{
    color: var(--white);
}

.twocards .header h2 span{
    color: #8E869C;
    display: block;
}

.twocards-list {
align-items: stretch;
    height: auto;
    display: flex;
    gap: 20px;
}

.twocards-card {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px 40px;
    height: auto; 
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* start hidden */
.twocards-card{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* when section visible */
.twocards.is-visible .twocards-card{
  opacity: 1;
  transform: translateY(0);
}

/* stagger using transition-delay */
.twocards.is-visible .twocards-card:nth-child(1){ transition-delay: 0.00s; }
.twocards.is-visible .twocards-card:nth-child(2){ transition-delay: 0.15s; }
.twocards.is-visible .twocards-card:nth-child(3){ transition-delay: 0.30s; }
.twocards.is-visible .twocards-card:nth-child(4){ transition-delay: 0.45s; }
.twocards.is-visible .twocards-card:nth-child(5){ transition-delay: 0.60s; }
.twocards.is-visible .twocards-card:nth-child(6){ transition-delay: 0.75s; }


.twocards-list .twocards-card:nth-of-type(2)  {
    background: #F4ECFF;
}

.twocards-list .twocards-card:nth-of-type(3) {
    background: #DFD2EF;
}

.twocards-list .twocards-card:nth-of-type(4) {
    background: #F1EDF6;
}

.twocards-card h4{
    font-size: 1em;
    font-weight: 300;
}

.twocards-card__description ul li{
	list-style-type: disc;
}

.twocards-card__price p{
	font-weight: 500;
    font-size: 1.3em;
    margin: 5px 0 15px;
}

.twocards-card h3{
	text-transform: capitalize;
}


.twocards-card__price p span{
	font-size: 0.9em;
    font-weight: 300;
}

@media (max-width: 1200px) {
.twocards-list {
    flex-wrap: wrap;
}
}

@media (max-width: 960px) {
	.twocards-card {
    width: 100%;
}
}

@media (max-width: 768px) {
section.twocards {
    padding: 100px 5%;
}
}