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

.avi-why{

    padding:120px 0;

    background:#fafafa;

}

.avi-why-grid{

    display:grid;

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

    gap:30px;

}

.avi-why-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:26px;

    background:#fff;

    transition:.45s;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.avi-why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.16);

}

.avi-number-bg{

    position:absolute;

    right:30px;

    top:25px;

    font-size:70px;

    font-weight:900;

    color:#efefef;

    transition:.4s;

}

.avi-why-card:hover .avi-number-bg{

    color:#a50f15;

    opacity:.12;

}

.avi-why-card h3{

    font-size:52px;

    color:#a50f15;

    font-weight:900;

    line-height:1;

    margin-bottom:18px;

    transition:.35s;

}

.avi-why-card:hover h3{

    color:#ffc83d;

}

.avi-why-card h4{

    font-size:24px;

    margin-bottom:18px;

    color:#222;

    font-weight:700;

}

.avi-why-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}
.avi-arrow{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#a50f15;

    color:#fff;

    transition:.4s;

}

.avi-arrow i{

    transition:.35s;

}

.avi-why-card:hover .avi-arrow{

    background:#ffc83d;

    color:#8f1115;

    transform:rotate(-45deg);

}

.avi-why-card:hover .avi-arrow i{

    transform:translateX(4px);

}

.avi-why-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#a50f15;

    transition:.45s;

}

.avi-why-card:hover::before{

    height:100%;

}

@media(max-width:1200px){

    .avi-why-grid{

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

    }

}

@media(max-width:768px){

    .avi-why{

        padding:80px 0;

    }

    .avi-why-grid{

        grid-template-columns:1fr;

    }

    .avi-why-card{

        padding:30px;

    }

    .avi-number-bg{

        font-size:56px;

    }

    .avi-why-card h3{

        font-size:42px;

    }

}
/* Counter */

.avi-counter{

    display:flex;

    align-items:flex-end;

    gap:4px;

}

.avi-counter span{

    font-size:30px;

    color:#ffc83d;

    font-weight:700;

    margin-bottom:6px;

}
/* ===============================
   Counter
================================ */

.avi-counter{

    display:flex;

    align-items:flex-end;

    gap:4px;

    transition:.4s;

}

.avi-counter span{

    font-size:28px;

    margin-bottom:6px;

    color:#ffc83d;

}

.avi-counter.done{

    animation:aviPop .45s ease;

}

@keyframes aviPop{

    0%{

        transform:scale(.7);

    }

    70%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

/* ===============================
   Shine
================================ */

.avi-why-card{

    overflow:hidden;

}

.avi-why-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:40%;

    height:260%;

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

    transform:rotate(25deg);

    transition:.9s;

}

.avi-why-card:hover::after{

    left:140%;

}

/* ===============================
   Glow
================================ */

.avi-why-card:hover{

    border:1px solid rgba(255,200,60,.5);

}

.avi-why-card:hover h3{

    text-shadow:

        0 0 15px rgba(255,200,60,.35);

}

/* ===============================
   Arrow
================================ */

.avi-arrow{

    transition:.4s;

}

.avi-why-card:hover .avi-arrow{

    box-shadow:

        0 15px 35px rgba(165,15,21,.35);

}

/* ===============================
   Number
================================ */

.avi-number-bg{

    transition:.4s;

}

.avi-why-card:hover .avi-number-bg{

    transform:scale(1.08);

}