/* ==========================================
   WHY CHOOSE US
========================================== */

.why-choose{

    padding:30px 0;

    background:var(--background-color);

}

/* ==========================
   GRID
========================== */

.choose-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

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

.choose-card{

    background:var(--card-bg);

    padding:45px 30px;

    border-radius:24px;

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow-sm);

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

}

.choose-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

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

.choose-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--secondary-light);

    color:var(--secondary-color);

}

.choose-icon svg{

    width:36px;

    height:36px;

}

.choose-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

    color:var(--heading-color);

}

.choose-card p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================
   HOVER EFFECT
========================== */

.choose-card:hover .choose-icon{

    background:var(--secondary-color);

    color:var(--white-color);

    transform:rotate(10deg);

}

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

@media(max-width:992px){

.choose-grid{

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

}

}

@media(max-width:768px){

.why-choose{

    padding:20px 0;

}

.choose-grid{

    grid-template-columns:1fr;

    gap:25px;

    margin-top:45px;

}

.choose-card{

    padding:40px 25px;

}

}

@media(max-width:480px){

.choose-icon{

    width:70px;

    height:70px;

}

.choose-icon svg{

    width:30px;

    height:30px;

}

}