/*=========================================
            WHY
=========================================*/

.why{

    padding:140px 0;

    background:#ffffff;

}

.why-header{

    text-align:center;

    max-width:760px;

    margin:auto auto 70px;

}
.why-header h2{

    font-size:43px;

    margin-bottom:18px;

      background:linear-gradient(
        135deg,
        #070707 0%,
        #4D8CFF 30%,
        #990011 65%,
        #FF4FA3 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

.why-grid{
    margin-left: 150px;
    margin-right: auto;

    display:grid;

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

    gap:28px;

}

.why-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);

    transition:.4s;

    border:1px solid #ececec;

    min-height:100px;

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

    text-align:center;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 0 30px rgba(37,99,235,.25),
        0 0 60px rgba(153,0,17,.18);

}

.why-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:linear-gradient(135deg,#990011,#2563EB);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:28px;

}

.why-card h3{

    font-size:24px;

    margin-bottom:16px;

    color:radial-gradient(circle at top left, #0066ff 0%, transparent 45%),
            radial-gradient(circle at bottom right, #ff0055 0%, transparent 40%),
            radial-gradient(circle at center, #ff69b4 0%, transparent 35%),
            #000000;

}

.why-card p{

    color:#666;

    line-height:1.8;

}

.why-icon i{

     transition:.4s;
     color:#fff;
}
.why-header p{

    color:#666;

    line-height:1.8;

    font-size:16px;

    text-align:center;
    max-width:700px;
    margin:0 auto;

}   



/* Responsive */


/*==============================
        WHY
==============================*/

@media (max-width:992px){

.why{
    padding:100px 0;
}

.why-header{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px;
}

.why-header h2{
    font-size:42px;
    text-align:center;
}

.why-header p{
    text-align:center;
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-left: 0;
    margin-right: 0;
}

}

@media (max-width:768px){

.why{
    padding:80px 0;
}

.why-header{
    margin-bottom:40px;
}

.why-header h2{
    font-size:34px;
    line-height:1.2;
}

.why-header p{
    font-size:16px;
}

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

.why-card{
    padding:30px;
}

}

@media (max-width:576px){

.why-header h2{
    font-size:30px;
}

.why-header p{
    font-size:15px;
}

}