.main-innerpage {
    position: relative;
    margin-top: -60px;

    .innerpages {
        padding: 38px 105px;
        background-color: #ffffff;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        @include box-shadow;

        h2 {
            font-size: 40px;
            opacity: 80%;
        }
    }
}

// about us page css start

.dating-wapper {
    .about-us-img {
        position: relative;
        padding-right: 66px;

        .testimaonl-box {
            position: absolute;
            right: 0;
            bottom: 70px;
            padding: 30px 55px;
            max-width: 480px;
            background-color: #ffffff;
            border-radius: 5px;
            @include box-shadow;

            .icon {
                width: 26px;
                float: left;
                margin-right: 15px;

                i {
                    font-size: 26px;
                    @include text-gradient;
                }
            }

            .text {
                width: calc(100% - 41px);
                float: left;

                img {
                    margin-top: 10px;
                }
            }
        }
    }
}

.about-section {
    .counter-box {
        .counter-text {
            padding: 40px;
            background: #ffffff;
            @include box-shadow2;
            border-color: transparent;

            h4 {
                color: #3d3d3d;
                font-size: 25px;
                margin-bottom: 20px;
            }

            p {
                color: #3d3d3d;
            }
        }
    }
}

// about us page css end

// pagination css start 

.main-pagination {
    width: 100%;
    float: left;
    margin-top: 55px;

    .pagination {
        width: 100%;
        max-width: 485px;
        height: 50px;
        margin: 0 auto;
        column-gap: 14px;
        border-radius: 35px;
        @include box-shadow;
    }

    li {
        a {
            display: inline-block;
            width: 50px;
            height: 50px;
            color: #111111;
            text-align: center;
            line-height: 50px;
            @include transition;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            z-index: 2;
            @include transition;

            &::after {
                content: '';
                width: 100%;
                height: 100%;
                @include linear-gradient;
                position: absolute;
                top: 0;
                z-index: -1;
                left: -100%;
                @include transition;
            }

            &:hover {
                color: #ffffff;

                &::after {
                    left: 0;
                }
            }
        }

        &:first-child {
            a {
                width: 75px;
                border-right: 1px solid #a9a9a94d;
                border-radius: 35px 0 0 35px;

                &:hover {
                    @include text-gradient;
                }

                &::after {
                    display: none;
                }
            }
        }

        &:last-child {
            a {
                width: 75px;
                border-left: 1px solid #a9a9a94d;
                border-radius: 0 35px 35px 0;

                &:hover {
                    @include text-gradient;
                }

                &::after {
                    display: none;
                }
            }
        }
    }
}

.community-page {
    .main-members-section {
        padding: 0;
        margin-top: 30px;

        .members-box {
            .members-img {
                .profile-status {
                    position: absolute;
                    display: inline-block;
                    width: 210px;
                    height: 35px;
                    line-height: 35px;
                    bottom: -17.5px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-radius: 35px;
                    color: #ffffff;
                    z-index: 4;

                    &.off {
                        @include linear-gradient;
                    }

                    &.active {
                        background: #148b13;
                    }
                }

                .age {
                    position: absolute;
                    display: inline-block;
                    right: 0;
                    top: 30px;
                    padding: 10px 20px 10px 40px;
                    border-radius: 35px 0 0 35px;
                    color: #ffffff;
                    @include linear-gradient;
                    font-family: $cont-font;
                    z-index: 4;
                }
            }

            .members-text {
                max-width: 267px;
                padding: 40px 0;

                .font-color-pink {
                    color: $main-color;
                    font-weight: 600;
                }
            }

            &:hover {
                .members-text {
                    .font-color-pink {
                        color: #ffffff;
                    }
                }
            }
        }
    }
}

.search-text {
    padding: 50px 0;

    h2 {
        font-size: 35px;
        color: #111111;
        font-family: $body-font;
        margin-bottom: 20px;
    }

    p {
        color: #838383;
    }

    .search-box {
        position: relative;
        padding: 25px 30px;
        margin: 30px 0;
        background-color: #ffffff;
        @include box-shadow;

        input {
            width: 100%;
            height: 60px;
            border: none;
            outline: none;
            position: relative;
            padding: 0;

            &::placeholder {
                font-size: 30px;
                opacity: 20%;
                color: #797979;
            }
        }

        label {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            font-size: 40px;
        }
    }

    .search-result {
        .top-tool {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eae6db;
            padding-bottom: 15px;

            ul {
                display: flex;
                justify-content: flex-end;
                column-gap: 20px;

                li {
                    a {
                        font-size: 18px;
                        color: #7a7a7a;
                        @include transition;

                        &.active,
                        &:hover {
                            @include text-gradient;
                        }
                    }
                }
            }
        }

        .short-tool {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;

            .custum-select {
                width: 255px;
            }
        }

        .main-members-section {
            margin-top: 20px;

            .members-box {
                .members-text {
                    max-width: 320px;
                    width: 85%;
                }
            }
        }
    }
}



// 404 page css ---- /

.main-error-wrapper {
    padding: 0 165px;
    background-image: url(../images/bg-404.png);
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;

    .text-404 {
        align-items: flex-start;
        display: flex;
        row-gap: 10px;
        flex-direction: column;
        justify-content: center;

        h1 {
            font-size: 260px;
            font-weight: 900;
            color: #000000cc;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 177px;
                top: 52%;
                transform: translateY(-50%);
                width: 155px;
                height: 155px;
                border-radius: 50%;
                background: #ffffff;
            }

            &::before {
                content: '';
                background-image: url(../images/heard-404.png);
                position: absolute;
                left: 191px;
                top: 35%;
                width: 127px;
                height: 115px;
                z-index: 1;
                animation-name: pulse-shrink;
                animation-duration: 0.3s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        }

        h2 {
            font-family: $body-font;
            font-size: 40px;
            line-height: 51px;
            max-width: 500px;
            color: #333333;
        }

        a {
            font-size: 20px;
        }
    }

    .air-balloon {
        position: absolute;
        right: 10%;
        bottom: 0;
        transform: translateY(280px);
        animation: message_move 8s linear infinite;

        &.one {
            animation-delay: 1s;
        }

        &.two {
            animation-delay: 3s;
            right: 15%;
        }

        &.three {
            animation-delay: 5s;
        }

        &.foure {
            animation-delay: 7s;
            right: 15%;
        }
    }
}

@keyframes message_move {
    0% {
        transform: translateY(280px);
    }

    100% {
        transform: translateY(-1080px);
    }
}

@keyframes pulse-shrink {
    to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}