/* ==========================================================================
   FIGORA Global Skills Nexus
   ----------------------------------------------------------------------------
   Section : Why Choose FIGORA
   File    : assets/css/pages/why.css
   Version : 1.1.0
========================================================================== */

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

.why-figora{
    padding:100px 0;
    background:#ffffff;
}

.why-figora .section-header{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.why-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:40px 30px;
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:22px;
    transition:all .35s ease;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
    height:100%;
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:var(--color-primary);
    box-shadow:0 22px 45px rgba(15,23,42,.12);
}

.why-icon{
    width:90px;
    height:90px;

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

    margin-bottom:28px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        #2DD4BF
    );

    transition:all .35s ease;
}

.why-card:hover .why-icon{

    transform:scale(1.08) rotate(4deg);

}

.why-icon img{

    width:42px;
    height:42px;
    display:block;

    filter:brightness(0) invert(1);

}

.why-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

    line-height:1.3;

    color:var(--color-heading);

}

.why-card p{

    margin:0;

    line-height:1.8;

    color:var(--color-text);

    flex-grow:1;

}

.why-footer{

    text-align:center;

    margin-top:70px;

}

.why-footer .btn{

    padding:16px 38px;

}

/* ======================================================
   LARGE DESKTOP
====================================================== */

@media(min-width:1400px){

    .why-grid{

        gap:36px;

    }

}

/* ======================================================
   TABLET
====================================================== */

@media(max-width:991px){

    .why-figora{

        padding:80px 0;

    }

    .why-grid{

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

        gap:25px;

    }

}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:767px){

    .why-figora{

        padding:70px 0;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        padding:30px 25px;

    }

    .why-icon{

        width:75px;
        height:75px;

        margin-bottom:22px;

    }

    .why-icon img{

        width:36px;
        height:36px;

    }

    .why-card h3{

        font-size:1.2rem;

    }

    .why-footer{

        margin-top:50px;

    }

    .why-footer .btn{

        width:100%;

        justify-content:center;

    }

}