.front-solution {
    padding:80px 0;
    text-align:center;
}


.front-solution-header {
    text-align:center;
    max-width:720px;
    margin:0 auto 40px auto;
}

.front-solution-title {
    font-size:32px;
    line-height:1.2;
    margin:0 0 10px 0;
    color:#101024;
}

.front-solution-subtitle {
    font-size:15px;
    line-height:1.5;
    color:#110D3B;
    margin:0;
}

.front-solution-title {
    font-size:32px;
    margin-bottom:10px;
}

.front-solution-subtitle {
    font-size:15px;
    color:#6b6f8a;
    margin-bottom:40px;
}

.front-solution-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.front-solution-card {
    display:flex;
    align-items:stretch;
    gap:0;
    text-decoration:none;

    min-height:125px;

    background:linear-gradient(145deg, #ffffff, #f4f6ff);
    border-radius:16px;
    position:relative;
    overflow:hidden;

    text-align:left;
    cursor:pointer;

    border:1px solid rgba(0, 0, 0, 0.03);

    transition:all 0.3s ease;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* glow */
.front-solution-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(120, 90, 255, 0.25), transparent 60%);
    opacity:0;
    transition:opacity 0.3s ease;
}

.front-solution-card:hover {
    transform:translateY(-6px);
}

.front-solution-card:hover::before {
    opacity:1;
}

.front-solution-card-icon {
    height:125px;
    display:flex;
    align-items:stretch;
}

.front-solution-card-icon img {
    height:100%;
    width:auto;
    object-fit:contain;
    display:block;
    filter: drop-shadow(0 8px 16px rgba(108, 99, 255, 0.35));
}

.front-solution-card-content {
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:16px 18px;
    flex:1;
}

.front-solution-card-header {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.front-solution-card-title {
    font-size:15px;
    margin:0;
    flex:1;
    color:#060855;
    font-weight:500;
    line-height:1.3;
}

.front-solution-card-arrow {
    font-size:18px;
    color:#6c63ff;
    opacity:0.8;
    transition:transform 0.2s ease, opacity 0.2s ease;
}

.front-solution-card:hover .front-solution-card-arrow {
    transform:translateX(4px);
    opacity:1;
}

/* DESCRIPTION */
.front-solution-card-description {
    font-size:13px;
    color:#16196E;
    margin-bottom:8px;
    line-height:1.4;
}

/* TAGS */
.front-solution-card-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.front-solution-card-tag {
    font-size:11px;
    padding:5px 8px;
    border-radius:20px;
    background:#eef0ff;
    color:#5a5ed6;
    white-space:nowrap;
    transition:background 0.2s ease;
}

.front-solution-card:hover .front-solution-card-tag {
    background:#e4e7ff;
}


.front-solution-card-deploy .front-solution-card-description{
    max-width: 230px;
}
.front-solution-card-inventory .front-solution-card-description{
    max-width:200px;
}
.front-solution-card-forensics .front-solution-card-description{
    max-width: 280px;
}
.front-solution-card-metering .front-solution-card-description{
    max-width: 210px;
}
.front-solution-card-remote .front-solution-card-description{
    max-width: 210px;
}
.front-solution-card-security .front-solution-card-description{
    max-width: 222px;
}


@media (max-width:1124px) {
    .front-solution-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:992px) {
    .front-solution-grid {
        grid-template-columns:1fr;
    }
}
@media (max-width:780px) {
    .front-solution {
        padding:60px 0;
    }
    .front-solution-title {
        font-size:26px;
    }
    .front-solution-card {
        height:auto;
    }
}
@media (max-width:640px) {
    .front-solution-header {
        margin-bottom:30px;
    }
    .front-solution-title {
        font-size:26px;
    }
    .front-solution-subtitle {
        font-size:14px;
    }
}