One Hat Cyber Team

Your IP: 216.73.216.157
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 : _cta.scss

@use '../utils' as *;

/*=============================
    14. CTA
===============================*/
.cta {
    &__wrapper {
        background-image: url(../img/bg/cta_bg.png);
        background-color: var(--tg-theme-primary);
        background-size: cover;
        background-position: center;
        position: relative;
        @include border-radius(8px);
        padding: 46px 60px;
        @include flexbox();
        align-items: center;
        column-gap: 40px;
        overflow: hidden;
        margin: 0 0 -85px;
        z-index: 2;
        @media #{$lg} {
            flex-wrap: wrap;
            gap: 25px 70px;
        }
        @media #{$xs} {
            padding: 45px 30px;
        }
        & .section__title {
            width: 26%;
            flex: 0 0 auto;
            @media #{$lg} {
                width: 100%;
                flex: 0 0 auto;
            }
            & .title {
                font-size: 30px;
            }
        }
        & .object {
            position: absolute;
            z-index: -1;
        }
    }
    &__desc {
        flex-grow: 1;
        @media #{$lg} {
            width: 60%;
            flex: 0 0 auto;
        }
        @media #{$md} {
            width: 100%;
            flex: 0 0 auto;
        }
        & p {
            color: var(--tg-common-color-white);
            font-weight: var(--tg-fw-medium);
            margin: 0 0;
        }
    }
    &-area-two {
        padding: 150px 0 160px;
        background-color: #072656;
        overflow: hidden;
        z-index: 1;
    }
    &__bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        mix-blend-mode: luminosity;
        background-attachment: fixed;
        opacity: .2;
        z-index: -1;
    }
    &__content {
        text-align: center;
        & p {
            text-transform: uppercase;
            color: var(--tg-common-color-white);
            font-weight: var(--tg-fw-medium);
            letter-spacing: 0.1em;
            margin: 0 0 13px;
        }
        & .title {
            color: var(--tg-common-color-white);
            font-size: 48px;
            margin: 0 0 8px;
            @media #{$xs} {
                font-size: 38px;
                margin: 0 0 12px;
            }
        }
        & .sub-title {
            font-size: 30px;
            font-weight: var(--tg-fw-light);
            color: var(--tg-common-color-white);
            margin: 0 0 40px;
            @media #{$xs} {
                font-size: 22px;
            }
        }
    }
    &__shapes {
        & > * {
            &:nth-child(1) {
                left: 0;
                top: 0;
                opacity: .1 !important;
                @media #{$lg} {
                    max-width: 220px;
                }
            }
            &:nth-child(2) {
                top: 31%;
                left: 10%;
                max-width: 125px;
                @media #{$lg} {
                    top: 20%;
                    left: 5%;
                    max-width: 100px;
                }
                @media #{$xs} {
                    top: 7%;
                    max-width: 80px;
                }
            }
            &:nth-child(3) {
                right: 0;
                bottom: 0;
                @media #{$lg} {
                    max-width: 180px;
                }
                @media #{$xs} {
                    max-width: 120px;
                }
            }
        }
    }
    &-area-three {
        position: relative;
        z-index: 3;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 80px;
            background-color: var(--tg-common-color-dark);
            z-index: -1;
            @media #{$md} {
                height: 150px;
            }
        }
        & .cta__wrapper {
            margin: 0 0;
        }
    }
}