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 : _about.scss

@use '../utils' as *;

/*=============================
    07. About
===============================*/
.about {
    &__images {
        margin-left: 196px;
        margin-right: -25px;
        position: relative;
        @media #{$lg} {
            margin-left: 50px;
            margin-right: 0;
        }
        @media #{$md} {
            margin-left: 0;
            margin-bottom: 50px;
        }
        & .shape {
            position: absolute;
            top: 36px;
            right: 132px;
            z-index: 1;
            @media #{$lg} {
                right: 95px;
            }
            @media #{$md} {
                right: 135px;
            }
            @media #{$xs} {
                right: 80px;
            }
        }
        & .popup-video {
            position: absolute;
            width: 76px;
            height: 76px;
            @include flexbox();
            align-items: center;
            justify-content: center;
            @include border-radius(50%);
            left: 50%;
            top: 50%;
            @include transform(translate(-50% , -50%));
            background: var(--tg-common-color-white);
            color: var(--tg-common-color-red);
            z-index: 1;
            &:hover {
                color: var(--tg-common-color-white);
                background: var(--tg-common-color-red);
            }
        }
        &-three {
            position: relative;
            @media #{$md} {
                margin-bottom: 50px;
            }
            & img {
                @include border-radius(400px);
            }
            & .svg-icon {
                width: 55px;
                height: 55px;
                position: absolute;
                right: 5%;
                top: 2%;
                @media #{$lg} {
                    right: 0;
                    top: 0;
                }
                & svg {
                    width: 100%;
                    height: 100%;
                    color: var(--tg-theme-primary);
                }
            }
            & .popup-video {
                width: 60px;
                height: 60px;
                @include flexbox();
                align-items: center;
                justify-content: center;
                background: var(--tg-common-color-white);
                @include border-radius(50%);
                position: absolute;
                left: 50%;
                top: 50%;
                @include transform(translate(-50%, -50%));
                & svg {
                    width: 16px;
                    color: var(--tg-theme-primary);
                    @include transition(.3s);
                }
                &:hover {
                    background: var(--tg-theme-primary);
                    & svg {
                        color: var(--tg-common-color-white);
                    }
                }
            }
        }
    }
    &__enrolled {
        position: absolute;
        left: -90px;
        bottom: 35px;
        background: var(--tg-common-color-white);
        @include border-radius(10px);
        border: 1px solid #B2BBCC;
        box-shadow: -8px 8px 0px 0px rgba(0, 0, 0, 0.15);
        text-align: center;
        padding: 12px 20px;
        @media #{$lg} {
            left: -50px;
            bottom: 30px;
        }
        @media #{$md} {
            display: none;
        }
        & .title {
            font-size: 16px;
            font-weight: var(--tg-fw-medium);
            color: var(--tg-theme-primary);
            margin: 0 0 2px;
            & span {
                font-weight: var(--tg-fw-bold);
                color: var(--tg-heading-color);
            }
        }
        & img {
            max-width: 155px;
        }
    }
    &__content {
        margin-left: 65px;
        margin-right: 110px;
        @media #{$lg} {
            margin: 0 0;
        }
        & .section__title {
            margin: 0 0 12px;
        }
        & .desc {
            margin: 0 0 22px;
        }
        & .tg-button-wrap {
            margin-top: 40px;
        }
        &-three {
            margin-left: 40px;
            width: 90%;
            @media #{$lg} {
                margin-left: 0;
                width: 100%;
            }
            & .desc {
                margin-bottom: 22px;
            }
            & .about__info-list {
                margin-bottom: 30px;
            }
        }
    }
    &__info {
        &-list {
            &-item {
                @include flexbox();
                align-items: flex-start;
                gap: 13px;
                margin: 0 0 15px;
                &:last-child {
                    margin: 0 0;
                }
                & i {
                    width: 30px;
                    height: 30px;
                    @include flexbox();
                    align-items: center;
                    justify-content: center;
                    flex: 0 0 30px;
                    background: var(--tg-theme-secondary);
                    border: 1px solid #282568;
                    @include border-radius(50%);
                    box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.25);
                    @include transition(.3s);
                    color: var(--tg-heading-color);
                }
                & p {
                    font-family: var(--tg-heading-font-family);
                    color: var(--tg-heading-color);
                    font-size: 18px;
                    font-weight: var(--tg-fw-semi-bold);
                    margin: 0 0;
                }
                &:hover {
                    & i {
                        box-shadow: none;
                    }
                }
            }
        }
    }
}
.mfp-iframe-holder .mfp-content {
    max-width: 1200px;
}