File "service-expand-effect.scss"

Full Path: /home/adniftyx/public_html/wp-content/plugins/credio-addons/widgets/service-expand-effect/service-expand-effect.scss
File size: 2.72 KB
MIME-type: text/plain
Charset: utf-8

@import '../../common';
// Style One
.rs-service-flex  {
    position: relative;
    overflow: hidden;
    > img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.1);
        transition: all 0.6s ease-in-out;
        opacity: 0;
        visibility: hidden;
        &.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
    }
    .row {
        position: relative;
        z-index: 1;
        margin: 0;
        .grid-item {
            padding: 0;
            .service-inner {
                border-right: 1px solid rgba(255,255,255,0.2);
                min-height: 600px;
                display: flex;
                flex-direction: column;
                position: relative;
                justify-content: flex-end;
                padding: 30px;
                transition: $transition;
                background: transparent;
                .title {
                    margin-bottom: 15px;
                    a {
                        color: #fff;
                        &:hover {
                            color: $primaryColor;
                        }
                    }
                }
                .desc {
                    color: #fff;
                    height: 0;
                    transform: scaleY(0);
                    transition: $transition;
                }
                .btn-part {
                    margin-top: 15px;
                    .service-btn {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 10px;
                        color: #fff;
                        i {
                            font-size: 18px;
                            color: #fff;
                        }
                        svg {
                            width: 18px;
                            height: 18px;
                            path {
                                fill: #fff;
                            }
                        }
                    }
                }
            }
            &.active {
                .service-inner {
                    background: rgba(20, 74, 127, 0.4);
                    .desc {
                        height: 78px;
                        transform: scaleY(1);
                    }
                }
            }
            &:last-child {
                .service-inner {
                    border-right-width: 0;
                }
            }
        }
    }
}