/*======================================================
FEATURES SECTION
======================================================*/


.features-section{

    background:var(--white);

    padding:100px 0 100px;

}



/*======================================================
HEADER
======================================================*/


.features-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}


.features-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:#EEF3F8;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:24px;

}



.features-header h2{

    font-size:48px;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:22px;

}



.features-header h2 span{

    color:var(--secondary);

}



.features-header p{

    font-size:18px;

    line-height:1.7;

    color:var(--text);

}



/*======================================================
MAIN LAYOUT
======================================================*/


.features-layout{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:70px;

}



/*======================================================
LEFT IMAGE
======================================================*/


.features-image{

    display:flex;

    justify-content:center;

    align-items:center;

}



.features-image img{

    width:100%;

    max-width:520px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 20px 35px rgba(0,0,0,.12));

}



/*======================================================
FEATURE LIST
======================================================*/


.features-list{

    display:flex;

    flex-direction:column;

    gap:28px;

}



/*======================================================
FEATURE ITEM
======================================================*/


.feature-item{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:24px;

    align-items:start;

    padding-bottom:24px;

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

}


.feature-item:last-child{

    border-bottom:none;

}



/*======================================================
NUMBER
======================================================*/


.feature-number{

    font-family:'Open Sans',sans-serif;

    font-size:48px;

    font-weight:300;

    line-height:1;

    color:#D8E0E8;

}



/*======================================================
TEXT
======================================================*/


.feature-text h3{

    font-size:22px;

    line-height:1.3;

    color:var(--dark);

    margin-bottom:8px;

}



.feature-text p{

    font-size:16px;

    line-height:1.7;

    color:var(--text);

}



/*======================================================
LIFESTYLE BANNER
======================================================*/
/*======================================================
LIFESTYLE BANNER
======================================================*/


.features-banner{

    width:100%;

    max-width:1350px;

    margin:80px auto 0;

    overflow:hidden;

    border-radius:var(--radius-lg);

}



.features-banner img{

    width:100%;

    height:320px;

    display:block;

    object-fit:cover;

}



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


@media(max-width:991px){


    .features-section{

        padding-top:80px;

    }


    .features-layout{

        grid-template-columns:1fr;

        gap:50px;

    }


    .features-image{

        order:1;

    }


    .features-list{

        order:2;

    }


    .features-header h2{

        font-size:40px;

    }


}



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


@media(max-width:600px){


    .features-section{

        padding-top:70px;

    }


    .features-header h2{

        font-size:32px;

    }


    .features-header p{

        font-size:16px;

    }


    .feature-item{

        grid-template-columns:50px 1fr;

        gap:16px;

    }


    .feature-number{

        font-size:36px;

    }


    .feature-text h3{

        font-size:19px;

    }


    .feature-text p{

        font-size:15px;

    }


    .features-banner{

        margin-top:70px;

    }

}