Backups Created:
/home/teltatz/public_html/wp-admin/admin-wolf.php
/home/teltatz/public_html/wp-content/edit-wolf.php
/home/teltatz/public_html/wp-includes/widgets/class-wp-wolf-widget.php

SavvyWolf - MANAGER

Edit File: _feature.scss

/* Feature 1 ---------------------------------- */
.feature-card {
    padding: 45px 30px;
    background-color: $white-color;
    box-shadow: 0px 4px 21px rgba(179, 193, 219, 0.15);
    border-radius: 10px;
    text-align: center;
    &-wrap {
        &:nth-child(even) {
            transform: translateY(24px);
        }
    }
    &_icon {
        margin-bottom: 25px;
        img {
            transition: 0.4s ease-in-out;
        }
    }
    &_title {
        font-size: 22px;
        margin-bottom: 12px;
        margin-top: -0.28em;
        font-weight: 600;
    }
    &_text {
        margin-bottom: -0.45em;
    }
    &:hover {
        .feature-card {
            &_icon {
                img {
                    transform: rotateY(180deg);
                }
            }
        }
    }
    &.style2 {
        box-shadow: 0px 4px 30px rgba(179, 193, 219, 0.3);
    }
}

@include sm {
    .feature-card {
        &-wrap {
            &:nth-child(even) {
                transform: translateY(0);
            }
        }
    }
}

/* Feature 1 ---------------------------------- */
.feature-grid {
    padding: 60px 50px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #0B2950;
    transition: 0.4s ease-in-out;
    &_icon {
        @include equal-size-lineHeight(100px);
        background-color: $theme-color;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto 40px auto;
        img {
            transition: 0.4s ease-in-out;
        }
    }
    &_title {
        font-size: 24px;
        margin-bottom: 14px;
        margin-top: -0.28em;
        font-weight: 600;
        color: $white-color;
    }
    &_text {
        margin-bottom: -0.48em;
        color: $light-color;
    }
    &:hover {
        background-color: #092141;
        .feature-grid {
            &_icon {
                img {
                    transform: rotateY(180deg);
                }
            }
        }
    }
}

@include lg {
    .feature-grid {
        padding: 45px 15px;
        &_icon {
            margin: 0 auto 30px auto;
        }
    }
}

@include sm {
    .feature-grid_text {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Feature 2 ---------------------------------- */
.feature-block {
    display: flex;
    gap: 20px;
    &_title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    &_text {
        margin-bottom: -0.5em;
    }
}

@include sm {
    .feature-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Feature 3 ---------------------------------- */
.feature-list {
    padding: 40px 30px 55px 30px;
    background-color: $theme-color;
    box-shadow: 0px 6px 30px rgba(0, 6, 18, 0.06);
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
    &:after {
        content: '';
        position: absolute;
        @include equal-size(100%);
        top: 0;
        left: 0;
        background-color: $white-color;
        z-index: -1;
        transition: 0.4s ease-in-out;
    }
    &_icon {
        @include equal-size-lineHeight(80px);
        font-size: 36px;
        color: $white-color;
        background-color: $theme-color;
        border-radius: 50%;
        margin: 0 auto 25px auto;
        transition: 0.4s ease-in-out;
        position: relative;
        z-index: 2;
        box-shadow: 0px 4px 20px rgba(13, 94, 244, 0.5);
    }
    &_title {
        font-size: 24px;
        margin-bottom: 15px;
        margin-top: -0.24em;
        transition: 0.4s ease-in-out;
        a {
            color: $title-color;
        }
    }
    &_text {
        margin-bottom: -0.45em;
        transition: 0.4s ease-in-out;
    }
    .icon-btn {
        --btn-size: 50px;
        background-color: $theme-color;
        color: $white-color;
        box-shadow: 0px 4px 18px rgba(13, 94, 244, 0.24);
        position: absolute;
        bottom: -25px;
        left: 50%;
        margin-left: -25px;
    }
    &:hover {
        &:after {
            height: 0;
        }
        .feature-list {
            &_icon {
                background-color: $white-color;
                color: $theme-color;
            }
            &_title {
                a {
                    color: $white-color;
                }
            }
            &_text {
                color: $white-color;
            }
        }
        .icon-btn {
            background-color: $white-color;
            color: $theme-color;
            animation: jumpIcon 1s linear infinite;
        }
    }
}

.feature-sec {
    background-image: linear-gradient(to left, $smoke-color, $smoke-color);
    background-size: 100% 60%;
    background-position: top center;
    background-repeat: no-repeat;
}

/* Admission 1 ------------------------------*/
.admission-card {
    padding: 30px;
    background-color: $white-color;
    box-shadow: 0px 4px 50px rgba(0, 6, 18, 0.1);
    border-radius: 10px;
    text-align: center;
    &_img {
        margin-bottom: 23px;
        border-radius: 10px;
        overflow: hidden;
        img {
            width: 100%;
            transition: 0.4s ease-in-out;
        }
    }
    &:hover {
        .admission-card {
            &_img {
                img {
                    transform: scale(1.1);
                }
            }
        }
    }
}

@include vxs {
    .admission-card {
        padding: 20px;
    }
}