/**
 * Essential Solutions Block - Frontend Styles
 * These styles are loaded on the frontend
 */

.essential-solutions-block { padding: 120px 0 190px; }
.essential-solutions-block .heading { max-width: 768px; width: 100%; margin: 0 auto 80px auto; text-align: center; }
.essential-solutions-block .heading h2 { color: var(--primary-color); margin-bottom: 16px; }
.essential-solutions-block .heading h2 span { color: var(--light-red-color); }
.essential-solutions-block .heading p { color: var(--primary-color); margin-bottom: 24px; }
.essential-solutions-wrap { display: flex; flex-wrap: wrap;gap: 80px; justify-content: space-between; }
.essential-solutions-wrap .content-list { max-width: 592px; width: 100%; }
.essential-solutions-wrap .content-list .content-item .content { opacity: 0; height: 0; visibility: hidden; }
.essential-solutions-wrap .content-list .content-item .content p { font-size: 16px; line-height: 1.5; color: var(--primary-color); }
.essential-solutions-wrap .content-list .content-item.active .content { opacity: 1; height: auto; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; visibility: visible; }
.essential-solutions-wrap .content-list .content-item.active h4 { color: var(--light-red-color); }
.essential-solutions-wrap .content-list .content-item.active { border-left-color: var(--light-red-color); }
.essential-solutions-wrap .content-list { display: flex; flex-wrap: wrap; gap: 32px; }
.essential-solutions-wrap .content-list .content-item { border-left: 2px solid var(--gray-light-color); padding: 8px 24px; margin: 0; }
.essential-solutions-wrap .content-list .content-item h4 { color: var(--primary-color); margin: 0 0 8px 0; cursor: pointer; display: inline-block; font-weight: var(--font-weight-medium); }
.essential-solutions-wrap .content-list .content-item p { color: var(--primary-color); margin: 0; }

.essential-solutions-wrap .image-list { width: 44%; position: relative; padding: 37px 39px; }
.essential-solutions-wrap .image-list .image-item { max-width: 450px; opacity: 0;visibility: hidden;position: absolute;right: 39px;top: 37px;height: 100%;width: 100%; }
.essential-solutions-wrap .image-list .image-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 426px; background: linear-gradient(180deg, rgba(24, 38, 51, 0) 37.5%, rgba(24, 38, 51, 0.25) 79.33%, rgba(24, 38, 51, 0.85) 100%);
border-radius: 16px; z-index: 1; }
.essential-solutions-wrap .image-list .image-item > img { max-width: 450px; width: 100%; height: 426px; object-fit: cover; border-radius: 16px; position: relative; }
.essential-solutions-wrap .image-list .image-item:nth-child(even) .icon { right: -60px; left: auto; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; bottom: -20px; }
.essential-solutions-wrap .image-list .image-item.active { opacity: 1;visibility: visible; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; right: 39px; }
.essential-solutions-wrap .image-list .image-item .icon { width: auto; position: absolute; left: -125px; bottom: -4px; -webkit-transition: all 0.5s ease-out; z-index: 1; }
.mobile-btn.btn-wrap { display: none; }


/*Responsive Css Start Here*/
@media only screen and (max-width: 1280px) {
    .essential-solutions-block { gap: 70px; }
    .essential-solutions-wrap { gap: 58px; }
}
@media only screen and (max-width: 1200px) {
    .essential-solutions-block {padding: 80px 0 150px;}
    .content-list-wrap { width: 50%; }
    .essential-solutions-wrap .image-list .image-item .icon { max-width: 180px; left: -70px; bottom: 30px; }
    .essential-solutions-wrap .content-list { max-width: 480px;  }
    .essential-solutions-wrap .image-list .image-item:nth-child(even) .icon { right: -40px; }
}
@media only screen and (max-width: 1024px) {
    .essential-solutions-block {padding: 60px 0 80px;}
    .content-list-wrap { width: 40%; }
    .essential-solutions-wrap .image-list { width: 52%; padding: 25px; }
    .essential-solutions-block .heading { margin: 0 auto 60px; }
    .essential-solutions-wrap .image-list .image-item { max-width: 320px; }
    .essential-solutions-wrap .image-list .image-item { right: 20px; }
}
@media only screen and (max-width: 991px) {
    .essential-solutions-wrap { gap: 24px; }
    .essential-solutions-block .heading { margin: 0 auto 40px; }
    .essential-solutions-wrap .image-list .image-item > img { height: 326px; }
    .essential-solutions-wrap .image-list .image-item::before { height: 326px; }
    .content-list-wrap { width: 48%; }
    .essential-solutions-wrap .image-list { width: 48%; padding: 25px; }
    .essential-solutions-wrap .image-list .image-item { height: auto; }
    .essential-solutions-wrap .image-list .image-item .icon { max-width: 120px; left: -50px; bottom: -30px; }
    .essential-solutions-wrap .content-list { gap: 20px; max-width: 400px; }
    .essential-solutions-wrap .content-list .content-item { padding: 6px 20px; }
    
}
@media only screen and (max-width: 767px) {
    .essential-solutions-block {padding: 40px 0 40px;}
    .essential-solutions-wrap .image-list { width: 100%; height: 310px; }
    .essential-solutions-block .heading h2 { text-align: left; max-width: 300px; width: 100%; }
    .essential-solutions-block .heading p { max-width: 343px; width: 100%; margin: 0 0 15px; text-align: left; }
    .content-list-wrap { width: 100%; }
    .essential-solutions-wrap .image-list .image-item { max-width:320px; margin: 0 auto; width:100%; height: 310px; }
    .essential-solutions-wrap .image-list .image-item > img { height: 310px; object-fit: cover; }
    .essential-solutions-wrap .image-list .image-item::before { height: 310px; }
    .essential-solutions-wrap .image-list .image-item.active { right: 0; left: 0; margin: 0 auto; }
    .mobile-btn.btn-wrap { display: block; margin-top: 80px; text-align: center; }
    .essential-solutions-block .heading a.btn { display: none; }
    .essential-solutions-wrap .content-list { max-width: 100%; }
    .essential-solutions-wrap .image-list .image-item .icon { left: -20px; }
}
@media only screen and (max-width: 575px) {
    .essential-solutions-wrap .image-list { width: 100%; height: 240px; }
    .essential-solutions-wrap .image-list .image-item { max-width:270px; margin: 0 auto; width:100%; height: 240px; }
    .essential-solutions-wrap .image-list .image-item > img { height: 240px; object-fit: cover; }
    .essential-solutions-wrap .image-list .image-item::before { height: 240px; }
    .essential-solutions-wrap .image-list .image-item.active { right: 0; left: 0; margin: 0 auto; }
}