/* =====================================
MIMS FEATURE BAR CSS
Unique CSS Names
Premium Institutional Design
===================================== */

.mimsFeatureBarSection{

    position:relative;

    padding:55px 5%;

    background:
    linear-gradient(135deg,#0f172a,#1e293b);

    overflow:hidden;
}

/* CONTAINER */

.mimsFeatureBarContainer{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:32px;
}

/* CARD */

.mimsFeatureBarCard{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:18px;

    padding:38px 28px;

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(14px);

    transition:0.45s ease;

    min-height:340px;
}

/* PREMIUM HOVER */

.mimsFeatureBarCard:hover{

    transform:
    translateY(-12px);

    background:
    rgba(255,255,255,0.10);

    box-shadow:
    0 22px 45px rgba(0,0,0,0.35);
}

/* LIGHT EFFECT */

.mimsFeatureBarCard::before{

    content:"";

    position:absolute;

    width:150%;
    height:150%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,0.12),
    transparent);

    top:-140%;
    left:-140%;

    transition:0.7s;
}

.mimsFeatureBarCard:hover::before{

    top:0;
    left:0;
}

/* =====================================
ICON BOX
===================================== */

/* =====================================
ICON BOX
===================================== */

.mimsFeatureBarIconWrap{

    width:82px;
    height:82px;

    min-width:82px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.05));

    border:
    2px solid rgba(255,255,255,0.12);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.18);

    transition:
    0.5s cubic-bezier(0.4,0,0.2,1);

    margin-bottom:10px;

    position:relative;

    overflow:hidden;
}

/* ICON */

.mimsFeatureBarIcon{

    width:42px;
    height:42px;

    object-fit:contain;

    transition:
    transform 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* ICON ANIMATION */

.mimsFeatureBarCard:hover .mimsFeatureBarIcon{

    transform:
    rotateY(360deg)
    scale(1.08);
}

/* BOX ANIMATION */

.mimsFeatureBarCard:hover .mimsFeatureBarIconWrap{

    transform:
    translateY(-5px)
    scale(1.04);
}

/* GLOW */

.mimsFeatureBarIconWrap::before{

    content:"";

    position:absolute;

    inset:-20%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,0.22),
    transparent);

    opacity:0;

    transition:0.5s;
}

.mimsFeatureBarCard:hover .mimsFeatureBarIconWrap::before{

    opacity:1;
}

/* ICON */

.mimsFeatureBarIcon{

    width:42px;
    height:42px;

    object-fit:contain;

    transition:
    transform 0.8s cubic-bezier(0.4,0,0.2,1);
}

/* SAME OLD ROTATION EFFECT */

.mimsFeatureBarCard:hover .mimsFeatureBarIcon{

    transform:
    rotateY(360deg)
    scale(1.12);
}

/* ICON BOX HOVER */

.mimsFeatureBarCard:hover .mimsFeatureBarIconWrap{

    transform:
    translateY(-6px)
    scale(1.05);

    box-shadow:
    0 18px 35px rgba(0,0,0,0.28);
}

/* CONTENT */

.mimsFeatureBarContent{

    position:relative;

    z-index:2;
}

.mimsFeatureBarContent h3{

    margin:0 0 14px;

    color:#ffffff;

    font-size:26px;

    line-height:1.3;

    font-weight:700;
}

.mimsFeatureBarContent p{

    margin:0;

    color:
    rgba(255,255,255,0.82);

    font-size:15px;

    line-height:1.8;

    font-weight:400;
}

/* RESPONSIVE */

@media(max-width:992px){

    .mimsFeatureBarContainer{

        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .mimsFeatureBarSection{

        padding:35px 20px;
    }

    .mimsFeatureBarCard{

        min-height:auto;

        padding:30px 22px;
    }

    .mimsFeatureBarIconWrap{

        width:85px;
        height:85px;

        min-width:85px;
    }

    .mimsFeatureBarIcon{

        width:48px;
        height:48px;
    }

    .mimsFeatureBarContent h3{

        font-size:22px;
    }

    .mimsFeatureBarContent p{

        font-size:14px;
    }
}