/* ==========================================================
   WHY US SECTION
   Theme : NemuTrip
   Version : Final Production (LOCKED)
========================================================== */

.why-section{
    padding:100px 0;
    background:#f8fbff;
}

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

.why-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%;

    background:var(--white);
    border:1px solid var(--border);
    border-radius:22px;

    padding:35px 30px;
    text-align:center;

    position:relative;
    overflow:hidden;

    transition:var(--transition);
}

.why-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #39b6ff
    );

    transform:scaleX(0);
    transform-origin:left;

    transition:var(--transition);
}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.why-card:hover::before{

    transform:scaleX(1);

}

/* ==========================================================
   ICON
========================================================== */

.why-icon{

    width:80px;
    height:80px;

    margin:0 auto 25px;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        #38bdf8
    );

    color:var(--white);

    font-size:34px;

    transition:var(--transition);

}

.why-card:hover .why-icon{

    transform:rotate(-8deg) scale(1.08);

}

/* ==========================================================
   TITLE
========================================================== */

.why-card h4{

    font-size:22px;
    font-weight:700;
    color:#0f172a;

    margin-bottom:15px;

}

/* ==========================================================
   TEXT
========================================================== */

.why-card p{

    color:var(--gray);

    font-size:15px;
    line-height:1.8;

    margin-bottom:0;

}

/* ==========================================================
   COUNTER
========================================================== */

.counter-box{

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

    height:100%;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    transition:var(--transition);

}

.counter-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

    border-color:var(--primary);

}

.counter-box h3{

    font-size:38px;
    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;

}

.counter-box span{

    color:var(--gray);

    font-size:16px;
    font-weight:600;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:992px){

    .why-card{

        margin-bottom:20px;

    }

}

@media (max-width:768px){

    .why-section{

        padding:80px 0;

    }

    .why-card{

        padding:30px 25px;

    }

    .why-icon{

        width:70px;
        height:70px;

        font-size:30px;

    }

    .counter-box{

        margin-bottom:20px;

    }

    .counter-box h3{

        font-size:32px;

    }

}

@media (max-width:576px){

    .why-card{

        padding:28px 22px;

    }

    .why-card h4{

        font-size:20px;

    }

    .why-card p{

        font-size:14px;

    }

    .counter-box{

        padding:25px 15px;

    }

    .counter-box h3{

        font-size:28px;

    }

    .counter-box span{

        font-size:15px;

    }

}