/* =========================================================
   AF_Expertise v1.0.0
   Developed by Ilyas Benayad
   ========================================================= */

.af-expertise-section{
    --af-orange:#f15a24;
    --af-dark:#172033;
    --af-muted:#626b78;
    --af-exp-bg:#fff8f3;
    --af-overlay-color:#fff8f3;
    --af-duration:320ms;
    --af-hover-lift:6px;
    --af-hover-scale:1.01;

    position:relative;
    width:100%;
    min-height:330px;
    overflow:hidden;
    background:var(--af-exp-bg);
    padding:58px 0 54px;
    box-sizing:border-box;
    isolation:isolate;
}

.af-expertise-section *,
.af-expertise-section *::before,
.af-expertise-section *::after{
    box-sizing:border-box;
}

.af-expertise-background{
    position:absolute;
    top:0;
    right:0;
    width:54%;
    height:100%;
    z-index:-2;
    overflow:hidden;
    pointer-events:none;
}

.af-expertise-background img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    max-width:none;
}

.af-expertise-overlay{
    position:absolute;
    top:0;
    right:0;
    width:62%;
    height:100%;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            var(--af-overlay-color) 0%,
            color-mix(in srgb,var(--af-overlay-color) 96%,transparent) 14%,
            color-mix(in srgb,var(--af-overlay-color) 72%,transparent) 30%,
            color-mix(in srgb,var(--af-overlay-color) 32%,transparent) 50%,
            color-mix(in srgb,var(--af-overlay-color) 8%,transparent) 72%,
            transparent 100%
        );
}

@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
    .af-expertise-overlay{
        background:linear-gradient(
            90deg,
            #fff8f3 0%,
            rgba(255,248,243,.96) 14%,
            rgba(255,248,243,.72) 30%,
            rgba(255,248,243,.32) 50%,
            rgba(255,248,243,.08) 72%,
            rgba(255,248,243,0) 100%
        );
    }
}

.af-no-overlay .af-expertise-overlay{
    display:none!important;
}

.af-expertise-container{
    position:relative;
    z-index:5;
    width:calc(100% - 80px);
    max-width:1200px;
    margin:0 auto;
}

.af-expertise-header{
    position:relative;
    z-index:5;
    max-width:72%;
    margin-bottom:34px;
}

.af-expertise-eyebrow{
    display:inline-block;
    margin-bottom:12px;
    color:var(--af-orange);
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.35px;
    text-transform:uppercase;
}

.af-expertise-header h2{
    margin:0;
    padding:0;
    color:var(--af-dark);
    font-family:Arial,Helvetica,sans-serif;
    font-size:36px;
    line-height:1.08;
    font-weight:700;
    letter-spacing:-1px;
    overflow-wrap:anywhere;
}

.af-expertise-header h2 span{
    color:var(--af-orange);
}

/* GRID */
.af-expertise-features{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    width:100%;
    min-width:0;
    gap:0;
}

/* CARD
   Important fix:
   Hover background lives inside the CARD itself,
   never as a floating external rectangle. */
.af-feature{
    --af-card-y:0px;

    position:relative;
    min-width:0;
    width:100%;
    min-height:190px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:18px 28px;

    color:inherit;
    text-decoration:none!important;

    border:1px solid transparent;
    border-radius:10px;
    background:transparent;

    overflow:hidden;
    contain:paint;
    isolation:isolate;

    transform:
        translate3d(0,var(--af-card-y),0)
        scale(1);

    transform-origin:center center;
    backface-visibility:hidden;
    will-change:transform;

    transition:
        transform var(--af-duration) cubic-bezier(.2,.8,.2,1),
        background-color var(--af-duration) ease,
        box-shadow var(--af-duration) ease,
        border-color var(--af-duration) ease;
}

/* Divider is clipped within its own card column */
.af-feature:not(:first-child)::before{
    --af-divider-color:rgba(241,90,36,.28);

    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:1px;
    height:108px;
    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--af-divider-color),
            transparent
        );

    transition:opacity var(--af-duration) ease;
}

.af-no-dividers .af-feature::before{
    display:none!important;
}

/* ICON */
.af-feature-icon{
    position:relative;
    z-index:2;

    width:48px;
    height:48px;
    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 15px;

    border-radius:50%;
    color:var(--af-orange);
    background:rgba(255,255,255,.90);

    box-shadow:
        0 5px 18px rgba(241,90,36,.08),
        inset 0 0 0 1px rgba(241,90,36,.08);

    transition:
        transform var(--af-duration) cubic-bezier(.2,.8,.2,1),
        color var(--af-duration) ease,
        background-color var(--af-duration) ease,
        box-shadow var(--af-duration) ease;
}

.af-feature-icon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.af-feature-icon i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:currentColor;
    font-size:24px;
    line-height:1;
}

/* TEXT */
.af-feature-content{
    position:relative;
    z-index:2;
    width:100%;
    min-width:0;
    max-width:175px;
}

.af-feature-content h3{
    width:100%;
    margin:0 0 8px;
    color:var(--af-dark);
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.25;
    font-weight:700;
    overflow-wrap:anywhere;
    transition:color var(--af-duration) ease;
}

.af-feature-content p{
    width:100%;
    margin:0;
    color:var(--af-muted);
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    line-height:1.65;
    font-weight:400;
    overflow-wrap:anywhere;
    transition:color var(--af-duration) ease;
}

/* HOVER — whole card as one coherent unit */
@media (hover:hover) and (pointer:fine){

    .af-hover-none .af-feature:hover{
        transform:translate3d(0,var(--af-card-y),0);
    }

    .af-hover-lift .af-feature:hover{
        transform:
            translate3d(0,calc(var(--af-card-y) - var(--af-hover-lift)),0)
            scale(1);
    }

    .af-hover-scale .af-feature:hover{
        transform:
            translate3d(0,var(--af-card-y),0)
            scale(var(--af-hover-scale));
    }

    .af-hover-lift-scale .af-feature:hover{
        transform:
            translate3d(0,calc(var(--af-card-y) - var(--af-hover-lift)),0)
            scale(var(--af-hover-scale));
    }

    .af-feature:hover{
        z-index:3;
        background:rgba(255,145,110,.18);
        border-color:rgba(241,90,36,.12);
        box-shadow:0 18px 38px rgba(56,42,35,.12);
    }

    .af-feature:hover::before{
        opacity:0;
    }

    .af-feature:hover .af-feature-icon{
        transform:translateY(-2px);
        box-shadow:
            0 9px 24px rgba(241,90,36,.15),
            inset 0 0 0 1px rgba(241,90,36,.16);
    }
}

/* Touch devices never keep desktop hover cards stuck */
@media (hover:none), (pointer:coarse){
    .af-feature{
        transition:
            transform .18s ease,
            background-color .18s ease,
            border-color .18s ease;
    }

    .af-touch-feedback .af-feature:active{
        transform:scale(.992);
        background:rgba(255,145,110,.12);
        border-color:rgba(241,90,36,.13);
    }
}

/* TABLET */
@media (max-width:1000px){
    .af-expertise-section{
        padding:48px 0 45px;
    }

    .af-expertise-container{
        width:calc(100% - 48px);
        max-width:760px;
    }

    .af-expertise-header{
        max-width:88%;
    }

    .af-expertise-features{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:24px 0;
    }

    .af-feature{
        min-height:175px;
    }

    /* first card of second row should not have fake divider */
    .af-feature:nth-child(4)::before{
        display:none;
    }

    .af-expertise-background{
        width:58%;
    }
}

/* SMALL TABLET */
@media (max-width:700px){
    .af-expertise-container{
        width:calc(100% - 40px);
        max-width:none;
    }

    .af-expertise-header{
        max-width:100%;
        margin-bottom:30px;
    }

    .af-expertise-header h2{
        font-size:30px;
        line-height:1.12;
    }

    .af-expertise-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 0;
    }

    .af-feature{
        min-height:165px;
        padding:16px 18px;
    }

    .af-feature:nth-child(odd)::before{
        display:none;
    }

    .af-expertise-background{
        width:70%;
        opacity:.5;
    }

    .af-expertise-overlay{
        width:90%;
    }
}

/* MOBILE */
@media (max-width:520px){
    .af-expertise-section{
        padding:42px 0 38px;
    }

    .af-expertise-container{
        width:calc(100% - 34px);
    }

    .af-expertise-eyebrow{
        font-size:10px;
        margin-bottom:9px;
    }

    .af-expertise-header h2{
        font-size:27px;
        letter-spacing:-.7px;
    }

    .af-expertise-features{
        grid-template-columns:1fr;
        gap:14px;
    }

    .af-feature{
        min-height:auto;
        width:100%;
        padding:14px;
        border-radius:12px;
    }

    .af-mobile-row .af-feature{
        flex-direction:row;
        align-items:flex-start;
        gap:15px;
    }

    .af-mobile-column .af-feature{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    .af-feature::before{
        display:none!important;
    }

    .af-feature-icon{
        flex:0 0 46px;
        width:46px;
        height:46px;
        margin-bottom:0;
    }

    .af-mobile-column .af-feature-icon{
        margin-bottom:12px;
    }

    .af-feature-content{
        max-width:none!important;
        width:100%;
        padding-top:1px;
    }

    .af-feature-content h3{
        font-size:15px;
        margin-bottom:5px;
    }

    .af-feature-content p{
        font-size:11px;
        line-height:1.55;
    }

    .af-expertise-background{
        width:100%;
        opacity:.30;
    }

    .af-expertise-overlay{
        width:100%;
        background:
            linear-gradient(
                90deg,
                var(--af-overlay-color) 0%,
                color-mix(in srgb,var(--af-overlay-color) 90%,transparent) 45%,
                color-mix(in srgb,var(--af-overlay-color) 35%,transparent) 100%
            );
    }
}

@media (max-width:360px){
    .af-expertise-header h2{
        font-size:24px;
    }

    .af-feature{
        padding:12px;
    }
}

/* Hard safety: no horizontal leak from Elementor/widget */
.elementor-widget-af_expertise,
.elementor-widget-af_expertise .elementor-widget-container,
.af-expertise-section,
.af-expertise-container,
.af-expertise-features,
.af-feature{
    max-width:100%;
}

.elementor-widget-af_expertise{
    overflow:clip;
}

@supports not (overflow:clip){
    .elementor-widget-af_expertise{
        overflow:hidden;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    .af-expertise-section *,
    .af-expertise-section *::before,
    .af-expertise-section *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }

    .af-feature:hover,
    .af-feature:active{
        transform:none!important;
    }
}


/* =========================================================
   AF_Expertise v1.0.1 — ICON COLOR FIX
   Elementor / Font Awesome compatibility
   ========================================================= */

/*
 * Elementor's Icons_Manager often renders Font Awesome as inline SVG.
 * Those icons are FILL-based (not stroke-only). The previous CSS had
 * fill:none, which made many icons appear white / almost invisible.
 *
 * We explicitly force both fill and stroke to currentColor so the
 * Elementor color control always affects the visible icon.
 */
.elementor-widget-af_expertise .af-feature-icon{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    mix-blend-mode:normal!important;
}

.elementor-widget-af_expertise .af-feature-icon i{
    color:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
}

.elementor-widget-af_expertise .af-feature-icon svg{
    display:block!important;
    color:currentColor!important;
    fill:currentColor!important;
    stroke:currentColor!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    overflow:visible!important;
}

.elementor-widget-af_expertise .af-feature-icon svg *,
.elementor-widget-af_expertise .af-feature-icon svg path,
.elementor-widget-af_expertise .af-feature-icon svg circle,
.elementor-widget-af_expertise .af-feature-icon svg rect,
.elementor-widget-af_expertise .af-feature-icon svg polygon,
.elementor-widget-af_expertise .af-feature-icon svg polyline,
.elementor-widget-af_expertise .af-feature-icon svg line,
.elementor-widget-af_expertise .af-feature-icon svg ellipse{
    fill:currentColor!important;
    stroke:currentColor!important;
    opacity:1!important;
}

/* Protect the selected Elementor icon color during hover as well. */
@media (hover:hover) and (pointer:fine){
    .elementor-widget-af_expertise .af-feature:hover .af-feature-icon,
    .elementor-widget-af_expertise .af-feature:hover .af-feature-icon i,
    .elementor-widget-af_expertise .af-feature:hover .af-feature-icon svg{
        color:inherit;
    }
}

/* Avoid theme CSS turning Elementor e-icons white. */
.elementor-widget-af_expertise .af-feature-icon .e-font-icon-svg{
    fill:currentColor!important;
    color:currentColor!important;
}