/* ==================================================
   CARDS
================================================== */


.card{

    position:relative;

    padding:var(--card-padding);

    border-radius:var(--card-radius);

    background:#fff;

    transition:var(--transition-hover);

}


.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-card);

}



/* FEATURE CARD
================================================== */


.card--feature{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:calc(var(--card-padding) - .5rem);

    min-height:190px;

    border:1px solid rgba(0,0,0,.06);

    border-radius:calc(var(--card-radius) - 6px);

    background:#fff;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.card--feature::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(255,0,120,.08),
            transparent 65%
        );

    opacity:0;

    transition:.3s ease;

}


.card--feature:hover::before{

    opacity:1;

}

.card--feature:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}


.card__icon{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius-md);

    flex-shrink:0;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #ff0066,
            #ff8a00
        );

}


.card__icon svg{

    width:26px;

    height:26px;

}


.card__content{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}


.card__title{

    margin:0;

    font-size:1.05rem;

    font-weight:800;

}


.card__description{

    margin:0;

    font-size:.95rem;

    line-height:1.6;

    color:#555;

}

@media (max-width:768px){

    .card{

        padding:calc(var(--card-padding) - .4rem);

    }

    .card--feature{

        min-height:auto;

        padding:1.4rem;

    }

	.card__icon{

	    width:58px;
	
	    height:58px;
	
	    border-radius:18px;

	}

	.card__icon svg{

	    width:24px;
	
	    height:24px;

	}

	

}