One Hat Cyber Team

Your IP: 216.73.216.177
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 : _faq.scss

@use '../utils' as *;

/*=============================
    18. FAQ
===============================*/
.faq {
    &__area {
        background: var(--tg-common-color-gray);
        padding: 260px 0 120px;
        margin-top: -140px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        @media #{$xs} {
            padding: 240px 0 100px;
        }
        &::before {
            content: "";
            position: absolute;
            left: 45px;
            bottom: 20%;
            width: 500px;
            height: 500px;
            background: #E9E2F9;
            filter: blur(200px);
            @include border-radius(50%);
            z-index: -1;
        }
        &::after {
            content: "";
            position: absolute;
            right: 54px;
            top: 110px;
            width: 500px;
            height: 500px;
            background: #E9E2F9;
            filter: blur(200px);
            @include border-radius(50%);
            z-index: -1;
        }
    }
    &__img {
        position: relative;
        z-index: 1;
        width: 450px;
        height: 562px;
        border-radius: 1000px;
        background: var(--tg-common-color-white);
        box-shadow: 9px 8px 0px #171717;
        margin: 0 auto;
        overflow: hidden;
        @media #{$lg} {
            width: 400px;
            height: 550px;
        }
        @media #{$xs} {
            width: 100%;
            height: 500px;
            max-width: 400px
        }
        & img {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
        }
        & .shape {
            &-one {
                position: absolute;
                left: 27%;
                top: 11%;
                z-index: -1;
                @media #{$lg} {
                    left: 25%;
                    top: 9%;
                }
                @media #{$xs} {
                    left: 16%;
                    top: 11%;
                }
                & svg {
                    color: var(--tg-common-color-yellow-2);
                }
            }
            &-two {
                width: 61px;
                height: 46px;
                position: absolute;
                right: 25%;
                top: 10%;
                @media #{$lg} {
                    right: 18%;
                }
                & .svg-icon {
                    width: 100%;
                    height: 100%;
                    display: block;
                    & path {
                        stroke: var(--tg-common-color-black);
                    }
                }
            }
        }
        &-two {
            background: #F3F3F3;
            box-shadow: 9px 8px 0px #B8B8B8;
        }
        &-wrap {
            position: relative;
            margin-top: 45px;
            @media #{$md} {
                margin-bottom: 50px;
            }
            @media #{$md} {
                margin-top: 0;
            }
        }
    }
    &__content {
        width: 80%;
        @media #{$lg} {
            width: 100%;
        }
        & p {
            margin-bottom: 10px;
        }
    }
    &__wrap {
        & .accordion-item {
            background-color: transparent;
            border: none;
            border-radius: 0;
            & .accordion-button {
                background-color: transparent;
                border: none;
                border-bottom: 1px solid var(--tg-common-color-gray-5);
                padding: 22px 0;
                font-size: 20px;
                font-weight: 500;
                font-family: var(--tg-heading-font-family);
                border-radius: 0;
                color: var(--tg-body-color);
                position: relative;
                @media #{$xs} {
                    padding: 22px 30px 22px 0;
                }
                &::after {
                    content: "\f105";
                    background-image: none;
                    font-family: "flaticon_skill_grow";
                    font-size: 20px;
                    position: absolute;
                    right: 0;
                    top: 25px;
                    color: var(--tg-common-color-dark);
                    box-shadow: none;
                    background: transparent;
                    font-weight: 700;
                }
                &:not(.collapsed) {
                    box-shadow: none;
                    color: var(--tg-theme-primary);
                    &::after {
                        transform: rotate(-90deg);
                        color: var(--tg-theme-primary);
                    }
                }
                &:focus {
                    box-shadow: none;
                }
            }
            &:last-of-type {
                & .accordion-button {
                    &.collapsed {
                        border-bottom-right-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }
        }
        & .accordion-body {
            padding: 15px 0 0;
            & p {
                margin-bottom: 0;
                color: var(--tg-common-color-dark);
            }
        }
    }
}
.curved-circle {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tg-common-color-dark);
    right: 50%;
    transform: translateX(-50%);
    top: -8%;
    letter-spacing: 5px;
    @media #{$lg} {
        font-size: 15px;
        top: -6%;
        letter-spacing: 3px;
    }
    @media #{$xs} {
        display: none;
    }
}