.specification-section{
    padding:120px 0;
    background:linear-gradient(
        135deg,
        #071c2c,
        #0f2f46
    );
    position:relative;
    overflow:hidden;
}

/* Header */

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-tag{
    display:inline-block;
    padding:10px 25px;
    background:rgba(0,255,136,.12);
    color:#58ff9a;
    border-radius:50px;
    font-weight:600;
    letter-spacing:1px;
}

.section-header h2{
    color:#fff;
    font-size:50px;
    margin:20px 0;
}

.section-header p{
    color:#c7d3dc;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* Grid */

.spec-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* Card */

.spec-card{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.spec-card:before{
    content:"";
    position:absolute;
    width:150%;
    height:150%;
    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );
    top:-120%;
    left:-120%;
    transition:.8s;
}

.spec-card:hover:before{
    top:100%;
    left:100%;
}

.spec-card:hover{
    transform:translateY(-12px);
    border-color:#4cff91;
    box-shadow:0 20px 40px rgba(76,255,145,.15);
}

/* Icon */

.spec-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    background:rgba(76,255,145,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:floatIcon 4s ease-in-out infinite;
}

.spec-icon i{
    color:#4cff91;
    font-size:34px;
}

.spec-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:10px;
    font-weight:700;
}

.spec-card span{
    color:#d7d7d7;
    font-size:15px;
    display:block;
    line-height:1.6;
}

/* Floating Animation */

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}

/* Responsive */

@media(max-width:1200px){

    .spec-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .spec-grid{
        grid-template-columns:1fr;
    }

    .section-header h2{
        font-size:34px;
    }
}