// about
.about_sec_1 {
    .container {
        position: relative;
        z-index: 15;
        .content {
            position: relative;
            padding: 100px 0;
            @include media-query(492px) {
                padding: 50px 0;
            }
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: $gray-3;
                border: 20px solid $white-1;
                border-top: 0;
                border-radius: 0 0 673.23px 673.23px;
                height: 673.23px;
                z-index: 20;
                @include media-query(492px) {
                    border-radius: 0 0 250px 250px;
                    height: 250px;
                }
            }
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                border: 1px solid $accent-2;
                border-top: 0;
                border-radius: 0 0 673.23px 673.23px;
                height: 673.23px;
                z-index: 30;
                @include media-query(492px) {
                    border-radius: 0 0 250px 250px;
                    height: 250px;
                }
            }
            .image {
                position: relative;
                z-index: 40;
                margin-left: 46.62px;
                @include media-query(767px) {
                    margin-right: 46.62px;
                }
            }
            .about-content {
                position: relative;
                z-index: 50;
                @include media-query(992px) {
                    margin-top: 50px;
                }
                p {
                    margin-left: 170px;
                    margin-top: -115px;
                    max-width: 394px;
                    @include media-query(1199px) {
                        margin-left: 140px;
                        max-width: 300px;
                    }
                    @include media-query(992px) {
                        margin-top: -70px;
                        max-width: 650px;
                    }
                    @include media-query(767px) {
                        max-width: 100%;
                    }
                    @include media-query(492px) {
                        margin-top: -60px;
                        margin-left: 120px;
                    }
                }
            }
            .history-content {
                position: relative;
                z-index: 60;
                padding: 180px 0 0 350px;
                @include media-query(1199px) {
                    padding: 220px 0 0 130px;
                }
                @include media-query(992px) {
                    padding: 50px 0 0 80px;
                }
                @include media-query(492px) {
                    padding: 50px 0 0 40px;
                }
            }
        }
    }
}
.about_sec_2 {
    .container {
        position: relative;
        z-index: 15;
        .content {
            position: relative;
            padding: 100px 0;
            @include media-query(992px) {
                padding: 50px 0;
            }
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                background-color: $gray-3;
                border: 20px solid $white-1;
                border-top: 0;
                border-radius: 0 0 673.23px 673.23px;
                height: 673.23px;
                z-index: 20;
                @include media-query(492px) {
                    display: none;
                }
            }
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                border: 1px solid $accent-2;
                border-top: 0;
                border-radius: 0 0 673.23px 673.23px;
                height: 673.23px;
                z-index: 30;
                @include media-query(492px) {
                    display: none;
                }
            }
            .image {
                position: relative;
                z-index: 40;
                // margin-left: 46.62px;
                // @include media-query(767px) {
                //     margin-right: 46.62px;
                // }
            }
            .about-content {
                position: relative;
                z-index: 50;
                @include media-query(767px) {
                    padding: 0 36px;
                }
                @include media-query(492px) {
                    padding: 0;
                }
                p {
                    margin-left: 170px;
                    margin-top: -115px;
                    max-width: 394px;
                    margin-bottom: 50px;
                    @include media-query(1199px) {
                        margin-left: 140px;
                        max-width: 300px;
                    }
                    @include media-query(992px) {
                        margin-top: -70px;
                        max-width: 650px;
                    }
                    @include media-query(767px) {
                        max-width: 100%;
                    }
                    @include media-query(492px) {
                        margin-top: -60px;
                        margin-left: 90px;
                    }
                }
            }
        }
    }
}

.about_sec_3 {
    .container {
        position: relative;
        z-index: 15;
        .content {
            position: relative;
            padding: 100px 0;
            .about-content {
                position: relative;
                p {
                    margin-left: 170px;
                    margin-top: -115px;
                    margin-bottom: 50px;
                    @include media-query(1199px) {
                        margin-left: 140px;
                    }
                    @include media-query(992px) {
                        margin-top: -70px;
                    }

                    @include media-query(492px) {
                        margin-top: -60px;
                        margin-left: 90px;
                    }
                }
            }
            .history {
                @include min-size(1199px) {
                    padding-right: 70px;
                    padding-left: 0;
                }
                @include min-size(992px) {
                    padding-top: 180px;
                    padding-right: 30px;
                    padding-left: 30px;
                }
            }
        }
    }
}
.dark {
    // about
    .about_sec_1 {
        .container {
            .content {
                &::before {
                    background-color: $black-1;
                    border-color:$black-2;
                }
            }
        }
    }
    .about_sec_2 {
        .container {
            .content {
                &::before {
                    background-color: $black-1;
                    border-color:$black-2;
                }
            }
        }
    }
}
