/*=========================================
        SERVICES SHOWCASE
=========================================*/

.services-showcase{

    background:#f8fafd;

}

.services-wrapper{

    display:grid;

    grid-template-columns:420px minmax(0,1fr);

    gap:60px;

    align-items:start;

    margin-top:70px;

}

/*=========================================
            LEFT ACCORDION
=========================================*/

.accordion-wrapper{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

    position:sticky;

    top:110px;

}

.accordion-item{

    border-bottom:1px solid #ececec;

}

.accordion-item:last-child{

    border-bottom:none;

}

.accordion-header{

    width:100%;

    background:transparent;

    border:none;

    padding:22px 28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    transition:.35s;

}

.accordion-header:hover{

    background:#f7fbff;

}

.accordion-header div{

    display:flex;

    align-items:center;

    gap:18px;

}

.accordion-header span{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#edf5ff;

    color:var(--accent-color);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}

.accordion-header h3{

    font-size:20px;

    font-weight:600;

    line-height:1.4;

}

.accordion-item.active .accordion-header{

    background:#f8fbff;

} 

.accordion-item.active .accordion-header h3{

    color:var(--accent-color);

}

.accordion-header i{

    font-size:22px;

    transition:.35s;

}

.accordion-item.active .accordion-header i{

    transform:rotate(45deg);

}

.accordion-item.active .accordion-header{

    background:#f7fbff;

}

.accordion-item.active .accordion-header h3{

    color:var(--accent-color);

}

.accordion-item.active .accordion-header i{

    transform:rotate(45deg);

}

/*=========================================
        ACCORDION BODY
=========================================*/

.accordion-body{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.accordion-body.active{

    max-height:700px;

    overflow-y:auto;

}

.accordion-body ul{

    list-style:none;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

    padding:15px 25px 25px;

}


.sub-service span {
    position: relative;
    display: inline-block;
}

.sub-service span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.sub-service:hover span::after,
.sub-service.active span::after {
    transform: scaleX(1);
}


.sub-service{

    

    

    border-radius:12px;

    padding:12px 16px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    color:var(--secondary-color);

    transition:.3s;

    position:relative;


}
.sub-service::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%) scaleY(0);

    width:4px;

    height:70%;

    background:var(--accent-color);

    border-radius:10px;

    transition:.3s;

}

.sub-service:hover{

    background:#edf5ff;

    color:var(--accent-color);

    border-color:rgba(0,56,209,.2);

    transform:translateX(5px);

}

.sub-service.active{

    
    background:transparent;

    color:inherit;

    border-color:var(--border-color);

}

.sub-service.active::before{

    transform:translateY(-50%) scaleY(1);

}

/*=========================================
        RIGHT PREVIEW
=========================================*/

.service-preview{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    position:sticky;

    top:110px;

}

.preview-image{

    overflow:hidden;

}

.preview-image img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.service-preview:hover img{

    transform:scale(1.05);

}

.preview-content{

    padding:40px;

}

.preview-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#edf5ff;

    color:var(--accent-color);

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.preview-content h3{

    font-size:34px;

    margin-bottom:18px;

}

.preview-content p{

    color:var(--secondary-color);

    line-height:1.9;

    margin-bottom:30px;

}

.preview-content ul{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    list-style:none;

    margin:35px 0;

    padding:0;

}

.preview-content li{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--secondary-color);

}
.accordion-body.active::-webkit-scrollbar{

    width:6px;

}

.accordion-body.active::-webkit-scrollbar-thumb{

    background:rgba(0,56,209,.25);

    border-radius:20px;

}

.accordion-body.active::-webkit-scrollbar-track{

    background:#f5f5f5;

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

.services-wrapper{

    grid-template-columns:1fr;

}

.accordion-wrapper{

    position:static;

}

.service-preview{

    position:static;

    margin-top:35px;

}

.accordion-body ul{

    grid-template-columns:1fr;

}

}

@media(min-width:992px){

.accordion-body.active{

    max-height:420px;

}

}
.preview-content li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--accent-color);

}

/*=========================================
        FADE ANIMATION
=========================================*/

.service-preview{

    opacity:1;

    transform:translateY(0);

    transition:.35s;

}

.service-preview.loading{

    opacity:.2;

    transform:translateY(15px);

}
/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1200px){

.services-wrapper{

    grid-template-columns:360px 1fr;

    gap:40px;

}

.preview-content{

    padding:30px;

}

.preview-content h3{

    font-size:28px;

}

}

@media(max-width:991px){

.services-wrapper{

    grid-template-columns:1fr;

}

.service-preview{

    position:static;

}

.preview-image img{

    height:280px;

}

}

@media(max-width:768px){

.accordion-header{

    padding:20px;

}

.accordion-header h3{

    font-size:18px;

}

.accordion-header span{

    width:38px;

    height:38px;

    font-size:14px;

}

.preview-content{

    padding:25px;

}

.preview-content ul{

    grid-template-columns:1fr;

}

.preview-content h3{

    font-size:24px;

}

}

@media(max-width:480px){

.section-heading{

    margin-bottom:40px;

}

.services-wrapper{

    margin-top:40px;

}

.preview-image img{

    height:220px;

}

.preview-content{

    padding:20px;

}

}
.accordion-body ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px 20px;
}

@media (max-width:768px){
    .accordion-body ul{
        grid-template-columns:1fr;
    }
}
/* new code */