@use '../utils' as *;

/*----------------------------------------*/
/*  12. funfact css start
/*----------------------------------------*/
.it-funfact {
    &-item {
        transition: 0.4s;
        padding: 32px 15px;
        backdrop-filter: blur(2px);
        background-color: rgba(255, 255, 255, 0.1);
        &:hover {
            background-color: var(--it-theme-1);
            & .it-funfact-icon svg {
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
            }
        }
    }
    &-icon {
        & svg {
            width: 70px;
            height: 70px;
            color: var(--it-common-white);
            transition: 0.3s;
            color: var(--it-common-black);
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }
    }
    &-title {
        font-size: 45px;
        text-transform: capitalize;
        color: var(--it-common-white);
        margin-bottom: 10px;
        font-family: var(--it-ff-plus-jakarta);
        @media #{$xl,$lg,$md,$xs}{
            font-size: 35px;
        }
        & i {
            font-style: normal;
        }
    }
    &-content {
        & span {
            font-weight: 600;
            font-size: 16px;
            text-transform: capitalize;
            color: var(--it-common-white);
            @media #{$xl,$lg,$md,$xs}{
                font-size: 18px;
            }
        }
    }
    &-shape-1 {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        opacity: .3;
    }
}