.elementor-37 .elementor-element.elementor-element-d20cf30{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-8315474{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-37 .elementor-element.elementor-element-727fd3d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-ecc73be *//* =====================================================
   EXPERTISE SECTION
   ===================================================== */

.expertise-section{
    background:#f7fbff;
    padding:10px 8%;
    border-radius: 35px;
}

/* Container Layout */
.expertise-container{
    max-width:1250px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    flex-wrap:wrap;
}

/* =====================================================
   LEFT TITLE
   ===================================================== */

.expertise-left{
    flex:1;
    min-width:250px;

    opacity:0;
    transform:translateX(-40px);
    animation:slideLeft 1s cubic-bezier(.25,.1,.25,1) forwards;
}

.expertise-left h2{
    font-size:30px;
    font-weight:700;
    color:#1e3d73;
    line-height:1.3;
    position:relative;
}

/* Underline animation */
.expertise-left h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#2f6fdc,#8fb9ff);
    animation:lineGrow 1s cubic-bezier(.25,.1,.25,1) forwards;
    animation-delay:.6s;
}

/* =====================================================
   CENTER IMAGE
   ===================================================== */

.expertise-center{
    flex:1;
    min-width:300px;
    text-align:center;

    opacity:0;
    transform:scale(.9);
    animation:scaleIn 1s cubic-bezier(.25,.1,.25,1) forwards;
    animation-delay:.2s;
}

.expertise-center img{
    width:100%;
    max-width:420px;
    border-radius:18px;
    transition:transform 1s cubic-bezier(.25,.1,.25,1),
               box-shadow .6s ease;
}

/* Image hover */
.expertise-center:hover img{
    transform:scale(1.08);
    box-shadow:0 20px 40px rgba(47,111,220,.18);
}

/* =====================================================
   RIGHT LIST
   ===================================================== */

./* =====================================================
   SMALL COMPACT LIST STYLE
   ===================================================== */

.expertise-list{
    list-style:none;
    padding:0;
    margin:0;
}

/* Smaller list items */
.expertise-list li{
    font-size:13.5px;
    padding:8px 14px;
    margin-bottom:6px;

    background:#ffffff;
    border-radius:6px;
    border:1px solid #e6eef8;

    position:relative;
    cursor:pointer;

    transition:
        transform .3s cubic-bezier(.25,.1,.25,1),
        background .3s ease,
        box-shadow .3s ease;
}

/* Smaller bullet dot */
.expertise-list li::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#2f6fdc;
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
}

/* Adjust padding for smaller dot */
.expertise-list li{
    padding-left:22px;
}

/* Subtle hover */
.expertise-list li:hover{
    transform:translateX(6px);
    background:#f1f6ff;
    box-shadow:0 4px 12px rgba(47,111,220,.08);
}


/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes slideLeft{
    to{opacity:1; transform:translateX(0);}
}

@keyframes slideRight{
    to{opacity:1; transform:translateX(0);}
}

@keyframes scaleIn{
    to{opacity:1; transform:scale(1);}
}

@keyframes lineGrow{
    to{width:100%;}
}

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

@media(max-width:992px){

.expertise-container{
    flex-direction:column;
    text-align:center;
}

.expertise-left h2::after{
    left:50%;
    transform:translateX(-50%);
}

.expertise-list li{
    text-align:left;
}

}/* End custom CSS */