/* Import icon font files */
@import url('/wp-content/themes/minim/assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css');
@import url('/wp-content/themes/minim/assets/fonts/pe-icon-7-stroke/css/helper.css');

/* Style the icon boxes */
.elementor-icon-box-wrapper {
    position: relative;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    background-color: #f9f9f9; /* Match your page background */
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #dddddd; /* Adding the requested border */
}

/* Remove the hover animation for the box itself */
.elementor-icon-box-wrapper:hover {
    transform: none; /* Remove the vertical movement */
    box-shadow: none; /* Remove the shadow effect */
}

.elementor-icon-box-icon {
    margin-bottom: 20px !important;
    transition: all 0.3s ease;
}

.elementor-icon {
    font-size: 30px !important;
    transition: all 0.3s ease !important;
}

.elementor-icon-box-wrapper:hover .elementor-icon-box-icon {
    opacity: 0;
    transform: translateY(-20px) rotateY(90deg);
}

.elementor-icon-box-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.elementor-icon-box-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Corner border effects */
.elementor-icon-box-wrapper::before,
.elementor-icon-box-wrapper::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    border: 2px solid #000; /* Black corners as shown in the images */
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    z-index: 1;
}

.elementor-icon-box-wrapper::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.elementor-icon-box-wrapper::after {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
}

.elementor-icon-box-wrapper:hover::before,
.elementor-icon-box-wrapper:hover::after {
    width: 30px;
    height: 30px;
    opacity: 1;
}

/* Background icon effect */
.elementor-icon-box-wrapper .background-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 90px;
    opacity: 0.05;
    z-index: 0;
    transition: opacity 0.3s ease;
}

.elementor-icon-box-wrapper:hover .background-icon {
    opacity: 0.15;
}

/* Remove any existing checkmark icons */
.elementor-icon-box-wrapper .pe-7s-check,
.elementor-icon-box-wrapper i.corner-icon {
    display: none !important;
}