/**
 * Features Highlight Block - Frontend Styles
 * These styles are loaded on the frontend
 */

.features-highlight-block { padding: 120px 0; overflow: inherit; }
.features-highlight-wrap { display: flex; flex-wrap: wrap; gap: 80px; }
.features-highlight-wrap .icon-content-part { width: 100%; max-width: 696px; }
.features-highlight-wrap .content-part { width: 35.3%; }
.features-list .features-content h4 { color: var(--primary-color); margin-bottom: 16px; }
.features-list .features-content p { color: var(--primary-color); font-size: 16px; line-height: 1.5; }
.features-list .features-content p span { color: var(--light-red-color); font-weight: var(--font-weight-bold); }
.icon-content-wrap { display: flex; flex-wrap: wrap; gap: 24px; }
.features-list { padding: 32px; width: 48%; }
.features-list .icon { margin-bottom: 24px; min-height: 68px; }
.content-part .content h2 { color: var(--primary-color); }
.content-part .content h2 span { color: var(--light-red-color); margin-bottom: 16px; }
.content-part .content p  { color: var(--primary-color); }
.content-part .content { position: sticky; top: 77px; }
.content-part .content .btn-wrap { margin-top: 48px; }
.content-part .content .btn-wrap a.btn.btn-primary { max-width: 210px; width: 100%; text-align: center; }
.mobile-btn.btn-wrap { display: none; }

/*Responsive Css Start Here*/
@media only screen and (max-width: 1280px) {
    .features-highlight-wrap { gap: 55px; }
    .features-list { padding: 24px; }
}
@media only screen and (max-width: 1200px) {
    .features-highlight-block {padding: 80px 0;}
    .features-highlight-wrap .icon-content-part { max-width: 615px; }
    .features-highlight-wrap .content-part { width: 33.3%; }
    .features-highlight-wrap { gap: 40px; }
    .icon-content-wrap { gap: 10px; }
    .features-list { width: 49%; }
}
@media only screen and (max-width: 1024px) {
    .features-highlight-block {padding: 60px 0;}
        .features-list { padding: 10px; }
        .features-highlight-wrap .icon-content-part { max-width: 593px; }
        .content-part .content .btn-wrap { margin-top: 34px; }
}
@media only screen and (max-width: 991px) {
    .features-highlight-wrap .icon-content-part { max-width: 100%; order: 2; }
    .features-highlight-wrap .content-part { width: 100%; order: 1; }
    .content-part .content .btn-wrap { margin-top: 20px; }
}
@media only screen and (max-width: 767px) {
    .features-highlight-block {padding: 40px 0;}
    .features-list .icon { margin-bottom: 10px; }
    .features-list .features-content h4 { margin-bottom: 14px; }
    .features-list { padding: 0; }
    .icon-content-wrap { gap: 22px; }
    .features-list { width: 47.9%; }
    .features-list .features-content p { margin-bottom: 0; font-size: 14px; line-height: 1.4; }
    .features-list .icon { max-width: 64px; width: 100%; margin-bottom: 18px; }
    .content-part .content .btn-wrap a.btn.btn-primary { max-width: fit-content; }
    .mobile-btn.btn-wrap { display: block; margin-top: 36px; }
    .content-part .content .btn-wrap { display: none; }
    .features-highlight-wrap { gap: 36px; }
    .features-highlight-block .mobile-btn.btn-wrap { display: block;margin-top: 80px;text-align: left; }
}
@media only screen and (max-width: 575px) {
    .features-list { width: 47.5%; }
}
@media only screen and (max-width: 480px) {
    .features-list { width: 100%; }
    .features-list .icon { min-height: fit-content; }
}