/* =========================================
   WHY US PAGE
========================================= */

.why-us-main{

    padding:110px 0;

    background:#f5f7fa;
}


/* CONTENT */

.why-us-content{

    padding-right:20px;
}


/* DESCRIPTION */

.why-description{

    font-size:18px;

    line-height:1.9;

    color:#667085;

    margin-bottom:40px;
}


/* FEATURES */

.why-features{

    display:flex;

    flex-direction:column;

    gap:24px;
}


/* FEATURE BOX */

.why-feature-box{

    display:flex;
    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:24px;

    border-radius:22px;

    transition:.35s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}


.why-feature-box:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.1);
}


/* ICON */

.why-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    rgba(229,57,53,.1),
    rgba(255,255,255,.3)
    );

    color:#E53935;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.35s ease;
}


.why-feature-box:hover .why-icon{

    background:#E53935;

    color:#fff;

    transform:rotate(-8deg);
}


/* TEXT */

.why-feature-box h4{

    font-size:22px;

    font-weight:800;

    color:#0b1f3a;

    margin-bottom:10px;
}


.why-feature-box p{

    font-size:15px;

    line-height:1.8;

    color:#667085;

    margin:0;
}



/* =========================================
   IMAGE
========================================= */

.why-image-wrapper{

    position:relative;
}


.why-main-image{

    width:100%;
    height:auto;
    display:block;

    border-radius:30px;

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


/* EXPERIENCE BOX */

.experience-box{

    position:absolute;

    bottom:30px;

    left:-20px;

    background:#E53935;

    color:#fff;

    padding:28px 35px;

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(229,57,53,.3);
}


.experience-box h3{

    font-size:52px;

    font-weight:900;

    margin-bottom:0;
}


.experience-box p{

    margin:0;

    font-size:16px;

    font-weight:600;
}



/* =========================================
   STATS
========================================= */

.why-stats-section{

    background:#111111;

    padding:90px 0;
}


/* BOX */

.stats-box{

    background:#1b1b1b;

    border-radius:24px;

    padding:40px 20px;

    transition:.35s ease;

    border:1px solid rgba(255,255,255,.05);
}


.stats-box:hover{

    transform:translateY(-8px);

    border-color:#E53935;
}


/* NUMBER */

.stats-box h3{

    font-size:56px;

    font-weight:900;

    color:#E53935;

    margin-bottom:10px;
}


/* LABEL */

.stats-box p{

    color:#fff;

    font-size:16px;

    font-weight:600;

    margin:0;
}



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

/* LARGE DESKTOP */

@media (min-width:1600px){

    .why-us-main{
        padding:140px 0;
    }

    .why-description{
        font-size:20px;
    }

    .why-feature-box{
        padding:32px;
    }

    .why-feature-box h4{
        font-size:26px;
    }

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

    .experience-box{
        padding:35px 45px;
    }

    .experience-box h3{
        font-size:64px;
    }

    .stats-box{
        padding:50px 30px;
    }

    .stats-box h3{
        font-size:68px;
    }

}


/* DESKTOP */

@media (max-width:1400px){

    .experience-box h3{
        font-size:48px;
    }

}


/* LAPTOP */

@media(max-width:1199px){

    .why-us-main{
        padding:100px 0;
    }

    .why-feature-box{
        padding:22px;
    }

    .why-feature-box h4{
        font-size:20px;
    }

    .experience-box{
        padding:24px 30px;
    }

    .stats-box h3{
        font-size:48px;
    }

}


/* TABLET */

@media(max-width:991px){

    .why-us-main{
        padding:90px 0;
    }

    .why-us-content{
        padding-right:0;
        margin-bottom:40px;
    }

    .why-description{
        font-size:16px;
    }

    .why-feature-box{
        padding:22px;
    }

    .why-icon{
        width:60px;
        height:60px;
        min-width:60px;
        font-size:24px;
    }

    .experience-box{
        left:20px;
        bottom:20px;
        padding:22px 28px;
    }

    .experience-box h3{
        font-size:42px;
    }

    .experience-box p{
        font-size:14px;
    }

    .stats-box{
        padding:32px 18px;
    }

    .stats-box h3{
        font-size:42px;
    }

}


/* MOBILE */

@media(max-width:767px){

    .why-us-main{
        padding:70px 0;
    }

    .why-description{
        font-size:15px;
        line-height:1.8;
        margin-bottom:30px;
    }

    .why-features{
        gap:18px;
    }

    .why-feature-box{
        flex-direction:column;
        text-align:center;
        padding:22px 18px;
        border-radius:18px;
    }

    .why-icon{
        margin:auto;
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
        border-radius:16px;
    }

    .why-feature-box h4{
        font-size:20px;
    }

    .why-feature-box p{
        font-size:14px;
    }

    .why-main-image{
        border-radius:20px;
    }

    .experience-box{
        position:relative;
        left:0;
        bottom:0;
        margin-top:20px;
        text-align:center;
        width:100%;
        border-radius:18px;
    }

    .experience-box h3{
        font-size:38px;
    }

    .experience-box p{
        font-size:14px;
    }

    .why-stats-section{
        padding:70px 0;
    }

    .stats-box{
        padding:28px 18px;
        border-radius:18px;
    }

    .stats-box h3{
        font-size:38px;
    }

    .stats-box p{
        font-size:14px;
    }

}


/* SMALL MOBILE */

@media(max-width:575px){

    .why-us-main{
        padding:60px 0;
    }

    .why-description{
        font-size:14px;
    }

    .why-feature-box{
        padding:18px 16px;
    }

    .why-feature-box h4{
        font-size:18px;
    }

    .why-feature-box p{
        font-size:13px;
    }

    .why-icon{
        width:52px;
        height:52px;
        min-width:52px;
        font-size:20px;
    }

    .experience-box{
        padding:18px 20px;
    }

    .experience-box h3{
        font-size:32px;
    }

    .experience-box p{
        font-size:13px;
    }

    .stats-box{
        padding:24px 15px;
    }

    .stats-box h3{
        font-size:32px;
    }

    .stats-box p{
        font-size:13px;
    }

}


/* EXTRA SMALL DEVICES */

@media(max-width:380px){

    .why-feature-box{
        padding:16px 14px;
    }

    .why-feature-box h4{
        font-size:16px;
    }

    .why-feature-box p{
        font-size:12px;
    }

    .why-icon{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:18px;
    }

    .experience-box h3{
        font-size:28px;
    }

    .stats-box h3{
        font-size:28px;
    }

}