$style-border: true;
$style-modern: true;
$parallax-card: true;
$style-2: true;
$style-solid: true;
$hover-border-bottom: true;
$style-shadow: true;
$floating-style: true;
$style-sideline: true;
$shadow-line: true;
$image-card: true;
$thumb-card: true;
$image-card-2: true;
$image-card-style2: true;
.elementskit-info-image-box {
    @include transition; // overflow: hidden;
    &:hover {
        //transform: translateY(-5px);
        // .box-thumb {
        //     > img {
        //         transform: scale(1.02);
        //     }
        // }
        .elementskit-box-content {
            .elementskit-info-box-title {
                color: $color-primary;
            }
        }
        .elementskit-btn {
            background-color: $color-primary;
            border-color: $color-primary;
            color: $color-white;
        }
    }
    .elementskit-box-header {
        @include transition;
        position: relative;
        overflow: hidden;
        .box-thumb {
            display: block;
            >img {
                @include transition;
            }
        }
        a {
            display: block;
            @include transition;
        }
        img {
            display: block;
            @include transition;
            backface-visibility: hidden;
        }
    }
    .elementskit-box-body {
        padding: 55px 40px;
    }
    .elementskit-box-content {
        .elementskit-info-box-title {
            font-size: rem(18px);
            margin-bottom: 20px;
            color: $color-black;
            display: block;
            font-weight: 700;
            >i {
                font-size: rem(22px);
                padding-right: 14px;
                position: relative;
                top: 2px;
            }
        }
    }
    .elementskit-outline-icon {
        @include equal-size-lineHeight(40px);
        font-size: rem(15px);
    }
    .elementskit-box-footer {
        line-height: 1;
        margin-top: 20px;
    }
    @if $style-modern==true {
        &.style-modern {
            overflow: visible;
            .elementskit-box-body {
                box-shadow: -1.216px 6.894px 25px 0px rgba(0, 0, 0, 0.07);
                border-radius: 10px;
                background-color: rgba($color: $color-white, $alpha: .9);
                width: calc(100% - 40px);
                padding: 30px 40px;
                position: relative;
                z-index: 2;
                margin: {
                    top: -20px;
                    left: auto;
                    right: auto;
                }
            }
        }
    }
    @if $style-solid==true {
        &.style-solid {
            .elementskit-box-body {
                background-color: #f7f9fb;
            }
        }
    }
    @if $hover-border-bottom==true {
        &.hover-border-bottom {
            .elementskit-box-body {
                position: relative;
                &::before {
                    position: absolute;
                    content: "";
                    bottom: -1px;
                    left: 0;
                    height: 3px;
                    width: 100%;
                    background-color: $color-primary;
                    transition: transform 250ms ease-in;
                    transform: scaleX(0);
                    transform-origin: 0% 50%;
                }
            }
            &:hover {
                .elementskit-box-body {
                    &::before {
                        transform: scaleX(1);
                        transform-origin: 100% 50%;
                    }
                }
            }
            &.hover_from_left {
                .elementskit-box-body {
                    &::before {
                        transform-origin: right center;
                    }
                }
                &:hover {
                    .elementskit-box-body {
                        &::before {
                            transform-origin: left center;
                        }
                    }
                }
            }
            &.hover_from_center {
                .elementskit-box-body {
                    &::before {
                        transform-origin: center center;
                    }
                }
                &:hover {
                    .elementskit-box-body {
                        &::before {
                            transform-origin: center center;
                        }
                    }
                }
            }
        }
    }
    @if $style-shadow==true {
        &.style-shadow {
            .elementskit-box-body {
                box-shadow: -1.216px 6.894px 15px 0px rgba(0, 0, 0, 0.07);
            }
        }
    }
    @if $floating-style==true {
        &.floating-style {
            .elementskit-box-body {
                box-shadow: -1.216px 6.894px 25px 0px rgba(0, 0, 0, 0.07);
                border-radius: 10px;
                width: calc(100% - 40px);
                position: relative;
                padding: 30px 35px;
                @include transition;
                height: 90px;
                margin: {
                    left: auto;
                    right: auto;
                    top: -40px;
                }
                position: relative;
                &::before,
                &::after {
                    position: absolute;
                    content: "";
                    bottom: -10px;
                    left: 50%;
                    height: 100%;
                    transform: translateX(-50%);
                    width: calc(100% - 20px);
                    box-shadow: -1.216px 6.894px 25px 0px rgba(0, 0, 0, 0.07);
                    z-index: -1;
                    @include transition;
                    opacity: 0;
                    border-radius: 10px;
                    background-color: $color-white;
                }
                &::after {
                    bottom: -20px;
                    width: calc(100% - 40px);
                    z-index: -2;
                }
                .elementskit-box-content {
                    .elementskit-box-style-content {
                        opacity: 0;
                        transition: opacity .4s ease;
                    }
                }
                .elementskit-info-box-title {
                    font-size: rem(18px);
                    font-weight: 700;
                    >i {
                        font-size: rem(26px);
                    }
                }
            }
            .elementskit-box-footer {
                opacity: 0;
                transition: opacity .4s ease;
            }
            &:hover {
                .elementskit-box-body {
                    height: 185px;
                    &::before,
                    &::after {
                        opacity: 1;
                    }
                    .elementskit-box-content {
                        .elementskit-box-style-content {
                            opacity: 1;
                        }
                    }
                    .elementskit-box-footer {
                        opacity: 1;
                    }
                }
            }
        }
    }
    @if $style-sideline==true {
        &.style-sideline {
            .elementskit-box-body {
                padding: {
                    left: 0;
                    right: 0;
                }
                ;
                .elementskit-box-content,
                .elementskit-box-footer {
                    padding: {
                        left: 40px;
                        right: 40px;
                    }
                }
                .elementskit-box-content {
                    border-left: 3px solid $color-primary;
                }
            }
            &.text-right {
                .elementskit-box-body {
                    .elementskit-box-content {
                        border-right: 3px solid $color-primary;
                        border-left: 0px;
                    }
                }
            }
        }
    }
    @if $shadow-line {
        &.shadow-line {
            .elementskit-box-body {
                position: relative;
                &::before,
                &::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 0;
                    height: 100%;
                    background-color: $color-white;
                    width: 10px;
                    box-shadow: -1.216px 6.894px 15px 0px rgba(0, 0, 0, 0.07);
                }
                &::after {
                    left: inherit;
                    right: 0;
                    height: calc(100% + 40px);
                }
            }
        }
    }
    @if $image-card==true {
        &.image-card {
            box-shadow: -1.216px 6.894px 15px 0px rgba(0, 0, 0, 0.07);
            position: relative;
            overflow: hidden;
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: $color-black;
                opacity: 0;
                @include transition;
            }
            &::after {
                position: absolute;
                content: "";
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
                border: 3px solid $color-white;
                opacity: .5;
                @include transition;
            }
            .elementskit-box-body {
                background-color: transparent;
                position: absolute;
                top: 70%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                width: 100%;
                @include transition;
                opacity: 0;
                .elementskit-info-box-title,
                p {
                    color: $color-white;
                }
            }
            &:hover {
                &::before {
                    opacity: .8;
                }
                &::after {
                    opacity: 1;
                }
                .elementskit-box-body {
                    opacity: 1;
                    top: 50%;
                }
            }
        }
    }
    @if $thumb-card==true {
        $colorList: (1, #00e49a), (2, #6a11cb);
        &.elementskit-thumb-card {
            position: relative;
            overflow: hidden;
            .elementskit-box-content,
            .elementskit-hover-content {
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba($color: #f73859, $alpha: .8);
                padding: 45px 40px;
                width: 100%;
                transition: all 0.4s ease;
            }
            .elementskit-info-box-title {
                color: $color-white;
                margin-bottom: 0px;
                display: block;
                >i {
                    font-size: inherit;
                    padding-right: 10px;
                    top: 0px;
                }
            }
            .border-separetor {
                background-color: $color-white;
            }
            .elementskit-hover-content {
                opacity: 0;
                bottom: -40%;
                visibility: hidden;
                p {
                    margin-top: 10px;
                    color: $color-white;
                }
            }
            &:hover {
                .elementskit-info-box-title {
                    color: $color-white;
                }
                .elementskit-hover-content {
                    opacity: 1;
                    bottom: 0;
                    visibility: visible;
                    transition: all 0.4s ease .1s;
                }
                .elementskit-box-content {
                    opacity: 0;
                    bottom: -40%;
                    visibility: hidden;
                    transition: all 0.4s ease .1s;
                }
            }
            @each $name,
            $color in $colorList {
                &.color-#{$name} {
                    .elementskit-box-content,
                    .elementskit-hover-content {
                        background-color: rgba($color: $color, $alpha: .8);
                    }
                }
            }
        }
    }
    @if $image-card-2==true {
        &.image-card-2 {
            position: relative;
            &.style-shadow {
                .elementskit-box-body {
                    box-shadow: -1.216px 6.894px 15px 0px rgba(0, 0, 0, 0.07);
                }
            }
            .elementskit-box-body {
                padding: 40px;
                @include transition;
            }
            .elementskit-info-box-title {
                margin-bottom: 0;
                >i {
                    font-size: inherit;
                    padding-right: 10px;
                    top: 0;
                }
            }
            .elementskit-box-content {
                >p {
                    margin-top: 10px;
                }
            }
            .elementskit-box-footer {
                opacity: 0;
                visibility: hidden;
                transition: all .4s ease;
                margin-bottom: -60px;
            }
            &:hover {
                transform: translateY(0px);
                .elementskit-box-body {
                    transform: translateY(-60px);
                }
                .elementskit-box-footer {
                    opacity: 1;
                    visibility: visible;
                    margin-bottom: 0px;
                }
            }
        }
    }
}

.elementskit-info-image-box.parallax-card {
    overflow: initial;
}

@if $parallax-card==true {
    .parallax-card {
        perspective: 1000px;
        transform-style: preserve-3d;
        .front,
        .back {
            @include background-content();
            transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
            backface-visibility: hidden;
            min-height: 450px;
            position: relative;
            &::before {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: $color-black;
                opacity: .5;
                backface-visibility: hidden;
            }
        }
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transform: rotateY(180deg);
            transform-style: preserve-3d;
            .elementskit-box-body {
                padding: 60px;
            }
        }
        .front {
            transform: rotateY(0deg);
            transform-style: preserve-3d;
        }
        .elementskit-box-body {
            transform: translateY(-50%) translateZ(60px) scale(0.94);
            top: 50%;
            position: absolute;
            left: 0;
            width: 100%;
            perspective: inherit;
            z-index: 2;
            background-color: transparent;
            .elementskit-info-box-title {
                color: $color-white;
                font-size: rem(22px);
            }
            .elementskit-outline-icon {
                color: $color-white;
            }
            p {
                color: $color-white;
            }
            .elementskit-box-footer {
                margin-top: 30px;
            }
            .simple-btn {
                color: $color-white;
            }
        }
        @if $style-2==true {
            &.style-2 {
                .back {
                    &::before {
                        background: rgb(37, 117, 252);
                        background: linear-gradient(90deg, rgba(37, 117, 252, 1) 0%, rgba(106, 17, 203, 1) 100%);
                        opacity: .95;
                    }
                }
                .elementskit-box-content {
                    .elementskit-outline-icon {
                        margin-bottom: 25px;
                        @include equal-size-lineHeight(110px);
                        border-color: rgba($color: $color-white, $alpha: .6);
                        font-size: rem(40px);
                    }
                }
            }
        }
        &:hover {
            transform: translateY(0px);
            .simple-btn {
                color: $color-white;
            }
            .elementskit-box-content {
                .elementskit-info-box-title {
                    color: $color-white;
                }
            }
            .front,
            .back {
                transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1)
            }
            .back {
                transform: rotateY(0deg);
                transform-style: preserve-3d;
            }
            .front {
                transform: rotateY(-180deg);
                transform-style: preserve-3d;
            }
        }
    }
}

@if $image-card-style2==true {
    .elementskit-image-card-style2 {
        .elementskit-info-image-box {
            &.elementskit-image-card {
                box-shadow: none;
                .elementskit-border-separetor {
                    background-color: $color-white;
                }
                .elementskit-info-box-title {
                    margin-bottom: 0;
                    >i {
                        font-size: inherit;
                        top: 0;
                        padding-right: 10px;
                    }
                }
                .elementskit-box-content {
                    p {
                        margin-top: 10px;
                    }
                }
                .elementskit-box-body {
                    padding: 50px;
                }
                &::before {
                    display: none;
                }
                &::after {
                    border: 0px;
                    background-color: #f73859;
                    opacity: .9;
                    transform: scaleX(0);
                    transition: transform 350ms ease;
                    transform-origin: 0% 50%;
                }
                &:hover {
                    &::after {
                        transform: scaleX(1);
                        transform-origin: 100% 50%;
                    }
                }
            }
        }
    }
}

.elementskit-info-image-box.elementskit-thumb-card {
    @include transition;
}
.image-box-img-center{
    img{
        margin: 0 auto;
    }
}

.image-box-img-left{
    img{
        margin-right: auto;
    }
}

.image-box-img-right{
    img{
        margin-left: auto;
    }
}