/* cards-icons — Feature cards and icon chips (mp-card / mp-icon3d)
   Source: Customizer Additional CSS, split 2026-08-28 */


/* Gibson */
.mp-card{
    --mp-c:    48, 152, 243;
    --mp-c-2:  #4285F4;      /* gradient end */
    --mp-bg-a: .08;
    --mp-bd-a: .15;
}
.mp-card--blue    { --mp-c:  48, 152, 243; --mp-c-2: #4285F4; --mp-bg-a: .08; --mp-bd-a: .15; }
.mp-card--coral   { --mp-c: 254,  90,  95; --mp-c-2: #F4465F; --mp-bg-a: .08; --mp-bd-a: .15; }
.mp-card--amber   { --mp-c: 255, 199,  89; --mp-c-2: #F0AD38; --mp-bg-a: .12; --mp-bd-a: .25; }
.mp-card--emerald { --mp-c:  16, 185, 129; --mp-c-2: #0EA371; --mp-bg-a: .08; --mp-bd-a: .20; }
.mp-card{
    position: relative;
    overflow: hidden !important;
    transition: transform 350ms ease,
                box-shadow 350ms ease,
                border-color 350ms ease;
}
.mp-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 40px 70px -25px rgba(11, 26, 51, 0.18) !important;
    border-color: rgba(var(--mp-c), 0.18) !important;
}
.mp-card .link{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.mp-card .link a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
}
.mp-card .link .elementor-widget-container,
.mp-card .link .elementor-widget-container div{
    height: 100%;
}
.mp-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;                 /* above .link */
    height: 2px;
    border: none !important;    /* required: .e-con::before inherits the container
                                   border and a 1px top+bottom eats the whole 2px */
    background: linear-gradient(90deg, #3098f3, #fe5a5f);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.mp-card:hover::before{
    transform: scaleX(1);
}
.mp-card .elementor-button{
    transition: all 350ms;
}
.mp-card:hover .elementor-button::after{
    margin-left: 8px;
}
.mp-card__icon .elementor-icon-box-icon{
    /* Size is var-with-fallback, never declared, so --mp-chip can be set on the
       widget OR any ancestor container. Declaring a default here instead would
       sit lower in the tree than the override and beat it by inheritance. */
    width:  var(--mp-chip, 52px);
    height: var(--mp-chip, 52px);
    flex: 0 0 var(--mp-chip, 52px);
    box-sizing: border-box;
    border-radius: var(--mp-chip-r, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mp-c, 48, 152, 243), var(--mp-bg-a, .08));
    border: 1px solid rgba(var(--mp-c, 48, 152, 243), var(--mp-bd-a, .15));
    box-shadow: 0 4px 12px rgba(var(--mp-c, 48, 152, 243), 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.60),
                inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    transition: transform 350ms ease,
                box-shadow 350ms ease,
                background 350ms ease,
                border-color 350ms ease;
}
.mp-card__icon .elementor-icon-box-icon svg{
    transition: stroke 350ms ease, fill 350ms ease, color 350ms ease;
}
.mp-card__icon .elementor-icon-box-title{
    margin: 0 0 12px;
}
.mp-card:hover       .mp-card__icon .elementor-icon-box-icon,
.mp-bar:hover        .mp-card__icon .elementor-icon-box-icon,
.mp-icon3d:hover     .mp-card__icon .elementor-icon-box-icon,
.mp-card__icon:hover .elementor-icon-box-icon{
    transform: perspective(800px) translateZ(40px) rotateX(-8deg) rotateY(6deg);
    background: linear-gradient(135deg, rgb(var(--mp-c, 48, 152, 243)) 0%,
                                        var(--mp-c-2, #4285F4) 100%);
    border-color: transparent;
    box-shadow: 0 20px 40px -10px rgba(var(--mp-c, 48, 152, 243), 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.mp-card:hover       .mp-card__icon .elementor-icon-box-icon svg,
.mp-card:hover       .mp-card__icon .elementor-icon-box-icon svg *,
.mp-bar:hover        .mp-card__icon .elementor-icon-box-icon svg,
.mp-bar:hover        .mp-card__icon .elementor-icon-box-icon svg *,
.mp-icon3d:hover     .mp-card__icon .elementor-icon-box-icon svg,
.mp-icon3d:hover     .mp-card__icon .elementor-icon-box-icon svg *,
.mp-card__icon:hover .elementor-icon-box-icon svg,
.mp-card__icon:hover .elementor-icon-box-icon svg *{
    stroke: #fff;
    color: #fff;
}
.mp-card:hover       .mp-card__icon .elementor-icon-box-icon svg [fill]:not([fill="none"]),
.mp-bar:hover        .mp-card__icon .elementor-icon-box-icon svg [fill]:not([fill="none"]),
.mp-icon3d:hover     .mp-card__icon .elementor-icon-box-icon svg [fill]:not([fill="none"]),
.mp-card__icon:hover .elementor-icon-box-icon svg [fill]:not([fill="none"]){
    fill: #fff;
}
.mp-card:hover       .mp-card__icon .elementor-icon-box-icon svg.e-font-icon-svg,
.mp-bar:hover        .mp-card__icon .elementor-icon-box-icon svg.e-font-icon-svg,
.mp-icon3d:hover     .mp-card__icon .elementor-icon-box-icon svg.e-font-icon-svg,
.mp-card__icon:hover .elementor-icon-box-icon svg.e-font-icon-svg{
    fill: #fff;
}