.features .inner-box { padding: 24px; border-radius: 12px; border: 1px solid #EFEFEF; background-color: var(--white-color); transition: all 0.4s ease; margin: 0 15px;}

.features .inner-box:hover { border: 1px solid var(--primary-color); background-color: var(--primary-color);}

.features .inner-box:hover .features-btn , .features .inner-box:hover p , .features .inner-box:hover h4  { color: var(--white-color);}

.features .inner-box .heading h4 { font-weight: var(--bold-font); }

.features .inner-box p { margin: 12px 0; display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
}

.features .title { max-width: 768px; padding-bottom: 40px;}

.features .inner-box .heading .icon { width: 48px;  height: 48px; background-color: #F4EBFF; border-radius: 10px; justify-content: center; display: inline-flex; flex-wrap: wrap; margin-right: 20px; }

.features .inner-box .heading .icon img { width: 26px;}

.features-btn { font-weight: var(--medium-font); color: var(--primary-color); font-size: 18px; }

.features-btn > i { font-size: 14px; transition: all 0.4s; padding-left: 4px; }

.features-btn:hover > i { padding-left: 15px; }

.slick-dots { bottom: -50px; }

.slick-dots li { margin: 0 2px; }

.slick-dots li { width: unset; height: unset;}

.slick-dots li button { margin: 0; width: 12px; height: 12px; background-color: #D9D9D9; border-radius: 100%; transition: all 0l.4s ease-in;}

.slick-dots .slick-active button { width: 48px; border-radius: 6px; background-color: var(--primary-color);}

.slick-dots li button:before { display: none;}

.slick-dotted.slick-slider { margin-bottom: 40px; }


@media (max-width:1399px) {
    
}

@media (max-width:1199px) {
    
}

@media (max-width:991px) {

    .features .title { max-width: 720px; padding-bottom: 30px; }

    .features .inner-box p { margin: 15px 0; }
    
}

@media (max-width:767px) {

    .features .title { max-width: 640px; padding-bottom: 20px; }

    .slick-dots { bottom: -40px; }

    .features .inner-box p { margin: 10px 0; }

    .features-btn { font-size: 16px; }
 
}

@media (max-width:575px) {

    .features .inner-box { margin: 0 5px; }

    .features .inner-box .heading .icon { margin-right: 10px; }

}

@media (max-width:430px) {

}

@media (max-width: 320px) {

.features .inner-box .heading  { flex-direction: column; align-items: start !important; }

.features .inner-box .heading h4 { padding-top: 10px; }
    
}