/* ========================================
BENEFICIOS PREMIUM
======================================== */

.benefits-premium{

    width:100%;

    background:#F4F7F4;

    padding:
    120px
    7%;
}

/* ========================================
TOP
======================================== */

.benefits-top{

    display:grid;

    grid-template-columns:
    1.1fr
    1fr;

    gap:90px;

    align-items:center;

    margin-bottom:70px;
}

/* LEFT */

.benefits-left{

    max-width:650px;
}

/* TAG */

.benefits-tag{

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    color:#E14514;

    margin-bottom:20px;

    display:block;
}

/* TITLE */

.benefits-title{

    font-size:64px;

    line-height:.95;

    font-weight:900;

    color:#111;

    letter-spacing:-2px;
}

/* RIGHT */

.benefits-right{

    max-width:620px;
}

/* TEXT */

.benefits-description{

    font-size:20px;

    line-height:1.8;

    color:#6d6d6d;
}

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

.benefits-grid{

    display:grid;

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

    gap:25px;
}

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

.benefit-card{

    background:#fff;

    border:1.5px solid #35753D;

    border-radius:24px;

    padding:
    42px
    32px;

    transition:.4s ease;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:100%;
}

/* HOVER */

.benefit-card:hover{

    background:#35753D;

    transform:translateY(-8px);

    box-shadow:
    0 20px 50px rgba(53,117,61,.18);
}

/* ICON */

.benefit-card img{

    width:54px;

    margin-bottom:25px;

    transition:.4s ease;
}

/* HOVER ICON */

.benefit-card:hover img{

    filter:brightness(0) invert(1);
}

/* TITLE */

.benefit-card h3{

    font-size:22px;

    line-height:1.2;

    font-weight:800;

    color:#4b4b4b;

    transition:.4s ease;
}

/* HOVER TITLE */

.benefit-card:hover h3{

    color:#fff;
}

/* TEXT */

.benefit-card p{

    margin-top:18px;

    font-size:16px;

    line-height:1.7;

    color:#6d6d6d;

    transition:.4s ease;
}

/* HOVER TEXT */

.benefit-card:hover p{

    color:rgba(255,255,255,.88);
}

/* ========================================
LARGE DESKTOP
======================================== */

@media(max-width:1600px){

.benefits-title{

    font-size:58px;
}

}

/* ========================================
LAPTOP
======================================== */

@media(max-width:1400px){

.benefits-top{

    gap:60px;
}

.benefits-title{

    font-size:52px;
}

.benefits-description{

    font-size:18px;
}

}

/* ========================================
TABLET
======================================== */

@media(max-width:992px){

.benefits-top{

    grid-template-columns:1fr;

    gap:35px;
}

.benefits-left,
.benefits-right{

    max-width:100%;
}

.benefits-title{

    font-size:44px;

    line-height:1;
}

.benefits-description{

    font-size:17px;
}

.benefits-grid{

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

}

/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

.benefits-premium{

    padding:
    90px
    24px;
}

.benefits-top{

    gap:28px;

    margin-bottom:45px;
}

.benefits-tag{

    font-size:12px;

    letter-spacing:3px;
}

.benefits-title{

    font-size:36px;

    line-height:1.05;

    letter-spacing:-1px;
}

.benefits-description{

    font-size:15px;

    line-height:1.7;
}

.benefits-grid{

    grid-template-columns:1fr;

    gap:20px;
}

.benefit-card{

    padding:
    32px
    24px;

    border-radius:22px;
}

.benefit-card img{

    width:48px;

    margin-bottom:20px;
}

.benefit-card h3{

    font-size:22px;
}

.benefit-card p{

    font-size:15px;

    line-height:1.7;
}

}

/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:576px){

.benefits-title{

    font-size:32px;
}

}