/*Account Section Starts Here*/
.account-wrapper {
    border-radius: 8px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    background: $primary-color;
    padding: 60px 50px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 15px;

    .account-title {
        @extend %mb-40;

        p {
            @extend %mb-0;
            max-inline-size: 40ch;
            margin-inline: auto;
        }
    }

    @include breakpoint(max-md) {
        padding: 50px 40px;
    }

    @media screen and (max-width:499px) {
        padding: 40px 15px;
    }

    .cate {
        font-style: normal;

        a {
            font-weight: 600;
            color: $theme-color;

            &:hover {
                color: $theme-color;
            }
        }
    }
}

.account-bottom {
    @extend %mt-45;

    .subtitle {
        @extend %mb-20;

        @include font-size(20px);
    }

    .social {
        &__link {
            @include box(40px);
        }
    }
}

.account-form {
    .form-group {
        margin-bottom: 24px;

        input {
            @extend %w-100;
            @include add-prefix(transition, $transition);
            border-radius: 4px;
            background-color: $body-color;
            padding: 10px 20px;
            color: $white-color;
            border: none;
            line-height: 50px;
            border: 1px solid transparent;

            &::placeholder {
                color: rgba($white-color, $alpha: .50);
            }

            &:focus {
                box-shadow: none;
                border-color: rgba($theme-color, $alpha: .80);
                outline: none;
            }
        }

        .checkgroup {
            @extend %flex;
            flex-wrap: nowrap;
            align-items: center;

            input {
                &[type="checkbox"] {
                    width: 18px;
                    height: 18px;
                    margin-right: 15px;
                    border: none;
                    box-shadow: none;
                    outline: none;
                    accent-color: $theme-color;

                    @include breakpoint(max-sm) {
                        width: 14px;
                        height: 14px;
                        margin-right: 8px;
                    }
                }
            }

            label {
                margin: 0;
                color: $white-color;

                @include breakpoint(max-sm) {
                    font-size: 14px;
                }
            }
        }

        a {
            color: $white-color;

            @include breakpoint(max-sm) {
                font-size: 14px;
            }

            &:hover {
                color: $theme-color
            }
        }

        button {
            margin-top: 34px;
            width: 100%;
            border: none;
            outline: none;

            @include breakpoint(max-sm) {
                margin-top: 24px;
            }
        }
    }

    .default-btn {
        @include add-prefix(transform, none);
    }
}

.or {
    display: block;
    margin: 24px auto 40px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background: $theme-color;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: $body-color;


}

@keyframes pulse {
    0% {
        @include add-prefix(transform, translate(-50%, -50%)scale(1));
        opacity: 1;
    }

    90% {
        opacity: .5;
        @include add-prefix(transform, translate(-50%, -50%)scale(1.8));
    }

    100% {
        opacity: 0;
        @include add-prefix(transform, translate(-50%, -50%)scale(2));
    }
}

//floating keyframes
@keyframes floating {
    0% {
        transform: translate(0, -10px);
    }

    50% {
        transform: translate(0, 10px);
    }

    100% {
        transform: translate(0, -10px);
    }
}