/* 🔹 Base Icon Box Styling */
.viaansh-icon {
    display: block;
    width: 100%;
}

.viaansh-icon-box {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

/* 🔸 Icon Wrapper */
.viaansh-icon-box .viaansh-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: inherit;
    /* controlled via Elementor slider */
}

/* 🌟 Font or SVG Icon Size Control */
.viaansh-icon-box .viaansh-icon .elementor-icon {
    font-size: inherit;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-block;
}

.viaansh-icon-box .viaansh-icon svg,
.viaansh-icon-box .viaansh-icon i {
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* 🖼️ Image Icon Support */
.viaansh-icon-box .viaansh-icon img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* 🔠 Title */
.viaansh-icon-box .viaansh-title {
    font-weight: bold;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 8px;
    display: block;
}

/* 📝 Description */
.viaansh-icon-box .viaansh-description {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* 🎨 View Styles (Stacked + Framed) */
.viaansh-icon-box[data-elementor-view="stacked"] .viaansh-icon {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 50%;
}

.viaansh-icon-box[data-elementor-view="framed"] .viaansh-icon {
    border: 2px solid #ccc;
    padding: 20px;
    border-radius: 50%;
}

/* 🟦 Shape Override: Square */
.viaansh-icon-box[data-elementor-shape="square"] .viaansh-icon {
    border-radius: 0 !important;
}

/* 📱 Responsive: Mobile Centering */
@media (max-width: 768px) {
    .viaansh-icon-box {
        text-align: center !important;
    }
}

/* Existing .viaansh-icon-box .viaansh-icon styles remain */
/* Make sure SVG and icon size scales properly based on parent's font-size */

/* Remove fixed width/height on SVG and icons to allow font-size scaling */
.viaansh-icon-box .viaansh-icon svg,
.viaansh-icon-box .viaansh-icon i,
.viaansh-icon-box .viaansh-icon .elementor-icon {
    width: 1em !important;
    height: 1em !important;
    font-size: inherit !important;
    vertical-align: middle;
    display: inline-block;
}

/* Image icons scale with max-width 100% and height auto (keep existing) */
.viaansh-icon-box .viaansh-icon img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}