.elementor-884 .elementor-element.elementor-element-2d33a79{--display:flex;--min-height:395px;--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;--justify-content:space-between;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-884 .elementor-element.elementor-element-1ead5c7{width:100%;max-width:100%;z-index:0;}.elementor-884 .elementor-element.elementor-element-1ead5c7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-884 .elementor-element.elementor-element-1ead5c7 img{width:100%;border-radius:0px 0px 0px 0px;}.elementor-884 .elementor-element.elementor-element-cac06ff{--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;--justify-content:space-between;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-884 .elementor-element.elementor-element-8f7ef8b{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-884 .elementor-element.elementor-element-629fe84{width:var( --container-widget-width, 363px );max-width:363px;--container-widget-width:363px;--container-widget-flex-grow:0;z-index:1;text-align:start;}.elementor-884 .elementor-element.elementor-element-629fe84 > .elementor-widget-container{padding:20px 20px 20px 20px;}.elementor-884 .elementor-element.elementor-element-629fe84 .elementor-heading-title{font-family:"Cabinet Grotesk", Sans-serif;font-size:36px;font-weight:400;line-height:36px;letter-spacing:-0.72px;color:var( --e-global-color-863e73c );}@media(max-width:900px){.elementor-884 .elementor-element.elementor-element-2d33a79{--min-height:330px;}.elementor-884 .elementor-element.elementor-element-629fe84{--container-widget-width:280px;--container-widget-flex-grow:0;width:var( --container-widget-width, 280px );max-width:280px;}.elementor-884 .elementor-element.elementor-element-629fe84 .elementor-heading-title{font-size:30px;line-height:30px;letter-spacing:-0.72px;}}@media(max-width:767px){.elementor-884 .elementor-element.elementor-element-2d33a79{--min-height:310px;--border-radius:16px 16px 16px 16px;}.elementor-884 .elementor-element.elementor-element-629fe84{width:100%;max-width:100%;}.elementor-884 .elementor-element.elementor-element-629fe84 .elementor-heading-title{font-size:30px;line-height:30px;letter-spacing:-0.6px;}}/* Start custom CSS for image, class: .elementor-element-1ead5c7 *//* ============================
   MAIN CARD
============================ */
.elementor-884 .elementor-element.elementor-element-1ead5c7{
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* ============================
   OVERLAY (NORMAL)
============================ */
.elementor-884 .elementor-element.elementor-element-1ead5c7::before{
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(34, 34, 54, 0.45);
    border-radius: 20px;

    transform: scale(1);
    transform-origin: center;

    /* 🔥 matched with dashed animation feel */
    transition:
        opacity 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        transform 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        background 1.55s cubic-bezier(0.18, 1, 0.22, 1);

    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
}

/* ============================
   OVERLAY (HOVER)
============================ */
.elementor-884 .elementor-element.elementor-element-1ead5c7:hover::before{
    opacity: 1;
    background: rgba(34, 34, 54, 1);
    transform: scale(1);
}

/* ============================
   IMAGE WRAPPER
============================ */
.elementor-884 .elementor-element.elementor-element-1ead5c7{
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ============================
   IMAGE
============================ */
.elementor-884 .elementor-element.elementor-element-1ead5c7 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cac06ff *//* ============================
   INSIGHT CARD
============================ */
.insightCard{
    position: relative;
    overflow: hidden;
}

/* ============================
   DASHED CIRCLE (TOP-LEFT → CENTER)
============================ */
.insightCard::before{
    content: "";
    position: absolute;

    top: 16px;
    left: 16px;

    width: 64px;
    height: 64px;
    border: 4px dashed #8F8652;
    border-radius: 1000px;
    box-sizing: border-box;

    transform: translate(0,0);

    /* 🔥 extra slow & buttery */
    transition:
        top 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        left 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        transform 1.55s cubic-bezier(0.18, 1, 0.22, 1);

    z-index: 2;
    pointer-events: none;
}

/* ============================
   INNER FILL CIRCLE (GROWS)
============================ */
.insightCard::after{
    content: "";
    position: absolute;

    top: 16px;
    left: 16px;

    width: 36px;
    height: 36px;
    background: #DEE3D6;
    border-radius: 1000px;

    transform: translate(14px,14px);

    /* 🔥 fill even slower = premium bloom */
    transition:
        top 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        left 1.55s cubic-bezier(0.18, 1, 0.22, 1),
        width 1.85s cubic-bezier(0.18, 1, 0.22, 1),
        height 1.85s cubic-bezier(0.18, 1, 0.22, 1),
        transform 1.55s cubic-bezier(0.18, 1, 0.22, 1);

    z-index: 1;
    pointer-events: none;
}

/* ============================
   HOVER → CENTER + FILL EXPAND
============================ */
.insightCard:hover::before{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.insightCard:hover::after{
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
}/* End custom CSS */