.why-us{
    padding:120px 10%;
    position:relative;
    /* background-color: #f5f5dc; */
}

/* GLOW EFFECTS */

.why-us::before,
.why-us::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    filter:blur(120px);
    z-index:0;
}

.why-us::before{
    background:#00d4ff;
    top:0;
    left:-100px;
    opacity:0.25;
}

.why-us::after{
    background:#7b61ff;
    bottom:0;
    right:-100px;
    opacity:0.25;
}

/* TITLE */

.section-title{
    text-align:center;
    margin-bottom:80px;
    position:relative;
    z-index:2;
}

.section-title h2{
    font-size:4rem;
    font-weight:800;
    color:white;
    margin-bottom:20px;

    animation:fadeDown 1s ease;
}

.section-title p{
    max-width:800px;
    margin:auto;

    color:#d7dfff;
    line-height:1.8;
    font-size:1.15rem;

    animation:fadeUp 1.2s ease;
}

/* GRID */

.why-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;

    position:relative;
    z-index:2;
}

/* CARD */

.why-card{
    position:relative;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(14px);

    border-radius:28px;

    padding:40px;

    overflow:hidden;

    transition:0.5s ease;

    animation:cardAppear 1s ease;
}

/* HOVER EFFECT */

.why-card:hover{
    transform:
    translateY(-12px)
    scale(1.02);

    border:1px solid rgba(0,212,255,0.4);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.25);
}

/* TOP GLOW LINE */

.why-card::before{
    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #00d4ff,
        #7b61ff
    );

    transition:0.6s;
}

.why-card:hover::before{
    left:0;
}

/* ICON */

.icon{
    width:80px;
    height:80px;

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

    font-size:2.3rem;

    border-radius:22px;

    margin-bottom:28px;

    background:linear-gradient(
        135deg,
        #00d4ff,
        #7b61ff
    );

    box-shadow:
    0 10px 25px rgba(0,212,255,0.25);

    animation:float 4s ease-in-out infinite;
}

/* CARD TEXT */

.why-card h3{
    color:white;
    font-size:1.5rem;
    margin-bottom:18px;
}

.why-card p{
    color:#d6dcff;
    line-height:1.9;
    font-size:1rem;
}

/* ANIMATIONS */

@keyframes float{
    0%{
        transform:translateY(0px);
    }

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

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

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes cardAppear{
    from{
        opacity:0;
        transform:translateY(60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* RESPONSIVE */

@media(max-width:768px){

    .section-title h2{
        font-size:2.8rem;
    }

    .why-us{
        padding:100px 6%;
    }

    .why-card{
        padding:30px;
    }

}