.benefits{

    width:100%;
    background:#fff;
    padding:80px 100px;

}

.benefits__intro{

    max-width:760px;
    margin:0 auto 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;

}



.benefits__grid{

    width:100%;
    max-width:1335px;

    margin:0 auto;

    display:grid;

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

    gap:24px;

    list-style:none;

    padding:0;

}

.benefit-card{

    border: 1px solid var(--color-neutral-300, rgba(230, 230, 230, 1));

    background:#fff;

    border-radius:16px;

    padding:32px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:235px;
}


.benefit-card__icon{

    width:52px;
    top: 14px;
    left: 14px;

    height:53px;
    display: flex;
    align-items: center;
    justify-content: center;

    color:#155DFC;

    margin-bottom:32px;
    transition: transform .45s ease;
    transform-origin: center;

}
.benefit-card__icon img{

    width:48px;
    height:48px;
    


}
.benefit-card:hover .benefit-card__icon img{

    animation:iconRotate  1.1s ease;

}


@keyframes iconRotate{

    0%{
        transform:rotate(0deg) scale(1);
    }

    25%{
        transform:rotate(-6deg) scale(1.03);
    }

    50%{
        transform:rotate(5deg) scale(1.05);
    }

    75%{
        transform:rotate(-3deg) scale(1.02);
    }

    100%{
        transform:rotate(0deg) scale(1);
    }

}


.benefit-card:hover{

    background: rgba(237, 242, 255, 1);

    border-color:#C9DDFF;

    box-shadow:0 16px 32px rgba(21,93,252,.08);

}

.benefit-card__title{

    font-size:24px;
    font-weight:600;
    line-height:34px;
    margin-bottom:16px;
    color:#000;
    letter-spacing: -4%;

}

.benefit-card__desc{

    font-size:18px;
    font-family:'secondary',sans-serif;
    line-height:28px;
    color: #222;
    letter-spacing: -4%;

    font-weight: 400;

}

/* Large Laptop */
@media (max-width:1400px){

    .benefits{

        padding:80px 60px;

    }


    .benefits__grid{

        gap:22px;

    }


    .benefit-card{

        padding:28px;

    }

}



/* Laptop / Tablet Landscape */
@media (max-width:1024px){


    .benefits{

        padding: 20px;;

    }


    .benefits__intro{

        max-width:650px;

        margin-bottom:40px;

    }


    .benefits__grid{

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

        gap:20px;

    }


    .benefit-card{

        min-height:220px;

    }


}



/* Tablet */
@media (max-width: 768px) {

  .benefits{
    padding:20px;
    overflow-x:hidden;
  }

  .benefits__intro{
    margin:36px auto 36px;
  }
  .benefits__grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    grid-template-columns:unset;
  }

  .benefit-card{
    flex:1 1 300px;
    max-width:340px;
    width:100%;
    padding:26px;
    min-height:220px;
  }

  .benefit-card__icon{
    width:44px;
    height:44px;
    margin-bottom:24px;
  }

  .benefit-card__icon img{
    width:40px;
    height:40px;
  }

  .benefit-card__title{
    font-size:22px;
    line-height:32px;
  }

  .benefit-card__desc{
    font-size:16px;
    line-height:26px;
  }

}


/* Mobile */
@media (max-width:480px){


    .benefits{

        padding: 16px;

    }



    .benefit-card{

        padding:16px;

        border-radius:16px;

    }


    .benefit-card__icon{

        margin-bottom:20px;

    }


    .benefit-card__title{

        font-size:24px;

        line-height:34px;

        margin-bottom:12px;

    }


    .benefit-card__desc{

        font-size:18px;
        font-weight: 400;
        font-style: normal;

        line-height:26px;

    }

}



/* Small Phones */
@media (max-width:360px){


    .benefits{

        padding:40px 16px;

    }

    .benefit-card{

        padding:20px;

    }


    .benefit-card__icon img{

        width:40px;

        height:40px;

    }


}