/* Layout 28*/

.layout-28 { background-color:#f8f8f8; }
.layout-28 .container { max-width:1230px; }
.layout-28 h2 { margin-bottom:20px; text-align: center; }
.layout-28 .hero p { font-size:20px; font-weight:400; color:#000000; line-height:28px; margin-bottom: 25px; text-align: center; }
.layout-28 ul li { border-bottom:2px solid #aaa; padding:18px 0 21px; transition: background-color 0.8s ease, color 0.8s ease; }
.layout-28 ul li:hover { background-color: #018daf;transition: background-color 0.8s ease, color 0.8s ease; }
.layout-28 ul li:last-child { border-bottom:0; }
.layout-28 ul li h4 { font-weight:700; margin-bottom:0; flex:0 0 50%; color:#000000; padding-right: 15%; padding-left:20px; display: flex; font-size: 24px; align-items: center; }
.layout-28 ul li p { margin-bottom: 0; flex: 0 0 50%; color: #000000; border-left: 2px solid #393939; padding: 14px 40px 14px 30px; letter-spacing:0.2px; }
.layout-28 ul li:hover h4,
.layout-28 ul li:hover p { color: #ffffff; border-left-color: rgba(255, 255, 255, 0.3); }

.layout-28 ul li img { margin-right: 15px; max-width: 80px; }
.layout-28 ul li:hover img { filter: brightness(0) invert(1); }
.layout-28 ul li .bdr { min-width: 49%; }




@media screen and ( max-width: 1199px ) { 

.layout-28 { padding: 100px 0; }


}

@media screen and ( max-width: 991px ) {

.layout-28 ul li h4 { padding-right: 10%; }

}

@media screen and ( max-width: 767px ) {

.layout-28 { padding: 60px 0; }
.layout-28 h5 { font-size: 18px; line-height: 24px; margin-bottom: 20px; }
.layout-28 ul li { padding: 15px 0; }
.layout-28 ul li h4 { padding: 0 15px; }
.layout-28 ul li p { padding: 10px 15px; }

}

@media screen and ( max-width: 599px ) {

.layout-28 ul li { display:block !important; padding:15px 10px; }
.layout-28 ul li h4 { padding:0; margin-bottom:15px; }
.layout-28 ul li p { padding:0; border:0; }


}