/* ==========================================================
   Features
========================================================== */

.features {
    padding: 120px 0;
    background: var(--color-background-page-light);
}


/* ==========================================================
   Container
========================================================== */

.features .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ==========================================================
   Header
========================================================== */

.features-header {
    max-width: 1440px;
    margin-bottom: 72px;

    text-align: center;
}


/* ==========================================================
   Eyebrow
========================================================== */

.features-eyebrow {
    display: inline-block;

    margin-bottom: 18px;
    padding: 8px 18px;

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

    background: rgba(109,40,217,.08);
    color: var(--color-primary);

    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================
   Title
========================================================== */

.features-title {
    margin-bottom: 20px;

    color: var(--color-text-primary-light);
}


/* ==========================================================
   Description
========================================================== */

.features-description {
    color: var(--color-text-secondary-light);
}


/* ==========================================================
   Grid
========================================================== */

.features-grid {

    width: 100%;

    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 28px;
}


/* ==========================================================
   Card
========================================================== */

.feature-card {

    padding: 36px;

    background: var(--color-background-surface-light);

    border: 1px solid var(--color-border-light);

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

    transition: var(--transition-normal);

    cursor: pointer;
}


/* ==========================================================
   Card Hover
========================================================== */

.feature-card:hover {

    transform: translateY(-8px);

    border-color: rgba(109,40,217,.35);

    box-shadow:
        0 20px 40px rgba(15,23,42,.08),
        0 8px 20px rgba(109,40,217,.08);

}

/* ==========================================================
   Icon
========================================================== */

.feature-icon {

    width: 64px;
    height: 64px;

    margin-bottom: 28px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-light)
    );

    color: white;

    font-size: 28px;
}

/* ==========================================================
   Card Title
========================================================== */

.feature-card h3 {

    margin-bottom: 14px;

    color: var(--color-text-primary-light);
}

/* ==========================================================
   Card Text
========================================================== */

.feature-card p {

    color: var(--color-text-secondary-light);

    line-height: 1.7;
}

/* ==========================================================
   Responsive Tablet
========================================================== */

@media (max-width: 992px) {

    .features-grid {

        grid-template-columns: repeat(2,1fr);

    }

}

/* ==========================================================
   Responsive Mobile
========================================================== */

@media (max-width:768px){

    .features{

        padding:80px 0;

    }

    .features-header{

        margin-bottom:50px;

    }

    .features-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

}