.features {
    padding:80px 0;
    background:#f5f7fb;
    text-align:center;
    .ingite-section-title{
        text-align:center;
        margin-bottom:1rem;
        color:#2C356E;
    }
    .features-description{
        text-align:center;
        margin-bottom:2rem;
        color:#2C356E;
    }
    .features-grid {
        display:grid;
        gap:1rem;
        margin:0 auto;
        overflow:visible;
    }
}

.feature-item {
    position:relative;
    min-height:325px;
}

.feature-card {
    position:absolute;
    width:100%;
    min-height:inherit;

    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);

    transition:all 0.25s ease;
    cursor:pointer;
    z-index:1;
    overflow:hidden;

    .card-inner {
        height:100%;
        min-height:inherit;
        display:flex;
        flex-direction:column;
    }
}

.feature-card .card-header {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:0.5rem 0.5rem 0 0.5rem;
    position:relative;
    transition:all 0.3s ease;

    .card-header-text{
        text-align:center;
    }

    h3 {
        font-size:18px;
        font-weight:600;
        color:#2c4a73;
        margin:0;
    }
}

.feature-card .short {
    font-size:14px;
    color:#6b7a90;
    line-height:1.5;
    padding:0;
    padding-top:1rem;
}

.feature-card .card-extra {
    background:#EEF4FB;
    margin-top:auto;

    font-size:0;
    max-height:0;
    opacity:0;
    overflow:hidden;

    transition:all 0.3s ease;
    transform-origin:bottom left;
}

.feature-item .card-header h3{
    position:relative;
    padding-bottom:1rem;
    width:92%;
    margin:auto;
    &::before {
        content:"";
        position:absolute;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        width:70px;
        height:1px;
        background:#d6deea;
    }
    &::after {
        content:"";
        position:absolute;
        bottom:-4px;
        left:50%;
        transform:translateX(-50%) rotate(45deg);
        width:8px;
        height:8px;
        background:#2f6fed;
    }
}

.feature-item:hover .card-header h3{
    width:100%;
    padding-bottom:0;
    &::before,&::after {
        display:none;
    }
}

.feature-item:hover .card-header-text{
    text-align:left;
}

.feature-item:hover .feature-card {
    width:calc(200% + 1rem);
    box-shadow:0 25px 60px rgba(0,0,0,0.18);
    z-index:50;
}

.feature-item:hover .card-extra {
    text-align:left;
    max-height:300px;
    opacity:1;
    padding:1rem;
    font-size:inherit;
}

.feature-item:hover .card-header {
    flex-direction:row;
    align-items:center;
    text-align:left;
    gap:0.5rem;
    flex:1 1 0;
}

.feature-item:hover .icon {
    margin-bottom:0;
    transform:scale(1.05);
}

@media (min-width:1241px) {
    .features-grid {
        grid-template-columns:repeat(5, 1fr);
    }
    .feature-item:nth-child(5n) .feature-card {
        left:auto;
        right:0;
    }
}
@media (min-width:993px) and (max-width:1240px) {
    .features-grid {
        grid-template-columns:repeat(4, 1fr);
    }
    .feature-item:nth-child(4n) .feature-card {
        left:auto;
        right:0;
    }
}
@media (min-width:751px) and (max-width:992px) {
    .features-grid {
        grid-template-columns:repeat(3, 1fr);
    }
    .feature-item:nth-child(3n) .feature-card {
        left:auto;
        right:0;
    }
}

@media (min-width:451px) and (max-width:750px) {
    .features-grid {
        grid-template-columns:repeat(2, 1fr);
    }

    .feature-item {
        min-height:280px;
    }
    .feature-item:nth-child(2n) .feature-card {
        left:auto;
        right:0;
    }
}

@media (max-width:450px) {
    .features-grid {
        grid-template-columns:1fr;
    }

    .feature-item {
        min-height:250px;
    }

    .feature-card {
        position:relative;
        width:100%;
        transform:none !important;
    }

    .feature-item:hover .feature-card {
        width:100%;
    }

    .card-extra {
        max-height:none;
        opacity:1;
    }

    .card-header {
        flex-direction:column;
        text-align:center;
    }
}