One Hat Cyber Team

Your IP: 216.73.216.67
Server IP: 50.6.168.112
Server: Linux server-617809.webnetzimbabwe.com 5.14.0-570.25.1.el9_6.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Jul 9 04:57:09 EDT 2025 x86_64
Server Software: Apache
PHP Version: 8.4.10
Buat File | Buat Folder
Dir : ~/home/ctaacademy/www/public/frontend/scss/layout/
View File Name : _fact.scss

@use '../utils' as *;

/*=============================
    15. Fact
===============================*/
.fact {
    &__inner {
        &-wrap {
            background: var(--tg-common-color-blue-2);
            padding: 94px 70px 64px;
            @include border-radius(40px);
            @include box-shadow(0px 25px 70px 0px rgba(40, 37, 104, 0.40));
            z-index: 3;
            position: relative;
            @media #{$lg} {
                padding: 60px 40px 30px;
            }
            & .row {
                & [class*="col-"] {
                    &:last-child {
                        & .fact__item {
                            &::before {
                                display: none;
                            }
                        }
                    }
                }
            }
            &-two {
                background: var(--tg-common-color-blue-2);
                @include border-radius(20px);
                padding: 85px 380px 60px 85px;
                @include flexbox();
                align-items: center;
                gap: 75px;
                position: relative;
                z-index: 3;
                @media #{$xl} {
                    padding: 85px 360px 60px 70px;
                    gap: 50px;
                }
                @media #{$lg} {
                    padding: 70px 50px 50px 50px;
                }
                @media #{$md} {
                    padding: 60px 40px 30px 40px;
                    flex-wrap: wrap;
                    gap: 0;
                    justify-content: center;
                }
                @media #{$xs} {
                    padding: 60px 30px 30px 30px;
                }
                & .section__title {
                    width: 46%;
                    flex: 0 0 auto;
                    @media #{$lg} {
                        width: 100%;
                        text-align: center;
                    }
                }
            }
        }
    }
    &__item {
        text-align: center;
        margin-bottom: 30px;
        position: relative;
        &::before {
            content: "";
            position: absolute;
            right: -15px;
            top: -10%;
            width: 2px;
            height: 108px;
            @include border-radius(2px);
            background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
            @media #{$md} {
                display: none;
            }
        }
        & .count {
            margin-bottom: 10px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            color: var(--tg-common-color-white);
            font-size: 56px;
            line-height: .84;
            font-family: var(--tg-body-font-family);
            @media #{$lg} {
                font-size: 48px;
            }
            @media #{$xs} {
                font-size: 30px;
            }
            @media #{$sm} {
                font-size: 36px;
            }
        }
        & p {
            margin-bottom: 0;
            font-weight: 500;
            color: var(--tg-common-color-white);
            line-height: 1.2;
        }
        &-wrap {
            @include flexbox();
            gap: 120px;
            @media #{$md} {
                gap: 60px;
            }
            @media #{$xs} {
                gap: 30px;
            }
            & .fact__item {
                &::before {
                    right: -60px;
                    top: -9%;
                    @media #{$md} {
                        display: none;
                    }
                }
                &:last-child {
                    &::before {
                        display: none;
                    }
                }
            }
        }
    }
    &__img-wrap {
        position: absolute;
        right: 0;
        bottom: 0;
        @media #{$lg} {
            display: none;
        }
        & img {
            right: 30px;
            position: relative;
        }
        & .shape {
            &-one {
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: -1;
            }
            &-two {
                & .svg-icon {
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    left: -7px;
                    top: -22px;
                    z-index: -1;
                    & svg {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}