/*======================================================

                WHY CHOOSE AVR

======================================================*/

.why-section{

    padding:90px 0 120px;

    background:#f5f5f7;

    position:relative;

    overflow:hidden;

}

/*====================================
Heading
====================================*/

.why-section .section-heading{

    max-width:760px;

    margin:0 auto 90px;

}

.why-section .section-subtitle{

    display:inline-block;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#8b8b8b;

    font-weight:600;

    margin-bottom:18px;

}

.why-section h2{

    font-size:60px;

    line-height:1.12;

    font-weight:700;

    color:#111;

    margin-bottom:25px;

}

.why-section p{

    font-size:20px;

    color:#6e6e73;

    line-height:1.8;

}

/*====================================
Grid
====================================*/

.why-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}

/*====================================
Card
====================================*/

.why-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    background:#fff;

    border-radius:32px;

    padding:45px 35px;

    min-height:360px;

    text-align:center;

    overflow:hidden;

    box-shadow:0 18px 55px rgba(0,0,0,.06);

    transition:.45s ease;

    cursor:pointer;

}

/* Glow Effect */

.why-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:80%;

    height:250%;

    background:linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.45),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1s;

}

.why-card:hover::before{

    left:150%;

}

.why-card:hover{

    box-shadow:0 30px 80px rgba(0,0,0,.12);

}

/*====================================
Icon
====================================*/

.why-icon{

    width:92px;

    height:92px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#f4f4f4;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#111;

    transition:.4s;

}

.why-card:hover .why-icon{

    background:#000;

    color:#fff;

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

}

/*====================================
Title
====================================*/

.why-card h3{

    font-size:30px;

    font-weight:700;

    color:#111;

    line-height:1.25;

    margin-bottom:20px;

    min-height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*====================================
Text
====================================*/

.why-card p{

    font-size:16px;

    color:#777;

    line-height:1.8;

    margin:0;

    max-width:260px;

}

.why-grid{

    display:grid;

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

    gap:30px;

    width:100%;

}

/*====================================
Responsive
====================================*/

@media(max-width:1200px){

.why-grid{

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

}

}

@media(max-width:768px){

.why-grid{

    grid-template-columns:1fr;

}

.why-section{

    padding:100px 0;

}

.why-section h2{

    font-size:42px;

}

.why-card{

    padding:40px 30px;

}

}